heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make images work for hight dpi screens

Browse Source
This commit is contained in:
Joe Hutchinson
2021-02-03 23:29:35 -05:00
parent 7b4c9a2133
commit 173e1e208e
5 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/style.css
View File

@@ -57,7 +57,7 @@ p {
.nav-bar { .nav-bar {
max-width: 60rem; max-width: 60rem;
width: 100%; width: 100%;
padding: 0.4em 0; padding: 0.6em 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

8
layouts/_default/home.html
View File

@@ -12,7 +12,13 @@
</div> </div>
{{ with resources.GetMatch .Site.Params.headshotimg -}} {{ with resources.GetMatch .Site.Params.headshotimg -}}
<div class="home-faceshot-card"> <div class="home-faceshot-card">
<img class="home-faceshot" src="{{ .Permalink }}" > <picture>
{{ $faceshot := .Resize "272x Lanczos" }}
{{ $faceshot_x2 := .Resize "544x Lanczos" }}
{{ $faceshot_x3 := .Resize "816x Lanczos" }}
<source srcset="{{ $faceshot.Permalink }} 1x, {{ $faceshot_x2.Permalink }} 2x, {{ $faceshot_x3.Permalink }} 3x">
<img class="home-faceshot" src="{{ $faceshot.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
</picture>
</div> </div>
{{ end -}} {{ end -}}
</header> </header>

10
layouts/_default/li-next.html
View File

@@ -4,11 +4,11 @@
<div class="card-img-container"> <div class="card-img-container">
<p class="card-img-overlay">Next Article</p> <p class="card-img-overlay">Next Article</p>
<picture> <picture>
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}} {{ $thumbnail := .Resize "400x Lanczos" }}
<source srcset="{{ .Permalink }}" type="image/webp"> {{ $thumbnail_2 := .Resize "800x Lanczos" }}
{{- end }} {{ $thumbnail_3 := .Resize "1200x Lanczos" }}
<source srcset="{{ .Permalink }}"> <source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
<img src="{{ .Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}> <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
</picture> </picture>
</div> </div>
{{ end }} {{ end }}

9
layouts/_default/li.html
View File

@@ -3,11 +3,10 @@
{{ with .Resources.GetMatch "featuredImage" }} {{ with .Resources.GetMatch "featuredImage" }}
<div class="card-img-container"> <div class="card-img-container">
<picture> <picture>
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}} {{ $thumbnail := .Resize "400x Lanczos" }}
<source srcset="{{ .Permalink }}" type="image/webp"> {{ $thumbnail_2 := .Resize "800x Lanczos" }}
{{- end }} {{ $thumbnail_3 := .Resize "1200x Lanczos" }}
{{ $thumbnail := .Fit "800x600 Lanczos" }} <source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
<source srcset="{{ $thumbnail.Permalink }}">
<img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}> <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
</picture> </picture>
</div> </div>

9
layouts/_default/single.html
View File

@@ -11,11 +11,10 @@
</header> </header>
{{ with .Resources.GetMatch "featuredImage" -}} {{ with .Resources.GetMatch "featuredImage" -}}
<picture class="post-figure"> <picture class="post-figure">
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}} {{ $featured := .Resize "711x Lanczos" }}
<source srcset="{{ .Permalink }}" type="image/webp"> {{ $featured_2 := .Resize "1422x Lanczos" }}
{{- end }} {{ $featured_3 := .Resize "2133x Lanczos" }}
{{ $featured := .Resize "800x Lanczos" }} <source srcset="{{ $featured.Permalink }} 1x, {{ $featured_2.Permalink }} 2x, {{ $featured_3.Permalink }} 3x">
<source srcset="{{ $featured.Permalink }}">
<img src="{{ $featured.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}> <img src="{{ $featured.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
</picture> </picture>
{{ with .Params.attribution -}} {{ with .Params.attribution -}}