From 14171a22b62be2176f7e4350c29161493f597aa5 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Sun, 12 May 2019 21:27:55 -0400 Subject: [PATCH] Rename px2rem to pxrem so it's easier to type frequently, add comments to both sass functions explaining what they do and how to use them, and don't include units where it's used so it's understood that it's not expected elsewhere (hopefully this makes it a bit less of a pain to type out) --- resources/assets/sass/_var.scss | 8 ++++---- resources/assets/sass/functions/_px2rem.scss | 3 --- resources/assets/sass/functions/_pxrem.scss | 8 ++++++++ .../assets/sass/functions/_strip-unit.scss | 5 +++++ resources/assets/sass/pages/_blog.scss | 12 ++++++------ resources/assets/sass/pages/_contact.scss | 16 ++++++++-------- resources/assets/sass/pages/_error.scss | 6 +++--- resources/assets/sass/sections/_footer.scss | 6 +++--- resources/assets/sass/sections/_nav.scss | 18 +++++++++--------- .../sass/sections/_subscription-form.scss | 12 ++++++------ 10 files changed, 52 insertions(+), 42 deletions(-) delete mode 100644 resources/assets/sass/functions/_px2rem.scss create mode 100644 resources/assets/sass/functions/_pxrem.scss diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss index 97cba3f..9769d75 100644 --- a/resources/assets/sass/_var.scss +++ b/resources/assets/sass/_var.scss @@ -31,10 +31,10 @@ $c-error: #fa2036; // error $nav-link-count: 3; // Sizes -$nav-height-desktop: px2rem(60px); -$nav-height-mobile: px2rem(50px); -$nav-link-height-mobile: px2rem(50px); -$grid-gutter-width: px2rem(30px); +$nav-height-desktop: pxrem(60); +$nav-height-mobile: pxrem(50); +$nav-link-height-mobile: pxrem(50); +$grid-gutter-width: pxrem(30); // Breakpoints $nav-desktop-min: 768px; diff --git a/resources/assets/sass/functions/_px2rem.scss b/resources/assets/sass/functions/_px2rem.scss deleted file mode 100644 index 4b6c032..0000000 --- a/resources/assets/sass/functions/_px2rem.scss +++ /dev/null @@ -1,3 +0,0 @@ -@function px2rem($size) { - @return ((strip-unit($size) / strip-unit($base-font-size)) * 1rem); -} diff --git a/resources/assets/sass/functions/_pxrem.scss b/resources/assets/sass/functions/_pxrem.scss new file mode 100644 index 0000000..1d4a6a4 --- /dev/null +++ b/resources/assets/sass/functions/_pxrem.scss @@ -0,0 +1,8 @@ +// +// Convert px to the equivalent rem based on $base-font-size +// +// Usage example: pxrem(32) or pxrem(32px) => 2rem +// +@function pxrem($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 index 4a3c40e..bdd9aca 100644 --- a/resources/assets/sass/functions/_strip-unit.scss +++ b/resources/assets/sass/functions/_strip-unit.scss @@ -1,3 +1,8 @@ +// +// Stripe the units from a value +// +// Usage example: strip-unit(25px) => 25 +// @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 e7cb653..102ed2e 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: px2rem(5px); + border-radius: pxrem(5); @include media-breakpoint-up(md) { display: flex; @@ -36,7 +36,7 @@ } &-content { - padding: px2rem(25px); + padding: pxrem(25); @include media-breakpoint-up(md) { display: flex; @@ -52,7 +52,7 @@ &-title { @include font-sans-semibold; margin-bottom: $grid-gutter-width; - font-size: px2rem(25px); + font-size: pxrem(25); text-transform: uppercase; } @@ -68,10 +68,10 @@ width: 100%; &-item { - margin-right: px2rem(5px); + margin-right: pxrem(5); display: inline-block; - padding: px2rem(3px) px2rem(8px); - border-radius: px2rem(3px); + padding: pxrem(3) pxrem(8); + border-radius: pxrem(3); 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 d52c76e..37fe4de 100644 --- a/resources/assets/sass/pages/_contact.scss +++ b/resources/assets/sass/pages/_contact.scss @@ -1,15 +1,15 @@ .contact-page-component { $trans-speed: 100ms; - padding-top: px2rem(35px); + padding-top: pxrem(35); padding-bottom: 0px; input, textarea { - margin-bottom: px2rem(20px); + margin-bottom: pxrem(20); width: 100%; - padding: px2rem(5px) px2rem(10px); + padding: pxrem(5) pxrem(10); border: 2px solid fade-out($c-base, 0.75); background-color: rgba(255, 255, 255, 0.8); - font-size: px2rem(14px); + font-size: pxrem(14); transition: border $trans-speed; &:focus { @@ -23,7 +23,7 @@ textarea { resize: none; - height: px2rem(150px); + height: pxrem(150); } .submit { @@ -44,11 +44,11 @@ } .notification { - margin: 0px auto px2rem(15px) auto; - padding: px2rem(5px) px2rem(10px); + margin: 0px auto pxrem(15) auto; + padding: pxrem(5) pxrem(10); background-color: lighten($c-error, 15%); color: $c-text-light; - font-size: px2rem(14px); + font-size: pxrem(14); 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 d981622..09fefc4 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: px2rem(22px); + font-size: pxrem(22); text-align: center; text-transform: uppercase; @include media-breakpoint-up(sm) { - font-size: px2rem(32px); + font-size: pxrem(32); } @include media-breakpoint-up(lg) { - font-size: px2rem(48px); + font-size: pxrem(48); } } } diff --git a/resources/assets/sass/sections/_footer.scss b/resources/assets/sass/sections/_footer.scss index ff0f810..b2565df 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: px2rem(32px); - padding: 0px px2rem(10px); + height: pxrem(32); + padding: 0px pxrem(10); background-color: $c-base; color: $c-text-light; - line-height: px2rem(32px); + line-height: pxrem(32); } diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss index 6780b1d..a95a5d5 100644 --- a/resources/assets/sass/sections/_nav.scss +++ b/resources/assets/sass/sections/_nav.scss @@ -1,7 +1,7 @@ .nav-section-component { - $logo-offset: px2rem(10px); - $desktop-logo-width: px2rem(35px); - $mobile-logo-width: px2rem(30px); + $logo-offset: pxrem(10); + $desktop-logo-width: pxrem(35); + $mobile-logo-width: pxrem(30); @include font-sans-semibold; position: absolute; top: 0px; @@ -25,8 +25,8 @@ right: ($grid-gutter-width / 2); transform: translateY(-50%); margin: 0px; - width: px2rem(22px); - height: px2rem(14px); + width: pxrem(22); + height: pxrem(14); padding: 0px; border: 0; border-radius: 0; @@ -120,13 +120,13 @@ position: relative; display: inline-block; color: $c-text-light; - font-size: px2rem(14px); + font-size: pxrem(14); text-transform: uppercase; @media (max-width: $nav-mobile-max) { display: block; height: $nav-link-height-mobile; - padding: 0px px2rem(10px); + padding: 0px pxrem(10); 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: px2rem(5px) px2rem(20px); + padding: pxrem(5) pxrem(20); transition: color 150ms; &:first-child { @@ -159,7 +159,7 @@ span { position: relative; - padding: px2rem(3px) 0px; + padding: pxrem(3) 0px; &:after { content: ""; diff --git a/resources/assets/sass/sections/_subscription-form.scss b/resources/assets/sass/sections/_subscription-form.scss index c19357e..2d403f8 100644 --- a/resources/assets/sass/sections/_subscription-form.scss +++ b/resources/assets/sass/sections/_subscription-form.scss @@ -1,16 +1,16 @@ .subscription-form-section-component { $trans-speed: 100ms; - width: px2rem(200px); + width: pxrem(200); border: 2px solid fade-out($c-base, 0.75); - border-radius: px2rem(3px); + border-radius: pxrem(3); background-color: lighten($c-base, 75%); input { - margin: px2rem(5px); - width: calc(100% - #{px2rem(10px)}); - padding: px2rem(3px); + margin: pxrem(5); + width: calc(100% - #{pxrem(10)}); + padding: pxrem(3); border: 2px solid fade-out($c-base, 0.75); - font-size: px2rem(14px); + font-size: pxrem(14); text-align: center; transition: border-color $trans-speed;