Add new theme

1 files changed, 132 insertions, 100 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
index bc8b064..ddb53da 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,37 +1,50 @@
 @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%;
+	--bulma-primary-h: 7deg;
+	--bulma-primary-s: 80%;
+	--bulma-primary-l: 64%;
+	--bulma-link-h: 210deg;
+	--bulma-link-s: 32%;
+	--bulma-link-l: 46%;
+	--bulma-info-h: 282deg;
+	--bulma-info-s: 43%;
+	--bulma-info-l: 23%;
     }
 
     body {
-	background: #F4FAFF;
+	background: #E8E9EB;
+    }
+
+    .page-title {
+	color: #054a91;
+	font-size: var(--bulma-size-3);
+    }
+
+    .page-title:hover {
+	color: #617284;
     }
 
     .navigation {
-	align-items: center;
-	display: flex;
-	flex-grow: 0;
-	flex-shrink: 0;
-	line-height: 1.5;
-	padding: .5rem .75rem;
-	position: relative;
-	color: #F4FAFF;
+	color: #ed6a5a;
+	font-size: 20px;
     }
 
     .navigation:hover {
-	color: #43AA8B;
+	color: #b6756d;
     }
 
-    .svg-icon:hover {
-	fill: #43AA8B;
+    .top-bar {
+	border-bottom: 1px solid #ed6a5a;
     }
 
-    .is-info-button {
-	color: #F4FAFF;
+    .rss-icon {
+	width:1.5rem;
+	height: 1.5rem;
+	fill: #e28816;
+    }
+
+    .rss-icon:hover {
+	fill: #b1844b;
     }
 
     a.svg {
@@ -48,115 +61,137 @@
 	left:0;
     }
 
-    .rss-icon {
-	width: 100%;
-	max-width: 8rem;
-	height: auto;
-    }
-
     .svg-icon-body {
 	width: .8rem;
 	height: .8rem;
-	fill: #56667A;
+	fill: #000807;
+    }
+    
+    .tag-icon {
+	width: 1.2rem;
+	height: 1.2rem;
+	fill: #000807;
+    }
+
+    .tag-name {
+	color: #000807;
+	font-size: 1.8em;
     }
 
-    .post-summary {
-	border-bottom: 1px solid #56667A;
+    .tag-name:hover {
+	color: #054a91;
     }
 
     .footer-content {
-	color: #F4FAFF !important;
+	color: #000807 !important;
     }
 
     .caption {
-	color: #56667A;
+	color: #000807;
     }
 
-    a.footer-url {
-	color: #F4FAFF;
+    .pagination-element {
+	color: #054a91;
     }
 
-    a.footer-url:hover {
-	color: #43AA8B;
+    .pagination-element:hover {
+	color: #617284;
     }
 
     a.index-post-title {
-	color: #080708;
+	color: #000807;
     }
 
     a.index-post-title:hover {
-	color: #791E94;
+	color: #054a91;
     }
 
     a.archive-post-title {
-	color: #080708;
+	color: #000807;
     }
 
     a.archive-post-title:hover {
-	color: #791E94;
-    }
-
-    footer {
-	background: #56667A !important;
+	color: #054a91;
     }
 
     p {
-	color: #080708;
+	color: #000807;
     }
 
     a {
-	color: #791E94;
+	color: #054a91;
     }
 
     h1 {
-	color: #791E94 !important;
+	color: #4F759B !important;
     }
 
     h2 {
-	color: #43AAB8 !important;
+	color: #610F7F !important;
+    }
+
+    h3 {
+	color: #9DC4B5 !important;
     }
 
     li {
-	color: #080708;
+	color: #000807;
 	font-size: 1.2rem;
     }
 
     li::marker {
-	color: #43AA8B;
+	color: #4D9DE0;
     }
 }
 
 @media(prefers-color-scheme: dark) {
     :root {
-	--bulma-primary-h: 213deg;
-	--bulma-primary-s: 17%;
-	--bulma-info-h: 286deg;
-	--bulma-info-s: 66%;
-	--bulma-info-l: 35%;
-	--bulma-body-color: #EBEBEB;
+	--bulma-primary-h: 207deg;
+	--bulma-primary-s: 70%;
+	--bulma-primary-l: 59%;
+	--bulma-link-h: 208deg;
+	--bulma-link-s: 32%;
+	--bulma-link-l: 55%;
+	--bulma-info-h: 253deg;
+	--bulma-info-s: 30%;
+	--bulma-info-l: 55%;
+	--bulma-body-color: #FBF9FF;
     }
 
     body {
 	background: #2F2F37;
     }
 
+    .page-title {
+	color: #3BB273;
+	font-size: var(--bulma-size-3);
+    }
+
+    .page-title:hover {
+	color: #5d9979;
+    }
+
     .navigation {
-	align-items: center;
-	display: flex;
-	flex-grow: 0;
-	flex-shrink: 0;
-	line-height: 1.5;
-	padding: .5rem .75rem;
-	position: relative;
-	color: #F4FAFF;
+	color: #4D9DE0;
+	font-size: 20px;
     }
 
     .navigation:hover {
-	color: #43AA8B;
+	color: #668eb0;
+    }
+
+    .top-bar {
+	border-bottom: 1px solid #4D9DE0;
+    }
+
+    .rss-icon {
+	width:1.5rem;
+	height: 1.5rem;
+	fill: #e28816;
     }
 
-    .svg-icon:hover {
-	fill: #43AA8B;
+    .rss-icon:hover {
+	fill: #b1844b;
     }
 
     .is-info-button {
@@ -177,20 +212,25 @@
 	left:0;
     }
 
-    .rss-icon {
-	width: 100%;
-	max-width: 8rem;
-	height: auto;
-    }
-
     .svg-icon-body {
 	width: .8rem;
 	height: .8rem;
 	fill: #EBEBEB;
     }
+    
+    .tag-icon {
+	width: 1.2rem;
+	height: 1.2rem;
+	fill: #EBEBEB;
+    }
 
-    .post-summary {
-	border-bottom: 1px solid #56667A;
+    .tag-name {
+	color: #EBEBEB;
+	font-size: 1.8em;
+    }
+
+    .tag-name:hover {
+	color: #668eb0;
     }
 
     .footer-content {
@@ -201,12 +241,16 @@
 	color: #E0E0E0;
     }
 
-    a.footer-url {
-	color: #F4FAFF;
+    .pagination-element {
+	color: #4D9DE0;
+    }
+
+    .pagination-element:hover {
+	color: #668eb0;
     }
 
-    a.footer-url:hover {
-	color: #43AA8B;
+    a.footer-url {
+	color: #F4FAFF;
     }
 
     a.index-post-title {
@@ -214,7 +258,7 @@
     }
 
     a.index-post-title:hover {
-	color: #2191FB;
+	color: #4D9DE0;
     }
 
     a.archive-post-title {
@@ -222,11 +266,7 @@
     }
 
     a.archive-post-title:hover {
-	color: #2191FB;
-    }
-
-    footer {
-	background: #56667A !important;
+	color: #4D9DE0;
     }
 
     p {
@@ -234,15 +274,19 @@
     }
 
     a {
-	color: #2191FB;
+	color: #668eb0;
     }
 
     h1 {
-	color: #2191FB !important;
+	color: #4D9DE0 !important;
     }
 
     h2 {
-	color: #AB4967 !important;
+	color: #E15554 !important;
+    }
+
+    h3 {
+	color: #7768AE !important;
     }
 
     li {
@@ -251,16 +295,12 @@
     }
 
     li::marker {
-	color: #2191FB;
+	color: #4D9DE0;
     }
 }
 
-.page-title {
-    font-size: var(--bulma-size-3);
-}
-
 .sr-only {
-    clip:rect(0,0,0,0);
+    clip: rect(0,0,0,0);
     border-width:0;
     height:1px;
     margin:-1px;
@@ -271,12 +311,6 @@
     width:1px
 }
 
-.footer {
-    position: absolute;
-    width: 100%;
-    height: 60px;
-}
-
 .svg-icon {
     width:1.5rem;
     height: 1.5rem;
@@ -288,8 +322,6 @@
     font-size: 18px;
 }
 
-
-
 a.index-post-title {
     font-size: 2rem;
 }