kushidou/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
18 changed files with 143 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/partials/article.scss
+5 -11
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);
}
assets/scss/partials/footer.scss
-1
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: "";
assets/scss/partials/layout/archives.scss
-3
View File
@@ -1,3 +0,0 @@
.archives-group {
margin-bottom: var(--section-separation);
}
assets/scss/partials/layout/article.scss
+2 -13
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;
}
}
}
assets/scss/partials/layout/list.scss
+4 -8
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 {
assets/scss/partials/layout/search.scss
-1
View File
@@ -1,5 +1,4 @@
.search-form {
margin-bottom: var(--section-separation);
position: relative;
--button-size: 80px;
assets/scss/partials/menu.scss
+11 -11
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;
assets/scss/partials/pagination.scss
-1
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;
assets/scss/partials/sidebar.scss
+18 -22
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;
assets/scss/partials/widgets.scss
+4 -3
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;