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
GitHub
parent
028ae12ea5
commit
495a3b0289
9 changed files with 166 additions and 203 deletions
|
|
@ -1,4 +1,17 @@
|
|||
$on-phone: 812px;
|
||||
$on-tablet: 1024px;
|
||||
$on-desktop: 1519px;
|
||||
$on-desktop-large: 1920px;
|
||||
$breakpoints: (
|
||||
sm: 640px,
|
||||
md: 768px,
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,67 +2,52 @@
|
|||
margin-left: 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 {
|
||||
@media (min-width: $on-phone) {
|
||||
max-width: 800px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
@include respond(md) {
|
||||
max-width: 1024px;
|
||||
--left-sidebar-max-width: 25%;
|
||||
--right-sidebar-max-width: 30%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
max-width: 972px;
|
||||
|
||||
.right-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
@include respond(lg) {
|
||||
max-width: 1280px;
|
||||
--left-sidebar-max-width: 20%;
|
||||
--right-sidebar-max-width: 30%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop) {
|
||||
max-width: 1200px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
max-width: 1536px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 15%;
|
||||
}
|
||||
--left-sidebar-max-width: 15%;
|
||||
--right-sidebar-max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
@media (min-width: $on-phone) {
|
||||
max-width: 800px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 25%;
|
||||
}
|
||||
@include respond(md) {
|
||||
--left-sidebar-max-width: 25%;
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
max-width: 972px;
|
||||
@include respond(lg) {
|
||||
max-width: 1024px;
|
||||
--left-sidebar-max-width: 20%;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop) {
|
||||
max-width: 1050px;
|
||||
|
||||
.left-sidebar {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
max-width: 1300px;
|
||||
@include respond(xl) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,8 +61,9 @@
|
|||
}
|
||||
|
||||
&.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 {
|
||||
min-height: 100vh;
|
||||
}
|
||||
align-items: flex-start;
|
||||
|
||||
@include respond(md) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@include respond(lg) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
.article-image {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
height: 150px;
|
||||
@include respond(md) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
color: var(--card-text-color-main);
|
||||
font-size: 2.2rem;
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
line-height: 1.5;
|
||||
|
||||
font-size: 1.75rem;
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -135,10 +135,10 @@
|
|||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--shadow-l1);
|
||||
background-color: var(--card-background);
|
||||
--image-size: 60px;
|
||||
--image-size: 50px;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
--image-size: 50px;
|
||||
@include respond(md) {
|
||||
--image-size: 60px;
|
||||
}
|
||||
|
||||
& + .pagination {
|
||||
|
|
@ -165,10 +165,10 @@
|
|||
|
||||
.article-title {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
font-size: 1.6rem;
|
||||
@include respond(md) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,20 +242,20 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
padding: 15px;
|
||||
@include respond(sm) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: var(--card-text-color-main);
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
font-size: 2rem;
|
||||
@include respond(sm) {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,9 @@
|
|||
.keep-sidebar {
|
||||
@media (min-width: $on-phone) and (max-width: $on-tablet) {
|
||||
--main-top-padding: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-page {
|
||||
&.with-toolbar {
|
||||
@media (max-width: $on-tablet) {
|
||||
--main-top-padding: 0;
|
||||
}
|
||||
}
|
||||
&.hide-sidebar-sm .left-sidebar {
|
||||
display: none;
|
||||
|
||||
&:not(.keep-sidebar) .left-sidebar {
|
||||
@media (max-width: $on-tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
position: sticky;
|
||||
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%;
|
||||
@include respond(md) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,12 +77,9 @@
|
|||
#article-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
|
||||
@media (max-width: $on-tablet) {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
@include respond(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -106,9 +106,10 @@
|
|||
z-index: 2;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
@include respond(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
||||
&.is-active {
|
||||
|
|
@ -126,67 +127,58 @@
|
|||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: var(--sidebar-element-separation);
|
||||
margin-bottom: 0;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
margin-top: 30px;
|
||||
background-color: var(--card-background);
|
||||
margin-top: 0;
|
||||
padding: 15px 0;
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
background-color: var(--card-background);
|
||||
margin-top: 0;
|
||||
padding: 15px 0;
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
@include respond(md) {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
margin-top: var(--sidebar-element-separation);
|
||||
}
|
||||
|
||||
@include respond(xl) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding: 10px 0;
|
||||
padding: 10px 30px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
|
||||
@include respond(md) {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
stroke-width: 1.33;
|
||||
margin-right: 40px;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -194,10 +186,6 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--body-text-color);
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.sidebar {
|
||||
padding: 0 15px;
|
||||
&.sticky {
|
||||
@media (min-width: ($on-phone + 1)) {
|
||||
@include respond(md) {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,44 +11,41 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
|
||||
--sidebar-avatar-size: 150px;
|
||||
--sidebar-element-separation: 25px;
|
||||
width: 100%;
|
||||
padding: 30px 0 15px 0;
|
||||
max-width: none;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
--sidebar-avatar-size: 120px;
|
||||
--sidebar-element-separation: 20px;
|
||||
--sidebar-avatar-size: 120px;
|
||||
--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) {
|
||||
width: 100%;
|
||||
padding: 30px 0;
|
||||
max-width: none;
|
||||
@include respond(2xl) {
|
||||
--sidebar-avatar-size: 140px;
|
||||
--sidebar-element-separation: 25px;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $on-phone + 1) {
|
||||
margin-right: 1%;
|
||||
padding: var(--main-top-padding) 15px;
|
||||
max-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
flex-shrink: 0;
|
||||
display: none;
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $on-desktop - 1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: $on-tablet) {
|
||||
@include respond(lg) {
|
||||
margin-left: 1%;
|
||||
padding-top: var(--main-top-padding);
|
||||
}
|
||||
|
|
@ -58,8 +55,10 @@
|
|||
z-index: 1;
|
||||
transition: box-shadow 0.5s ease;
|
||||
|
||||
@media (max-width: $on-phone) {
|
||||
padding: 15px 30px;
|
||||
padding: 15px 30px;
|
||||
|
||||
@include respond(md) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.site-avatar {
|
||||
|
|
@ -79,9 +78,9 @@
|
|||
|
||||
.emoji {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -90,20 +89,20 @@
|
|||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l2);
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
@include respond(2xl) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-name {
|
||||
color: var(--accent-color);
|
||||
font-size: 2.4rem;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
@include respond(2xl) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -112,10 +111,10 @@
|
|||
color: var(--body-text-color);
|
||||
font-weight: normal;
|
||||
margin: 10px 0;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@media (max-width: $on-desktop-large) {
|
||||
font-size: 1.6rem;
|
||||
@include respond(2xl) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
|||
* Global style
|
||||
*/
|
||||
:root {
|
||||
@media (min-width: $on-phone + 1) {
|
||||
@include respond(md) {
|
||||
--main-top-padding: 35px;
|
||||
}
|
||||
|
||||
@media (min-width: $on-desktop-large) {
|
||||
@include respond(xl) {
|
||||
--main-top-padding: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -75,17 +75,20 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
|||
|
||||
--card-border-radius: 10px;
|
||||
|
||||
--card-padding: 30px;
|
||||
@media (max-width: $on-desktop-large) {
|
||||
--card-padding: 20px;
|
||||
|
||||
@include respond(md) {
|
||||
--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"] {
|
||||
|
|
@ -103,10 +106,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
|
|||
*/
|
||||
:root {
|
||||
--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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ define "body-class" }}article-page keep-sidebar{{ end }}
|
||||
{{ define "body-class" }}article-page{{ end }}
|
||||
{{ define "main" }}
|
||||
{{ partial "article/article.html" . }}
|
||||
|
||||
|
|
|
|||
|
|
@ -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" }}
|
||||
<div id="article-toolbar">
|
||||
<a href="{{ .Site.BaseURL }}" class="back-home">
|
||||
|
|
|
|||
Loading…
Reference in a new issue