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/article.scss
+18 -18
View File
@@ -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;
}
}
}