diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss index e5b0ef4..496586f 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -2,58 +2,23 @@ // VARIABLES // -------------------------------------------------- -:root { +// Fonts +$text-font-family: Helvetica, Arial, sans-serif; +$regular-font-weight: 400; +$medium-font-weight: 500; +$semi-bold-font-weight: 600; +$bold-font-weight: 700; +$text-font-size: 1rem; +$text-line-height: 1.1; - // Fonts +// Dimensions +$icon-size: 3rem; +$sidebar-padding: 0.8rem; - --text-font-family: Helvetica, Arial, sans-serif; - --regular-font-weight: 400; - --medium-font-weight: 500; - --semi-bold-font-weight: 600; - --bold-font-weight: 700; - --text-font-size: 1rem; - --text-line-height: 1.1; - - // Dimensions - - --icon-size: 3rem; - --sidebar-padding: 0.8rem; - - // Colors - - --black: #000; - --white: #fff; -} +// Colors +$black: #000; +$white: #fff; // Media queries - $tablet-media-query: 48rem; $desktop-media-query: 62rem; - -@media screen and (min-width: $tablet-media-query) { - - :root { - - // Fonts - - --text-font-size: 0.95rem; - - // Dimensions - - --icon-size: 2.8rem; - } -} - -@media screen and (min-width: $desktop-media-query) { - - :root { - - // Fonts - - --text-font-size: 0.9rem; - - // Dimensions - - --icon-size: 2.6rem; - } -} diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss index 6b119df..9301ef9 100644 --- a/assets/css/base/_base.scss +++ b/assets/css/base/_base.scss @@ -7,14 +7,14 @@ // Fonts and colors body { - font-family: var(--text-font-family); - font-size: var(--text-font-size); - line-height: var(--text-line-height); - color: var(--black); + font-family: $text-font-family; + font-size: $text-font-size; + line-height: $text-line-height; + color: $black; } strong { - font-weight: var(--bold-font-weight); + font-weight: $bold-font-weight; } em { @@ -24,7 +24,7 @@ em { // Link style a { - color: var(--black); + color: $black; text-decoration: none; transition: text-decoration 200ms ease-in-out; @@ -35,7 +35,7 @@ a { } &:focus-visible { - outline: 1px dashed var(--black); + outline: 1px dashed $black; outline-offset: 2px; } } @@ -68,8 +68,8 @@ body { display: flex; justify-content: center; align-items: center; - width: var(--icon-size); - height: var(--icon-size); + width: $icon-size; + height: $icon-size; svg { width: 100%;