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

refactor: Use flexbox gap (#520)

Browse Source
This commit is contained in:
Jimmy Cai 2022-03-03 23:11:19 +01:00 committed by GitHub
parent adf27aebf2
commit 04cdbcfedf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 143 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/scss/grid.scss
View File

@ -11,7 +11,7 @@
/// Display right sidebar when min-width: lg
@include respond(lg) {
display: block;
display: flex;
}
}
@ -67,24 +67,6 @@
}
}
&.align-items--flex-start {
align-items: flex-start;
}
.grow {
flex-grow: 1;
}
.do-not-shrink {
flex-shrink: 0;
}
.do-not-overflow {
min-width: 0;
flex-shrink: 1;
max-width: 100%;
}
.full-width {
width: 100%;
}
@ -94,15 +76,22 @@ main.main {
min-width: 0;
max-width: 100%;
flex-grow: 1;
padding-top: var(--main-top-padding);
display: flex;
flex-direction: column;
gap: var(--section-separation);
@include respond(md) {
padding-top: var(--main-top-padding);
}
}
.main-container {
min-height: 100vh;
align-items: flex-start;
padding: 0 15px;
column-gap: var(--section-separation);
gap: var(--section-separation);
padding-top: var(--main-top-padding);
@include respond(md) {
padding: 0 20px;
}

16
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%;
@ -122,6 +119,9 @@
.article-category,
.article-tags {
display: flex;
gap: 10px;
a {
color: var(--accent-color-text);
background-color: var(--accent-color);
@ -129,8 +129,6 @@
border-radius: var(--tag-border-radius);
display: inline-block;
font-size: 1.4rem;
margin-right: 10px;
margin-bottom: 10px;
transition: background-color 0.5s ease;
&:hover {
@ -151,15 +149,12 @@
--image-size: 60px;
}
& + .pagination {
margin-top: var(--section-separation);
}
article {
& > a {
display: flex;
align-items: center;
padding: var(--small-card-padding);
gap: 15px;
}
&:not(:last-of-type) {
@ -169,7 +164,6 @@
.article-details {
flex-grow: 1;
padding: 0;
padding-right: 15px;
min-height: var(--image-size);
}

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

15
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 {
@ -57,11 +53,11 @@
display: flex;
align-items: center;
font-size: 1.4rem;
gap: 15px;
svg {
width: 20px;
height: 20px;
margin-right: 15px;
stroke-width: 1.33;
}
}
@ -211,10 +207,6 @@
}
}
.related-contents--wrapper {
margin-bottom: var(--section-separation);
}
.related-contents {
overflow-x: auto;
padding-bottom: 15px;
@ -305,13 +297,10 @@
flex-direction: row;
justify-content: center;
margin: 1.5em 0;
gap: 10px;
figure {
margin: 0;
& + figure {
margin-left: 10px;
}
}
}

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

@ -3,21 +3,16 @@
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;
gap: 20px;
--separation: 15px;
.section-term {
font-size: 2.2rem;
margin: 0;
margin-top: calc(var(--separation) / 2);
color: var(--card-text-color-main);
& + .section-description {
margin-top: var(--separation);
}
}
.section-description {
@ -29,7 +24,9 @@
.section-details {
flex-grow: 1;
margin-right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.section-image {
@ -49,7 +46,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;

22
assets/scss/partials/menu.scss
View File

@ -101,11 +101,16 @@
background: none;
border: none;
position: absolute;
right: 30px;
top: 30px;
right: 0;
top: 0;
z-index: 2;
cursor: pointer;
[dir="rtl"] & {
left: 0;
right: auto;
}
@include respond(md) {
display: none;
}
@ -135,13 +140,12 @@
box-shadow: var(--shadow-l1);
display: none;
margin: 0 -15px;
margin: 0 calc(var(--container-padding) * -1);
&,
.menu-bottom-section {
gap: 15px;
@include respond(xl) {
margin-top: 30px;
gap: 20px;
}
}
@ -157,11 +161,6 @@
padding: 0;
box-shadow: none;
margin: 0;
margin-top: var(--sidebar-element-separation);
}
@include respond(xl) {
margin-top: 30px;
}
li {
@ -176,7 +175,6 @@
svg {
stroke-width: 1.33;
margin-right: 40px;
width: 20px;
height: 20px;
@ -187,6 +185,7 @@
display: inline-flex;
align-items: center;
color: var(--body-text-color);
gap: var(--menu-icon-separation);
}
span {
@ -211,7 +210,8 @@
.social-menu {
list-style: none;
padding: 0%;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
gap: 10px;

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;

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

@ -11,11 +11,13 @@
flex-direction: column;
flex-shrink: 0;
align-self: stretch;
gap: var(--sidebar-element-separation);
width: 100%;
padding: 30px 0 15px 0;
max-width: none;
position: relative;
--sidebar-avatar-size: 120px;
--sidebar-element-separation: 20px;
@ -39,6 +41,8 @@
.right-sidebar {
width: 100%;
display: none;
flex-direction: column;
gap: var(--widget-separation);
&.sticky {
top: 0;
@ -49,11 +53,12 @@
}
}
.site-info {
.sidebar header {
z-index: 1;
transition: box-shadow 0.5s ease;
padding: 15px;
display: flex;
flex-direction: column;
gap: var(--sidebar-element-separation);
@include respond(md) {
padding: 0;
@ -65,8 +70,6 @@
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
margin-bottom: var(--sidebar-element-separation);
.site-logo {
width: 100%;
height: 100%;
@ -95,6 +98,12 @@
}
}
.site-meta {
display: flex;
flex-direction: column;
gap: 10px;
}
.site-name {
color: var(--accent-color);
margin: 0;
@ -108,7 +117,7 @@
.site-description {
color: var(--body-text-color);
font-weight: normal;
margin: 10px 0;
margin: 0;
font-size: 1.6rem;
@include respond(2xl) {
@ -117,21 +126,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);
@ -153,6 +147,7 @@
display: flex;
align-items: center;
cursor: pointer;
gap: var(--menu-icon-separation);
.icon-tabler-toggle-right {
display: none;
@ -163,6 +158,7 @@
color: var(--body-text-color);
display: inline-flex;
align-content: center;
gap: var(--menu-icon-separation);
select {
border: 0;

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

@ -1,4 +1,7 @@
.widget {
display: flex;
flex-direction: column;
.widget-icon {
svg {
width: 32px;
@ -14,16 +17,14 @@
.tagCloud-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
a {
background: var(--card-background);
box-shadow: var(--shadow-l1);
border-radius: var(--tag-border-radius);
padding: 8px 20px;
color: var(--card-text-color-main);
margin-bottom: 10px;
margin-right: 5px;
font-size: 1.4rem;
transition: box-shadow 0.3s ease;

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

10
assets/scss/variables.scss
View File

@ -5,9 +5,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
* Global style
*/
:root {
@include respond(md) {
--main-top-padding: 35px;
}
--main-top-padding: 35px;
@include respond(xl) {
--main-top-padding: 50px;
@ -159,3 +157,9 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--pre-background-color: #272822;
@import "partials/highlight/dark.scss";
}
:root {
--menu-icon-separation: 40px;
--container-padding: 15px;
--widget-separation: var(--section-separation);
}

24
layouts/_default/archives.html
View File

@ -1,17 +1,19 @@
{{ define "body-class" }}template-archives{{ end }}
{{ define "main" }}
{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
{{- $terms := $taxonomy.Pages -}}
{{ if $terms }}
<h2 class="section-title">{{ $taxonomy.Title }}</h2>
<div class="subsection-list">
<div class="article-list--tile">
{{ range $terms }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
{{ end }}
<header>
{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
{{- $terms := $taxonomy.Pages -}}
{{ if $terms }}
<h2 class="section-title">{{ $taxonomy.Title }}</h2>
<div class="subsection-list">
<div class="article-list--tile">
{{ range $terms }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
{{ end }}
</div>
</div>
</div>
{{ end }}
{{ end }}
</header>
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}

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` }}"

20
layouts/partials/article/components/related-contents.html
View File

@ -1,13 +1,13 @@
{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
{{ with $related }}
<aside class="related-contents--wrapper">
{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
{{ with $related }}
<h2 class="section-title">{{ T "article.relatedContents" }}</h2>
<div class="related-contents">
<div class="flex article-list--tile">
{{ range . }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
{{ end }}
</div>
<h2 class="section-title">{{ T "article.relatedContents" }}</h2>
<div class="related-contents">
<div class="flex article-list--tile">
{{ range . }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
{{ end }}
</div>
{{ end }}
</div>
</aside>
{{ end }}

8
layouts/partials/sidebar/left.html
View File

@ -5,7 +5,7 @@
</span>
</button>
<header class="site-info">
<header>
{{ with .Site.Params.sidebar.avatar }}
{{ if (default true .enabled) }}
<figure class="site-avatar">
@ -31,8 +31,10 @@
{{ end }}
{{ end }}
<h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
<div class="site-meta">
<h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
</div>
{{- with .Site.Menus.social -}}
<ol class="social-menu">