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)

This commit is contained in:
Kevin MacMartin 2019-05-12 21:27:55 -04:00
parent 422ecda483
commit 14171a22b6
10 changed files with 52 additions and 42 deletions

View file

@ -31,10 +31,10 @@ $c-error: #fa2036; // error
$nav-link-count: 3; $nav-link-count: 3;
// Sizes // Sizes
$nav-height-desktop: px2rem(60px); $nav-height-desktop: pxrem(60);
$nav-height-mobile: px2rem(50px); $nav-height-mobile: pxrem(50);
$nav-link-height-mobile: px2rem(50px); $nav-link-height-mobile: pxrem(50);
$grid-gutter-width: px2rem(30px); $grid-gutter-width: pxrem(30);
// Breakpoints // Breakpoints
$nav-desktop-min: 768px; $nav-desktop-min: 768px;

View file

@ -1,3 +0,0 @@
@function px2rem($size) {
@return ((strip-unit($size) / strip-unit($base-font-size)) * 1rem);
}

View file

@ -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);
}

View file

@ -1,3 +1,8 @@
//
// Stripe the units from a value
//
// Usage example: strip-unit(25px) => 25
//
@function strip-unit($value) { @function strip-unit($value) {
@return ($value / ($value * 0 + 1)); @return ($value / ($value * 0 + 1));
} }

View file

@ -7,7 +7,7 @@
.blog-entry { .blog-entry {
border: 1px solid lighten($c-base, 75%); border: 1px solid lighten($c-base, 75%);
border-radius: px2rem(5px); border-radius: pxrem(5);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: flex; display: flex;
@ -36,7 +36,7 @@
} }
&-content { &-content {
padding: px2rem(25px); padding: pxrem(25);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: flex; display: flex;
@ -52,7 +52,7 @@
&-title { &-title {
@include font-sans-semibold; @include font-sans-semibold;
margin-bottom: $grid-gutter-width; margin-bottom: $grid-gutter-width;
font-size: px2rem(25px); font-size: pxrem(25);
text-transform: uppercase; text-transform: uppercase;
} }
@ -68,10 +68,10 @@
width: 100%; width: 100%;
&-item { &-item {
margin-right: px2rem(5px); margin-right: pxrem(5);
display: inline-block; display: inline-block;
padding: px2rem(3px) px2rem(8px); padding: pxrem(3) pxrem(8);
border-radius: px2rem(3px); border-radius: pxrem(3);
background-color: $c-accent; background-color: $c-accent;
color: $c-text-light; color: $c-text-light;
} }

View file

@ -1,15 +1,15 @@
.contact-page-component { .contact-page-component {
$trans-speed: 100ms; $trans-speed: 100ms;
padding-top: px2rem(35px); padding-top: pxrem(35);
padding-bottom: 0px; padding-bottom: 0px;
input, textarea { input, textarea {
margin-bottom: px2rem(20px); margin-bottom: pxrem(20);
width: 100%; width: 100%;
padding: px2rem(5px) px2rem(10px); padding: pxrem(5) pxrem(10);
border: 2px solid fade-out($c-base, 0.75); border: 2px solid fade-out($c-base, 0.75);
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
font-size: px2rem(14px); font-size: pxrem(14);
transition: border $trans-speed; transition: border $trans-speed;
&:focus { &:focus {
@ -23,7 +23,7 @@
textarea { textarea {
resize: none; resize: none;
height: px2rem(150px); height: pxrem(150);
} }
.submit { .submit {
@ -44,11 +44,11 @@
} }
.notification { .notification {
margin: 0px auto px2rem(15px) auto; margin: 0px auto pxrem(15) auto;
padding: px2rem(5px) px2rem(10px); padding: pxrem(5) pxrem(10);
background-color: lighten($c-error, 15%); background-color: lighten($c-error, 15%);
color: $c-text-light; color: $c-text-light;
font-size: px2rem(14px); font-size: pxrem(14);
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transition: opacity $trans-speed; transition: opacity $trans-speed;

View file

@ -7,16 +7,16 @@
h1 { h1 {
@include font-sans-bold; @include font-sans-bold;
width: 100%; width: 100%;
font-size: px2rem(22px); font-size: pxrem(22);
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
font-size: px2rem(32px); font-size: pxrem(32);
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
font-size: px2rem(48px); font-size: pxrem(48);
} }
} }
} }

View file

@ -1,8 +1,8 @@
.footer-section-component { .footer-section-component {
width: 100%; width: 100%;
height: px2rem(32px); height: pxrem(32);
padding: 0px px2rem(10px); padding: 0px pxrem(10);
background-color: $c-base; background-color: $c-base;
color: $c-text-light; color: $c-text-light;
line-height: px2rem(32px); line-height: pxrem(32);
} }

View file

@ -1,7 +1,7 @@
.nav-section-component { .nav-section-component {
$logo-offset: px2rem(10px); $logo-offset: pxrem(10);
$desktop-logo-width: px2rem(35px); $desktop-logo-width: pxrem(35);
$mobile-logo-width: px2rem(30px); $mobile-logo-width: pxrem(30);
@include font-sans-semibold; @include font-sans-semibold;
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -25,8 +25,8 @@
right: ($grid-gutter-width / 2); right: ($grid-gutter-width / 2);
transform: translateY(-50%); transform: translateY(-50%);
margin: 0px; margin: 0px;
width: px2rem(22px); width: pxrem(22);
height: px2rem(14px); height: pxrem(14);
padding: 0px; padding: 0px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@ -120,13 +120,13 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
color: $c-text-light; color: $c-text-light;
font-size: px2rem(14px); font-size: pxrem(14);
text-transform: uppercase; text-transform: uppercase;
@media (max-width: $nav-mobile-max) { @media (max-width: $nav-mobile-max) {
display: block; display: block;
height: $nav-link-height-mobile; height: $nav-link-height-mobile;
padding: 0px px2rem(10px); padding: 0px pxrem(10);
background-color: $c-base; background-color: $c-base;
line-height: $nav-link-height-mobile; line-height: $nav-link-height-mobile;
transition: background-color 150ms; transition: background-color 150ms;
@ -137,7 +137,7 @@
} }
@media (min-width: $nav-desktop-min) { @media (min-width: $nav-desktop-min) {
padding: px2rem(5px) px2rem(20px); padding: pxrem(5) pxrem(20);
transition: color 150ms; transition: color 150ms;
&:first-child { &:first-child {
@ -159,7 +159,7 @@
span { span {
position: relative; position: relative;
padding: px2rem(3px) 0px; padding: pxrem(3) 0px;
&:after { &:after {
content: ""; content: "";

View file

@ -1,16 +1,16 @@
.subscription-form-section-component { .subscription-form-section-component {
$trans-speed: 100ms; $trans-speed: 100ms;
width: px2rem(200px); width: pxrem(200);
border: 2px solid fade-out($c-base, 0.75); border: 2px solid fade-out($c-base, 0.75);
border-radius: px2rem(3px); border-radius: pxrem(3);
background-color: lighten($c-base, 75%); background-color: lighten($c-base, 75%);
input { input {
margin: px2rem(5px); margin: pxrem(5);
width: calc(100% - #{px2rem(10px)}); width: calc(100% - #{pxrem(10)});
padding: px2rem(3px); padding: pxrem(3);
border: 2px solid fade-out($c-base, 0.75); border: 2px solid fade-out($c-base, 0.75);
font-size: px2rem(14px); font-size: pxrem(14);
text-align: center; text-align: center;
transition: border-color $trans-speed; transition: border-color $trans-speed;