1 Commits

Author SHA1 Message Date
8c0b3a7268 WIP breadcrumb style
See #52
2022-05-18 14:55:03 -05:00
12 changed files with 146 additions and 147 deletions

View File

@ -123,8 +123,8 @@
gap: 40px; gap: 40px;
} }
.page-list, .page-list ul,
.series-taxonomy-list { .series-taxonomy ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
@ -132,13 +132,12 @@
gap: 40px; gap: 40px;
} }
.series-taxonomy-list { .series-taxonomy ul {
gap: 80px; gap: 80px;
} }
.page-list .post, .page-list li,
.series-taxonomy-list .series-taxonomy, .series-taxonomy li {
.series-taxonomy .post {
padding-top: 8px; padding-top: 8px;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
@ -207,7 +206,7 @@
margin: 0; margin: 0;
} }
.taxonomy-list { .taxonomy-list ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: flex; display: flex;
@ -215,7 +214,7 @@
gap: 10px; gap: 10px;
} }
.taxonomy-list .taxonomy-term { .taxonomy-list li {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1); color: var(--text-1);
padding: 8px 12px; padding: 8px 12px;
@ -231,7 +230,7 @@
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.taxonomy-list .taxonomy-term { .taxonomy-list li {
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
@ -245,7 +244,7 @@
/* Series list format */ /* Series list format */
.series-page-list { .series-pages ul {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-flow: row wrap; flex-flow: row wrap;
@ -256,7 +255,7 @@
border-radius: 16px; border-radius: 16px;
} }
.series-page-list .post { .series-pages li {
flex: 1; flex: 1;
min-width: 49%; min-width: 49%;
} }
@ -305,13 +304,8 @@
/* Header formatting (website title and article section headers) */ /* Header formatting (website title and article section headers) */
.header { h1.header {
margin: 16px 0;
}
.header h1 {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold;
} }
.header a, .header a,
@ -353,7 +347,6 @@
} }
/* Related posts */ /* Related posts */
.full-width-page-list { .full-width-page-list {
/* make left/right 0 margin so it takes up full width */ /* make left/right 0 margin so it takes up full width */
@ -366,16 +359,16 @@
margin-right: 20px; margin-right: 20px;
} }
.full-width-page-list .post { .full-width-page-list li {
min-width: 300px; min-width: 300px;
max-width: 300px; max-width: 300px;
} }
.full-width-page-list .post:first-child { .full-width-page-list li:first-child {
margin-left: 20px; margin-left: 20px;
} }
.full-width-page-list .post:last-child { .full-width-page-list li:last-child {
margin-right: 20px; margin-right: 20px;
} }
@ -400,7 +393,7 @@
} }
} }
.full-width-page-list .page-list { .full-width-page-list .page-list ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
@ -408,7 +401,6 @@
} }
/* Social media share buttons */ /* Social media share buttons */
.share-buttons { .share-buttons {
background: var(--background-1); background: var(--background-1);
@ -447,7 +439,6 @@
*/ */
/* See also formating */ /* See also formating */
.see-also { .see-also {
background-color: var(--background-1); background-color: var(--background-1);
@ -462,7 +453,6 @@
} }
/* Back to top */ /* Back to top */
#back-to-top { #back-to-top {
position: fixed; position: fixed;
@ -634,14 +624,6 @@ hr {
border: 1px solid var(--background-3); border: 1px solid var(--background-3);
} }
@media (min-width: 720px) {
.full-width-hr {
/* see also: the related-posts section too */
margin-left: calc(-100vw / 2 + 760px / 2);
margin-right: calc(-100vw / 2 + 760px / 2);
}
}
table.markdown { table.markdown {
border-collapse: collapse; border-collapse: collapse;
border: 2px solid var(--text-1); border: 2px solid var(--text-1);
@ -666,13 +648,6 @@ table.markdown {
color: var(--text-1); color: var(--text-1);
} }
:target {
animation: target-fade 10s ease-out;
}
@keyframes target-fade {
0% { background-color: var(--background-yellow-2); }
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -816,20 +791,45 @@ li.disabled > .page-link:hover {
/* Breadcrumb navigation */ /* Breadcrumb navigation */
.breadcrumb { .breadcrumb {
margin: 30px 0 20px; margin: 16px 0;
} }
.breadcrumb ul { .breadcrumb ul {
padding: 0; padding: 0;
list-style: none; list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
} }
.breadcrumb li { .breadcrumb li {
display: inline; display: inline;
padding: 8px;
background-color: var(--background-1);
} }
.breadcrumb li+li:before { .breadcrumb li:hover {
content: "»" background-color: var(--background-2);
cursor: pointer;
}
.breadcrumb li a:hover {
text-decoration: none;
}
.breadcrumb li.active:hover {
cursor: default;
}
.breadcrumb li:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
padding-left: 12px;
}
.breadcrumb li:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
padding-right: 12px;
} }

View File

@ -28,9 +28,9 @@
</div> </div>
{{ end }} {{ end }}
<article class="post-content"> <div class="post-content">
{{ .Content }} {{ .Content }}
</article> </div>
{{ partial "series-box.html" . }} {{ partial "series-box.html" . }}

View File

@ -1,21 +1,23 @@
<h2 class="post-title"> <div class="post">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }} <h2 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }} <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h2> {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "post-metadata/short.html" . }} {{ partial "post-metadata/short.html" . }}
{{ with .Resources.GetMatch "feature" }} {{ with .Resources.GetMatch "feature" }}
<div class="post-media"> <div class="post-media">
{{ partial "figure.html" (dict "src" .) }} {{ partial "figure.html" (dict "src" .) }}
</div>
{{ end }}
<div class="post-description">
{{ partial "description-or-summary.html" . }}
</div> </div>
{{ end }}
<div class="post-description"> <div class="readmore">
{{ partial "description-or-summary.html" . }} <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div> </div>
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div> </div>

View File

@ -1,24 +1,26 @@
<h2 class="post-title"> <div class="post">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }} <h2 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }} <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h2> {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "post-metadata/series.html" . }} {{ partial "post-metadata/series.html" . }}
<div class="post-description"> <div class="post-description">
{{ partial "description-or-summary.html" . }} {{ partial "description-or-summary.html" . }}
</div> </div>
<div class="series-page-list"> <div class="series-pages">
{{ $i := 0 }} <ul>
{{ $total := len .Data.Pages }} {{ $i := 0 }}
{{ range .Data.Pages.Reverse }} {{ $total := len .Data.Pages }}
{{ $i = add 1 $i }} {{ range .Data.Pages.Reverse }}
{{ .Scratch.Set "series_position" $i }} {{ $i = add 1 $i }}
{{ .Scratch.Set "series_total" $total }} {{ .Scratch.Set "series_position" $i }}
<article class="post"> {{ .Scratch.Set "series_total" $total }}
{{ .Render "summary/series_post" }} <li>{{ .Render "summary/series_post" }}</li>
</article> {{ end }}
{{ end }} </ul>
</div>
</div> </div>

View File

@ -1,27 +1,29 @@
<div class="post-series-position"> <div class="post">
{{ if .Scratch.Get "series_position" }} <div class="post-series-position">
({{ .Scratch.Get "series_position" }}/{{ .Scratch.Get "series_total" }}) {{ if .Scratch.Get "series_position" }}
{{ end }} ({{ .Scratch.Get "series_position" }}/{{ .Scratch.Get "series_total" }})
</div> {{ end }}
<h2 class="post-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "post-metadata/short.html" . }}
{{ with .Resources.GetMatch "feature" }}
<div class="post-media">
{{ partial "figure.html" (dict "src" .) }}
</div> </div>
{{ end }}
<div class="post-description"> <h2 class="post-title">
{{ partial "description-or-summary.html" . }} {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
</div> <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
<div class="readmore"> {{ partial "post-metadata/short.html" . }}
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
{{ with .Resources.GetMatch "feature" }}
<div class="post-media">
{{ partial "figure.html" (dict "src" .) }}
</div>
{{ end }}
<div class="post-description">
{{ partial "description-or-summary.html" . }}
</div>
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div>
</div> </div>

View File

@ -6,11 +6,11 @@
<div class="page-list"> <div class="page-list">
{{ with .Paginator.Pages }} {{ with .Paginator.Pages }}
{{ range . }} <ul>
<article class="post"> {{ range . }}
{{ .Render "summary/author" }} <li>{{ .Render "summary/author" }}</li>
</article> {{ end }}
{{ end }} </ul>
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}

View File

@ -1,10 +1,10 @@
<div class="page-list"> <div class="page-list">
{{ with . }} {{ with . }}
{{ range . }} <ul>
<article class="post"> {{ range . }}
{{ .Render "summary/post" }} <li>{{ .Render "summary/post" }}</li>
</article> {{ end }}
{{ end }} </ul>
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}

View File

@ -21,10 +21,6 @@
<meta itemprop="image" content="{{ $featured.Permalink }}"> <meta itemprop="image" content="{{ $featured.Permalink }}">
{{ end }} {{ end }}
{{ with (.GetTerms "tags") }} {{ with .Params.tags }}
{{ $tags := slice }} <meta itemprop="keywords" content="{{ delimit . ", " }}">
{{ range . }}
{{ $tags = $tags | append .LinkTitle }}
{{ end }}
<meta itemprop="keywords" content="{{ delimit $tags ", " }}">
{{ end }} {{ end }}

View File

@ -1,10 +1,6 @@
<header class="header"> <h1 class="header">
<h1> <a href="{{ .Site.Home.Permalink | absLangURL }}">{{ .Site.Title | markdownify }}</a>
<a href="{{ .Site.Home.Permalink | absLangURL }}"> </h1>
{{ .Site.Title | markdownify }}
</a>
</h1>
</header>
<div class="topbar"> <div class="topbar">
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}"> <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">

View File

@ -4,13 +4,13 @@
{{ .Title | markdownify }} {{ .Title | markdownify }}
</h1> </h1>
<div class="series-taxonomy-list"> <div class="series-taxonomy">
{{ with .Pages }} {{ with .Pages }}
{{ range . }} <ul>
<article class="series-taxonomy"> {{ range . }}
{{ .Render "summary/series" }} <li>{{ .Render "summary/series" }}</li>
</article> {{ end }}
{{ end }} </ul>
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}

View File

@ -1 +0,0 @@
<hr class="full-width-hr">

View File

@ -13,19 +13,21 @@
<div class="taxonomy-list"> <div class="taxonomy-list">
{{ with .Data.Terms.Alphabetical }} {{ with .Data.Terms.Alphabetical }}
{{ range . }} <ul>
{{ with .Page }} {{ range . }}
<article class="taxonomy-term"> {{ with .Page }}
<div class="taxonomy-list-left"> <li>
<a href="{{ .Permalink }}"> <div class="taxonomy-list-left">
<p>{{ .Title | markdownify }}</p> <a href="{{ .Permalink }}">
</a> <p>{{ .Title | markdownify }}</p>
{{ partial "post-metadata/taxonomy.html" . }} </a>
</div> {{ partial "post-metadata/taxonomy.html" . }}
{{ partial "description-or-summary.html" . }} </div>
</article> {{ partial "description-or-summary.html" . }}
</li>
{{ end }}
{{ end }} {{ end }}
{{ end }} </ul>
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}