kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-09 03:16:38 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Kevin MacMartin 2019-05-04 00:22:56 -04:00
parent 419f4d8f48
commit 9f8e83624a
6 changed files with 31 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -31,9 +31,10 @@ $c-error: #fa2036; // error
$nav-link-count: 3;
// Sizes
$nav-height-desktop: 60px;
$nav-height-mobile: 50px;
$nav-link-height-mobile: 50px;
$nav-height-desktop: px2rem(60px);
$nav-height-mobile: px2rem(50px);
$nav-link-height-mobile: px2rem(50px);
$grid-gutter-width: px2rem(30px);
// Breakpoints
$nav-desktop-min: 768px;

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

@ -7,7 +7,7 @@
.blog-entry {
border: 1px solid lighten($c-base, 75%);
border-radius: 5px;
border-radius: px2rem(5px);
@include media-breakpoint-up(md) {
display: flex;
@ -36,7 +36,7 @@
}
&-content {
padding: 25px;
padding: px2rem(25px);
@include media-breakpoint-up(md) {
display: flex;
@ -68,10 +68,10 @@
width: 100%;
&-item {
margin-right: 5px;
margin-right: px2rem(5px);
display: inline-block;
padding: 3px 8px;
border-radius: 3px;
padding: px2rem(3px) px2rem(8px);
border-radius: px2rem(3px);
background-color: $c-accent;
color: $c-text-light;
}

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

@ -1,12 +1,12 @@
.contact-page-component {
$trans-speed: 100ms;
padding-top: 35px;
padding-top: px2rem(35px);
padding-bottom: 0px;
input, textarea {
margin-bottom: 20px;
margin-bottom: px2rem(20px);
width: 100%;
padding: 5px 10px;
padding: px2rem(5px) px2rem(10px);
border: 2px solid fade-out($c-base, 0.75);
background-color: rgba(255, 255, 255, 0.8);
font-size: px2rem(14px);
@ -23,7 +23,7 @@
textarea {
resize: none;
height: 150px;
height: px2rem(150px);
}
.submit {
@ -44,8 +44,8 @@
}
.notification {
margin: 0px auto 15px auto;
padding: 5px 10px;
margin: 0px auto px2rem(15px) auto;
padding: px2rem(5px) px2rem(10px);
background-color: lighten($c-error, 15%);
color: $c-text-light;
font-size: px2rem(14px);

6
resources/assets/sass/sections/_footer.scss vendored
View file

@ -1,8 +1,8 @@
.footer-section-component {
width: 100%;
height: 32px;
padding: 0px 10px;
height: px2rem(32px);
padding: 0px px2rem(10px);
background-color: $c-base;
color: $c-text-light;
line-height: 32px;
line-height: px2rem(32px);
}

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

@ -1,7 +1,7 @@
.nav-section-component {
$logo-offset: 10px;
$desktop-logo-width: 35px;
$mobile-logo-width: 30px;
$logo-offset: px2rem(10px);
$desktop-logo-width: px2rem(35px);
$mobile-logo-width: px2rem(30px);
@include font-sans-semibold;
position: absolute;
top: 0px;
@ -25,8 +25,8 @@
right: ($grid-gutter-width / 2);
transform: translateY(-50%);
margin: 0px;
width: 22px;
height: 14px;
width: px2rem(22px);
height: px2rem(14px);
padding: 0px;
border: 0;
border-radius: 0;
@ -126,7 +126,7 @@
@media (max-width: $nav-mobile-max) {
display: block;
height: $nav-link-height-mobile;
padding: 0px 10px;
padding: 0px px2rem(10px);
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: 5px 20px;
padding: px2rem(5px) px2rem(20px);
transition: color 150ms;
&:first-child {
@ -159,7 +159,7 @@
span {
position: relative;
padding: 3px 0px;
padding: px2rem(3px) 0px;
&:after {
content: "";

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

@ -1,14 +1,14 @@
.subscription-form-section-component {
$trans-speed: 100ms;
width: 200px;
width: px2rem(200px);
border: 2px solid fade-out($c-base, 0.75);
border-radius: 3px;
border-radius: px2rem(3px);
background-color: lighten($c-base, 75%);
input {
margin: 5px;
width: calc(100% - 10px);
padding: 3px;
margin: px2rem(5px);
width: calc(100% - #{px2rem(10px)});
padding: px2rem(3px);
border: 2px solid fade-out($c-base, 0.75);
font-size: px2rem(14px);
text-align: center;