KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(grid): avoid sidebar layout shift when main content loads slowly (#677)

Browse Source 
Co-authored-by: Luguoba <80254980+luguoba@users.noreply.github.com>
This commit is contained in:
星の光 2022-10-21 19:06:06 +08:00 committed by GitHub
parent 299b80c5f8
commit ae497c4789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/scss/grid.scss
View File

@ -3,10 +3,12 @@
margin-right: auto; margin-right: auto;
.left-sidebar { .left-sidebar {
order: -3;
max-width: var(--left-sidebar-max-width); max-width: var(--left-sidebar-max-width);
} }
.right-sidebar { .right-sidebar {
order: -1;
max-width: var(--right-sidebar-max-width); max-width: var(--right-sidebar-max-width);
/// Display right sidebar when min-width: lg /// Display right sidebar when min-width: lg
@ -73,6 +75,7 @@
} }
main.main { main.main {
order: -2;
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
flex-grow: 1; flex-grow: 1;

2
layouts/_default/baseof.html
View File

@ -18,10 +18,10 @@
{{- block "left-sidebar" . -}} {{- block "left-sidebar" . -}}
{{ partial "sidebar/left.html" . }} {{ partial "sidebar/left.html" . }}
{{- end -}} {{- end -}}
{{- block "right-sidebar" . -}}{{ end }}
<main class="main full-width"> <main class="main full-width">
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</main> </main>
{{- block "right-sidebar" . -}}{{ end }}
</div> </div>
{{ partial "footer/include.html" . }} {{ partial "footer/include.html" . }}
</body> </body>