From 9f8e83624a29ed5303a7b5b5b72a32668f57d91e Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Sat, 4 May 2019 00:22:56 -0400 Subject: [PATCH] Use px2rem for px values other than border width and 0px for vertical/horizontal positioning to allow the site to be scaled by overriding the font size in html --- resources/assets/sass/_var.scss | 7 ++++--- resources/assets/sass/pages/_blog.scss | 10 +++++----- resources/assets/sass/pages/_contact.scss | 12 ++++++------ resources/assets/sass/sections/_footer.scss | 6 +++--- resources/assets/sass/sections/_nav.scss | 16 ++++++++-------- .../assets/sass/sections/_subscription-form.scss | 10 +++++----- 6 files changed, 31 insertions(+), 30 deletions(-) diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss index 2dd51fa..97cba3f 100644 --- a/resources/assets/sass/_var.scss +++ b/resources/assets/sass/_var.scss @@ -31,9 +31,10 @@ $c-error: #fa2036; // error $nav-link-count: 3; // Sizes -$nav-height-desktop: 60px; -$nav-height-mobile: 50px; -$nav-link-height-mobile: 50px; +$nav-height-desktop: px2rem(60px); +$nav-height-mobile: px2rem(50px); +$nav-link-height-mobile: px2rem(50px); +$grid-gutter-width: px2rem(30px); // Breakpoints $nav-desktop-min: 768px; diff --git a/resources/assets/sass/pages/_blog.scss b/resources/assets/sass/pages/_blog.scss index ab7169c..e7cb653 100644 --- a/resources/assets/sass/pages/_blog.scss +++ b/resources/assets/sass/pages/_blog.scss @@ -7,7 +7,7 @@ .blog-entry { border: 1px solid lighten($c-base, 75%); - border-radius: 5px; + border-radius: px2rem(5px); @include media-breakpoint-up(md) { display: flex; @@ -36,7 +36,7 @@ } &-content { - padding: 25px; + padding: px2rem(25px); @include media-breakpoint-up(md) { display: flex; @@ -68,10 +68,10 @@ width: 100%; &-item { - margin-right: 5px; + margin-right: px2rem(5px); display: inline-block; - padding: 3px 8px; - border-radius: 3px; + padding: px2rem(3px) px2rem(8px); + border-radius: px2rem(3px); background-color: $c-accent; color: $c-text-light; } diff --git a/resources/assets/sass/pages/_contact.scss b/resources/assets/sass/pages/_contact.scss index 81b7af8..d52c76e 100644 --- a/resources/assets/sass/pages/_contact.scss +++ b/resources/assets/sass/pages/_contact.scss @@ -1,12 +1,12 @@ .contact-page-component { $trans-speed: 100ms; - padding-top: 35px; + padding-top: px2rem(35px); padding-bottom: 0px; input, textarea { - margin-bottom: 20px; + margin-bottom: px2rem(20px); width: 100%; - padding: 5px 10px; + padding: px2rem(5px) px2rem(10px); border: 2px solid fade-out($c-base, 0.75); background-color: rgba(255, 255, 255, 0.8); font-size: px2rem(14px); @@ -23,7 +23,7 @@ textarea { resize: none; - height: 150px; + height: px2rem(150px); } .submit { @@ -44,8 +44,8 @@ } .notification { - margin: 0px auto 15px auto; - padding: 5px 10px; + margin: 0px auto px2rem(15px) auto; + padding: px2rem(5px) px2rem(10px); background-color: lighten($c-error, 15%); color: $c-text-light; font-size: px2rem(14px); diff --git a/resources/assets/sass/sections/_footer.scss b/resources/assets/sass/sections/_footer.scss index 21e9d34..ff0f810 100644 --- a/resources/assets/sass/sections/_footer.scss +++ b/resources/assets/sass/sections/_footer.scss @@ -1,8 +1,8 @@ .footer-section-component { width: 100%; - height: 32px; - padding: 0px 10px; + height: px2rem(32px); + padding: 0px px2rem(10px); background-color: $c-base; color: $c-text-light; - line-height: 32px; + line-height: px2rem(32px); } diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss index 5d1d172..6780b1d 100644 --- a/resources/assets/sass/sections/_nav.scss +++ b/resources/assets/sass/sections/_nav.scss @@ -1,7 +1,7 @@ .nav-section-component { - $logo-offset: 10px; - $desktop-logo-width: 35px; - $mobile-logo-width: 30px; + $logo-offset: px2rem(10px); + $desktop-logo-width: px2rem(35px); + $mobile-logo-width: px2rem(30px); @include font-sans-semibold; position: absolute; top: 0px; @@ -25,8 +25,8 @@ right: ($grid-gutter-width / 2); transform: translateY(-50%); margin: 0px; - width: 22px; - height: 14px; + width: px2rem(22px); + height: px2rem(14px); padding: 0px; border: 0; border-radius: 0; @@ -126,7 +126,7 @@ @media (max-width: $nav-mobile-max) { display: block; height: $nav-link-height-mobile; - padding: 0px 10px; + padding: 0px px2rem(10px); background-color: $c-base; line-height: $nav-link-height-mobile; transition: background-color 150ms; @@ -137,7 +137,7 @@ } @media (min-width: $nav-desktop-min) { - padding: 5px 20px; + padding: px2rem(5px) px2rem(20px); transition: color 150ms; &:first-child { @@ -159,7 +159,7 @@ span { position: relative; - padding: 3px 0px; + padding: px2rem(3px) 0px; &:after { content: ""; diff --git a/resources/assets/sass/sections/_subscription-form.scss b/resources/assets/sass/sections/_subscription-form.scss index 15b57ad..c19357e 100644 --- a/resources/assets/sass/sections/_subscription-form.scss +++ b/resources/assets/sass/sections/_subscription-form.scss @@ -1,14 +1,14 @@ .subscription-form-section-component { $trans-speed: 100ms; - width: 200px; + width: px2rem(200px); border: 2px solid fade-out($c-base, 0.75); - border-radius: 3px; + border-radius: px2rem(3px); background-color: lighten($c-base, 75%); input { - margin: 5px; - width: calc(100% - 10px); - padding: 3px; + margin: px2rem(5px); + width: calc(100% - #{px2rem(10px)}); + padding: px2rem(3px); border: 2px solid fade-out($c-base, 0.75); font-size: px2rem(14px); text-align: center;