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

Use rem and a base size for fonts so we can globally change them if necessary

Browse source
This commit is contained in:
Kevin MacMartin 2019-05-03 00:32:48 -04:00
parent b19db9b709
commit 6b3bbcc1a9
9 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/assets/sass/_var.scss vendored
View file

@ -31,6 +31,7 @@ $c-error: #fa2036; // error
$nav-link-count: 3; $nav-link-count: 3;
// Sizes // Sizes
$base-font-size: 16px;
$nav-height-desktop: 60px; $nav-height-desktop: 60px;
$nav-height-mobile: 50px; $nav-height-mobile: 50px;
$nav-link-height-mobile: 50px; $nav-link-height-mobile: 50px;

6
resources/assets/sass/app.scss vendored
View file

@ -5,8 +5,11 @@
// Libraries // Libraries
@import "bootstrap/scss/bootstrap.scss"; @import "bootstrap/scss/bootstrap.scss";
// Supplementary // Functionality
@import "functions/**/*.scss";
@import "mixins/**/*.scss"; @import "mixins/**/*.scss";
// Supplementary
@import "classes/**/*.scss"; @import "classes/**/*.scss";
@import "partials/**/*.scss"; @import "partials/**/*.scss";
@import "sections/**/*.scss"; @import "sections/**/*.scss";
@ -40,6 +43,7 @@ body {
@include font-sans; @include font-sans;
width: 100%; width: 100%;
color: $c-text; color: $c-text;
font-size: $base-font-size;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

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

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

3
resources/assets/sass/functions/_strip-unit.scss vendored Normal file
View file

@ -0,0 +1,3 @@
@function strip-unit($value) {
@return ($value / ($value * 0 + 1));
}

2
resources/assets/sass/pages/_blog.scss vendored
View file

@ -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: 25px; font-size: px2rem(25px);
text-transform: uppercase; text-transform: uppercase;
} }

4
resources/assets/sass/pages/_contact.scss vendored
View file

@ -9,7 +9,7 @@
padding: 5px 10px; padding: 5px 10px;
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: 14px; font-size: px2rem(14px);
transition: border $trans-speed; transition: border $trans-speed;
&:focus { &:focus {
@ -48,7 +48,7 @@
padding: 5px 10px; padding: 5px 10px;
background-color: lighten($c-error, 15%); background-color: lighten($c-error, 15%);
color: $c-text-light; color: $c-text-light;
font-size: 14px; font-size: px2rem(14px);
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: 22px; font-size: px2rem(22px);
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
font-size: 32px; font-size: px2rem(32px);
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
font-size: 48px; font-size: px2rem(48px);
} }
} }
} }

2
resources/assets/sass/sections/_nav.scss vendored
View file

@ -120,7 +120,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
color: $c-text-light; color: $c-text-light;
font-size: 14px; font-size: px2rem(14px);
text-transform: uppercase; text-transform: uppercase;
@media (max-width: $nav-mobile-max) { @media (max-width: $nav-mobile-max) {

2
resources/assets/sass/sections/_subscription-form.scss vendored
View file

@ -10,7 +10,7 @@
width: calc(100% - 10px); width: calc(100% - 10px);
padding: 3px; padding: 3px;
border: 2px solid fade-out($c-base, 0.75); border: 2px solid fade-out($c-base, 0.75);
font-size: 14px; font-size: px2rem(14px);
text-align: center; text-align: center;
transition: border-color $trans-speed; transition: border-color $trans-speed;