Improve theme

1 files changed, 285 insertions, 119 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
index a7c9f07..e0b9237 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -171,11 +171,7 @@
    font-size: 21px;
    }
 
-   .caption {
-   color: #7b8894;
-   font-style: italic;
-   font-size: 18px;
-   }
+   
 
    a {
    color: #38598b;
@@ -240,181 +236,329 @@
    margin-top: .7em;
    line-height: 1em;
    } */
-@media(prefers-color-scheme: dark) {
-    .content {
-	border: 1px solid #5e5c64;
-	background: black;
-    }
+/* @media(prefers-color-scheme: dark) {
+   .content {
+   border: 1px solid #5e5c64;
+   background: black;
+   }
 
-    .sidebar-element {
-	border-bottom: 1px solid #fcf6f6;
-    }
+   .sidebar-element {
+   border-bottom: 1px solid #fcf6f6;
+   }
 
-    .sidebar {    
-	border: 1px solid #5e5c64;
-	border-radius: 1px;
-	background: black;
-	color: white;
-	justify-content: space-between;
-    }
+   .sidebar {    
+   border: 1px solid #5e5c64;
+   border-radius: 1px;
+   background: black;
+   color: white;
+   justify-content: space-between;
+   }
 
-    .date {
-	color: #f6f5f4;
-    }
+   .date {
+   color: #f6f5f4;
+   }
 
-    .sidebar a {
-	color: #f6f5f4;
-    }
+   .sidebar a {
+   color: #f6f5f4;
+   }
 
-    .sidebar a:hover {
-	color: #1c71d8;
-    }
+   .sidebar a:hover {
+   color: #1c71d8;
+   }
 
-    .banner {
-	color: #ffffff !important;
-    }
+   .banner {
+   color: #ffffff !important;
+   }
 
-    .post-summary {
-	border-bottom: solid 1px;
-	color: #1760cd;
-    }
+   .post-summary {
+   border-bottom: solid 1px;
+   color: #1760cd;
+   }
 
-    :root {
-	--bulma-primary-h: 219deg;
-	--bulma-primary-l: 50%;
-	--bulma-info-h: 253deg;
-	--bulma-info-s: 79%;
-	--bulma-info-l: 56%;
-    }
+   :root {
+   --bulma-primary-h: 219deg;
+   --bulma-primary-l: 50%;
+   --bulma-info-h: 253deg;
+   --bulma-info-s: 79%;
+   --bulma-info-l: 56%;
+   }
 
-    html {
-	background: #1f1e24;
-    }
+   html {
+   background: #1f1e24;
+   }
 
-    p {
-	color: #fcf6f6;
-	font-size: 1.5rem;
+   p {
+   color: #fcf6f6;
+   font-size: 1.5rem;
+   }
+
+   a {
+   color: #2685e6;
+   }
+
+   h1 {
+   color: #3c8aff !important;
+   }
+
+   h2 {
+   color: #3833d4 !important;
+   }
+
+   strong {
+   color: #3833d4;
+   }
+
+   .footer p {
+   color: white;
+   }
+
+   .footer a {
+   color: #3833d4;
+   }
+   }
+
+   @media(prefers-color-scheme: light) {
+   .content {
+   border: 1px solid #dadff1;
+   background: white;
+   }
+
+   .sidebar-element {
+   border-bottom: 1px solid #241f314c;
+   }
+
+   .sidebar {    
+   border: 1px solid #dadff1;
+   border-radius: 1px;
+   background: white;
+   color: black;
+   justify-content: space-between;
+   }
+
+   .date {
+   color: #241f31;
+   }
+
+   .sidebar a {
+   color: #241f31;
+   }
+
+   .sidebar a:hover {
+   color: #ed333b;
+   }
+
+   .banner {
+   color: #ffffff !important;
+   }
+
+   .post-summary {
+   border-bottom: solid 1px;
+   color: #e01b244c;
+   }
+
+   :root {
+   --bulma-primary-h: 357deg;
+   --bulma-primary-s: 84%;
+   --bulma-primary-l: 56%;
+   --bulma-info-h: 5deg;
+   }
+
+   html {
+   background: #f8f8f8;
+   }
+
+   p {
+   color: #241f31;
+   font-size: 1.5rem;
+   }
+
+   a {
+   color: #C93530;
+   }
+
+   h1 {
+   color: #f66151 !important;
+   }
+
+   h2 {
+   color: #e66100 !important;
+   }
+
+   strong {
+   color: #e66100;
+   }
+
+   .footer p {
+   color: white;
+   }
+
+   .footer a {
+   color: #e66100;
+   }
+   }
+
+   .content {
+   border-radius: 1px;
+   height: 100%;
+   }
+
+   .sidebar-column {
+   padding-left: 20px;
+   }
+
+   .date {
+   text-align: left;
+   font-style: italic;
+   font-size: 1.2rem;
+   padding-bottom: 10px;
+   }
+
+   .footer {
+   position: absolute;
+   bottom: 0;
+   width: 100%;
+   height: 60px;
+
+   }
+
+   .content-wrap {
+   padding-bottom: 60px;
+   }
+ */
+@media(prefers-color-scheme: light) {
+    :root {
+	--bulma-primary-h: 213deg;
+	--bulma-primary-s: 17%;
+	--bulma-info-h: 286deg;
+	--bulma-info-s: 66%;
+	--bulma-info-l: 35%;
     }
 
-    a {
-	color: #2685e6;
+    body {
+	background: #F4FAFF;
     }
 
-    h1 {
-	color: #3c8aff !important;
+    .navigation {
+	align-items: center;
+	display: flex;
+	flex-grow: 0;
+	flex-shrink: 0;
+	line-height: 1.5;
+	padding: .5rem .75rem;
+	position: relative;
+	color: #F4FAFF;
     }
 
-    h2 {
-	color: #3833d4 !important;
+    .navigation:hover {
+	color: #43AA8B;
     }
 
-    strong {
-	color: #3833d4;
+    .svg-icon:hover {
+	fill: #43AA8B;
     }
 
-    .footer p {
-	color: white;
+    .is-info-button {
+	color: #F4FAFF;
     }
 
-    .footer a {
-	color: #3833d4;
+    a.svg {
+	position: relative;
+	display: inline-block; 
+    }
+    
+    a.svg:after {
+	content: ""; 
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left:0;
     }
-}
 
-@media(prefers-color-scheme: light) {
-    .content {
-	border: 1px solid #dadff1;
-	background: white;
+    .rss-icon {
+	width: 100%;
+	max-width: 8rem;
+	height: auto;
     }
 
-    .sidebar-element {
-	border-bottom: 1px solid #241f314c;
+    .svg-icon-body {
+	width: .8rem;
+	height: .8rem;
+	fill: #56667A;
     }
 
-    .sidebar {    
-	border: 1px solid #dadff1;
-	border-radius: 1px;
-	background: white;
-	color: black;
-	justify-content: space-between;
+    .post-summary {
+	border-bottom: 1px solid #56667A;
     }
 
-    .date {
-	color: #241f31;
+    .footer-content {
+	color: #F4FAFF !important;
     }
 
-    .sidebar a {
-	color: #241f31;
+    .caption {
+	color: #56667A;
     }
 
-    .sidebar a:hover {
-	color: #ed333b;
+    a.footer-url {
+	color: #F4FAFF;
     }
 
-    .banner {
-	color: #ffffff !important;
+    a.footer-url:hover {
+	color: #43AA8B;
     }
 
-    .post-summary {
-	border-bottom: solid 1px;
-	color: #e01b244c;
+    a.index-post-title {
+	color: #080708;
     }
 
-    :root {
-	--bulma-primary-h: 357deg;
-	--bulma-primary-s: 84%;
-	--bulma-primary-l: 56%;
-	--bulma-info-h: 5deg;
+    a.index-post-title:hover {
+	color: #791E94;
     }
 
-    html {
-	background: #f8f8f8;
+    footer {
+	background: #56667A !important;
     }
 
     p {
-	color: #241f31;
-	font-size: 1.5rem;
+	color: #080708;
     }
 
     a {
-	color: #C93530;
+	color: #791E94;
     }
 
     h1 {
-	color: #f66151 !important;
+	color: #791E94 !important;
     }
 
     h2 {
-	color: #e66100 !important;
+	color: #43AAB8 !important;
     }
 
-    strong {
-	color: #e66100;
+    li {
+	color: #080708;
+	font-size: 1.2rem;
     }
 
-    .footer p {
-	color: white;
+    li::marker {
+	color: #43AA8B;
     }
-
-    .footer a {
-	color: #e66100;
-    }
-}
-
-.content {
-    border-radius: 1px;
-    height: 100%;
 }
 
-.sidebar-column {
-    padding-left: 20px;
+.page-title {
+    font-size: var(--bulma-size-3);
 }
 
-.date {
-    text-align: left;
-    font-style: italic;
-    font-size: 1.2rem;
-    padding-bottom: 10px;
+.sr-only {
+    clip:rect(0,0,0,0);
+    border-width:0;
+    height:1px;
+    margin:-1px;
+    overflow:hidden;
+    padding:0;
+    position:absolute;
+    white-space:nowrap;
+    width:1px
 }
 
 .footer {
@@ -422,14 +566,36 @@
     bottom: 0;
     width: 100%;
     height: 60px;
+}
 
+.svg-icon {
+    width:1.5rem;
+    height: 1.5rem;
+    fill: #F4FAFF;
 }
 
-.content-wrap {
-    padding-bottom: 60px;
+.caption {
+    font-style: italic;
+    font-size: 18px;
+}
+
+a.index-post-title {
+    font-size: 2rem;
 }
 
 #page-container {
     position: relative;
     min-height: 100vh;
 }
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.8rem;
+}
+
+p {
+    font-size: 1.2rem;
+}