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

Add gap property to sidebar and main container

Browse Source
This commit is contained in:
Jimmy Cai 2022-03-03 20:17:39 +00:00 committed by GitHub
parent 0c23d0c49d
commit 2fa2eaea4e
14 changed files with 65 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/scss/grid.scss
View File

@ -11,7 +11,7 @@
/// Display right sidebar when min-width: lg
@include respond(lg) {
display: block;
display: flex;
}
}
@ -76,6 +76,10 @@ main.main {
min-width: 0;
max-width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: var(--section-separation);
@include respond(md) {
padding-top: var(--main-top-padding);
}

9
assets/scss/partials/article.scss
View File

@ -2,6 +2,7 @@
.article-list {
display: flex;
flex-direction: column;
gap: var(--section-separation);
article {
display: flex;
@ -17,10 +18,6 @@
box-shadow: var(--shadow-l2);
}
&:not(:last-of-type) {
margin-bottom: var(--section-separation);
}
.article-image {
img {
width: 100%;
@ -151,10 +148,6 @@
--image-size: 60px;
}
& + .pagination {
margin-top: var(--section-separation);
}
article {
& > a {
display: flex;

1
assets/scss/partials/footer.scss
View File

@ -2,7 +2,6 @@ footer.site-footer {
padding: 20px 0 var(--section-separation) 0;
font-size: 1.4rem;
line-height: 1.75;
margin-top: var(--section-separation);
&:before {
content: "";

3
assets/scss/partials/layout/archives.scss
View File

@ -1,3 +0,0 @@
.archives-group {
margin-bottom: var(--section-separation);
}

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

@ -13,10 +13,6 @@
box-shadow: var(--shadow-l1);
overflow: hidden;
&.main-article {
margin-bottom: var(--section-separation);
}
.article-header {
.article-image {
img {
@ -211,10 +207,6 @@
}
}
.related-contents--wrapper {
margin-bottom: var(--section-separation);
}
.related-contents {
overflow-x: auto;
padding-bottom: 15px;

2
assets/scss/partials/layout/list.scss
View File

@ -3,7 +3,6 @@
background-color: var(--card-background);
padding: var(--small-card-padding);
box-shadow: var(--shadow-l1);
margin-bottom: var(--section-separation);
display: flex;
align-items: center;
@ -49,7 +48,6 @@
}
.subsection-list {
margin-bottom: var(--section-separation);
overflow-x: auto;
.article-list--tile {

1
assets/scss/partials/layout/search.scss
View File

@ -1,5 +1,4 @@
.search-form {
margin-bottom: var(--section-separation);
position: relative;
--button-size: 80px;

1
assets/scss/partials/pagination.scss
View File

@ -5,7 +5,6 @@
border-radius: var(--card-border-radius);
overflow: hidden;
flex-wrap: wrap;
margin: var(--section-separation) 0;
.page-link {
padding: 16px 32px;

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

@ -39,6 +39,8 @@
.right-sidebar {
width: 100%;
display: none;
flex-direction: column;
gap: var(--widget-separation);
&.sticky {
top: 0;
@ -122,21 +124,6 @@
}
}
.sidebar {
.widget {
margin-bottom: var(--section-separation);
&:not(:last-of-type):after {
content: "";
width: 100px;
height: 2px;
background-color: var(--body-text-color);
display: block;
margin-top: var(--section-separation);
}
}
}
[data-scheme="dark"] {
#dark-mode-toggle {
color: var(--accent-color);

3
assets/scss/partials/widgets.scss
View File

@ -1,4 +1,7 @@
.widget {
display: flex;
flex-direction: column;
.widget-icon {
svg {
width: 32px;

1
assets/scss/style.scss
View File

@ -19,7 +19,6 @@
@import "partials/pagination.scss";
@import "partials/sidebar.scss";
@import "partials/base.scss";
@import "partials/layout/archives.scss";
@import "partials/layout/article.scss";
@import "partials/layout/list.scss";
@import "partials/layout/404.scss";

1
assets/scss/variables.scss
View File

@ -161,4 +161,5 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
:root {
--menu-icon-separation: 40px;
--container-padding: 15px;
--widget-separation: var(--section-separation);
}

94
layouts/_default/list.html
View File

@ -1,46 +1,48 @@
{{ define "main" }}
<h3 class="section-title">
{{ if eq .Parent (.GetPage "/") }}
{{ T "list.section" }}
{{ else }}
{{ .Parent.Title }}
{{ end }}
</h3>
<div class="section-card">
<div class="section-details">
<h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
<h1 class="section-term">{{ .Title }}</h1>
{{ with .Params.description }}
<h2 class="section-description">{{ . }}</h2>
<header>
<h3 class="section-title">
{{ if eq .Parent (.GetPage "/") }}
{{ T "list.section" }}
{{ else }}
{{ .Parent.Title }}
{{ end }}
</div>
</h3>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
{{ if $image.exists }}
<div class="section-image">
{{ if $image.resource }}
{{- $Permalink := $image.resource.RelPermalink -}}
{{- $Width := $image.resource.Width -}}
{{- $Height := $image.resource.Height -}}
{{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
{{- $thumbnail := $image.resource.Fill "120x120" -}}
{{- $Permalink = $thumbnail.RelPermalink -}}
{{- $Width = $thumbnail.Width -}}
{{- $Height = $thumbnail.Height -}}
{{- end -}}
<img src="{{ $Permalink }}"
width="{{ $Width }}"
height="{{ $Height }}"
loading="lazy">
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy" />
<div class="section-card">
<div class="section-details">
<h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
<h1 class="section-term">{{ .Title }}</h1>
{{ with .Params.description }}
<h2 class="section-description">{{ . }}</h2>
{{ end }}
</div>
{{ end }}
</div>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
{{ if $image.exists }}
<div class="section-image">
{{ if $image.resource }}
{{- $Permalink := $image.resource.RelPermalink -}}
{{- $Width := $image.resource.Width -}}
{{- $Height := $image.resource.Height -}}
{{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
{{- $thumbnail := $image.resource.Fill "120x120" -}}
{{- $Permalink = $thumbnail.RelPermalink -}}
{{- $Width = $thumbnail.Width -}}
{{- $Height = $thumbnail.Height -}}
{{- end -}}
<img src="{{ $Permalink }}"
width="{{ $Width }}"
height="{{ $Height }}"
loading="lazy">
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy" />
{{ end }}
</div>
{{ end }}
</div>
</header>
{{- $subsections := .Sections -}}
{{- $pages := .Pages | complement $subsections -}}
@ -53,14 +55,16 @@
{{- end -}}
{{- with $subsections -}}
<h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
<div class="subsection-list">
<div class="article-list--tile">
{{ range . }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
{{ end }}
<aside>
<h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
<div class="subsection-list">
<div class="article-list--tile">
{{ range . }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
{{ end }}
</div>
</div>
</div>
</aside>
{{- end -}}
{{/* List only pages that are not a subsection */}}

6
layouts/page/search.html
View File

@ -16,8 +16,10 @@
</button>
</form>
<h3 class="search-result--title section-title"></h3>
<div class="search-result--list article-list--compact"></div>
<div class="search-result">
<h3 class="search-result--title section-title"></h3>
<div class="search-result--list article-list--compact"></div>
</div>
<script>
window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"