kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-21 23:52:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

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)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/assets/sass/_var.scss vendored
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;

3
resources/assets/sass/functions/_px2rem.scss vendored
View file

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

8
resources/assets/sass/functions/_pxrem.scss vendored Normal file
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);
}

5
resources/assets/sass/functions/_strip-unit.scss vendored
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));
} }

12
resources/assets/sass/pages/_blog.scss vendored
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;
} }

16
resources/assets/sass/pages/_contact.scss vendored
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;

6
resources/assets/sass/pages/_error.scss vendored
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);
} }
} }
} }

6
resources/assets/sass/sections/_footer.scss vendored
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);
} }

18
resources/assets/sass/sections/_nav.scss vendored
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: "";

12
resources/assets/sass/sections/_subscription-form.scss vendored
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;