jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-11 10:55:27 -04:00
Code Issues Activity

refactor responsive SCSS using mixins

Browse Source
This commit is contained in:
Jake Jarvis
2019-11-03 21:36:51 -05:00
parent 4dd67b6723
commit 4f7c01d600
16 changed files with 182 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/pages/_global.scss
+12
View File
@@ -33,3 +33,15 @@ body {
}
}
}
// Responsive
@mixin responsive--global() {
body {
// Safari iOS menu bar reappers below 44px:
// https://www.eventbrite.com/engineering/mobile-safari-why/
padding-bottom: 45px !important;
// Allows you to scroll below the viewport; default value is visible
overflow-y: scroll;
}
}
assets/sass/pages/_home.scss
+45
View File
@@ -136,3 +136,48 @@ body#home {
transform-origin: 70% 70%;
}
}
// Responsive
@mixin responsive--home() {
body#home {
font-size: 1em;
padding: 25px;
p {
font-size: 1.1em;
}
img#me {
width: 68px;
height: 68px;
padding: 2px;
}
footer div {
&#panda {
display: none;
}
&#blog,
&#info {
width: 50%;
}
&#blog {
font-size: 1em;
line-height: 1.5;
}
&#info {
font-size: 0.7em;
line-height: 2.1; // magic numbers don't judge
span#copyright::after {
content: "\A";
white-space: pre;
}
}
}
}
}
assets/sass/pages/_notes.scss
+75 -1
View File
@@ -215,7 +215,10 @@ body#notes {
video.embed {
display: block;
margin: 0 auto;
margin: 1em auto;
max-width: 100%;
height: auto;
border: 0;
}
div.embed.video-player {
@@ -302,3 +305,74 @@ body#notes {
}
}
}
// Responsive
@mixin responsive--notes() {
body#notes {
padding: 0 20px;
width: 100%;
max-width: 100%;
header {
nav {
padding: 5px 0;
a#logo {
padding: 10px;
img,
svg {
height: 60px;
width: auto;
}
span#name {
display: none;
}
}
ul {
font-size: 1.75em;
margin-right: 10px;
li {
width: 55px;
}
}
}
}
footer div {
&#panda {
display: none;
}
&#copyright,
&#poweredby {
line-height: 1.8;
width: 50%;
}
&#poweredby {
a#hugo::after {
content: "\A";
white-space: pre;
}
}
}
main#archive section.year {
font-size: 1em;
}
main#single article {
width: 100%;
max-width: 100%;
div#info h1 {
font-size: 1.7em;
}
}
}
}
assets/sass/pages/_videos.scss
+18
View File
@@ -30,3 +30,21 @@ body#videos {
font-family: inherit; // for subtitles
}
}
// Responsive
@mixin responsive--videos() {
body#videos {
margin: 20px 0;
h1 {
font-size: 1.6em;
padding: 0 10px;
}
video {
width: 100%;
height: auto;
}
}
}
assets/sass/pages/responsive/_global.scss
-16
View File
@@ -1,16 +0,0 @@
@charset "UTF-8";
// Responsive Awesomeness
@media screen and (max-width: $responsive-width) {
body {
// Safari iOS menu bar reappers below 44px:
// https://www.eventbrite.com/engineering/mobile-safari-why/
padding-bottom: 45px !important;
// Allows you to scroll below the viewport; default value is visible
overflow-y: scroll;
}
@import 'home';
@import 'notes';
@import 'videos';
}
assets/sass/pages/responsive/_home.scss
-43
View File
@@ -1,43 +0,0 @@
@charset "UTF-8";
// Responsive Home
body#home {
font-size: 1em;
padding: 25px;
p {
font-size: 1.1em;
}
img#me {
width: 68px;
height: 68px;
padding: 2px;
}
footer div {
&#panda {
display: none;
}
&#blog,
&#info {
width: 50%;
}
&#blog {
font-size: 1em;
line-height: 1.5;
}
&#info {
font-size: 0.7em;
line-height: 2.1; // magic numbers don't judge
span#copyright::after {
content: "\A";
white-space: pre;
}
}
}
}
assets/sass/pages/responsive/_notes.scss
-69
View File
@@ -1,69 +0,0 @@
@charset "UTF-8";
// Responsive Blog
body#notes {
padding: 0 20px;
width: 100%;
max-width: 100%;
header {
nav {
padding: 5px 0;
a#logo {
padding: 10px;
img,
svg {
height: 60px;
width: auto;
}
span#name {
display: none;
}
}
ul {
font-size: 1.75em;
margin-right: 10px;
li {
width: 55px;
}
}
}
}
footer div {
&#panda {
display: none;
}
&#copyright,
&#poweredby {
line-height: 1.8;
width: 50%;
}
&#poweredby {
a#hugo::after {
content: "\A";
white-space: pre;
}
}
}
main#archive section.year {
font-size: 1em;
}
main#single article {
width: 100%;
max-width: 100%;
div#info h1 {
font-size: 1.7em;
}
}
}
assets/sass/pages/responsive/_videos.scss
-16
View File
@@ -1,16 +0,0 @@
@charset "UTF-8";
// Responsive Videos
body#videos {
margin: 20px 0;
h1 {
font-size: 1.6em;
padding: 0 10px;
}
video {
width: 100%;
height: auto;
}
}