develop/blog #7
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue