develop/blog #7

Merged
steven-y-e merged 4 commits from develop/blog into main 2021-10-02 10:34:52 -04:00
5 changed files with 48 additions and 18 deletions

View File

@ -14,7 +14,9 @@
<a href="{{ .Permalink }}">
<h2>{{ .Title }}</h2>
{{if isset .Params "image" }}
<div class="preview">
<img src="{{ index .Params "image" }}" alt="{{ .Title }}" class="preview">
</div>
{{ end }}
{{ if ne .Kind "term" }}
<p class="date">{{.Date.Format "January 2, 2006"}}</p>

View File

@ -6,7 +6,7 @@
</div>
{{if isset .Params "image" }}
<img src="{{ index .Params "image" }}" alt="{{ .Title }}" class="preview">
<img src="{{ index .Params "image" }}" alt="{{ .Title }}" class="heading">
{{ end }}
<article class="row content" style="margin-top: 2em">

View File

@ -33,8 +33,35 @@ article p img {
cursor: auto;
}
/* hide some pagination links on tablet/mobile-width views */
/* automatically hyphenate long words in summaries on list pages */
.summary {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
img.heading {
width: 100%;
}
div.preview {
width: 100%;
height: 12rem;
overflow: hidden;
}
img.preview {
width: 100%;
height: 12rem;
object-fit: cover;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
@media (max-width: 420px) {
/* hide some pagination links on mobile-width views */
.mobile-hidden {
display: none;
}
@ -43,18 +70,19 @@ article p img {
}
}
@media (max-width: 550px) {
/* hide some pagination links on tablet-width views */
.tablet-hidden {
display: none;
}
/* enlarge article thumbnail on smaller views */
div.preview {
height: 20rem;
}
img.preview {
height: 20rem;
}
}
/* automatically hyphenate long words in summaries on list pages */
.summary {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
img.preview {
width: 100%;
}

View File

@ -143,11 +143,11 @@ h6 { font-size: 1.4rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 4.0rem; }
h2 { font-size: 3.2rem; }
h3 { font-size: 3.0rem; }
h4 { font-size: 2.8rem; }
h5 { font-size: 2.4rem; }
h1 { font-size: 3.2rem; }
h2 { font-size: 2.6rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2.2rem; }
h5 { font-size: 2.0rem; }
h6 { font-size: 1.5rem; }
}

View File

@ -1,6 +1,6 @@
<html>
<head>
<title>friends of mineral town</title>
<title>friends of mineral town</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">