Site layout changes and more flexbox experiements with CSS.

2020-02-25 10:03:30 -05:00
parent a82b4869b5
commit 775805808e
11 changed files with 894 additions and 257 deletions
--- a/assets/css/themes.css
+++ b/assets/css/themes.css
@ -0,0 +1,138 @@
+
+
+/* Themes(light and dark) */
+
+
+/* Light theme */
+html {
+  --background-color: #383c4a;
+  --section-color: #2a2e3a;
+  --text-color: #C8C8C8;
+  --headings-color: #ffffff;
+  --header-color: #2e323e;
+  --site-name-color: #ffffff;;
+  --site-description-color: #ffffff;
+  --nav-link-color: #57cc8a;
+  --nav-link-hover-color: #ffffff;
+  --link-color: #8bb8df;
+  --link-color-hover: 8bb8df;
+  --border-color: #808080;
+  --footer-color: #2e323e;
+}
+
+@media (prefers-color-scheme:light) {
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--headings-color);
+  }
+
+  header {
+    background-color: var(--header-color);
+  }
+
+  .menu {
+    color: white;
+  }
+
+  a {
+    color: #CC99FF;
+  }
+
+  a:hover {
+    color: white;
+    text-decoration: underline;
+  }
+
+  .content {
+    background-color: #ffffff;
+  }
+
+  main p {
+    color: black;
+  }
+
+  section {
+    background-color: #ffffff;
+  }
+
+  footer {
+    background-color: #182329;
+    color: #C8C8C8;
+  }
+}
+
+
+/* Dark theme */
+html[data-theme='dark'] {
+  --background-color: #383c4a;
+  --section-color: #2a2e3a;
+  --text-color: #C8C8C8;
+  --headings-color: #ffffff;
+  --header-color: #2e323e;
+  --site-name-color: #ffffff;;
+  --site-description-color: #ffffff;
+  --nav-link-color: #57cc8a;
+  --nav-link-hover-color: #ffffff;
+  --link-color: #8bb8df;
+  --link-color-hover: 8bb8df;
+  --border-color: #808080;
+  --footer-color: #2e323e;
+}
+
+@media (prefers-color-scheme:dark) {
+  body {
+    background-color: #383c4a;
+    color: var(--text-color);
+  }
+
+  h1, h2, h3 {
+    color: white;
+  }
+
+  header {
+    /* background-color: #182329; */
+    background-color: #2e323e;
+  }
+
+  main {
+    color: #ffffff;
+  }
+
+  .title {
+    color: #ffffff;
+  }
+
+  .menu {
+    color: #ffffff;
+  }
+
+  a {
+    color: #CC99FF;
+  }
+
+  a:hover {
+    color: white;
+  }
+
+  .content {
+    background-color: #182329;
+  }
+
+  main p {
+    color: #C8C8C8;
+  }
+
+  section {
+    background-color: #2a2e3a;
+  }
+
+  footer {
+    background-color: #2e323e;
+    border-top: 1px solid var(--border-color);
+    color: #C8C8C8;
+  }
+}