kushidou/hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
9 changed files with 166 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/partials/menu.scss
+27 -39
View File
@@ -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 {