From e0e8cb434cdc0c6438e04f65030a10c72574a47c Mon Sep 17 00:00:00 2001
From: zoe <zoe@cat.fritz.box>
Date: Tue, 12 Apr 2022 23:13:48 +0200
Subject: [PATCH] make theme look more modern

---
 assets/scss/colors.scss      | 83 ++++++++++++++++++++++++++++++------
 assets/scss/font.scss        |  4 ++
 assets/scss/layout.scss      | 40 ++++++++++++++---
 assets/scss/style.scss       | 16 ++++++-
 layouts/_default/single.html |  4 +-
 5 files changed, 126 insertions(+), 21 deletions(-)

diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss
index 2a84a50..c8dce12 100644
--- a/assets/scss/colors.scss
+++ b/assets/scss/colors.scss
@@ -1,12 +1,18 @@
 $light-bg: #d2c9a5;
-$light-bg-alt:  #4b726e ;
+$light-bg-alt: #4b726e;
 $light-fg: #4b3d44;
-$light-ln:  #79444a ;
+$light-ln: #79444a;
+$light-accent1: #225091;
+$light-accent2: #733c7c;
+$light-accent3: #007582;
 
-$dark-bg: #4b3d44;
-$dark-bg-alt: #8caba1;
-$dark-fg: #d2c9a5;
-$dark-ln: #c77b58;
+$dark-bg:  #27234c ;
+$dark-bg-alt:    #f2504b   ;
+$dark-fg:    #e88dc3   ;
+$dark-ln:  #f2504b ;
+$dark-accent1: #b296ff;
+$dark-accent2:  #39b8a3 ;
+$dark-accent3:   #dde4ff  ;
 
 $transition-time: 1s;
 
@@ -104,16 +110,69 @@ article {
   }
   background-color: $dark-bg;
   border-color: $dark-bg-alt;
+  transition: $transition-time;
 }
 
-article h2,
-article h3{
-  background-color: $dark-bg-alt;
+article h2 {
+  background-color: $dark-accent1;
   color: $dark-bg;
+  transition: $transition-time;
+}
+article h3 {
+  background-color: $dark-accent2;
+  color: $dark-bg;
+  transition: $transition-time;
 }
 
-article.light h2,
-article.light h3{
-  background-color: $light-bg-alt;
+article.light h3 {
+  background-color: $light-accent2;
   color: $light-bg;
+  transition: $transition-time;
+}
+article h4 {
+  background-color: $dark-accent3;
+  color: $dark-bg;
+  transition: $transition-time;
+}
+
+article.light h4 {
+  background-color: $light-accent3;
+  color: $light-bg;
+  transition: $transition-time;
+}
+
+article.light h2 {
+  background-color: $light-accent1;
+  color: $light-bg;
+  transition: $transition-time;
+}
+
+article h5,
+article h6,
+article a {
+  background-color: $dark-ln;
+  color: $dark-bg;
+  transition: $transition-time;
+}
+
+article.light h5,
+article.light h6,
+article.light a {
+  background-color: $light-ln;
+  color: $light-bg;
+  transition: $transition-time;
+}
+
+a:hover {
+  &.light {
+    color: $light-ln;
+    background-color: transparent;
+  }
+  color: $dark-ln;
+  background-color: transparent;
+}
+
+article.light a:hover {
+  color: $light-ln;
+  background-color: transparent;
 }
diff --git a/assets/scss/font.scss b/assets/scss/font.scss
index 716b0b7..e698513 100644
--- a/assets/scss/font.scss
+++ b/assets/scss/font.scss
@@ -49,3 +49,7 @@ label::after {
   font-family: CaskaydiaCoveMono;
   font-size: $big;
 }
+
+h6 {
+  font-style: italic;
+}
diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index d3aed20..09b066d 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -18,14 +18,15 @@ footer {
 #content {
   min-height: calc(100% - 42pt * 3);
   right: auto;
-  padding-bottom: 84pt;
+  margin-bottom: 84pt;
 }
 
 #content p,
 #content ul,
 #content ol,
-#content table{
-  padding-inline: 4em;
+#content table {
+  margin-right: 24%;
+  margin-left: 24%;
 }
 
 #footer-left {
@@ -62,13 +63,13 @@ footer {
   margin: 0;
 }
 
-#footer-right *{
+#footer-right * {
   display: flex;
   margin-top: auto;
   margin-bottom: auto;
 }
 
-#footer-center *{
+#footer-center * {
   display: flex;
   margin-right: 8pt;
   margin-left: 8pt;
@@ -78,11 +79,36 @@ footer {
   align-items: center;
 }
 
-h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding-right: 6%;
+  padding-top: 12pt;
+  padding-bottom: 12pt;
+  margin-right: 6%;
+  justify-content: right;
+  display: flex;
+  align-items: center;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 article {
-  margin-top: 42pt;
   margin-inline: auto;
 }
+
+.titlecontainer {
+  width: 100%;
+  padding-top: 42pt;
+}
+
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 23d9c04..b039b88 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,4 +1,4 @@
-$radius: 24pt;
+$radius: 48pt;
 $toggle-width: 42pt;
 $toggle-height: 24pt;
 
@@ -65,3 +65,17 @@ input:checked + label::after{
 .togglelabel{
     border: solid;
 }
+
+h1, h2, h3, h4, h5, h6 {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+}
+
+#content p,
+#content ul,
+#content ol,
+#content table {
+    border-left-style: solid;
+    border-width: 0.24em;
+    padding-left: 2em;
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3ea86bc..84eaccb 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,8 @@
 {{ define "main" }}
 <section id="main">
-  <h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1>
+  <div class="titlecontainer">
+  <h1 id="title" class="colorswitch">{{ .Title }}</h1>
+  </div>
     <div>
         {{ with .PrevInSection }}
           <a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>