diff options
author | Jimmy Cai <github@jimmycai.com> | 2022-03-04 01:11:19 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-04 01:11:19 +0300 |
commit | 04cdbcfedfe3f200013e05aecbb96dc3313424b3 (patch) | |
tree | 8aa0068d7e199d83855329d5e7f7da0b8800a1b0 | |
parent | adf27aebf276f33301d2b8add199be1ceeafc30c (diff) |
refactor: Use flexbox gap (#520)
-rw-r--r-- | assets/scss/grid.scss | 33 | ||||
-rw-r--r-- | assets/scss/partials/article.scss | 16 | ||||
-rw-r--r-- | assets/scss/partials/footer.scss | 1 | ||||
-rw-r--r-- | assets/scss/partials/layout/archives.scss | 3 | ||||
-rw-r--r-- | assets/scss/partials/layout/article.scss | 15 | ||||
-rw-r--r-- | assets/scss/partials/layout/list.scss | 12 | ||||
-rw-r--r-- | assets/scss/partials/layout/search.scss | 1 | ||||
-rw-r--r-- | assets/scss/partials/menu.scss | 22 | ||||
-rw-r--r-- | assets/scss/partials/pagination.scss | 1 | ||||
-rw-r--r-- | assets/scss/partials/sidebar.scss | 40 | ||||
-rw-r--r-- | assets/scss/partials/widgets.scss | 7 | ||||
-rw-r--r-- | assets/scss/style.scss | 1 | ||||
-rw-r--r-- | assets/scss/variables.scss | 10 | ||||
-rw-r--r-- | layouts/_default/archives.html | 24 | ||||
-rw-r--r-- | layouts/_default/list.html | 94 | ||||
-rw-r--r-- | layouts/page/search.html | 6 | ||||
-rw-r--r-- | layouts/partials/article/components/related-contents.html | 20 | ||||
-rw-r--r-- | layouts/partials/sidebar/left.html | 8 |
18 files changed, 143 insertions, 171 deletions
diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss index a0eddca..84967ef 100644 --- a/assets/scss/grid.scss +++ b/assets/scss/grid.scss @@ -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; } diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index 0d3efba..c9444d4 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -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); } diff --git a/assets/scss/partials/footer.scss b/assets/scss/partials/footer.scss index 1c60dc7..ccb7394 100644 --- a/assets/scss/partials/footer.scss +++ b/assets/scss/partials/footer.scss @@ -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: ""; diff --git a/assets/scss/partials/layout/archives.scss b/assets/scss/partials/layout/archives.scss deleted file mode 100644 index 34e5f62..0000000 --- a/assets/scss/partials/layout/archives.scss +++ /dev/null @@ -1,3 +0,0 @@ -.archives-group { - margin-bottom: var(--section-separation); -}
\ No newline at end of file diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 92e1167..ef35ba9 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -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; - } } } diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss index 1a0e346..d7815ca 100644 --- a/assets/scss/partials/layout/list.scss +++ b/assets/scss/partials/layout/list.scss @@ -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 { diff --git a/assets/scss/partials/layout/search.scss b/assets/scss/partials/layout/search.scss index b390a7b..f2cc7be 100644 --- a/assets/scss/partials/layout/search.scss +++ b/assets/scss/partials/layout/search.scss @@ -1,5 +1,4 @@ .search-form { - margin-bottom: var(--section-separation); position: relative; --button-size: 80px; diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 257eedb..16adb80 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -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; diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss index a6c6882..ca46780 100644 --- a/assets/scss/partials/pagination.scss +++ b/assets/scss/partials/pagination.scss @@ -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; diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 4d320a8..09bcc33 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -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; diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss index 33a02dd..42cfcc2 100644 --- a/assets/scss/partials/widgets.scss +++ b/assets/scss/partials/widgets.scss @@ -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; diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 2f5aac9..43e95a5 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -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"; diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index f7d45b4..afddb80 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -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); +} diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html index 321aa6d..5d5243c 100644 --- a/layouts/_default/archives.html +++ b/layouts/_default/archives.html @@ -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 }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 49a5c12..9bc618d 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -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 */}} diff --git a/layouts/page/search.html b/layouts/page/search.html index 935b384..7c424a6 100644 --- a/layouts/page/search.html +++ b/layouts/page/search.html @@ -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` }}" diff --git a/layouts/partials/article/components/related-contents.html b/layouts/partials/article/components/related-contents.html index 810b8e9..29cfff6 100644 --- a/layouts/partials/article/components/related-contents.html +++ b/layouts/partials/article/components/related-contents.html @@ -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 }}
\ No newline at end of file diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html index 35d1c11..44d5307 100644 --- a/layouts/partials/sidebar/left.html +++ b/layouts/partials/sidebar/left.html @@ -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"> |