kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-21 23:52:31 -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; $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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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: "";

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

@ -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;