jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-10-13 09:25:44 -04:00
Code Issues Activity

refactor responsive SCSS using mixins

Browse Source
This commit is contained in:
jake committed 2019-11-03 21:36:51 -05:00
1 parent 4dd67b6723
commit 4f7c01d600
16 files changed
+182 -164
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/sass/abstracts/_responsive.scss
+9
View File
@@ -0,0 +1,9 @@
@charset "UTF-8";
// Responsive Awesomeness
@media screen and (max-width: $responsive-width) {
@include responsive--global();
@include responsive--home();
@include responsive--notes();
@include responsive--videos();
}
assets/sass/components/_logo.scss
+3 -4
View File
@@ -1,7 +1,6 @@
@charset "UTF-8";
// nifty color swapping on svg logo hover
a#logo {
&:hover {
$logo-original1: #6fbc4e;
@@ -9,13 +8,13 @@ a#logo {
$logo-original3: #009cdf;
svg {
g#color1 {
g#c1 {
fill: $logo-original2;
}
g#color2 {
g#c2 {
fill: $logo-original3;
}
g#color3 {
g#c3 {
fill: $logo-original1;
}
}
assets/sass/main.scss
+2 -2
View File
@@ -14,8 +14,8 @@
@import 'pages/notes';
@import 'pages/videos';
// Responsive Pages
@import 'pages/responsive/global';
// Responsive Mixins
@import 'abstracts/responsive';
// Miscellaneous
@import 'components/logo';
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;
}
}