Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: use css flexbox for article page with toc

Browse Source 
enable toc for example site
This commit is contained in:
Jimmy 2021-06-21 18:19:42 +02:00
parent e1c1bef239
commit 9b77ad2ee7
6 changed files with 15 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/scss/grid.scss
View File

@ -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;
}
}

24
assets/scss/partials/layout/article.scss
View File

@ -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);
}
}

8
assets/scss/partials/sidebar.scss
View File

@ -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;

2
exampleSite/config.yaml
View File

@ -42,7 +42,7 @@ params:
article:
math: false
toc: false
toc: true
license:
enabled: true
default: Licensed under CC BY-NC-SA 4.0

2
layouts/_default/baseof.html
View File

@ -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 -}}

2
layouts/_default/single.html
View File

@ -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 }}