From 3957797943be6dc95ea2a897e0f9d1069a47b304 Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Wed, 20 May 2020 17:35:56 -0700
Subject: Revised color scheme

---
 layouts/_default/list.html           |   8 +-
 layouts/_default/single.html         |   7 +-
 layouts/partials/breadcrumb.html     |  18 ++---
 layouts/partials/footer.html         |  15 ++--
 layouts/partials/hamburgerCross.html |   1 -
 layouts/partials/head.html           |   5 +-
 layouts/partials/header.html         |   4 +-
 layouts/partials/intro.html          |   2 +-
 layouts/partials/menu.html           |   4 +-
 layouts/partials/metadata.html       |   2 +-
 layouts/partials/social.html         |   2 +-
 static/css/main.css                  | 152 +++++++++++++++++++----------------
 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;
-- 
cgit v1.2.3