refactor: Use flexbox gap (#520)
This commit is contained in:
Jimmy Cai
GitHub
parent
adf27aebf2
commit
04cdbcfedf
@ -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,14 +76,21 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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: "";
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.archives-group {
|
||||
margin-bottom: var(--section-separation);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,5 +1,4 @@
|
||||
.search-form {
|
||||
margin-bottom: var(--section-separation);
|
||||
position: relative;
|
||||
--button-size: 80px;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -5,9 +5,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
||||
* Global style
|
||||
*/
|
||||
:root {
|
||||
@include respond(md) {
|
||||
--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);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{{ define "body-class" }}template-archives{{ end }}
|
||||
{{ define "main" }}
|
||||
<header>
|
||||
{{- $taxonomy := $.Site.GetPage "taxonomyTerm" "categories" -}}
|
||||
{{- $terms := $taxonomy.Pages -}}
|
||||
{{ if $terms }}
|
||||
@ -12,6 +13,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</header>
|
||||
|
||||
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
||||
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<header>
|
||||
<h3 class="section-title">
|
||||
{{ if eq .Parent (.GetPage "/") }}
|
||||
{{ T "list.section" }}
|
||||
@ -41,6 +42,7 @@
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{- $subsections := .Sections -}}
|
||||
{{- $pages := .Pages | complement $subsections -}}
|
||||
@ -53,6 +55,7 @@
|
||||
{{- end -}}
|
||||
|
||||
{{- with $subsections -}}
|
||||
<aside>
|
||||
<h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
|
||||
<div class="subsection-list">
|
||||
<div class="article-list--tile">
|
||||
@ -61,6 +64,7 @@
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
{{- end -}}
|
||||
|
||||
{{/* List only pages that are not a subsection */}}
|
||||
|
||||
@ -16,8 +16,10 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<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` }}"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<aside class="related-contents--wrapper">
|
||||
{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
|
||||
{{ with $related }}
|
||||
<aside class="related-contents--wrapper">
|
||||
<h2 class="section-title">{{ T "article.relatedContents" }}</h2>
|
||||
<div class="related-contents">
|
||||
<div class="flex article-list--tile">
|
||||
@ -9,5 +9,5 @@
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</aside>
|
||||
{{ end }}
|
||||
@ -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 }}
|
||||
|
||||
<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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user