refactor: Use flexbox gap (#520)

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

View File

@ -11,7 +11,7 @@
/// Display right sidebar when min-width: lg /// Display right sidebar when min-width: lg
@include respond(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 { .full-width {
width: 100%; width: 100%;
} }
@ -94,14 +76,21 @@ main.main {
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
flex-grow: 1; 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 { .main-container {
min-height: 100vh; min-height: 100vh;
align-items: flex-start; align-items: flex-start;
padding: 0 15px; padding: 0 15px;
column-gap: var(--section-separation); gap: var(--section-separation);
padding-top: var(--main-top-padding);
@include respond(md) { @include respond(md) {
padding: 0 20px; padding: 0 20px;

View File

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

View File

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

View File

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

View File

@ -13,10 +13,6 @@
box-shadow: var(--shadow-l1); box-shadow: var(--shadow-l1);
overflow: hidden; overflow: hidden;
&.main-article {
margin-bottom: var(--section-separation);
}
.article-header { .article-header {
.article-image { .article-image {
img { img {
@ -57,11 +53,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem; font-size: 1.4rem;
gap: 15px;
svg { svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 15px;
stroke-width: 1.33; stroke-width: 1.33;
} }
} }
@ -211,10 +207,6 @@
} }
} }
.related-contents--wrapper {
margin-bottom: var(--section-separation);
}
.related-contents { .related-contents {
overflow-x: auto; overflow-x: auto;
padding-bottom: 15px; padding-bottom: 15px;
@ -305,13 +297,10 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin: 1.5em 0; margin: 1.5em 0;
gap: 10px;
figure { figure {
margin: 0; margin: 0;
& + figure {
margin-left: 10px;
}
} }
} }

View File

@ -3,21 +3,16 @@
background-color: var(--card-background); background-color: var(--card-background);
padding: var(--small-card-padding); padding: var(--small-card-padding);
box-shadow: var(--shadow-l1); box-shadow: var(--shadow-l1);
margin-bottom: var(--section-separation);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px;
--separation: 15px; --separation: 15px;
.section-term { .section-term {
font-size: 2.2rem; font-size: 2.2rem;
margin: 0; margin: 0;
margin-top: calc(var(--separation) / 2);
color: var(--card-text-color-main); color: var(--card-text-color-main);
& + .section-description {
margin-top: var(--separation);
}
} }
.section-description { .section-description {
@ -29,7 +24,9 @@
.section-details { .section-details {
flex-grow: 1; flex-grow: 1;
margin-right: 20px; display: flex;
flex-direction: column;
gap: 8px;
} }
.section-image { .section-image {
@ -49,7 +46,6 @@
} }
.subsection-list { .subsection-list {
margin-bottom: var(--section-separation);
overflow-x: auto; overflow-x: auto;
.article-list--tile { .article-list--tile {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,46 +1,48 @@
{{ define "main" }} {{ define "main" }}
<h3 class="section-title"> <header>
{{ if eq .Parent (.GetPage "/") }} <h3 class="section-title">
{{ T "list.section" }} {{ if eq .Parent (.GetPage "/") }}
{{ else }} {{ T "list.section" }}
{{ .Parent.Title }} {{ else }}
{{ end }} {{ .Parent.Title }}
</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>
{{ end }} {{ end }}
</div> </h3>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}} <div class="section-card">
{{ if $image.exists }} <div class="section-details">
<div class="section-image"> <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
{{ if $image.resource }} <h1 class="section-term">{{ .Title }}</h1>
{{- $Permalink := $image.resource.RelPermalink -}} {{ with .Params.description }}
{{- $Width := $image.resource.Width -}} <h2 class="section-description">{{ . }}</h2>
{{- $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 }} {{ end }}
</div> </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 -}} {{- $subsections := .Sections -}}
{{- $pages := .Pages | complement $subsections -}} {{- $pages := .Pages | complement $subsections -}}
@ -53,14 +55,16 @@
{{- end -}} {{- end -}}
{{- with $subsections -}} {{- with $subsections -}}
<h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2> <aside>
<div class="subsection-list"> <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
<div class="article-list--tile"> <div class="subsection-list">
{{ range . }} <div class="article-list--tile">
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }} {{ range . }}
{{ end }} {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
{{ end }}
</div>
</div> </div>
</div> </aside>
{{- end -}} {{- end -}}
{{/* List only pages that are not a subsection */}} {{/* List only pages that are not a subsection */}}

View File

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

View File

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

View File

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