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

{{ $taxonomy.Title }}

-
-
- {{ range $terms }} - {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }} - {{ end }} +
+ {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}} + {{- $terms := $taxonomy.Pages -}} + {{ if $terms }} +

{{ $taxonomy.Title }}

+
+
+ {{ range $terms }} + {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }} + {{ end }} +
-
- {{ end }} + {{ end }} + {{ $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" }} -

- {{ if eq .Parent (.GetPage "/") }} - {{ T "list.section" }} - {{ else }} - {{ .Parent.Title }} - {{ end }} -

- -
-
-

{{ T "list.page" (len .Pages) }}

-

{{ .Title }}

- {{ with .Params.description }} -

{{ . }}

+
+

+ {{ if eq .Parent (.GetPage "/") }} + {{ T "list.section" }} + {{ else }} + {{ .Parent.Title }} {{ end }} -

+ - {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}} - {{ if $image.exists }} -
- {{ 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 -}} - - - {{ else }} - +
+
+

{{ T "list.page" (len .Pages) }}

+

{{ .Title }}

+ {{ with .Params.description }} +

{{ . }}

{{ end }}
- {{ end }} -
+ + {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}} + {{ if $image.exists }} +
+ {{ 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 -}} + + + {{ else }} + + {{ end }} +
+ {{ end }} +
+ {{- $subsections := .Sections -}} {{- $pages := .Pages | complement $subsections -}} @@ -53,14 +55,16 @@ {{- end -}} {{- with $subsections -}} -

{{ T "list.subsection" (len $subsections) }}

-
-
- {{ range . }} - {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }} - {{ end }} +
+ {{- 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 @@ -

-
+
+

+
+