Merge branch 'theme-changer' into 'master'

Theme changer

See merge request Syndamia/syndamiadotcom!4

1 files changed, 104 insertions, 42 deletions

diff --git a/src/styles.css b/src/styles.css
index 6f464fc..f8a7dcf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,25 @@
 :root {
+  --fg-color: black;
+  --bg-color: white;
+  --fg-selection-color: white;
+  --bg-selection-color: #338fff;
+  --border-color: black;
+  --blockquote-color: #6a737d;
+  --blockquote-border-color: #dfe2e5;
+  --header-color: black;
+  --link-tab-fg-color: white;
   --link-tab-bg-color: #303030;
   --link-tab-bg-hover-color: #004080;
+  --strong-color: black;
+  --a-color: #004080;
+  --a-hover-color: #004080;
+  --code-bg-color: #e2e4e6;
+  --pre-bg-color: #f6f8fa;
+  --em-color: black;
+  --td-border-color: #dfe2e5;
+  --tr-bg-color: #fff;
+  --tr-border-color: #c6cbd1;
+  --alternating-row-color: #f6f8fa;
 }
 
 /* Custom scrollbar style */
@@ -21,10 +40,25 @@
   background: #555;
 }
 
+/* Custom mouse text selection colors */
+
+::-moz-selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
+::selection {
+  color: var(--fg-selection-color);
+  background: var(--bg-selection-color);
+}
+
 /* Global */
 
 body {
   min-height: calc(100vh - 16px);
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
 }
 
 body, td, th {
@@ -32,6 +66,11 @@ body, td, th {
   line-height: 1.5em;
 }
 
+h1, h2, h3, h4, h5, h6, b {
+  color: var(--header-color);
+  border-color: var(--border-color);
+}
+
 h1 {
   font-size: 1.7em;
   line-height: 1.2em;
@@ -45,7 +84,7 @@ h1 ~ h1 {
 h2 {
   font-size: 1.35em;
   padding-bottom: 0.25em;
-  border-bottom: 2px solid black;
+  border-bottom: 2px solid var(--border-color);
 }
 
 h3 {
@@ -63,12 +102,32 @@ img {
 }
 
 img, hr {
-  border: 1px solid black;
+  border: 1px solid var(--border-color);
+}
+
+strong {
+  color: var(--strong-color);
 }
 
 a {
   text-decoration: none;
-  color: var(--link-tab-bg-hover-color);
+}
+
+a * {
+  color: var(--fg-color);
+}
+
+body > :not(nav) a, a strong {
+  color: var(--a-color);
+  border-bottom: 1px dashed;
+}
+
+body > :not(nav) a:hover, a strong:hover {
+  color: var(--a-hover-color);
+}
+
+i, em {
+  color: var(--em-color);
 }
 
 article {
@@ -90,10 +149,14 @@ table code {
 h2, h3, h4, h5, h6, .about-header {
   display: inline-block;
   margin-block-start: 0.4em;
-  margin-block-end: 0.5em; /* Account for it being an inline block, as opposed to a normal block */
+  margin-block-end: 0.16em;
   line-height: 1.25em;
 }
 
+.about-header:first-child {
+  margin-block-start: 0.83em;
+}
+
 h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .about-p {
   display: inline;
 }
@@ -147,7 +210,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
 .link-tab {
   font-weight: normal;
   padding: 10px;
-  color: white;
+  color: var(--link-tab-fg-color);
   background-color: var(--link-tab-bg-color);
 }
 
@@ -155,12 +218,6 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
   background-color: var(--link-tab-bg-hover-color);
 }
 
-#changeThemeButton {
-  vertical-align: middle;
-  margin-top: -0.2em;
-  border: none !important;
-}
-
 /* Index page styling */
 
 #index-contents-img {
@@ -171,7 +228,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
   #index-contents {
     display: flex;
     align-items: center;
-    justify-content: center;	
+    justify-content: center;
   }
 
   #index-contents-text {
@@ -189,8 +246,7 @@ h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .about-p img {
 
 /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
 
-code,
-pre {
+code, pre {
   font-family: monospace;
   font-size: 1em;
 }
@@ -199,20 +255,10 @@ code {
   padding: .2em .4em;
   margin: 0;
   font-size: 85%;
-  background-color: rgba(40,46,52,.5);
+  background-color: var(--code-bg-color);
   border-radius: 3px;
 }
 
-pre > code {
-  padding: 0;
-  margin: 0;
-  font-size: 100%;
-  word-break: normal;
-  white-space: pre;
-  background: transparent;
-  border: 0;
-}
-
 pre code {
   display: inline;
   max-width: auto;
@@ -221,7 +267,17 @@ pre code {
   overflow: visible;
   line-height: inherit;
   word-wrap: normal;
-  background-color: initial;
+  background-color: var(--code-bg-color);
+  border: 0;
+}
+
+pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background-color: inherit;
   border: 0;
 }
 
@@ -230,7 +286,7 @@ pre {
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: #f6f8fa;
+  background-color: var(--pre-bg-color);
   border-radius: 3px;
   margin: 0;
   word-break: normal;
@@ -268,16 +324,16 @@ article > table th {
 article > table td,
 article > table th {
   padding: 6px 13px;
-  border: 1px solid #dfe2e5;
+  border: 1px solid var(--td-border-color);
 }
 
 article > table tr {
-  background-color: #fff;
-  border-top: 1px solid #c6cbd1;
+  background-color: var(--tr-bg-color);
+  border-top: 1px solid var(--tr-border-color);
 }
 
 article > table tr:nth-child(2n) {
-  background-color: #f6f8fa;
+  background-color: var(--alternating-row-color);
 }
 
 blockquote {
@@ -285,8 +341,8 @@ blockquote {
   margin-top: 0;
   margin-bottom: 16px;
   padding: 0 1em;
-  color: #6a737d;
-  border-left: .25em solid #dfe2e5;
+  color: var(--blockquote-color);
+  border-left: .25em solid var(--blockquote-border-color);
 }
 
 blockquote > :first-child {
@@ -310,7 +366,7 @@ blockquote > :last-child {
 }
 
 .contact-card-title, .contact-card-content {
-  background-color: #343434;
+  background-color: var(--alternating-row-color);
   padding: 0.7rem;
   line-height: 1.5rem;
 }
@@ -323,7 +379,7 @@ blockquote > :last-child {
 .contact-card-title {
   font-size: 1.2em;
   margin: 0em 0.4em;
-  color: var(--bold-color);
+  color: var(--header-color);
 }
 
 .contact-card-content {
@@ -334,10 +390,6 @@ blockquote > :last-child {
 
 /* Syntax highlighting (colours are inspired from gruvbox) */
 
-code span {
-  background-color: inherit;
-}
-
 .cst, .chr { /* Constant, Chars */
   color: #d787af;
 }
@@ -372,6 +424,10 @@ code span {
 
 /* Script specific styling */
 
+.btn:hover {
+  cursor: pointer;
+}
+
 .clicked-image {
   position: absolute;
   width: 100vw;
@@ -384,6 +440,7 @@ code span {
   top: 0;
   padding: 1em;
   z-index: 2;
+  background-color: var(--bg-color);
 }
 
 .body-on-clicked-image {
@@ -399,11 +456,16 @@ code span {
   border: 1px solid;
   transition-duration: 0.5s;
   padding: 0.3em;
-  display: none;
 }
 
-#scrollBtn:hover {
-  cursor: pointer;
+#changeThemeBtn {
+  vertical-align: middle;
+  margin-top: -0.2em;
+  border: none !important;
+}
+
+#scrollBtn, #changeThemeBtn {
+  display: none;
 }
 
 /* OpenSans font */