refactor: update variable.scss to use @mixin respond

This commit is contained in:
Jimmy 2021-06-19 21:19:35 +02:00
parent 7693cbe731
commit 9c1e026a63

View File

@ -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; --small-card-padding: 25px 20px;
@media (max-width: $on-tablet) {
--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; --article-font-size: 1.6rem;
@media (max-width: $on-tablet) {
--article-font-size: 1.6rem; @include respond(md) {
--article-font-size: 1.7rem;
} }
--article-line-height: 1.85; --article-line-height: 1.85;
} }