diff --git a/.DS_Store b/.DS_Store
index ca25f28..3387698 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/css/.DS_Store b/css/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/css/.DS_Store differ
diff --git a/css/global.css b/css/global.css
index fde0a76..bef6147 100644
--- a/css/global.css
+++ b/css/global.css
@@ -81,7 +81,7 @@
color: var(--temp);
}
.hero.primary h1, .hero.primary h2{
- color: var(--white);
+ color: var(--textAlt);
}
.hero.large h1{
font-size: 2.75rem;
@@ -333,7 +333,7 @@
}
/* Buttons */
- .button{
+ .button {
display: inline-block;
margin: 0;
text-decoration: none;
@@ -350,15 +350,15 @@
border: 1px solid var(--white);
color: var(--primary);
}
- .button:hover{
+ .button:hover {
text-decoration: none;
color: var(--primaryLight);
}
- .button:active{
+ .button:active {
text-decoration: none;
color: var(--primaryDark);
}
- .button:focus{
+ .button:focus {
text-decoration: none;
}
@@ -367,42 +367,52 @@
padding: 10px 11px;
}
- .button.primary{
+ .icon-small {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ padding: 0px;
+ width: 35px;
+ height: 35px;
+ }
+
+ .button.primary {
background-color: var(--primary);
- color: var(--white);
+ color: var(--textAlt);
border: 1px solid var(--primary);
}
- .button.primary:hover{
+ .button.primary:hover {
background-color: var(--primaryLightAlt);
border-color: var(--primaryLightAlt);
}
- .button.primary:active{
+ .button.primary:active {
background-color: var(--primaryDark);
border-color: var(--primaryDark)
}
- .button.primaryAlt{
+ .button.primaryAlt {
background-color: var(--alpha);
color: var(--white);
border-color: var(--white);
}
- .button.primaryAlt:hover{
+ .button.primaryAlt:hover {
background-color: var(--alphaHover);
}
- .button.primaryAlt:active{
+ .button.primaryAlt:active {
background-color: var(--alphaDark);
}
- .button.alt{
+ .button.alt {
background-color: var(--fill);
color: var(--text);
border: 1px solid var(--outline);
}
- .button.alt:hover{
+ .button.alt:hover {
background-color: var(--white);
color: var(--text);
}
- .button.alt:active{
+ .button.alt:active {
background-color: var(--temp);
color: var(--text);
}
@@ -513,6 +523,22 @@
margin-left: .75rem;
}
+/* - Media Queries - */
+@media (prefers-color-scheme: dark) {
+ h1, h2, h3 {
+ color: var(--textAlt);
+ }
+
+ .button {
+ background-color: var(--textAlt);
+ }
+
+ .button.primaryAlt {
+ color: var(--textAlt);
+ outline-color: var(--textAlt);
+ }
+}
+
/* - Colors - */
/* Text */
diff --git a/css/page-specific/legal.css b/css/page-specific/legal.css
new file mode 100644
index 0000000..732c308
--- /dev/null
+++ b/css/page-specific/legal.css
@@ -0,0 +1,3 @@
+p {
+ text-align: justify;
+}
\ No newline at end of file
diff --git a/css/page-specific/post.css b/css/page-specific/post.css
new file mode 100644
index 0000000..885ab67
--- /dev/null
+++ b/css/page-specific/post.css
@@ -0,0 +1,164 @@
+/* General Elements */
+.card-post > a {
+ font-style: italic;
+}
+
+/* Post Elements */
+.title-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+.title-info {
+ display: block;
+ flex-direction: column;
+ padding-right: 5rem;
+}
+
+.post-stats {
+ display: flex;
+ flex-direction: row;
+}
+
+.stat-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ background-color: var(--temp);
+ border-radius: 1.2rem;
+ color: var(--text);
+
+ padding: 0.5rem 2rem;
+ margin: 1rem;
+}
+
+.stat-container.pos {
+ color: var(--primary);
+}
+
+.stat-container.neg {
+ color: var(--primaryNegative);
+}
+
+
+/* Post Content */
+.card.post {
+ display: flex;
+ flex-direction: column;
+}
+
+.card.post > p {
+ width: 100%;
+
+ text-align: justify;
+}
+
+.post-embeds {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.post-embeds > img {
+ max-width: 49%;
+ height: auto;
+ max-height: 300px;
+}
+
+
+/* Comments */
+textarea {
+ min-height: 50px;
+ max-height: 100px;
+}
+
+.comments {
+ margin-top: 2rem;
+}
+
+.comment {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+
+.comment > .left {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ padding-bottom: 1rem;
+}
+
+.comment > .right {
+ display: flex;
+ flex-direction: column;
+}
+
+.comment-profile {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.comment-profile > img {
+ max-height: 30px;
+ border-radius: 50%;
+ margin: 10px;
+}
+
+.comment-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ width: 100%;
+}
+
+.comment-content > p {
+ margin: 0px 2rem;
+}
+
+.comment-content > a {
+ font-style: normal;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 150px;
+}
+
+/* Comment Dropdown */
+.commentDropdown {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ margin: 0rem;
+ padding: 10px;
+
+ transform: translate(50px, -20px);
+
+ box-shadow: 0px 5px 20px rgba(40, 40, 40, .3);
+ z-index: 1;
+ display: none;
+}
+
+.show {
+ display: flex;
+}
+
+.commentDropdown > a {
+ margin: 0.5rem;
+
+ display: flex;
+ align-content: center;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/css/themes/default.css b/css/themes/default.css
index 87ce68d..0b73b4a 100644
--- a/css/themes/default.css
+++ b/css/themes/default.css
@@ -3,14 +3,37 @@
--primaryLightAlt: #306aaf;
--primaryLight: #4c7bb4;
--primaryDark: #1c4a80;
+ --primaryNegative: #CC6C4F;
--outline: #b3b3b3;
--fill: #f2f2f2;
--white: #ffffff;
--temp: #e5e5e5;
--text: #808080;
+ --textAlt: #ffffff;
--alphaDark: rgba(255, 255, 255, 0.08);
--alpha: rgba(255, 255, 255, 0.15);
--alphaHover: rgba(255, 255, 255, 0.18);
--alphaActive: rgba(255, 255, 255, 0.35);
--alphaLight: rgba(255, 255, 255, 0.75);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --primary: #224D82;
+ --primaryLightAlt: #2c63a5;
+ --primaryLight: #2c63a5;
+ --primaryDark: #1c4a80;
+ --primaryNegative: #CC6C4F;
+ --outline: #1A1A1A;
+ --fill: #3F3F3F;
+ --white: #333333;
+ --temp: #333333;
+ --text: #ffffff;
+ --textAlt: #ffffff;
+ --alphaDark: rgba(255, 255, 255, 0.08);
+ --alpha: rgba(255, 255, 255, 0.15);
+ --alphaHover: rgba(255, 255, 255, 0.18);
+ --alphaActive: rgba(255, 255, 255, 0.35);
+ --alphaLight: rgba(255, 255, 255, 0.75);
+ }
}
\ No newline at end of file
diff --git a/design_files/logo.png b/design_files/logo.png
index 1a7a833..3481223 100644
Binary files a/design_files/logo.png and b/design_files/logo.png differ
diff --git a/index.html b/index.html
index 42050b3..4bb9eeb 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@ Welcome to STiBaRC
-
-
-
- clear
-
-
+
+
send
@@ -97,7 +93,7 @@
Quick Post
@@ -192,9 +188,15 @@
4 Hours Ago
diff --git a/js/post.js b/js/post.js
new file mode 100644
index 0000000..d1b72ee
--- /dev/null
+++ b/js/post.js
@@ -0,0 +1,4 @@
+/* COMMENT DROPDOWNS */
+function CommentDropdown() {
+ document.getElementById("commentDropdown").classList.toggle("show");
+}
\ No newline at end of file
diff --git a/privacy.html b/legal/privacy.html
similarity index 61%
rename from privacy.html
rename to legal/privacy.html
index b14ba05..2e64c40 100644
--- a/privacy.html
+++ b/legal/privacy.html
@@ -10,10 +10,11 @@