Browse Source

simplify layouts; allow optional pre-content partial

master
Alexander Avery 2 months ago
parent
commit
db0f6027c1
  1. 59
      assets/sass/cards.scss
  2. 2
      assets/sass/code.scss
  3. 13
      assets/sass/colors.scss
  4. 10
      assets/sass/main.scss
  5. 2
      layouts/_default/list.html
  6. 4
      layouts/_default/single.html
  7. 2
      layouts/authors/list.html
  8. 2
      layouts/authors/terms.html
  9. 2
      layouts/games/list.html
  10. 14
      layouts/partials/article-alternate.html
  11. 14
      layouts/partials/article-card-alternate.html
  12. 27
      layouts/partials/article-card.html
  13. 22
      layouts/partials/article.html
  14. 8
      layouts/partials/header.html

59
assets/sass/cards.scss

@ -13,65 +13,30 @@
} }
} }
.small-circle {
border-radius: 50%;
width: 250px;
height: 250px;
}
article { article {
display: flex;
background-color: $dark; background-color: $dark;
border-radius: 10px; border-radius: 10px;
}
article.card {
height: 420px; height: 420px;
flex: 1 1 305px; flex: 1 1 305px;
flex-direction: column;
overflow: hidden; overflow: hidden;
div.article-info-container, div.article-image { img {
overflow: hidden; height: 50%;
flex: 1; width: 100%;
object-fit: cover;
} }
div.article-info { div {
box-sizing: border-box; margin: 25px;
padding: 25px;
height: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
a.article-title {
flex: 2;
display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column;
text-decoration: none;
color: $font-color;
}
}
}
.circle {
border-radius: 50%;
} }
.article-link {
text-decoration: none;
color: $font-color;
}
article.card-alternate {
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
gap: 40px;
div {
padding: 16px;
}
img {
width: 250px;
height: 250px;
border-radius: 50%;
}
p {
max-width: 500px;
}
} }

2
assets/sass/code.scss

@ -26,6 +26,6 @@ pre {
white-space: pre; white-space: pre;
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: auto;
border-left: .3rem solid $beetbox-purple; border-left: .3rem solid $code-edge;
} }
} }

13
assets/sass/colors.scss

@ -1,13 +1,14 @@
$background-color: #1f2835;
$font-color: #f8f8ff;
$top-bar: #f8f8ffcc;
$beetbox-red: #9e0008; $beetbox-red: #9e0008;
$beetbox-pink: #d93370; $beetbox-pink: #d93370;
$beetbox-purple: #ac65cb; $beetbox-purple: #ac65cb;
$beetbox-green: #003f56; $beetbox-green: #003f56;
$beetbox-blue: #5fcfd0; $beetbox-blue: #5fcfd0;
$background-color: #1f2835;
$font-color: #f8f8ff;
$font-color-alternate: #1f2835;
$top-bar: #f8f8ffcc;
$dark: #111; $dark: #111;
$visited-link: #e4cdef; $link-color: $beetbox-blue;
$link-color-visited: #e4cdef;
$code-edge: $beetbox-purple;

10
assets/sass/main.scss

@ -35,7 +35,7 @@ header {
margin: auto; margin: auto;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: $background-color; color: $font-color-alternate;
} }
} }
} }
@ -56,10 +56,10 @@ header {
} }
a { a {
color: $beetbox-blue; color: $link-color;
&:visited, &:hover { &:visited, &:hover {
color: $visited-link; color: $link-color-visited;
} }
} }
@ -113,6 +113,10 @@ img.featured {
align-items: end; align-items: end;
} }
.align-center {
align-items: center;
}
section { section {
max-width: 1000px; max-width: 1000px;
margin: 16px auto; margin: 16px auto;

2
layouts/_default/list.html

@ -14,7 +14,7 @@
<section class="article-list"> <section class="article-list">
{{ range $pages }} {{ range $pages }}
{{ partial "article-card.html" . }} {{ partial "article.html" . }}
{{ end }} {{ end }}
</section> </section>

4
layouts/_default/single.html

@ -8,6 +8,10 @@
{{ .TableOfContents }} {{ .TableOfContents }}
{{ end }} {{ end }}
{{ if templates.Exists "partials/pre-content.html" }}
{{ partial "pre-content.html" . }}
{{ end }}
{{ .Content }} {{ .Content }}
<p> <p>

2
layouts/authors/list.html

@ -26,7 +26,7 @@
<section class="article-list"> <section class="article-list">
{{ range .Data.Pages }} {{ range .Data.Pages }}
{{ partial "article-card.html" . }} {{ partial "article.html" . }}
{{ end }} {{ end }}
</section> </section>

2
layouts/authors/terms.html

@ -3,7 +3,7 @@
<section> <section>
{{ range .Data.Pages }} {{ range .Data.Pages }}
{{ partial "article-card-alternate.html" . }} {{ partial "article-alternate.html" . }}
{{ end }} {{ end }}
</section> </section>
{{ end }} {{ end }}

2
layouts/games/list.html

@ -18,7 +18,7 @@
<section class="article-list"> <section class="article-list">
{{ range .Data.Pages }} {{ range .Data.Pages }}
{{ partial "article-card.html" . }} {{ partial "article.html" . }}
{{ end }} {{ end }}
</section> </section>

14
layouts/partials/article-alternate.html

@ -0,0 +1,14 @@
<a href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
<article class="shadow left-to-right float-on-hover align-center">
<div>
{{ with .Resources.GetMatch "avatar" }}
<img class="shadow small-circle" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
{{ end }}
</div>
<div>
<h2>{{ .Params.name }}</h2>
<p>{{ .Params.bio }}</p>
</div>
</article>
</a>

14
layouts/partials/article-card-alternate.html

@ -1,14 +0,0 @@
<a class="article-link" href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
<article class="card-alternate shadow float-on-hover">
<div>
{{ with .Resources.GetMatch "avatar" }}
<img class="shadow" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
{{ end }}
</div>
<div>
<h2>{{ .Params.name }}</h2>
<p>{{ .Params.bio }}</p>
</div>
</article>
</a>

27
layouts/partials/article-card.html

@ -1,27 +0,0 @@
<article class="shadow float-on-hover card">
<div class="article-image">
<a href=" {{ .Permalink }}">
{{ $image := .Resources.GetMatch "featured" }}
{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt "class" "fill-wh")}}
</a>
</div>
<div class="article-info-container">
<div class="article-info">
{{ range first 1 (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end }}
<a href="{{ .Permalink }}" class="article-title fill-wh">
<h2>{{ .Title | markdownify }}</h2>
{{ if ne .Kind "term"}}
<span class="date">
{{ if .Date }}
{{ .Date.Format "2006/01/02" }}
{{ else }}
TBD
{{ end }}
</span>
{{ end }}
</a>
</div>
</div>
</article>

22
layouts/partials/article.html

@ -0,0 +1,22 @@
<article class="shadow float-on-hover">
<a href=" {{.Permalink }}">
{{ $image := .Resources.GetMatch "featured" }}
{{ partial "image.html" (dict "image" $image "alt" .Params.featured.alt) }}
</a>
<div>
{{ with index (.GetTerms "tags") 0 }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end }}
<h2 class="title">{{ .Title | markdownify }}</h2>
{{ with .Date }}
<p>{{ .Format "2006/01/02" }}</p>
{{ end }}
</div>
</article>

8
layouts/partials/header.html

@ -1,10 +1,10 @@
<header> <header>
<nav class="spread"> <nav class="spread">
<a href="/"><img src="/images/logo.svg" alt="The {{ .Site.Title }} Logo"></a> <a href="/"><img src="{{ .Site.Params.logo }}" alt="The {{ .Site.Title }} Logo"></a>
<ul class="spread"> <ul class="spread">
<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li> {{ range .Site.Params.HeaderLinks }}
<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li> <li><a href="{{ .url }}" title="{{ .title }}">{{ .title }}</a></li>
<li><a href="/games" title="Games">Games</a></li> {{ end }}
<li>{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}</li> <li>{{ printf `<a href="/index.xml" title="%s">RSS</a>` $.Site.Title | safeHTML }}</li>
</ul> </ul>
</nav> </nav>

Loading…
Cancel
Save