mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-21 15:42:31 -05:00
Use rem and a base size for fonts so we can globally change them if necessary
This commit is contained in:
parent
b19db9b709
commit
6b3bbcc1a9
9 changed files with 20 additions and 9 deletions
1
resources/assets/sass/_var.scss
vendored
1
resources/assets/sass/_var.scss
vendored
|
@ -31,6 +31,7 @@ $c-error: #fa2036; // error
|
|||
$nav-link-count: 3;
|
||||
|
||||
// Sizes
|
||||
$base-font-size: 16px;
|
||||
$nav-height-desktop: 60px;
|
||||
$nav-height-mobile: 50px;
|
||||
$nav-link-height-mobile: 50px;
|
||||
|
|
6
resources/assets/sass/app.scss
vendored
6
resources/assets/sass/app.scss
vendored
|
@ -5,8 +5,11 @@
|
|||
// Libraries
|
||||
@import "bootstrap/scss/bootstrap.scss";
|
||||
|
||||
// Supplementary
|
||||
// Functionality
|
||||
@import "functions/**/*.scss";
|
||||
@import "mixins/**/*.scss";
|
||||
|
||||
// Supplementary
|
||||
@import "classes/**/*.scss";
|
||||
@import "partials/**/*.scss";
|
||||
@import "sections/**/*.scss";
|
||||
|
@ -40,6 +43,7 @@ body {
|
|||
@include font-sans;
|
||||
width: 100%;
|
||||
color: $c-text;
|
||||
font-size: $base-font-size;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
|
3
resources/assets/sass/functions/_px2rem.scss
vendored
Normal file
3
resources/assets/sass/functions/_px2rem.scss
vendored
Normal 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
3
resources/assets/sass/functions/_strip-unit.scss
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
@function strip-unit($value) {
|
||||
@return ($value / ($value * 0 + 1));
|
||||
}
|
2
resources/assets/sass/pages/_blog.scss
vendored
2
resources/assets/sass/pages/_blog.scss
vendored
|
@ -52,7 +52,7 @@
|
|||
&-title {
|
||||
@include font-sans-semibold;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
font-size: 25px;
|
||||
font-size: px2rem(25px);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
4
resources/assets/sass/pages/_contact.scss
vendored
4
resources/assets/sass/pages/_contact.scss
vendored
|
@ -9,7 +9,7 @@
|
|||
padding: 5px 10px;
|
||||
border: 2px solid fade-out($c-base, 0.75);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
font-size: px2rem(14px);
|
||||
transition: border $trans-speed;
|
||||
|
||||
&:focus {
|
||||
|
@ -48,7 +48,7 @@
|
|||
padding: 5px 10px;
|
||||
background-color: lighten($c-error, 15%);
|
||||
color: $c-text-light;
|
||||
font-size: 14px;
|
||||
font-size: px2rem(14px);
|
||||
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: 22px;
|
||||
font-size: px2rem(22px);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: 32px;
|
||||
font-size: px2rem(32px);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: 48px;
|
||||
font-size: px2rem(48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
2
resources/assets/sass/sections/_nav.scss
vendored
2
resources/assets/sass/sections/_nav.scss
vendored
|
@ -120,7 +120,7 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
color: $c-text-light;
|
||||
font-size: 14px;
|
||||
font-size: px2rem(14px);
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (max-width: $nav-mobile-max) {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
width: calc(100% - 10px);
|
||||
padding: 3px;
|
||||
border: 2px solid fade-out($c-base, 0.75);
|
||||
font-size: 14px;
|
||||
font-size: px2rem(14px);
|
||||
text-align: center;
|
||||
transition: border-color $trans-speed;
|
||||
|
||||
|
|
Loading…
Reference in a new issue