diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss index 2dd51fa..72c9656 100644 --- a/resources/assets/sass/_var.scss +++ b/resources/assets/sass/_var.scss @@ -31,6 +31,7 @@ $c-error: #fa2036; // error $nav-link-count: 3; // Sizes +$base-font-size: 16px; $nav-height-desktop: 60px; $nav-height-mobile: 50px; $nav-link-height-mobile: 50px; diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index b9eb653..96cd90c 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -5,8 +5,11 @@ // Libraries @import "bootstrap/scss/bootstrap.scss"; -// Supplementary +// Functionality +@import "functions/**/*.scss"; @import "mixins/**/*.scss"; + +// Supplementary @import "classes/**/*.scss"; @import "partials/**/*.scss"; @import "sections/**/*.scss"; @@ -40,6 +43,7 @@ body { @include font-sans; width: 100%; color: $c-text; + font-size: $base-font-size; -webkit-overflow-scrolling: touch; } diff --git a/resources/assets/sass/functions/_px2rem.scss b/resources/assets/sass/functions/_px2rem.scss new file mode 100644 index 0000000..4b6c032 --- /dev/null +++ b/resources/assets/sass/functions/_px2rem.scss @@ -0,0 +1,3 @@ +@function px2rem($size) { + @return ((strip-unit($size) / strip-unit($base-font-size)) * 1rem); +} diff --git a/resources/assets/sass/functions/_strip-unit.scss b/resources/assets/sass/functions/_strip-unit.scss new file mode 100644 index 0000000..4a3c40e --- /dev/null +++ b/resources/assets/sass/functions/_strip-unit.scss @@ -0,0 +1,3 @@ +@function strip-unit($value) { + @return ($value / ($value * 0 + 1)); +} diff --git a/resources/assets/sass/pages/_blog.scss b/resources/assets/sass/pages/_blog.scss index dc17536..ab7169c 100644 --- a/resources/assets/sass/pages/_blog.scss +++ b/resources/assets/sass/pages/_blog.scss @@ -52,7 +52,7 @@ &-title { @include font-sans-semibold; margin-bottom: $grid-gutter-width; - font-size: 25px; + font-size: px2rem(25px); text-transform: uppercase; } diff --git a/resources/assets/sass/pages/_contact.scss b/resources/assets/sass/pages/_contact.scss index 4e04bfa..81b7af8 100644 --- a/resources/assets/sass/pages/_contact.scss +++ b/resources/assets/sass/pages/_contact.scss @@ -9,7 +9,7 @@ padding: 5px 10px; border: 2px solid fade-out($c-base, 0.75); background-color: rgba(255, 255, 255, 0.8); - font-size: 14px; + font-size: px2rem(14px); transition: border $trans-speed; &:focus { @@ -48,7 +48,7 @@ padding: 5px 10px; background-color: lighten($c-error, 15%); color: $c-text-light; - font-size: 14px; + font-size: px2rem(14px); text-align: center; opacity: 0; transition: opacity $trans-speed; diff --git a/resources/assets/sass/pages/_error.scss b/resources/assets/sass/pages/_error.scss index c9cf0f6..d981622 100644 --- a/resources/assets/sass/pages/_error.scss +++ b/resources/assets/sass/pages/_error.scss @@ -7,16 +7,16 @@ h1 { @include font-sans-bold; width: 100%; - font-size: 22px; + font-size: px2rem(22px); text-align: center; text-transform: uppercase; @include media-breakpoint-up(sm) { - font-size: 32px; + font-size: px2rem(32px); } @include media-breakpoint-up(lg) { - font-size: 48px; + font-size: px2rem(48px); } } } diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss index ba72fec..5d1d172 100644 --- a/resources/assets/sass/sections/_nav.scss +++ b/resources/assets/sass/sections/_nav.scss @@ -120,7 +120,7 @@ position: relative; display: inline-block; color: $c-text-light; - font-size: 14px; + font-size: px2rem(14px); text-transform: uppercase; @media (max-width: $nav-mobile-max) { diff --git a/resources/assets/sass/sections/_subscription-form.scss b/resources/assets/sass/sections/_subscription-form.scss index a7ed5ff..15b57ad 100644 --- a/resources/assets/sass/sections/_subscription-form.scss +++ b/resources/assets/sass/sections/_subscription-form.scss @@ -10,7 +10,7 @@ width: calc(100% - 10px); padding: 3px; border: 2px solid fade-out($c-base, 0.75); - font-size: 14px; + font-size: px2rem(14px); text-align: center; transition: border-color $trans-speed;