Compare commits

...

2 Commits

Author SHA1 Message Date
steven 3d1e9530ae refactor(drafts): collected into outside folder
they will no longer mysteriously appear in the production site
2021-10-02 10:50:08 -04:00
steven acdac10888 develop/blog (#7)
fix(theme): defined height on article thumbnails

helps masonry js work better

fix(styles): shrank header on larger views

prevent line break/overflow on long words like "Professional" and "Birkenstock" on larger displays

style(root): one stray indent

fix(theme): styles

renamed featured header image class on article pages so that they're (somewhat) more distinct from article preview images on list pages

Co-authored-by: steven-y-e <steven@mineral.town>
Reviewed-on: http://irie.clinic.homo.casa/steven-y-e/friends-of-mineral-town/pulls/7
Co-Authored-By: steven <steven-y-e@noreply.localhost>
Co-Committed-By: steven <steven-y-e@noreply.localhost>
2021-10-02 10:44:10 -04:00
49 changed files with 48 additions and 18 deletions

View File

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

View File

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

View File

@ -33,8 +33,35 @@ article p img {
cursor: auto; 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) { @media (max-width: 420px) {
/* hide some pagination links on mobile-width views */
.mobile-hidden { .mobile-hidden {
display: none; display: none;
} }
@ -43,18 +70,19 @@ article p img {
} }
} }
@media (max-width: 550px) { @media (max-width: 550px) {
/* hide some pagination links on tablet-width views */
.tablet-hidden { .tablet-hidden {
display: none; 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 */ /* Larger than phablet */
@media (min-width: 550px) { @media (min-width: 550px) {
h1 { font-size: 4.0rem; } h1 { font-size: 3.2rem; }
h2 { font-size: 3.2rem; } h2 { font-size: 2.6rem; }
h3 { font-size: 3.0rem; } h3 { font-size: 2.4rem; }
h4 { font-size: 2.8rem; } h4 { font-size: 2.2rem; }
h5 { font-size: 2.4rem; } h5 { font-size: 2.0rem; }
h6 { font-size: 1.5rem; } h6 { font-size: 1.5rem; }
} }

View File

@ -1,6 +1,6 @@
<html> <html>
<head> <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="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="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">