refactor: rewrite grid system & style changes (#231)

* refactor(WIP): add new SCSS mixin `respond`

Theme's stylesheet mixes the use of max-width and min-width for responsive design, and it's horrible.

* refactor: update variable.scss to use @mixin respond

* refactor(grid): adjust sidebar max-width

* refactor(partials/article.scss): use `@include respond`

* refactor(layout/article.scss): delete unused SCSS and migrate to `@include respond`

* Adjust left sidebar max-width on xl screen

* fix: right sidebar not sticky

* refactor(breakpoint): simplify `@mixin respond`

* refactor(breakpoints): improve warning message

* fix(breakpoint): return only the requested breakpoint

* fix: add missing padding to .article-details
This commit is contained in:
Jimmy Cai 2021-06-20 12:53:10 +02:00 committed by GitHub
parent 028ae12ea5
commit 495a3b0289
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 166 additions and 203 deletions

View File

@ -1,4 +1,17 @@
$on-phone: 812px; $breakpoints: (
$on-tablet: 1024px; sm: 640px,
$on-desktop: 1519px; md: 768px,
$on-desktop-large: 1920px; lg: 1024px,
xl: 1280px,
2xl: 1536px,
);
@mixin respond($breakpoint) {
@if not map-has-key($breakpoints, $breakpoint) {
@warn "'#{$breakpoint}' is not a valid breakpoint";
} @else {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
}

View File

@ -2,67 +2,52 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.left-sidebar {
max-width: var(--left-sidebar-max-width);
}
.right-sidebar {
max-width: var(--right-sidebar-max-width);
/// Display right sidebar when min-width: lg
@include respond(lg) {
display: block;
}
}
&.extended { &.extended {
@media (min-width: $on-phone) { @include respond(md) {
max-width: 800px; max-width: 1024px;
--left-sidebar-max-width: 25%;
.left-sidebar { --right-sidebar-max-width: 30%;
width: 25%;
}
} }
@media (min-width: $on-tablet) { @include respond(lg) {
max-width: 972px; max-width: 1280px;
--left-sidebar-max-width: 20%;
.right-sidebar { --right-sidebar-max-width: 30%;
width: 25%;
}
} }
@media (min-width: $on-desktop) { @include respond(xl) {
max-width: 1200px;
.left-sidebar {
width: 20%;
}
.right-sidebar {
width: 25%;
}
}
@media (min-width: $on-desktop-large) {
max-width: 1536px; max-width: 1536px;
--left-sidebar-max-width: 15%;
.left-sidebar { --right-sidebar-max-width: 25%;
width: 15%;
}
} }
} }
&.compact { &.compact {
@media (min-width: $on-phone) { @include respond(md) {
max-width: 800px; --left-sidebar-max-width: 25%;
max-width: 768px;
.left-sidebar {
width: 25%;
}
} }
@media (min-width: $on-tablet) { @include respond(lg) {
max-width: 972px; max-width: 1024px;
--left-sidebar-max-width: 20%;
} }
@media (min-width: $on-desktop) { @include respond(xl) {
max-width: 1050px; max-width: 1280px;
.left-sidebar {
width: 20%;
}
}
@media (min-width: $on-desktop-large) {
max-width: 1300px;
} }
} }
} }
@ -76,8 +61,9 @@
} }
&.on-phone--column { &.on-phone--column {
@media (max-width: $on-phone) {
flex-direction: column; flex-direction: column;
@include respond(md) {
flex-direction: unset;
} }
} }
@ -114,4 +100,13 @@ main.main {
.main-container { .main-container {
min-height: 100vh; min-height: 100vh;
align-items: flex-start;
@include respond(md) {
padding: 0 10px;
}
@include respond(lg) {
padding: 0 20px;
}
} }

View File

@ -24,14 +24,14 @@
.article-image { .article-image {
img { img {
width: 100%; width: 100%;
height: 200px; height: 150px;
object-fit: cover; object-fit: cover;
@media (max-width: $on-tablet) { @include respond(md) {
height: 150px; height: 200px;
} }
@media (min-width: $on-desktop-large) { @include respond(xl) {
height: 250px; height: 250px;
} }
} }
@ -62,7 +62,7 @@
color: var(--card-text-color-main); color: var(--card-text-color-main);
font-size: 2.2rem; font-size: 2.2rem;
@media (min-width: $on-desktop-large) { @include respond(xl) {
font-size: 2.4rem; font-size: 2.4rem;
} }
@ -86,7 +86,7 @@
line-height: 1.5; line-height: 1.5;
font-size: 1.75rem; font-size: 1.75rem;
@media (min-width: $on-desktop-large) { @include respond(xl) {
font-size: 2rem; font-size: 2rem;
} }
} }
@ -135,10 +135,10 @@
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1); box-shadow: var(--shadow-l1);
background-color: var(--card-background); background-color: var(--card-background);
--image-size: 60px;
@media (max-width: $on-tablet) {
--image-size: 50px; --image-size: 50px;
@include respond(md) {
--image-size: 60px;
} }
& + .pagination { & + .pagination {
@ -165,10 +165,10 @@
.article-title { .article-title {
margin: 0; margin: 0;
font-size: 1.8rem;
@media (max-width: $on-tablet) {
font-size: 1.6rem; font-size: 1.6rem;
@include respond(md) {
font-size: 1.8rem;
} }
} }
@ -242,20 +242,20 @@
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
z-index: 2; z-index: 2;
padding: 20px;
@media (max-width: $on-phone) {
padding: 15px; padding: 15px;
@include respond(sm) {
padding: 20px;
} }
} }
.article-title { .article-title {
font-size: 2.2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@media (max-width: $on-phone) { @include respond(sm) {
font-size: 2rem; font-size: 2.2rem;
} }
} }
} }

View File

@ -1,43 +1,9 @@
.keep-sidebar {
@media (min-width: $on-phone) and (max-width: $on-tablet) {
--main-top-padding: 50px;
}
}
.article-page { .article-page {
&.with-toolbar { &.hide-sidebar-sm .left-sidebar {
@media (max-width: $on-tablet) {
--main-top-padding: 0;
}
}
&:not(.keep-sidebar) .left-sidebar {
@media (max-width: $on-tablet) {
display: none; display: none;
}
}
.article-sidebar { @include respond(md) {
position: sticky; display: inherit;
top: 50px;
flex-shrink: 0;
@media (max-width: $on-tablet) {
display: none;
}
@media (min-width: $on-tablet) {
padding-left: 15px;
margin-left: 1%;
}
@media (min-width: $on-tablet) {
width: 25%;
margin-right: 1%;
}
@media (min-width: $on-desktop) {
width: 30%;
} }
} }
@ -111,12 +77,9 @@
#article-toolbar { #article-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
@media (max-width: $on-tablet) {
margin: 20px 0; margin: 20px 0;
}
@media (min-width: $on-tablet) { @include respond(md) {
display: none; display: none;
} }

View File

@ -106,9 +106,10 @@
z-index: 2; z-index: 2;
cursor: pointer; cursor: pointer;
@media (min-width: $on-phone + 1) { @include respond(md) {
display: none; display: none;
} }
outline: none; outline: none;
&.is-active { &.is-active {
@ -126,17 +127,11 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: var(--sidebar-element-separation);
margin-bottom: 0; margin-bottom: 0;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
font-size: 1.5rem; font-size: 1.4rem;
@media (min-width: $on-desktop-large) {
margin-top: 30px;
}
@media (max-width: $on-phone) {
background-color: var(--card-background); background-color: var(--card-background);
margin-top: 0; margin-top: 0;
padding: 15px 0; padding: 15px 0;
@ -146,58 +141,51 @@
&.show { &.show {
display: block; display: block;
} }
@include respond(md) {
align-items: flex-end;
display: flex;
background-color: transparent;
padding: 0;
box-shadow: none;
margin-top: var(--sidebar-element-separation);
} }
@media (min-width: $on-phone + 1) { @include respond(xl) {
align-items: flex-end; margin-top: 30px;
} }
li { li {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
padding: 10px 0; padding: 10px 30px;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 15px; margin-bottom: 15px;
@media (min-width: $on-desktop-large) { @include respond(xl) {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
@media (max-width: $on-phone) { @include respond(md) {
padding: 10px 30px; width: 100%;
}
@media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
padding: 10px 0; padding: 10px 0;
} }
@media (min-width: $on-phone + 1) {
width: 100%;
}
svg { svg {
width: 25px;
height: 25px;
stroke-width: 1.33; stroke-width: 1.33;
margin-right: 40px; margin-right: 40px;
@media (max-width: $on-desktop-large) {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
}
a { a {
height: 100%; height: 100%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--body-text-color); color: var(--body-text-color);
@media (max-width: $on-desktop-large) {
font-size: 1.4rem;
}
} }
span { span {

View File

@ -1,7 +1,7 @@
.sidebar { .sidebar {
padding: 0 15px; padding: 0 15px;
&.sticky { &.sticky {
@media (min-width: ($on-phone + 1)) { @include respond(md) {
position: sticky; position: sticky;
} }
} }
@ -11,44 +11,41 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
align-self: stretch;
--sidebar-avatar-size: 150px; width: 100%;
--sidebar-element-separation: 25px; padding: 30px 0 15px 0;
max-width: none;
@media (max-width: $on-desktop-large) {
--sidebar-avatar-size: 120px; --sidebar-avatar-size: 120px;
--sidebar-element-separation: 20px; --sidebar-element-separation: 20px;
@include respond(md) {
width: auto;
margin-right: 1%;
padding: var(--main-top-padding) 15px;
max-height: 100vh;
} }
@media (max-width: $on-phone) { @include respond(2xl) {
width: 100%; --sidebar-avatar-size: 140px;
padding: 30px 0; --sidebar-element-separation: 25px;
max-width: none;
} }
&.sticky { &.sticky {
top: 0; top: 0;
} }
@media (min-width: $on-phone + 1) {
margin-right: 1%;
padding: var(--main-top-padding) 15px;
max-height: 100vh;
}
} }
.right-sidebar { .right-sidebar {
flex-shrink: 0; flex-shrink: 0;
display: none;
&.sticky { &.sticky {
top: 0; top: 0;
} }
@media (max-width: $on-desktop - 1) { @include respond(lg) {
display: none;
}
@media (min-width: $on-tablet) {
margin-left: 1%; margin-left: 1%;
padding-top: var(--main-top-padding); padding-top: var(--main-top-padding);
} }
@ -58,8 +55,10 @@
z-index: 1; z-index: 1;
transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease;
@media (max-width: $on-phone) {
padding: 15px 30px; padding: 15px 30px;
@include respond(md) {
padding: 0;
} }
.site-avatar { .site-avatar {
@ -79,9 +78,9 @@
.emoji { .emoji {
position: absolute; position: absolute;
width: 50px; width: 40px;
height: 50px; height: 40px;
line-height: 50px; line-height: 40px;
border-radius: 100%; border-radius: 100%;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -90,20 +89,20 @@
background-color: var(--card-background); background-color: var(--card-background);
box-shadow: var(--shadow-l2); box-shadow: var(--shadow-l2);
@media (max-width: $on-desktop-large) { @include respond(2xl) {
width: 40px; width: 50px;
height: 40px; height: 50px;
line-height: 40px; line-height: 50px;
} }
} }
} }
.site-name { .site-name {
color: var(--accent-color); color: var(--accent-color);
font-size: 2.4rem;
margin: 0; margin: 0;
font-size: 1.8rem;
@media (max-width: $on-desktop-large) { @include respond(2xl) {
font-size: 2rem; font-size: 2rem;
} }
} }
@ -112,10 +111,10 @@
color: var(--body-text-color); color: var(--body-text-color);
font-weight: normal; font-weight: normal;
margin: 10px 0; margin: 10px 0;
font-size: 1.8rem;
@media (max-width: $on-desktop-large) {
font-size: 1.6rem; font-size: 1.6rem;
@include respond(2xl) {
font-size: 1.8rem;
} }
} }
} }

View File

@ -17,11 +17,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
* Global style * Global style
*/ */
:root { :root {
@media (min-width: $on-phone + 1) { @include respond(md) {
--main-top-padding: 35px; --main-top-padding: 35px;
} }
@media (min-width: $on-desktop-large) { @include respond(xl) {
--main-top-padding: 50px; --main-top-padding: 50px;
} }
@ -75,17 +75,20 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--card-border-radius: 10px; --card-border-radius: 10px;
--card-padding: 30px; --card-padding: 20px;
@media (max-width: $on-desktop-large) {
@include respond(md) {
--card-padding: 25px; --card-padding: 25px;
} }
@media (max-width: $on-tablet) {
--card-padding: 20px; @include respond(xl) {
--card-padding: 30px;
} }
--small-card-padding: 25px;
@media (max-width: $on-tablet) {
--small-card-padding: 25px 20px; --small-card-padding: 25px 20px;
@include respond(md) {
--small-card-padding: 25px;
} }
[data-scheme="dark"] { [data-scheme="dark"] {
@ -103,10 +106,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
*/ */
:root { :root {
--article-font-family: var(--base-font-family); --article-font-family: var(--base-font-family);
--article-font-size: 1.7rem;
@media (max-width: $on-tablet) {
--article-font-size: 1.6rem; --article-font-size: 1.6rem;
@include respond(md) {
--article-font-size: 1.7rem;
} }
--article-line-height: 1.85; --article-line-height: 1.85;
} }

View File

@ -1,4 +1,4 @@
{{ define "body-class" }}article-page keep-sidebar{{ end }} {{ define "body-class" }}article-page{{ end }}
{{ define "main" }} {{ define "main" }}
{{ partial "article/article.html" . }} {{ partial "article/article.html" . }}

View File

@ -1,4 +1,4 @@
{{ define "container-class" }}article-page with-toolbar{{ end }} {{ define "container-class" }}article-page with-toolbar hide-sidebar-sm{{ end }}
{{ define "main" }} {{ define "main" }}
<div id="article-toolbar"> <div id="article-toolbar">
<a href="{{ .Site.BaseURL }}" class="back-home"> <a href="{{ .Site.BaseURL }}" class="back-home">