Revised color scheme

12 files changed, 117 insertions, 103 deletions

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index bf96aa9..f435c20 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}

 

-<h1 style="margin: 0 0 0.5em 0;">

-  {{- .Title -}}

+<h1 style="margin: 0 0 0.5em 0; font-size: 2.5em;">

+  {{ if eq .Kind "taxonomy" }}#{{ end }}{{- .Title -}}

 </h1>

 

 {{ range (.Paginator .Site.Params.theme.paginateNum).Pages }}

@@ -9,14 +9,14 @@
   class="list-sections"

   style="border-top: dashed 1px; margin: 0; padding: 12px 0;"

 >

-  <span style="font-size: 0.65em; font-style: italic;"

+  <span style="font-size: 0.85em; font-style: italic;"

     ><time>{{- dateFormat .Site.Params.theme.dateFormat .Date }}</time> &middot;

     {{.Site.Params.author }}</span

   >

   <a href="{{ .Permalink | relURL }}">

     <h2 style="margin: 0; font-size: 1.2em;">{{ .Title -}}</h2>

   </a>

-  <p style="margin: 0; font-size: 0.8em;">

+  <p style="margin: 0; font-size: 0.9em;">

     {{ .Summary | plainify | truncate 100 }}

   </p>

 </div>

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e61397a..9a029ff 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,7 +2,7 @@
 <div

   style="display: flex; flex-direction: column;"

 >

-  <h1 style="margin: 0 0 0.25em 0; font-size: 2em;">

+  <h1 style="margin: 0 0 0.25em 0; font-size: 2.5em;">

     {{- .Title -}}

   </h1>

   <div class="sharing-icons">

@@ -12,8 +12,9 @@
     {{ partial "metadata" . }}

   </div>

 </div>

-<div style="margin-bottom: 3.5em; font-style: italic; font-size: 0.9em;">by {{ .Site.Params.author }} &middot;

-  <time>{{ dateFormat .Site.Params.theme.dateFormat .Date }}</time></div>

+<div style="margin-bottom: 1.5em; font-style: italic; font-size: 0.9em;">by {{ .Site.Params.author }} &middot;

+  <time>{{ dateFormat .Site.Params.theme.dateFormat .Date }}</time>

+</div>

 <div class="content">

   {{ .Content }}

 </div>

diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
index 6de8efa..32c6c5e 100644
--- a/layouts/partials/breadcrumb.html
+++ b/layouts/partials/breadcrumb.html
@@ -1,27 +1,27 @@
 <div

   class="breadcrumb"

-  style="padding: 12px 0; line-height: 0.85em; text-align: right;"

+  style="padding: 12px 0; line-height: 0.9em; text-align: right;"

 >

   {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}

 </div>

+

 {{ define "breadcrumbnav" }}

 {{ if .p1.Parent }}

 {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 ) }}

 {{ else if not .p1.IsHome }}

 {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}

 {{ end }}

-<span style="font-size: 0.8em;">

-  {{ if .p1.Parent }}/{{- end -}}

+

+<span style="font-size: 0.9em;">

+  {{- if .p1.Parent -}}/{{- end -}}

   <a

     href="{{ if eq .p1 .p2 }}#{{ else }}{{ .p1.Permalink }}{{ end }}"

     class="breadcrumb-link {{ if eq .p1 .p2 }}active{{ end }}"

-    style="margin-left: 5px; font-size: 0.85em; color:{{ if eq .p1 .p2 }}var(--primaryColor){{else}}var(--textColor){{ end }};"

+    style="margin-left: 5px; font-size: 0.9em; color:{{ if eq .p1 .p2 }}var(--primaryHover){{else}}var(--primary){{ end }};"

     >{{- if .p1.IsHome -}}<i>{{- partial "icons/home" . -}}</i>{{- end -}}

-    {{- if gt (len .p1.Title) 15 -}}

-    {{- substr .p1.Title 0 15 -}}...

-    {{- else -}}

-    {{- .p1.Title -}}

-    {{- end -}}</a

+  

+    {{- .p1.Title | truncate 15 -}}

+ </a

   >

 </span>

 {{ end }}

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 29248e6..d51d779 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer style="display: flex; flex-direction: column; margin-top: 2em;">

+<footer style="display: flex; flex-direction: column; margin: 2em 0 0 0;">

   <div

     style="

       position: fixed;

@@ -14,13 +14,13 @@
       style="

         display: none;

         transform: rotate(-90deg);

-        background-color: var(--bgLighter);

+        background-color: var(--bgAbove);

         border-radius: 50%;

-        border: solid 2px var(--primaryColor);

+        border: solid 2px var(--primary);

         padding: 10px;

         position: absolute;

         cursor: pointer;

-        right: 0;

+        right: 10px;

         font-size: 1.25em;

       "

       >{{ partial "icons/chevron" . }}</i

@@ -36,9 +36,10 @@
   {{ end }}

   <div

     style="

-      font-size: 0.8em;

-      background-color: var(--bgDarker);

-      box-shadow: 0px 0px 2px 2px black;

+      font-size: 0.9em;

+      background-color: var(--bgAbove);

+      box-shadow: 0px 0px 2px 2px var(--bgBelow);

+      padding-bottom: 5px;

     "

   >

     <div style="display: flex; flex-wrap: wrap;">

diff --git a/layouts/partials/hamburgerCross.html b/layouts/partials/hamburgerCross.html
index c93c344..8f2c1cd 100644
--- a/layouts/partials/hamburgerCross.html
+++ b/layouts/partials/hamburgerCross.html
@@ -7,7 +7,6 @@
     z-index: 50;

     width: 50px;

     height: 50px;

-    font-size: 1.2em;

   "

   onclick="myFunction()"

 >

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index be7aba8..6559bce 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -22,10 +22,7 @@
   {{ end -}}

 

   <link rel="stylesheet" href="{{ `/css/main.css` | relURL }}" />

-  <link

-    href="https://fonts.googleapis.com/css2?family=Mukta:wght@300;700&display=swap"

-    rel="stylesheet"

-  />

+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Fira+Code&display=swap" rel="stylesheet"> 

 

   <style>

     html {

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 851af18..36976a1 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -7,8 +7,8 @@
   z-index: 10;

   transition: all 0.3s;

   height: {{ if not .IsHome}}60px{{ else }}0{{ end }};

-  box-shadow: {{ if not .IsHome}} 0px 0px 2px 2px black {{ else }} none {{ end }};

-  background-color: {{ if not .IsHome}} var(--bgDarker) {{ else }} inherit {{ end }};

+  box-shadow: {{ if not .IsHome}} 0px 0px 2px 2px var(--bgBelow) {{ else }} none {{ end }};

+  background-color: {{ if not .IsHome}} var(--bgAbove) {{ else }} inherit {{ end }};

   "

 >

   {{ partial "hamburgerCross.html" . }}{{ if not .IsHome}}

diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
index 2c32f80..2da9240 100644
--- a/layouts/partials/intro.html
+++ b/layouts/partials/intro.html
@@ -5,7 +5,7 @@
     flex-wrap: wrap;

     align-items: center;

     justify-content: center;

-    color: var(--primaryColor);

+    color: var(--primary);

     text-align: center;

     margin-bottom: 1em;

   "

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 9868f4d..0a87cee 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -16,7 +16,7 @@
   <div

     class="menu-container"

     style="

-      background-color: var(--bgColor);

+      background-color: var(--bgAbove);

       display: flex;

       flex-direction: column;

       justify-content: center;

@@ -24,7 +24,7 @@
       padding: 6px;

       border: solid 1px var(--textColor);

       border-radius: 5px;

-      box-shadow: 3px 3px 5px 2px black;

+      box-shadow: 3px 3px 5px 2px var(--bgBelow);

     "

   >

     <a class="menu-item" href="/"><i>{{ partial "icons/home" . }}</i>Home</a>

diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
index 3e81e9c..eb12725 100644
--- a/layouts/partials/metadata.html
+++ b/layouts/partials/metadata.html
@@ -9,7 +9,7 @@
         class="metadata-items"
         href="{{ $name | relURL }}/{{ . | urlize }}"
         title="{{ $name }}"
-        style="margin-right: 0.5em; text-decoration: underline; font-size: 0.8em;"
+        style="margin-right: 0.5em; text-decoration: underline; font-size: 0.9em;"
       >
         {{- . -}}
       </a>
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
index cf5ca2a..13ca40a 100644
--- a/layouts/partials/social.html
+++ b/layouts/partials/social.html
@@ -14,7 +14,7 @@
       class="social-icon"

       style="

         display: inline-flex;

-        font-size: 1.4em;

+        font-size: 1.6em;

         padding: 10px;

         border-radius: 50%;

         align-self: center;

diff --git a/static/css/main.css b/static/css/main.css
index c6b618d..793687d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,13 +1,15 @@
 :root {

-  --bgColor: #381460;

-  --bgDarker: #2b0f49;

-  --bgLighter: #4a2d69;

-  --bgTransparent: #19092be3;

-  --textColor: #ffbd69;

-  --primaryColor: #fe346e;

-  --primaryHoverColor: #fe346e;

+  --bg: #212121;

+  --bgAbove: #333333;

+  --bgBelow: #161616;

+  --bgPre: #272822;

+  --bgTransparent: #181818e3;

+  --textColor: white;

+  --primary: #fc929e;

+  --primaryHover: #ff596d;

   --inactiveColor: gray;

-  --codeColor: #51ef5b;

+  --codeColor: white;

+  --highlight: #c88838;

 }

 html {

   margin: 0;

@@ -23,28 +25,32 @@ body {
   max-width: 960px;

   margin: auto;

   color: var(--textColor);

-  background-color: var(--bgColor);

-  font-family: "Mukta", sans-serif;

-  font-weight: 300;

-  font-size: 1.2em;

+  background-color: var(--bg);

+  font-family: "Open Sans", sans-serif;

+  font-size: 1.1em;

+  font-weight: 400;

 }

 header,

 footer {

   flex: none;

 }

+footer *:hover {

+  text-decoration: none !important;

+}

 main {

   flex: 1 1 0%;

 }

-code {

-  font-size: 1em;

+code,

+kbd {

+  font-size: 1em !important;

   color: var(--codeColor);

+  font-family: "Fira Code", monospace;

 }

 pre {

+  font-size: 0.9em;

   padding: 0.5em;

-  border: solid 1px;

   border-radius: 5px;

-  font-size: 0.85em;

-  background-color: var(--bgDarker) !important;

+  background-color: var(--bgPre) !important;

   overflow: auto;

 }

 h1,

@@ -53,27 +59,38 @@ h3,
 h4,

 h5,

 h6 {

-  font-weight: 300;

   line-height: 1.2em;

+  margin: 1em 0 0.5em 0;

+  font-weight: 400;

 }

 h1 {

-  font-size: 1.9em;

+  font-size: 2.1em;

 }

 h2 {

-  font-size: 1.6em;

+  font-size: 1.9em;

 }

 h3 {

-  font-size: 1.3em;

+  font-size: 1.7em;

 }

 h4 {

+  font-size: 1.5em;

+}

+h5 {

+  font-size: 1.3em;

+}

+h6 {

   font-size: 1.1em;

 }

+p {

+  margin: 0.5em 0 1.25em 0;

+  line-height: 1.5em;

+}

 a {

-  color: var(--primaryColor);

+  color: var(--primary);

   text-decoration: none;

 }

 a:hover {

-  color: var(--textColor);

+  color: var(--primaryHover);

   text-decoration: underline;

 }

 .metadata-items::before {

@@ -88,7 +105,7 @@ blockquote {
   padding-top: 5px;

   padding-bottom: 5px;

   border-left: solid 5px var(--textColor);

-  background-color: var(--bgLighter);

+  background-color: var(--bgAbove);

   border-radius: 5px;

 }

 blockquote > p {

@@ -98,7 +115,7 @@ strong {
   font-weight: 700;

 }

 .footnotes {

-  font-size: 0.8em;

+  font-size: 0.9em;

 }

 .menu-item {

   display: flex;

@@ -106,7 +123,7 @@ strong {
   align-items: center;

   font-size: 1.2em !important;

   width: 100%;

-  padding: 0 0.5em;

+  padding: 0.5em 1em;

   box-sizing: border-box;

 }

 .menu-item > i {

@@ -114,7 +131,7 @@ strong {
   margin-right: 5px;

 }

 .menu-item:hover {

-  background-color: var(--bgLighter);

+  background-color: var(--bg);

   text-decoration: none;

 }

 table {

@@ -122,7 +139,7 @@ table {
 }

 thead {

   border-top: solid 3px var(--textColor);

-  background-color: var(--bgLighter);

+  background-color: var(--bgBelow);

 }

 tbody {

   border-bottom: solid 2px var(--textColor);

@@ -130,20 +147,18 @@ tbody {
 th,

 td {

   border: solid 1px var(--textColor);

-  padding: 0 0.5em;

+  padding: 0.25em 0.5em;

 }

 mark {

-  background-color: var(--textColor);

-  color: var(--bgColor);

-  border-radius: 5px;

-  padding: 0 3px;

+  background-color: var(--highlight);

+  color: var(--bg);

 }

 kbd {

-  background-color: var(--bgLighter);

-  padding: 0 4px;

+  background-color: var(--bgAbove);

+  padding: 4px;

   margin: 0 2px;

   border-radius: 5px;

-  box-shadow: 2px 2px 2px 2px var(--bgDarker);

+  box-shadow: 2px 2px 5px 2px var(--bgBelow);

 }

 .hamburger-cross {

   display: flex;

@@ -156,9 +171,10 @@ kbd {
   display: inline-flex;

   border-radius: 50%;

   position: absolute;

-  padding: 12px;

-  background-color: var(--primaryColor);

-  color: var(--bgDarker);

+  padding: 10px;

+  background-color: var(--primaryHover);

+  color: var(--bgBelow);

+  font-size: 1.3em;

 }

 .social-icons > a {

   border-radius: 50%;

@@ -166,7 +182,7 @@ kbd {
   display: flex;

 }

 .social-icon:hover {

-  background-color: var(--bgLighter);

+  background-color: var(--bgBelow);

 }

 .sharing-icon {

   border-radius: 50%;

@@ -175,12 +191,12 @@ kbd {
 .sharing-icon > i {

   display: inline-flex;

   border-radius: 50%;

-  padding: 12px;

-  font-size: 1.2em;

+  padding: 9px;

+  font-size: 1.5em;

 }

 .sharing-icon > i:hover {

-  background-color: var(--bgLighter);

-  color: var(--textColor);

+  background-color: var(--bgBelow);

+  color: var(--primaryHover);

 }

 ul.pagination {

   display: flex;

@@ -191,22 +207,22 @@ ul.pagination {
 }

 li.page-item {

   font-size: 0.9em;

-  padding: 1px 12px;

+  padding: 6px 12px;

 }

 li.page-item {

-  border-top: 1px solid var(--primaryColor);

-  border-bottom: 1px solid var(--primaryColor);

-  border-left: 1px solid var(--primaryColor);

-  background-color: var(--bgColor);

+  border-top: 1px solid var(--primary);

+  border-bottom: 1px solid var(--primary);

+  border-left: 1px solid var(--primary);

+  background-color: var(--bg);

 }

 li.page-item.disabled a {

   color: var(--inactiveColor);

 }

 li.page-item.active {

-  background-color: var(--primaryColor);

+  background-color: var(--primary);

 }

 li.page-item.active a {

-  color: var(--bgColor);

+  color: var(--bg);

   font-weight: 700;

 }

 li.page-item:first-child {

@@ -214,14 +230,11 @@ li.page-item:first-child {
 }

 li.page-item:last-child {

   border-radius: 0 10px 10px 0;

-  border-right: 1px solid var(--primaryColor);

-}

-.breadcrumb-link:hover {

-  text-decoration: underline;

+  border-right: 1px solid var(--primary);

 }

 .next-link,

 .previous-link {

-  padding: 3px;

+  padding: 10px 3px;

   border-radius: 5px;

   display: inline-block;

   text-align: center;

@@ -230,43 +243,43 @@ li.page-item:last-child {
 }

 .previous-link.active,

 .next-link.active {

-  color: var(--primaryColor);

-  background-color: var(--bgColor);

-  border: solid 1px var(--primaryColor);

+  color: var(--primary);

+  background-color: var(--bg);

+  border: solid 1px var(--primary);

+  cursor: pointer;

 }

 .next-link.active:hover,

 .previous-link.active:hover {

-  color: var(--bgColor);

+  color: var(--bg);

   text-decoration: none;

-  background-color: var(--primaryHoverColor);

+  background-color: var(--primary);

 }

 .previous-link.disabled,

 .next-link.disabled {

   color: var(--inactiveColor);

-  border: solid 1px;

-  border-color: var(--inactiveColor);

+  border: solid 1px var(--inactiveColor);

 }

 .show-more-info > svg {

   animation: blinkingText 1s infinite;

   transition: all 0.5s;

-  color: var(--bgColor);

+  color: var(--bg);

 }

 .show-more-info > svg:hover {

   animation: none;

   transition: all 0.8s;

 }

 .show-more-info {

-  background-color: var(--primaryColor);

+  background-color: var(--primary);

 }

 .show-more-info:hover {

   cursor: pointer;

 }

 @keyframes blinkingText {

   0% {

-    color: var(--bgColor);

+    color: var(--bg);

   }

   49% {

-    color: var(--bgColor);

+    color: var(--bg);

   }

   60% {

     color: transparent;

@@ -275,9 +288,12 @@ li.page-item:last-child {
     color: transparent;

   }

   100% {

-    color: var(--bgColor);

+    color: var(--bg);

   }

 }

+.content {

+  border-top: dashed 1px var(--textColor);

+}

 .content img {

   max-width: 95%;

   display: block;