jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 11:38:28 -04:00
Code Issues

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/sass/abstracts/_responsive.scss Normal file
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();
}

7
assets/sass/components/_logo.scss
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;
}
}

4
assets/sass/main.scss
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';

12
assets/sass/pages/_global.scss
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;
}
}

45
assets/sass/pages/_home.scss
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;
}
}
}
}
}

76
assets/sass/pages/_notes.scss
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;
}
}
}
}

18
assets/sass/pages/_videos.scss
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;
}
}
}

16
assets/sass/pages/responsive/_global.scss
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';
}

43
assets/sass/pages/responsive/_home.scss
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;
}
}
}
}

69
assets/sass/pages/responsive/_notes.scss
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;
}
}
}

16
assets/sass/pages/responsive/_videos.scss
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;
}
}

1
layouts/partials/footer.html
View File

@ -1,4 +1,3 @@
{{ if eq hugo.Environment "production" }}{{ partial "stats.html" . }}{{ end }}
</body>
</html>

1
layouts/partials/header.html
View File

@ -44,7 +44,6 @@
<link rel="icon" href="{{ "favicon-32.png" | absURL }}" sizes="32x32">
<link rel="icon" href="{{ "favicon-16.png" | absURL }}" sizes="16x16">
<link rel="shortcut icon" href="{{ "favicon.ico" | absURL }}">
<link rel="dns-prefetch" href="https://s.jarv.is">
<link rel="author" href="{{ "humans.txt" | absURL }}">
</head>
<body id="{{ .Type }}">

6
layouts/partials/logo.html
View File

@ -1,14 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 144.1">
<g id="color1" fill="#6fbc4e">
<g id="c1" fill="#6fbc4e">
<polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/>
<polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/>
<polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
</g>
<g id="color2" fill="#ffb900">
<g id="c2" fill="#ffb900">
<polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
<polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
</g>
<g id="color3" fill="#009cdf">
<g id="c3" fill="#009cdf">
<polygon points="76.8 33.2 76.8 99.8 76.8 99.8 38.4 121.9 38.4 144.1 96 110.9 96 22.1 76.8 33.2 76.8 33.2"/>
<polygon points="19.2 110.9 38.4 99.8 38.4 77.6 19.2 88.7 19.2 110.9 19.2 110.9"/>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

6
layouts/shortcodes/image.html
View File

@ -1,5 +1,4 @@
<!-- Automatic resizing for HiDPI/retina images -->
<!-- https://gohugo.io/content-management/image-processing/ -->
{{- $original := .Page.Resources.GetMatch (.Get "src") -}}
{{- .Scratch.Set "image" $original -}}
@ -24,13 +23,16 @@
{{- $image := .Scratch.Get "image" -}}
{{- $displayWidth := (math.Round (div $image.Width 2)) -}}
{{- $displayHeight := (math.Round (div $image.Height 2)) -}}
{{- if .Get "caption" -}}
<figure>
<picture>
{{- else -}}
<p>
{{- end -}}
<img src="{{ $image.Permalink }}"{{ if .Get "alt" }} alt="{{ .Get "alt" }}"{{ end }}{{ if .Get "width" }} width="{{ .Get "width" }}"{{ end }}{{ if .Get "caption" }} title="{{ .Get "caption"}}"{{ end }}>
<img src="{{ $image.Permalink }}" width="{{ $displayWidth }}" height="{{ $displayHeight }}"{{ if .Get "alt" }} alt="{{ .Get "alt" }}"{{ end }}{{ if .Get "caption" }} title="{{ .Get "caption"}}"{{ end }}>
{{- if .Get "caption" -}}
</picture>
<figcaption>{{ .Get "caption" }}</figcaption>

17
layouts/shortcodes/video.html
View File

@ -1,7 +1,12 @@
<video class="embed" width="{{ if .Get "width" }}{{ .Get "width" }}{{ else }}640{{ end }}" height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}385{{ end }}" {{ if .Get "poster" }}poster="{{ .Get "poster" }}" {{ end }}controls>
{{ if .Get "webm" }}<source src="{{ .Get "webm" }}" type="video/webm">{{ end }}
{{ if .Get "mp4" }}<source src="{{ .Get "mp4" }}" type="video/mp4">{{ end }}
{{ if .Get "ogg" }}<source src="{{ .Get "ogg" }}" type="video/ogg">{{ end }}
{{- $video_webm := .Page.Resources.GetMatch (.Get "webm") -}}
{{- $video_mp4 := .Page.Resources.GetMatch (.Get "mp4") -}}
{{- $video_ogg := .Page.Resources.GetMatch (.Get "ogg") -}}
{{- $img_poster := .Page.Resources.GetMatch (.Get "poster") -}}
Your browser does not support HTML5 video. <a href="{{ .Get "mp4" }}">Load the video directly.</a>
</video>
<video class="embed"{{ if .Get "width" }} width="{{ .Get "width" }}"{{ end }}{{ if .Get "height" }} height="{{ .Get "height" }}"{{ end }}{{ if .Get "poster" }} poster="{{ $img_poster.Permalink }}"{{ end }}{{ if .Get "autoplay" }} autoplay{{ end }}{{ if .Get "loop" }} loop{{ end }}{{ if ne (.Get "nocontrols") "1" }} controls{{ end }}>
{{ if .Get "webm" }}<source src="{{ $video_webm.Permalink }}" type="video/webm">{{ end }}
{{ if .Get "mp4" }}<source src="{{ $video_mp4.Permalink }}" type="video/mp4">{{ end }}
{{ if .Get "ogg" }}<source src="{{ $video_ogg.Permalink }}" type="video/ogg">{{ end }}
Your browser does not support HTML5 video. <a href="{{ $video_mp4.Permalink }}">Load the .mp4 video directly.</a>
</video>