From ae497c478924fb454783b3953d3ff09188ccdfcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E3=81=AE=E5=85=89?=
 <80254980+Akimitsu333@users.noreply.github.com>
Date: Fri, 21 Oct 2022 19:06:06 +0800
Subject: [PATCH] refactor(grid): avoid sidebar layout shift when main content
 loads slowly (#677)

Co-authored-by: Luguoba <80254980+luguoba@users.noreply.github.com>
---
 assets/scss/grid.scss        | 3 +++
 layouts/_default/baseof.html | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index 84967ef..9284da9 100644
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@@ -3,10 +3,12 @@
     margin-right: auto;
 
     .left-sidebar {
+        order: -3;
         max-width: var(--left-sidebar-max-width);
     }
 
     .right-sidebar {
+        order: -1;
         max-width: var(--right-sidebar-max-width);
 
         /// Display right sidebar when min-width: lg
@@ -73,6 +75,7 @@
 }
 
 main.main {
+    order: -2;
     min-width: 0;
     max-width: 100%;
     flex-grow: 1;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 081277b..83fdaa3 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -18,10 +18,10 @@
             {{- block "left-sidebar" . -}}
                 {{ partial "sidebar/left.html" . }}
             {{- end -}}
+            {{- block "right-sidebar" . -}}{{ end }}
             <main class="main full-width">
                 {{- block "main" . }}{{- end }}
             </main>
-            {{- block "right-sidebar" . -}}{{ end }}
         </div>
         {{ partial "footer/include.html" . }}
     </body>