archive/theorangeone.net-legacy
1
Fork 0
Code Activity

Add image hack for better display

Browse source
This commit is contained in:
Jake Howard 2017-11-09 21:31:18 +00:00
parent e49f30d87a
commit 3292d58007
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
layouts/partials/content.html
View file

@ -1,17 +1,17 @@
{{ if .Params.image }} {{ if .Params.image }}
<img class="mb-3" src="{{ .Params.image }}" style="width: 100%; max-height: 30vh"/> <div class="mb-3 image" data-image="{{ .Params.image }}" style="width: 100%; height: 30vh"></div>
{{ end }} {{ end }}
<h1 class="display-5">{{ .Title }}</h1> <h1 class="display-5">{{ .Title }}</h1>
<h5 class="my-3">{{ .Params.subtitle }}</h5> <h5 class="my-3">{{ .Params.subtitle }}</h5>
<p> <p>
{{ if .Params.date }} {{ if .Params.date }}
<span class="pr-4" title='{{ .Date.Format "January 2 2006" }}'>{{ .Date.Format "2006-01-02" }}</span> <span class="pr-4" title='{{ .Date.Format "January 2 2006" }}'>{{ .Date.Format "2006-01-02" }}</span>
{{ end }} {{ end }}
{{ range .Params.tags }} {{ range .Params.tags }}
<a href="/tags/{{ urlize . }}" class="badge badge-dark mr-2" style="font-size: 1rem"> <a href="/tags/{{ urlize . }}" class="badge badge-dark mr-2" style="font-size: 1rem">
<i class="fa fa-tag"></i> {{ . }} <i class="fa fa-tag"></i> {{ . }}
</a> </a>
{{ end }} {{ end }}
</p> </p>
<hr /> <hr />

2
layouts/partials/list_item.html
View file

@ -2,7 +2,7 @@
{{ if .Params.image }} {{ if .Params.image }}
<div class="d-none d-md-block align-self-center img-wrapper mr-3"> <div class="d-none d-md-block align-self-center img-wrapper mr-3">
<a href="{{ .Permalink }}"> <a href="{{ .Permalink }}">
<img src="{{ .Params.image }}" alt="{{ .Title }} image" /> <div class="image" data-image="{{ .Params.image }}"></div>
</a> </a>
</div> </div>
{{ end }} {{ end }}

3
static/src/scss/style.scss
View file

@ -145,8 +145,9 @@ footer {
width: 20%; width: 20%;
} }
img { .image {
width: 100%; width: 100%;
height: 10vh;
} }
} }