From 9b77ad2ee7994269f36141398f69f6b01666a9b7 Mon Sep 17 00:00:00 2001
From: Jimmy <jimmehcai@gmail.com>
Date: Mon, 21 Jun 2021 18:19:42 +0200
Subject: [PATCH] refactor: use css flexbox for article page with toc

enable toc for example site
---
 assets/scss/grid.scss                    |  7 ++-----
 assets/scss/partials/layout/article.scss | 24 +++++++-----------------
 assets/scss/partials/sidebar.scss        |  8 +++-----
 exampleSite/config.yaml                  |  2 +-
 layouts/_default/baseof.html             |  2 +-
 layouts/_default/single.html             |  2 +-
 6 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index c0dc9fc..a0eddca 100644
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@@ -92,7 +92,6 @@
 
 main.main {
     min-width: 0;
-    padding: 0 15px;
     max-width: 100%;
     flex-grow: 1;
     padding-top: var(--main-top-padding);
@@ -101,12 +100,10 @@ main.main {
 .main-container {
     min-height: 100vh;
     align-items: flex-start;
+    padding: 0 15px;
+    column-gap: var(--section-separation);
 
     @include respond(md) {
-        padding: 0 10px;
-    }
-
-    @include respond(lg) {
         padding: 0 20px;
     }
 }
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 6d0dea2..618ca54 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -123,8 +123,6 @@
 
     .right-sidebar {
         width: 100%;
-        max-width: unset;
-        grid-column: span 3 / span 3;
         padding: 0;
         display: none;
 
@@ -135,21 +133,17 @@
     }
 
     #article-toolbar {
-        grid-column: span 12 / span 12;
         display: block;
 
-        padding: 0 15px;
-
         @include respond(md) {
             padding: 0;
         }
 
         @include respond(xl) {
-            grid-column: span 1 / span 1;
-
             margin-top: 0;
             position: sticky;
             top: var(--main-top-padding);
+            flex-shrink: 1;
 
             a {
                 background: transparent;
@@ -157,6 +151,7 @@
                 border: 1px solid var(--body-text-color);
                 width: 100%;
                 margin-right: 0;
+
                 svg {
                     flex-shrink: 0;
                 }
@@ -165,23 +160,18 @@
     }
 
     .main-container {
-        display: grid;
-        grid-template-columns: repeat(12, minmax(0, 1fr));
         align-items: start;
-        column-gap: 20px;
+        flex-direction: column;
+
+        @include respond(xl) {
+            flex-direction: row;
+        }
     }
 
     .main {
-        grid-column: span 12 / span 12;
         padding-top: 0;
 
-        @include respond(md) {
-            padding-left: 0;
-            padding-right: 0;
-        }
-
         @include respond(xl) {
-            grid-column: span 8 / span 8;
             padding-top: var(--main-top-padding);
         }
     }
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index f5abe1e..462729d 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -1,5 +1,4 @@
 .sidebar {
-    padding: 0 15px;
     &.sticky {
         @include respond(md) {
             position: sticky;
@@ -22,8 +21,8 @@
 
     @include respond(md) {
         width: auto;
-        margin-right: 1%;
-        padding: var(--main-top-padding) 15px;
+        padding-top: var(--main-top-padding);
+        padding-bottom: var(--main-top-padding);
         max-height: 100vh;
     }
 
@@ -46,7 +45,6 @@
     }
 
     @include respond(lg) {
-        margin-left: 1%;
         padding-top: var(--main-top-padding);
     }
 }
@@ -55,7 +53,7 @@
     z-index: 1;
     transition: box-shadow 0.5s ease;
 
-    padding: 15px 30px;
+    padding: 15px;
 
     @include respond(md) {
         padding: 0;
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 9555af0..bf03343 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -42,7 +42,7 @@ params:
 
     article:
         math: false
-        toc: false
+        toc: true
         license:
             enabled: true
             default: Licensed under CC BY-NC-SA 4.0
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5413c0f..8a5ff95 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
     </head>
     <body class="{{ block `body-class` . }}{{ end }}">
         {{- partial "head/colorScheme" . -}}
-        <div class="container main-container flex on-phone--column {{ block `container-class` . }}{{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
+        <div class="container main-container flex {{ block `container-class` . }}on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
             {{- block "left-sidebar" . -}}
                 {{ partial "sidebar/left.html" . }}
             {{- end -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 50debdd..781ebe1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,7 +8,7 @@
     {{ if (.Scratch.Get "hasTOC") }}
         extended
     {{ else }}
-        {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
+        on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
     {{ end }}
 {{ end }}