1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-19 04:55:30 -04:00

refactor responsive SCSS using mixins

This commit is contained in:
2019-11-03 21:36:51 -05:00
parent 4dd67b6723
commit 4f7c01d600
16 changed files with 182 additions and 164 deletions

View File

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

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>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

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>

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>