mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 11:16:39 -05:00
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:
parent
422ecda483
commit
14171a22b6
10 changed files with 52 additions and 42 deletions
8
resources/assets/sass/_var.scss
vendored
8
resources/assets/sass/_var.scss
vendored
|
@ -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;
|
||||
|
|
3
resources/assets/sass/functions/_px2rem.scss
vendored
3
resources/assets/sass/functions/_px2rem.scss
vendored
|
@ -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
8
resources/assets/sass/functions/_pxrem.scss
vendored
Normal 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);
|
||||
}
|
|
@ -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));
|
||||
}
|
||||
|
|
12
resources/assets/sass/pages/_blog.scss
vendored
12
resources/assets/sass/pages/_blog.scss
vendored
|
@ -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;
|
||||
}
|
||||
|
|
16
resources/assets/sass/pages/_contact.scss
vendored
16
resources/assets/sass/pages/_contact.scss
vendored
|
@ -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;
|
||||
|
|
6
resources/assets/sass/pages/_error.scss
vendored
6
resources/assets/sass/pages/_error.scss
vendored
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
6
resources/assets/sass/sections/_footer.scss
vendored
6
resources/assets/sass/sections/_footer.scss
vendored
|
@ -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);
|
||||
}
|
||||
|
|
18
resources/assets/sass/sections/_nav.scss
vendored
18
resources/assets/sass/sections/_nav.scss
vendored
|
@ -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: "";
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue