mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 19:26:38 -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;
|
$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
6
resources/assets/sass/app.scss
vendored
|
@ -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
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 {
|
&-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
4
resources/assets/sass/pages/_contact.scss
vendored
|
@ -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
6
resources/assets/sass/pages/_error.scss
vendored
|
@ -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
2
resources/assets/sass/sections/_nav.scss
vendored
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue