diff --git a/index-styles.css b/index-styles.css
new file mode 100644
index 0000000..90195ee
--- /dev/null
+++ b/index-styles.css
@@ -0,0 +1,37 @@
+:root {
+ --social-text-color: #683655;
+ --mastodon-text-color: #3088D4;
+ --discord-text-color: #7289DA;
+}
+
+.social {
+ color: #683655;
+ font-size: large;
+ font-weight: bold;
+ display: block;
+}
+
+#mastodon {
+ font-style: italic;
+ text-decoration: none;
+ color: #3088D4;
+}
+
+#discord {
+ font-style: italic;
+ text-decoration: none;
+ color: #7289DA;
+}
+
+#contact {
+ border-style: solid;
+ border-width: .2vh;
+ border-color: var(--border-color);
+ padding: 1vh;
+ background-color: var(--header-background-color);
+ display: block;
+}
+
+#contact h2 {
+ margin: 0;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 849b0ce..0662dd0 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
Quack! ur gay!
+
diff --git a/stoplight-styles.css b/stoplight-styles.css
index 3b6c271..3ee567d 100644
--- a/stoplight-styles.css
+++ b/stoplight-styles.css
@@ -1,100 +1,26 @@
-body {
- background-color: #424242;
-}
-
-#wrapper {
- background-color: #B2C5D6;
- margin-left: auto;
- margin-right: auto;
- width: 90%;
- display: flex;
- flex-direction: column;
-}
-
-#content {
- margin: 0;
- padding-top: 0;
- padding-left: 1vh;
- padding-right: 1vh;
- overflow: visible;
-}
-
-body {
- margin: 0;
- height: 100vh;
+:root {
+ --body-background-color: #424242;
+ --header-background-color: linear-gradient(20deg, #6E9277 20%, #FFD483 50%, #FC6467 85%);
+ --nav-background-color: #424242;
+ --nav-text-color: #B2C5D6;
+ --nav-hover-color: #4B4B4B;
+ --wrapper-background-color: #B2C5D6;
+ --border-color: #424242;
+ --text-color: #424242;
}
header {
- background: linear-gradient(20deg, #6E9277 20%, #FFD483 50%, #FC6467 85%);
- margin-bottom: 1vh;
-}
-
-h1, h2, h3, h4, h5, h6 {
- color: #424242;
-}
-
-nav ul {
- list-style-type: none;
- margin-left: .3%;
- margin-right: .3%;
- margin-top: .3%;
- margin-bottom: .3%;
- padding: 0;
- overflow: hidden;
- background-color: #424242;
- display: block;
-}
-
-nav li {
- margin: 0;
- display: inline;
- float: left;
-}
-
-nav li a {
- display: block;
- color: #B2C5D6;
- text-align: center;
- padding: 14px 16px;
- text-decoration: none;
-}
-
-nav li a:hover {
- background-color: #4B4B4B;
-}
-
-footer {
- background: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
- margin-top: auto;
-}
-
-footer p {
- text-align: center;
-}
-
-h1 {
- text-align: center;
-}
-
-h2 {
- margin-top: 1vh;
- margin-bottom: 1vh;
-}
-
-p {
- color: #424242;
- margin-top: 1%;
- margin-bottom: 1%;
+ background: var(--header-background-color);
}
li {
- color: #424242;
+ color: var(--text-color);
}
hr {
border-style: dashed;
- border-color: #424242;
- color: #424242;
+ border-color: var(--border-color);
+ color: var(--text-color);
margin: auto;
}
@@ -118,7 +44,7 @@ img {
}
figcaption {
- color: #424242;
+ color: var(--text-color);
}
.example-img-container {
diff --git a/stoplight.html b/stoplight.html
index c9e7eeb..953e39e 100644
--- a/stoplight.html
+++ b/stoplight.html
@@ -5,6 +5,7 @@
Stoplight Schema
+
diff --git a/styles.css b/styles.css
index f4f80ce..58e3904 100644
--- a/styles.css
+++ b/styles.css
@@ -1,15 +1,23 @@
-body {
- background-color: #293B2A;
+:root {
+ --body-background-color: #293B2A;
+ --header-background-color: #646D5A;
+ --nav-background-color: #505948;
+ --nav-text-color: #8CAA8C;
+ --nav-hover-color: #464F3E;
+ --wrapper-background-color: #647E5A;
+ --border-color: #101010;
+ --text-color: #101010;
+ --footer-gradient: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
}
#wrapper {
- background-color: #647E5A;
+ background-color: var(--wrapper-background-color);
margin-left: auto;
margin-right: auto;
- border-left: 1px solid #101010;
- border-right: 1px solid #101010;
+ border-left: 1px solid var(--border-color);
+ border-right: 1px solid var(--border-color);
width: 90%;
- height: 100vh; /* remove once content grows enough */
+ min-height: 100vh; /* keeps the wrapper at least the length of the screen */
display: flex;
flex-direction: column;
}
@@ -25,19 +33,27 @@ body {
body {
margin: 0;
height: 100vh;
+ background-color: var(--body-background-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+ color: var(--text-color);
}
header {
- background-color: #646D5A;
+ background-color: var(--header-background-color);
margin-bottom: 1vh;
}
nav ul {
list-style-type: none;
- margin: 0;
+ margin-left: .3%;
+ margin-right: .3%;
+ margin-top: .3%;
+ margin-bottom: .3%;
padding: 0;
overflow: hidden;
- background-color: #505948;
+ background-color: var(--nav-background-color);
display: block;
}
@@ -49,25 +65,25 @@ nav li {
nav li a {
display: block;
- color: #8CAA8C;
+ color: var(--nav-text-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
- background-color: #464F3E;
+ background-color: var(--nav-hover-color);
}
footer {
- background: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
+ background: var(--footer-gradient);
margin-top: auto;
}
footer hr {
border-width: 1px;
border-style: solid;
- border-color: #101010;
+ border-color: var(--border-color);
margin: auto;
}
@@ -85,7 +101,7 @@ h2 {
}
p {
- color: #101010;
+ color: var(--text-color);
margin-top: 1%;
margin-bottom: 1%;
}
@@ -93,38 +109,7 @@ p {
hr {
border-width: 1px;
border-style: dashed;
- border-color: #101010;
+ border-color: var(--border-color);
+ color: var(--border-color);
margin: auto;
-}
-
-.social {
- color: #683655;
- font-size: large;
- font-weight: bold;
- display: block;
-}
-
-#mastodon {
- font-style: italic;
- text-decoration: none;
- color: #3088D4;
-}
-
-#discord {
- font-style: italic;
- text-decoration: none;
- color: #7289DA;
-}
-
-#contact {
- border-style: solid;
- border-width: .2vh;
- border-color: #101010;
- padding: 1vh;
- background-color: #646D5A;
- display: block;
-}
-
-#contact h2 {
- margin: 0;
}
\ No newline at end of file