mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-12 12:06:38 -05:00
Use px2rem for px values other than border width and 0px for vertical/horizontal positioning to allow the site to be scaled by overriding the font size in html
This commit is contained in:
parent
419f4d8f48
commit
9f8e83624a
6 changed files with 31 additions and 30 deletions
7
resources/assets/sass/_var.scss
vendored
7
resources/assets/sass/_var.scss
vendored
|
@ -31,9 +31,10 @@ $c-error: #fa2036; // error
|
||||||
$nav-link-count: 3;
|
$nav-link-count: 3;
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
$nav-height-desktop: 60px;
|
$nav-height-desktop: px2rem(60px);
|
||||||
$nav-height-mobile: 50px;
|
$nav-height-mobile: px2rem(50px);
|
||||||
$nav-link-height-mobile: 50px;
|
$nav-link-height-mobile: px2rem(50px);
|
||||||
|
$grid-gutter-width: px2rem(30px);
|
||||||
|
|
||||||
// Breakpoints
|
// Breakpoints
|
||||||
$nav-desktop-min: 768px;
|
$nav-desktop-min: 768px;
|
||||||
|
|
10
resources/assets/sass/pages/_blog.scss
vendored
10
resources/assets/sass/pages/_blog.scss
vendored
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
.blog-entry {
|
.blog-entry {
|
||||||
border: 1px solid lighten($c-base, 75%);
|
border: 1px solid lighten($c-base, 75%);
|
||||||
border-radius: 5px;
|
border-radius: px2rem(5px);
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
padding: 25px;
|
padding: px2rem(25px);
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -68,10 +68,10 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
margin-right: 5px;
|
margin-right: px2rem(5px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 3px 8px;
|
padding: px2rem(3px) px2rem(8px);
|
||||||
border-radius: 3px;
|
border-radius: px2rem(3px);
|
||||||
background-color: $c-accent;
|
background-color: $c-accent;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
}
|
}
|
||||||
|
|
12
resources/assets/sass/pages/_contact.scss
vendored
12
resources/assets/sass/pages/_contact.scss
vendored
|
@ -1,12 +1,12 @@
|
||||||
.contact-page-component {
|
.contact-page-component {
|
||||||
$trans-speed: 100ms;
|
$trans-speed: 100ms;
|
||||||
padding-top: 35px;
|
padding-top: px2rem(35px);
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
|
|
||||||
input, textarea {
|
input, textarea {
|
||||||
margin-bottom: 20px;
|
margin-bottom: px2rem(20px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px 10px;
|
padding: px2rem(5px) px2rem(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: px2rem(14px);
|
font-size: px2rem(14px);
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
resize: none;
|
resize: none;
|
||||||
height: 150px;
|
height: px2rem(150px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.submit {
|
.submit {
|
||||||
|
@ -44,8 +44,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification {
|
.notification {
|
||||||
margin: 0px auto 15px auto;
|
margin: 0px auto px2rem(15px) auto;
|
||||||
padding: 5px 10px;
|
padding: px2rem(5px) px2rem(10px);
|
||||||
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: px2rem(14px);
|
||||||
|
|
6
resources/assets/sass/sections/_footer.scss
vendored
6
resources/assets/sass/sections/_footer.scss
vendored
|
@ -1,8 +1,8 @@
|
||||||
.footer-section-component {
|
.footer-section-component {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 32px;
|
height: px2rem(32px);
|
||||||
padding: 0px 10px;
|
padding: 0px px2rem(10px);
|
||||||
background-color: $c-base;
|
background-color: $c-base;
|
||||||
color: $c-text-light;
|
color: $c-text-light;
|
||||||
line-height: 32px;
|
line-height: px2rem(32px);
|
||||||
}
|
}
|
||||||
|
|
16
resources/assets/sass/sections/_nav.scss
vendored
16
resources/assets/sass/sections/_nav.scss
vendored
|
@ -1,7 +1,7 @@
|
||||||
.nav-section-component {
|
.nav-section-component {
|
||||||
$logo-offset: 10px;
|
$logo-offset: px2rem(10px);
|
||||||
$desktop-logo-width: 35px;
|
$desktop-logo-width: px2rem(35px);
|
||||||
$mobile-logo-width: 30px;
|
$mobile-logo-width: px2rem(30px);
|
||||||
@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: 22px;
|
width: px2rem(22px);
|
||||||
height: 14px;
|
height: px2rem(14px);
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
@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 10px;
|
padding: 0px px2rem(10px);
|
||||||
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: 5px 20px;
|
padding: px2rem(5px) px2rem(20px);
|
||||||
transition: color 150ms;
|
transition: color 150ms;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
@ -159,7 +159,7 @@
|
||||||
|
|
||||||
span {
|
span {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 3px 0px;
|
padding: px2rem(3px) 0px;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
.subscription-form-section-component {
|
.subscription-form-section-component {
|
||||||
$trans-speed: 100ms;
|
$trans-speed: 100ms;
|
||||||
width: 200px;
|
width: px2rem(200px);
|
||||||
border: 2px solid fade-out($c-base, 0.75);
|
border: 2px solid fade-out($c-base, 0.75);
|
||||||
border-radius: 3px;
|
border-radius: px2rem(3px);
|
||||||
background-color: lighten($c-base, 75%);
|
background-color: lighten($c-base, 75%);
|
||||||
|
|
||||||
input {
|
input {
|
||||||
margin: 5px;
|
margin: px2rem(5px);
|
||||||
width: calc(100% - 10px);
|
width: calc(100% - #{px2rem(10px)});
|
||||||
padding: 3px;
|
padding: px2rem(3px);
|
||||||
border: 2px solid fade-out($c-base, 0.75);
|
border: 2px solid fade-out($c-base, 0.75);
|
||||||
font-size: px2rem(14px);
|
font-size: px2rem(14px);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue