From 586d646ad3021c9a9a0927020ded8ab72c7022c7 Mon Sep 17 00:00:00 2001
From: David Luevano Alvarado <david@luevano.xyz>
Date: Wed, 21 Apr 2021 18:02:10 -0600
Subject: kinda finish new style

---
 static/css/dark.css          |  81 +++++++++++---------
 static/css/general_style.css | 171 -------------------------------------------
 static/css/light.css         |  83 ++++++++++++---------
 static/css/style.css         | 156 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 251 insertions(+), 240 deletions(-)
 delete mode 100644 static/css/general_style.css
 create mode 100644 static/css/style.css

(limited to 'static/css')

diff --git a/static/css/dark.css b/static/css/dark.css
index 2f43bcc..1cb3028 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -28,16 +28,7 @@
   --switch-sun: var(--color13);
 }
 
-html {
-  background: var(--bg);
-}
-
-body {
-  background: var(--body-bg);
-  color: var(--fg);
-  border: 4px outset var(--fg);
-}
-
+/* general */
 a {
   color: var(--link);
 }
@@ -66,49 +57,44 @@ h5 {
   color: var(--fg-acc5);
 }
 
-/* switch */
-.slider {
-  background-color: var(--switch-bg);
-}
-
-#theme-switcher-container i.fa-moon {
-  color: var(--switch-moon);
-}
-
-#theme-switcher-container i.fa-sun {
-  color: var(--switch-sun);
-}
-
-.slider:before {
-  background-color: var(--switch-slider);
+body {
+  background: var(--bg);
+  color: var(--fg);
 }
 
-.switch input:checked + .slider {
-  background-color: var(--switch-toggled-bg);
+main {
+  background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
-.switch input:focus + .slider {
-  box-shadow: 0 0 0.1em var(--switch-ol);
+/* nav bar */
+body > header {
+  background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
-/* menu bar (header) */
-.menubar li {
+nav li {
   background: var(--navitem-bg);
 }
 
-.menubar a {
+nav a {
   color: var(--navitem-link);
 }
 
-.menubar li:hover {
+nav li:hover {
   background: var(--navitem-bg-hl);
   color: var(--fg-hl);
 }
 
-.menubar li:hover > a {
+nav li:hover > a {
   color: var(--navitem-link-hl);
 }
 
+
+/* footer */
+body > footer {
+  background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
+}
+
+
 /* image gallery (not really being used rn) */
 div.gallery {
   border: 1px solid var(--fg-hl);
@@ -117,3 +103,30 @@ div.gallery {
 div.gallery:hover {
   border: var(--fg-acc5);
 }
+
+
+/* switch */
+.slider {
+  background-color: var(--switch-bg);
+}
+
+.theme-switch-container i.fa-moon {
+  color: var(--switch-moon);
+}
+
+.theme-switch-container i.fa-sun {
+  color: var(--switch-sun);
+}
+
+.slider:before {
+  background-color: var(--switch-slider);
+}
+
+.switch input:checked + .slider {
+  background-color: var(--switch-toggled-bg);
+}
+
+.switch input:focus + .slider {
+  box-shadow: 0 0 0.1em var(--switch-ol);
+}
+
diff --git a/static/css/general_style.css b/static/css/general_style.css
deleted file mode 100644
index 60a8f7e..0000000
--- a/static/css/general_style.css
+++ /dev/null
@@ -1,171 +0,0 @@
-:root {
-  font-family: Verdana, Geneva, sans-serif;
-  font-size: larger;
-}
-
-body {
-  max-width: 50em;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0.5em;
-  text-align: justify;
-  text-justify: inter-word;
-}
-
-a{
-  text-decoration: none;
-}
-
-/* switch */
-/* slider container */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 2rem;
-  height: 1rem;
-}
-
-/* specifically the theme switcher */
-#theme-switcher-container {
-  position: absolute;
-  top: 1.6em;
-  --hardcoded-pos: calc(50vw - 25.2em);
-  --resized-pos: calc(0.4px + 0.5em);
-  --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos));
-  right: var(--calculated-pos);
-}
-
-#theme-switcher-container i {
-  position: relative;
-  top: -0.2em;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* slider dimentions */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position:absolute;
-  content: "";
-  height: 0.8em;
-  width: 0.8em;
-  left: 0.1em;
-  bottom: 0.1em;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-/* slider movement on click */
-.switch input:checked + .slider:before {
-  -webkit-transform: translateX(0.9em);
-  -ms-transform: translateX(0.9em);
-  transform: translateX(0.9em);
-}
-
-/* slider container */
-.slider.round {
-  border-radius: 1em;
-}
-
-/* slider */
-.slider.round:before {
-  border-radius: 1em;
-}
-
-/* menu bar (header) */
-header {
-  margin-top: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-.menubar {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
-
-.menubar li {
-  display: block;
-  float: left;
-  min-width: 2em;
-  max-width: 10em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  margin-left: 0.2em;
-  margin-right: 0.2em;
-}
-
-.menubar ul {
-  visibility: hidden;
-  position: absolute;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  margin-left: -2.6em;
-  min-width: 2em;
-  max-width: 10em;
-}
-
-.menubar li:hover ul {
-  visibility: visible;
-}
-
-/* keep subitmes as list */
-.menubar li ul li{
-  float: none;
-  margin-top: 0.4em;
-}
-
-/* separation from icon */
-.menubar span {
-  padding-left: 0.4em;
-}
-
-/* footer */
-footer {
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
-/* images */
-img {
-  max-width: 35vw;
-}
-
-/* image gallery (not really being used rn) */
-div.gallery {
-  margin: 5px;
-  border: 1px solid;
-  float: left;
-  width: 180px;
-}
-
-div.gallery img {
-  width: 100%;
-  height: auto;
-}
-
-div.desc {
-  padding: 15px;
-  text-align: center;
-}
diff --git a/static/css/light.css b/static/css/light.css
index 4f41d5f..27df3c4 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -28,17 +28,8 @@
   --switch-sun: var(--color13);
 }
 
-html {
-  background: var(--bg);
-}
-
-body {
-  background: var(--body-bg);
-  color: var(--fg);
-  border: 4px outset var(--fg);
-}
-
-a{
+/* general */
+a {
   color: var(--link);
 }
 
@@ -66,49 +57,44 @@ h5 {
   color: var(--fg-acc5);
 }
 
-/* switch */
-.slider {
-  background-color: var(--switch-bg);
-}
-
-#theme-switcher-container i.fa-moon {
-  color: var(--switch-moon);
-}
-
-#theme-switcher-container i.fa-sun {
-  color: var(--switch-sun);
-}
-
-.slider:before {
-  background-color: var(--switch-slider);
+body {
+  background: var(--bg);
+  color: var(--fg);
 }
 
-.switch input:checked + .slider {
-  background-color: var(--switch-toggled-bg);
+main {
+  background: linear-gradient(var(--bg) 0.5em, 1em, var(--body-bg) 1.5em calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
-.switch input:focus + .slider {
-  box-shadow: 0 0 0.1em var(--switch-ol);
+/* nav bar */
+body > header {
+  background: linear-gradient(var(--body-bg) calc(100% - 1.5em), calc(100% - 1em), var(--bg) calc(100% - 0.5em));
 }
 
-/* menu bar (header) */
-.menubar li {
+nav li {
   background: var(--navitem-bg);
 }
 
-.menubar a {
+nav a {
   color: var(--navitem-link);
 }
 
-.menubar li:hover {
+nav li:hover {
   background: var(--navitem-bg-hl);
   color: var(--fg-hl);
 }
 
-.menubar li:hover > a {
+nav li:hover > a {
   color: var(--navitem-link-hl);
 }
 
+
+/* footer */
+body > footer {
+  background: linear-gradient(var(--bg) calc(100% - 1.5em), calc(100% - 1em), var(--body-bg) calc(100% - 0.5em));
+}
+
+
 /* image gallery (not really being used rn) */
 div.gallery {
   border: 1px solid var(--fg-hl);
@@ -117,3 +103,30 @@ div.gallery {
 div.gallery:hover {
   border: var(--fg-acc5);
 }
+
+
+/* switch */
+.slider {
+  background-color: var(--switch-bg);
+}
+
+.theme-switch-container i.fa-moon {
+  color: var(--switch-moon);
+}
+
+.theme-switch-container i.fa-sun {
+  color: var(--switch-sun);
+}
+
+.slider:before {
+  background-color: var(--switch-slider);
+}
+
+.switch input:checked + .slider {
+  background-color: var(--switch-toggled-bg);
+}
+
+.switch input:focus + .slider {
+  box-shadow: 0 0 0.1em var(--switch-ol);
+}
+
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..0ba4e05
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,156 @@
+:root {
+  font-family: Verdana, Geneva, sans-serif;
+  font-size: larger;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  display: grid;
+
+  grid-template-areas:
+    'header'
+    'main'
+    'footer';
+  grid-template-rows: 3em auto auto;
+  grid-template-columns: auto;
+}
+
+body > header {
+  grid-area: header;
+}
+
+body > footer {
+  grid-area: footer;
+}
+
+main {
+  grid-area: main;
+}
+
+a{
+  text-decoration: none;
+}
+
+body > header, body > footer, main {
+  justify-self: center;
+  width: clamp(45ch, 50%, 75ch);
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+
+/* nav bar / header */
+body > header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+}
+
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+nav li {
+  display: block;
+  float: left;
+  min-width: 2em;
+  max-width: 10em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+}
+
+nav > ul > li > ul {
+  visibility: hidden;
+  position: absolute;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+}
+
+nav > ul > li:hover > ul {
+  visibility: visible;
+}
+
+nav > ul > li > ul > li {
+  float: none;
+  margin-top: 0.4em;
+}
+
+nav span {
+  padding-left: 0.4em;
+}
+
+
+/* footer */
+body > footer {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+
+/* theme swticher */
+.switch {
+  position: relative;
+  top: 0.2em;
+  display: inline-block;
+  width: 2em;
+  height: 1em;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch input:checked + .slider:before {
+  -webkit-transform: translateX(0.9em);
+  -ms-transform: translateX(0.9em);
+  transform: translateX(0.9em);
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position:absolute;
+  content: "";
+  height: 0.8em;
+  width: 0.8em;
+  left: 0.1em;
+  bottom: 0.1em;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider.round {
+  border-radius: 1em;
+}
+
+.slider.round:before {
+  border-radius: 1em;
+}
-- 
cgit v1.2.3-70-g09d2