From ee4738b245d96795179f8af2054af4c983be096b Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Mon, 4 May 2020 03:23:55 -0700
Subject: [PATCH] Add redesign CSS

---
 themes/vanilla/assets/scss/sidenotes.scss   |  2 +-
 themes/vanilla/assets/scss/style.scss       | 56 ++++++++++++++-------
 themes/vanilla/assets/scss/variables.scss   |  2 +-
 themes/vanilla/layouts/_default/baseof.html |  1 +
 themes/vanilla/layouts/_default/list.html   |  2 +-
 themes/vanilla/layouts/blog/single.html     |  4 +-
 themes/vanilla/layouts/index.html           |  2 +-
 themes/vanilla/layouts/partials/head.html   |  2 +-
 themes/vanilla/layouts/tags/list.html       |  2 +-
 themes/vanilla/layouts/tags/terms.html      |  2 +-
 10 files changed, 49 insertions(+), 26 deletions(-)
diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss
index 3ccb66a..2898d2c 100644
--- a/themes/vanilla/assets/scss/sidenotes.scss
+++ b/themes/vanilla/assets/scss/sidenotes.scss
@@ -40,7 +40,7 @@ $sidenote-highlight-border-width: .2rem;
 }
 
 .sidenote-label {
-    border-bottom: .2rem solid $primary-color;
+    border-bottom: .2rem dashed $primary-color;
 }
 
 .sidenote-checkbox {
diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss
index d086c4b..cc70b60 100755
--- a/themes/vanilla/assets/scss/style.scss
+++ b/themes/vanilla/assets/scss/style.scss
@@ -14,10 +14,10 @@ h1, h2, h3, h4, h5, h6 {
   margin-top: .5rem;
   font-family: $font-heading;
   font-weight: normal;
-  text-align: left;
+  text-align: center;
 
   a {
-    color: black;
+    border-bottom: none;
 
     &:hover {
       color: $primary-color;
@@ -37,6 +37,10 @@ pre code {
     background-color: $code-color;
 }
 
+div.highlight table pre {
+    margin: 0;
+}
+
 .container {
   position: relative;
   margin: auto;
@@ -69,28 +73,33 @@ pre code {
 }
 
 nav {
-  background-color: $primary-color;
   width: 100%;
-  margin: 1rem 0rem 1rem 0rem;
-}
+  margin: 0rem 0rem 1rem 0rem;
 
-nav a {
-  padding: .75em;
-  text-decoration: none;
-  color: white;
-  display: inline-block;
-
-  transition: color .25s, background-color .25s;
-
-  &:hover {
-    color: $primary-color;
-    background-color: white;
+  .container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
   }
 
+  a {
+    padding: 0.25rem 0.75rem 0.25rem .75rem;
+    text-decoration: none;
+    color: black;
+    display: inline-block;
+    border-bottom: none;
+    transition: color .25s;
+    white-space: nowrap;
+
+    &:hover {
+        color: $primary-color;
+    }
+  }
 }
 
 .post-subscript {
   color: #8f8f8f;
+  text-align: center;
 }
 
 .post-content {
@@ -122,8 +131,9 @@ h6 {
 }
 
 a {
-  color: $primary-color-dark;
+  color: black;
   text-decoration: none;
+  border-bottom: .2rem solid $primary-color;
 }
 
 img {
@@ -150,6 +160,18 @@ td {
     padding: 0.5rem;
 }
 
+hr.header-divider {
+    background-color: $primary-color;
+    height: 0.3rem;
+    border: none;
+    border-radius: 0.15rem;
+}
+
+ul.page-list a {
+  border-bottom: none;
+  display: inline-block;
+}
+
 .katex-html {
     white-space: nowrap;
 }
diff --git a/themes/vanilla/assets/scss/variables.scss b/themes/vanilla/assets/scss/variables.scss
index 32b5920..8943513 100644
--- a/themes/vanilla/assets/scss/variables.scss
+++ b/themes/vanilla/assets/scss/variables.scss
@@ -8,7 +8,7 @@ $code-color-dark: darken($code-color, 10%);
 $border-color: #bfbfbf;
 
 $font-heading: "Lora", serif;
-$font-body: "Raleway", serif;
+$font-body: "Noto Sans JP", serif;
 $font-code: "Inconsolata", monospace;
 
 $standard-border: $standard-border-width solid $border-color;
diff --git a/themes/vanilla/layouts/_default/baseof.html b/themes/vanilla/layouts/_default/baseof.html
index 73d7173..e889cf2 100644
--- a/themes/vanilla/layouts/_default/baseof.html
+++ b/themes/vanilla/layouts/_default/baseof.html
@@ -3,6 +3,7 @@
     {{- partial "head.html" . -}}
     <body>
         {{- partial "header.html" . -}}
+        <div class="container"><hr class="header-divider"></div>
         <main class="container">
         {{- block "main" . }}{{- end }}
         </main>
diff --git a/themes/vanilla/layouts/_default/list.html b/themes/vanilla/layouts/_default/list.html
index 938d9ce..cc3ccf5 100644
--- a/themes/vanilla/layouts/_default/list.html
+++ b/themes/vanilla/layouts/_default/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <h2>{{ .Title }}</h2>
 
-<ul>
+<ul class="page-list">
     {{ range .Pages.ByDate.Reverse }}
     <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
     {{ end }}
diff --git a/themes/vanilla/layouts/blog/single.html b/themes/vanilla/layouts/blog/single.html
index 92a7886..3a38290 100644
--- a/themes/vanilla/layouts/blog/single.html
+++ b/themes/vanilla/layouts/blog/single.html
@@ -1,12 +1,12 @@
 {{ define "main" }}
 <h2>{{ .Title }}</h2>
 <div class="post-subscript">
-    <p>Posted on {{ .Date.Format "January 2, 2006" }}.</p>
-    <p>Tags:
+    <p>
         {{ range .Params.tags }}
         <a class="button" href="{{ $.Site.BaseURL }}/tags/{{ . | urlize }}">{{ . }}</a>
         {{ end }}
     </p>
+    <p>Posted on {{ .Date.Format "January 2, 2006" }}.</p>
 </div>
 
 <div class="post-content">
diff --git a/themes/vanilla/layouts/index.html b/themes/vanilla/layouts/index.html
index 57d786e..69a340d 100644
--- a/themes/vanilla/layouts/index.html
+++ b/themes/vanilla/layouts/index.html
@@ -2,7 +2,7 @@
 {{ .Content }}
 
 Recent posts:
-<ul>
+<ul class="page-list">
 {{ range first 10 (where (where .Site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") }}
 <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
 {{ end }}
diff --git a/themes/vanilla/layouts/partials/head.html b/themes/vanilla/layouts/partials/head.html
index 0ec23af..7668824 100644
--- a/themes/vanilla/layouts/partials/head.html
+++ b/themes/vanilla/layouts/partials/head.html
@@ -3,7 +3,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#1dc868" />
 
-    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Lora|Raleway" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Noto+Sans+JP&family=Lora&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
     {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
     {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
diff --git a/themes/vanilla/layouts/tags/list.html b/themes/vanilla/layouts/tags/list.html
index 953ed8e..c1f9692 100644
--- a/themes/vanilla/layouts/tags/list.html
+++ b/themes/vanilla/layouts/tags/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 <h2>Tagged "{{ .Title }}"</h2>
 
-<ul>
+<ul class="page-list">
     {{ range .Pages.ByDate.Reverse }}
     <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
     {{ end }}
diff --git a/themes/vanilla/layouts/tags/terms.html b/themes/vanilla/layouts/tags/terms.html
index c8d496a..099642b 100644
--- a/themes/vanilla/layouts/tags/terms.html
+++ b/themes/vanilla/layouts/tags/terms.html
@@ -2,7 +2,7 @@
 <h2>{{ .Title }}</h2>
 Below is a list of all the tags ever used on this site.
 
-<ul>
+<ul class="page-list">
     {{ range sort .Pages "Title" }}
     <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
     {{ end }}
