diff options
author | Jimmy Cai <jimmehcai@gmail.com> | 2021-06-20 13:53:10 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-20 13:53:10 +0300 |
commit | 495a3b0289797ef675d2d7befa1362a07e7f6bdd (patch) | |
tree | cccda94f18040f4551702a0c60ddb3cee9077679 /assets/scss | |
parent | 028ae12ea56077fb630bbf12ed46781db583fe2a (diff) |
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
Diffstat (limited to 'assets/scss')
-rw-r--r-- | assets/scss/breakpoints.scss | 21 | ||||
-rw-r--r-- | assets/scss/grid.scss | 91 | ||||
-rw-r--r-- | assets/scss/partials/article.scss | 36 | ||||
-rw-r--r-- | assets/scss/partials/layout/article.scss | 49 | ||||
-rw-r--r-- | assets/scss/partials/menu.scss | 64 | ||||
-rw-r--r-- | assets/scss/partials/sidebar.scss | 69 | ||||
-rw-r--r-- | assets/scss/variables.scss | 29 |
7 files changed, 161 insertions, 198 deletions
diff --git a/assets/scss/breakpoints.scss b/assets/scss/breakpoints.scss index e97b3e5..e9e9de7 100644 --- a/assets/scss/breakpoints.scss +++ b/assets/scss/breakpoints.scss @@ -1,4 +1,17 @@ -$on-phone: 812px; -$on-tablet: 1024px; -$on-desktop: 1519px; -$on-desktop-large: 1920px;
\ No newline at end of file +$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; + } + } +} diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss index f36ed34..c0dc9fc 100644 --- a/assets/scss/grid.scss +++ b/assets/scss/grid.scss @@ -2,67 +2,52 @@ margin-left: auto; margin-right: auto; - &.extended { - @media (min-width: $on-phone) { - max-width: 800px; - - .left-sidebar { - width: 25%; - } - } + .left-sidebar { + max-width: var(--left-sidebar-max-width); + } - @media (min-width: $on-tablet) { - max-width: 972px; + .right-sidebar { + max-width: var(--right-sidebar-max-width); - .right-sidebar { - width: 25%; - } + /// Display right sidebar when min-width: lg + @include respond(lg) { + display: block; } + } - @media (min-width: $on-desktop) { - max-width: 1200px; - - .left-sidebar { - width: 20%; - } + &.extended { + @include respond(md) { + max-width: 1024px; + --left-sidebar-max-width: 25%; + --right-sidebar-max-width: 30%; + } - .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-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; -}
\ No newline at end of file + align-items: flex-start; + + @include respond(md) { + padding: 0 10px; + } + + @include respond(lg) { + padding: 0 20px; + } +} diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index 2c42ec7..c71cab4 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -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; } } } diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 3dce3e6..03e8ea1 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -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; - } - } - - &: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%; - } + &.hide-sidebar-sm .left-sidebar { + display: none; - @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; } diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 024b3a6..7fbf027 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -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; - } - - @media (max-width: $on-phone) { - background-color: var(--card-background); - margin-top: 0; - padding: 15px 0; - box-shadow: var(--shadow-l1); - display: none; + background-color: var(--card-background); + margin-top: 0; + padding: 15px 0; + box-shadow: var(--shadow-l1); + display: none; - &.show { - display: block; - } + &.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)) { - padding: 10px 0; - } - - @media (min-width: $on-phone + 1) { + @include respond(md) { width: 100%; + padding: 10px 0; } 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 { diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index b6722a9..f5abe1e 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -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; } } } diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index f261f41..d1ad08d 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -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; } |