Add light theme

1 files changed, 301 insertions, 191 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 02a94c9..8897de9 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,243 +1,353 @@
-
-@media screen and (min-width: 1280px) {
-    .ml-18 {
-	margin-left: 9rem;
-    }
-
-    .mr-18 {
-	margin-right: 9rem;
-    }
-
-    :not(.sidebar-element) li {
-	font-size: 20px;
-	line-height: 1.5em !important;
-    }
-
-    p {
-	font-size: 20px;
-    }
-}
-
-.flex-container {
-    display: flex;
-    flex-flow: row;
-}
-
-.navigation-element {
-    display: flex;
-    flex: 1 100px;
-}
-
-.end-justified {
-    justify-content: end;
-}
-
-.pagination {
-    font-size: 18px;
-}
-
-@media(prefers-color-scheme: dark) {
-    :root {
-	--bulma-primary-h: 24deg;
-	--bulma-primary-s: 92%;
-	--bulma-primary-l: 47%;
-    }
-    
-    .is-info {
-	background: #e8630a !important;
-	color: #e7eaf6;
-    }
-    
-    .banner {
-	color: #e7eaf6 !important;
-	background: #e8630a;
-    }
-
-    .sidebar {
-	border: 1px solid #3e4a61;
-	border-radius: 4px;
-	background: black;
-	justify-content: space-between;
+/* 
+   @media screen and (min-width: 1280px) {
+   .ml-18 {
+   margin-left: 9rem;
+   }
+
+   .mr-18 {
+   margin-right: 9rem;
+   }
+
+   :not(.sidebar-element) li {
+   font-size: 20px;
+   line-height: 1.5em !important;
+   }
+
+   p {
+   font-size: 20px;
+   }
+   }
+
+   .flex-container {
+   display: flex;
+   flex-flow: row;
+   }
+
+   .navigation-element {
+   display: flex;
+   flex: 1 100px;
+   }
+
+   .end-justified {
+   justify-content: end;
+   }
+
+   .pagination {
+   font-size: 18px;
+   }
+
+   @media(prefers-color-scheme: dark) {
+   :root {
+   --bulma-primary-h: 24deg;
+   --bulma-primary-s: 92%;
+   --bulma-primary-l: 47%;
+   }
+   
+   .is-info {
+   background: #e8630a !important;
+   color: #e7eaf6;
+   }
+   
+   .banner {
+   color: #e7eaf6 !important;
+   background: #e8630a;
+   }
+
+   .sidebar {
+   border: 1px solid #3e4a61;
+   border-radius: 4px;
+   background: black;
+   justify-content: space-between;
+   }
+
+   .sidebar-element {
+   border-bottom: 1px solid #e8630a;
+   color: #ff5722;
+   }
+
+   .content {
+   border: 1px solid #3e4a61;
+   border-radius: 4px;
+   background: black;
+   }
+
+   .date {
+   color: #f5f0f0;
+   text-align: right;
+   font-style: italic;
+   }
+
+   .archive-date {
+   color: #f5f0f0;
+   text-align: left;
+   font-style: italic;
+   font-size: 21px;
+   }
+
+   a {
+   color: #e8630a;
+   }
+
+   h1 {
+   color: #ff5722 !important;
+   }
+
+   h2 {
+   color: #ff895d !important;
+   }
+
+   h3 {
+   color: #ff894c !important;
+   }
+
+   pre {
+   border: 1px #3e4a61 solid;
+   border-radius: 4px;
+   }
+
+   li::marker {
+   color: #dc2f2f;
+   }
+
+   :not(.sidebar-element) li {
+   color: #fafafa;
+   }
+   
+   p {
+   color: #fafafa;
+   }
+   
+   body {
+   background: #101826;
+   font-family: "Inter", sans-serif !important;
+   margin: 0;
+   }
+   }
+
+   @media(prefers-color-scheme: light) {
+   :root {
+   --bulma-primary-h: 216deg;
+   --bulma-primary-s: 43%;
+   --bulma-primary-l: 38%;
+   }
+   
+   .is-info {
+   background: #38598b !important;
+   color: #e7eaf6;
+   }
+   
+   .banner {
+   color: #ffffff !important;
+   }
+
+   .sidebar {
+   border: 1px solid #dadff1;
+   border-radius: 4px;
+   background: white;
+   justify-content: space-between;
+   }
+
+   .content {
+   border: 1px solid #dadff1;
+   border-radius: 4px;
+   background: white;
+   }
+
+   .sidebar-element {
+   border-bottom: 1px solid #38598b;
+   color: #113f67;
+   }
+
+   .date {
+   color: #7b8894;
+   text-align: right;
+   font-style: italic;
+   }
+
+   .archive-date {
+   color: #7b8894;
+   text-align: left;
+   font-style: italic;
+   font-size: 21px;
+   }
+
+   .caption {
+   color: #7b8894;
+   font-style: italic;
+   font-size: 18px;
+   }
+
+   a {
+   color: #38598b;
+   }
+
+   h1 {
+   color: #113f67 !important;
+   }
+
+   h2 {
+   color: #155084 !important;
+   }
+
+   h3 {
+   color: #285f8a !important;
+   }
+
+   pre {
+   border: 1px #dadff1 solid;
+   border-radius: 4px;
+   }
+
+   li::marker {
+   color: #155084;
+   }
+
+   :not(.sidebar-element) li {
+   color: #2a2438;
+   }
+
+   p {
+   color: #2a2438;
+   }
+
+   body {
+   font-family: "Inter", sans-serif !important;
+   margin: 0;
+   background: #f8f8f8;
+   }
+   }
+
+   .footer-content {
+   color: white !important;
+   }
+
+   .footer-url {
+   color: white;
+   font-weight: bold;
+   }
+
+   .pull-left {
+   text-align: left;
+   font-size: 21px;
+   }
+
+   .index-content {
+   font-size: 20px;
+   }
+
+   :not(.sidebar-element) li {
+   list-style-type: disc;
+   margin-top: .7em;
+   line-height: 1em;
+   } */
+@media(prefers-color-scheme: light) {
+    .content {
+	border: 1px solid #dadff1;
+	background: white;
     }
 
     .sidebar-element {
-	border-bottom: 1px solid #e8630a;
-	color: #ff5722;
+	border-bottom: 1px solid #241f314c;
     }
 
-    .content {
-	border: 1px solid #3e4a61;
-	border-radius: 4px;
-	background: black;
+    .sidebar {    
+	border: 1px solid #dadff1;
+	border-radius: 1px;
+	background: white;
+	color: black;
+	justify-content: space-between;
     }
 
     .date {
-	color: #f5f0f0;
-	text-align: right;
-	font-style: italic;
-    }
-
-    .archive-date {
-	color: #f5f0f0;
-	text-align: left;
-	font-style: italic;
-	font-size: 21px;
+	color: #241f31;
     }
 
-    a {
-	color: #e8630a;
+    .sidebar a {
+	color: #241f31;
     }
 
-    h1 {
-	color: #ff5722 !important;
-    }
-
-    h2 {
-	color: #ff895d !important;
+    .sidebar a:hover {
+	color: #ed333b;
     }
 
-    h3 {
-	color: #ff894c !important;
-    }
-
-    pre {
-	border: 1px #3e4a61 solid;
-	border-radius: 4px;
-    }
-
-    li::marker {
-	color: #dc2f2f;
-    }
-
-    :not(.sidebar-element) li {
-	color: #fafafa;
-    }
-    
-    p {
-	color: #fafafa;
-    }
-    
-    body {
-	background: #101826;
-	font-family: "Inter", sans-serif !important;
-	margin: 0;
-    }
-}
-
-@media(prefers-color-scheme: light) {
-    :root {
-	--bulma-primary-h: 216deg;
-	--bulma-primary-s: 43%;
-	--bulma-primary-l: 38%;
-    }
-    
-    .is-info {
-	background: #38598b !important;
-	color: #e7eaf6;
-    }
-    
     .banner {
 	color: #ffffff !important;
     }
 
-    .sidebar {
-	border: 1px solid #dadff1;
-	border-radius: 4px;
-	background: white;
-	justify-content: space-between;
-    }
-
-    .content {
-	border: 1px solid #dadff1;
-	border-radius: 4px;
-	background: white;
-    }
-
-    .sidebar-element {
-	border-bottom: 1px solid #38598b;
-	color: #113f67;
+    .post-summary {
+	border-bottom: solid 1px;
+	color: #e01b244c;
     }
 
-    .date {
-	color: #7b8894;
-	text-align: right;
-	font-style: italic;
+    :root {
+	--bulma-primary-h: 357deg;
+	--bulma-primary-s: 84%;
+	--bulma-primary-l: 56%;
     }
 
-    .archive-date {
-	color: #7b8894;
-	text-align: left;
-	font-style: italic;
-	font-size: 21px;
+    html {
+	background: #f8f8f8;
     }
 
-    .caption {
-	color: #7b8894;
-	font-style: italic;
-	font-size: 18px;
+    p {
+	color: #241f31;
+	font-size: 1.3rem;
     }
 
     a {
-	color: #38598b;
+	color: #C93530;
     }
 
     h1 {
-	color: #113f67 !important;
+	color: #f66151 !important;
     }
 
     h2 {
-	color: #155084 !important;
+	color: #e66100 !important;
     }
 
-    h3 {
-	color: #285f8a !important;
+    strong {
+	color: #e66100;
     }
 
-    pre {
-	border: 1px #dadff1 solid;
-	border-radius: 4px;
+    .footer p {
+	color: white;
     }
 
-    li::marker {
-	color: #155084;
-    }
-
-    :not(.sidebar-element) li {
-	color: #2a2438;
-    }
-
-    p {
-	color: #2a2438;
-    }
-
-    
-    body {
-	font-family: "Inter", sans-serif !important;
-	margin: 0;
-	background: #f3f3f3;
+    .footer a {
+	color: #e66100;
     }
 }
 
-.footer-content {
-    color: white !important;
+.content {
+    border-radius: 1px;
+    height: 100%;
 }
 
-.footer-url {
-    color: white;
-    font-weight: bold;
+.sidebar-column {
+    padding-left: 20px;
 }
 
-.pull-left {
+.date {
     text-align: left;
-    font-size: 21px;
+    font-style: italic;
+    font-size: 1.2rem;
+    padding-bottom: 10px;
+}
+
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
+
 }
 
-.index-content {
-    font-size: 20px;
+.content-wrap {
+    padding-bottom: 60px;
 }
 
-:not(.sidebar-element) li {
-    list-style-type: disc;
-    margin-top: .7em;
-    line-height: 1em;
+#page-container {
+    position: relative;
+    min-height: 100vh;
 }