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