Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(WIP): add new SCSS mixin respond

Browse Source 
Theme's stylesheet mixes the use of max-width and min-width for responsive design, and it's horrible.
This commit is contained in:
Jimmy 2021-06-19 21:05:47 +02:00
parent 028ae12ea5
commit 7693cbe731
4 changed files with 134 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/scss/breakpoints.scss
View File

@ -1,4 +1,32 @@
$on-phone: 812px;
$on-tablet: 1024px;
$on-desktop: 1519px;
$on-desktop-large: 1920px;
$on-phone: 640px;
$on-tablet: 768px;
$on-desktop: 1024px;
$on-desktop-large: 1280px;
@mixin respond($breakpoint) {
@if ($breakpoint == sm) {
@media (min-width: 640px) {
@content;
}
}
@if ($breakpoint == md) {
@media (min-width: 768px) {
@content;
}
}
@if ($breakpoint == lg) {
@media (min-width: 1024px) {
@content;
}
}
@if ($breakpoint == xl) {
@media (min-width: 1280px) {
@content;
}
}
@if ($breakpoint == 2xl) {
@media (min-width: 1536px) {
@content;
}
}
}

92
assets/scss/grid.scss
View File

@ -2,67 +2,50 @@
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) {
--left-sidebar-max-width: 25%;
--right-sidebar-max-width: 25%;
max-width: 1024px;
}
@media (min-width: $on-tablet) {
max-width: 972px;
.right-sidebar {
width: 25%;
}
@include respond(lg) {
max-width: 1280px;
}
@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: 20%;
--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 +59,9 @@
}
&.on-phone--column {
@media (max-width: $on-phone) {
flex-direction: column;
flex-direction: column;
@include respond(md) {
flex-direction: unset;
}
}
@ -114,4 +98,12 @@ main.main {
.main-container {
min-height: 100vh;
}
@include respond(md) {
padding: 0 10px;
}
@include respond(lg) {
padding: 0 20px;
}
}

66
assets/scss/partials/menu.scss
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 {

68
assets/scss/partials/sidebar.scss
View File

@ -1,7 +1,7 @@
.sidebar {
padding: 0 15px;
&.sticky {
@media (min-width: ($on-phone + 1)) {
@include respond(md) {
position: sticky;
}
}
@ -12,43 +12,39 @@
flex-direction: column;
flex-shrink: 0;
--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 +54,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 +77,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 +88,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 +110,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;
}
}
}