fmtools/hugo-template
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

aesthetic updates and banner

Browse Source
This commit is contained in:
Landon Taylor
2025-06-13 13:08:43 -06:00
parent 64a28d4914
commit 09a787272b
7 changed files with 95 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/sass/_layout.sass
View File

@ -4,6 +4,7 @@
$spacing-unit: 1.5rem $spacing-unit: 1.5rem
$section-spacing: 2rem $section-spacing: 2rem
$border-radius: 8px $border-radius: 8px
$body-width: 1024px
html html
background: darken($background, 3%) background: darken($background, 3%)
@ -15,7 +16,7 @@ body
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
width: 100% width: 100%
height: 100% height: 100%
max-width: 1024px max-width: $body-width
margin: $spacing-unit auto margin: $spacing-unit auto
padding: $spacing-unit padding: $spacing-unit
box-sizing: border-box box-sizing: border-box
@ -106,7 +107,7 @@ section
margin: $section-spacing 0 margin: $section-spacing 0
padding-bottom: $section-spacing padding-bottom: $section-spacing
#page-header #page-header
border-bottom: 3px solid $surface border-bottom: 3px solid $surface
margin: $section-spacing 0 margin: $section-spacing 0
padding-bottom: $section-spacing padding-bottom: $section-spacing
@ -190,3 +191,57 @@ pre
overflow-x: auto overflow-x: auto
code code
font-size: 0.8rem font-size: 0.8rem
.banner
position: fixed
top: 0
width: 100%
max-width: $body-width
background-color: $accent
color: $darkest
padding: 5px 0
font-weight: 400
text-align: center
font-size: 1.1em
border-radius: 0 0 8px 8px
z-index: 1000
font-size: 0.9rem
height: 1.3rem
margin-left: calc(0% - #{$spacing-unit})
a
color: $darkest
text-decoration: underline
font-weight: 700
transition: color 0.3s ease-in-out
&:hover, &:focus
color: $primary-dark
body:has(.banner)
margin-top: 2.6rem
@media (max-width: 600px)
.banner
position: absolute
top: 0
width: calc(100% - #{$spacing-unit})
max-width: $body-width
background-color: $accent
color: $darkest
padding: 5px
font-weight: 400
text-align: center
font-size: 1.1em
border-radius: 0 0 8px 8px
z-index: 1000
font-size: 0.9rem
height: 4.3rem
margin-left: calc(0% - #{$spacing-unit})
.banner-text
display: block
margin: 0 5px
body:has(.banner)
margin-top: 5.6rem

1
layouts/_markup/render-link.html Normal file
View File

@ -0,0 +1 @@
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if or (strings.HasPrefix .Destination "http") (strings.HasPrefix .Destination "https") }} target="_blank"{{ end }} >{{ .Text | safeHTML }}</a>

5
layouts/_partials/banner.html Normal file
View File

@ -0,0 +1,5 @@
<div class="banner">
<span class="banner-text">{{ .Site.Params.bannerTitle }}
{{ .Site.Params.banner | markdownify }}
</span>
</div>

1
layouts/_partials/footer.html
View File

@ -1,3 +1,4 @@
<p><a href="/contribute">Contribute</a> &nbsp;|&nbsp; <a href="/about">About</a> &nbsp;|&nbsp; <a href="/license">License</a> &nbsp;|&nbsp; <a href="/privacy">Privacy</a> </p> <p><a href="/contribute">Contribute</a> &nbsp;|&nbsp; <a href="/about">About</a> &nbsp;|&nbsp; <a href="/license">License</a> &nbsp;|&nbsp; <a href="/privacy">Privacy</a> </p>
<!-- <p>Open-source under <a href="">MIT License</a></p> --> <!-- <p>Open-source under <a href="">MIT License</a></p> -->
<!-- <p>The information on this website is presented for educational purposes only.</p> -->
<p>&copy; Copyright {{ now.Year }}. An open-source project.</p> <p>&copy; Copyright {{ now.Year }}. An open-source project.</p>

3
layouts/baseof.html
View File

@ -4,6 +4,9 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
</head> </head>
<body> <body>
{{ if .Site.Params.banner }}
{{ partial "banner.html" . }}
{{ end }}
<header> <header>
{{ partial "header.html" . }} {{ partial "header.html" . }}
</header> </header>

6
layouts/tools/page.html
View File

@ -37,7 +37,7 @@
</a> </a>
</td> </td>
<td> <td>
{{ range $term := $terms }} {{ range $term := sort $terms }}
{{ partial "term-link.html" (dict "name" $term "taxonomy" $taxonomyname) }} {{ partial "term-link.html" (dict "name" $term "taxonomy" $taxonomyname) }}
{{ end }} {{ end }}
</td> </td>
@ -91,8 +91,8 @@
<div class="footer-links" style="text-align: left;"> <div class="footer-links" style="text-align: left;">
Help improve this page!<br/> Help improve this page!<br/>
Submit an Submit an
<a href="https://gitmoss.fyi/fmtools/content/issues/new?template=.gitea%2fissue_template%2ffix_tool.md&title=[FIX]%20{{ .Title | urlquery }}">issue</a> or <a href="https://gitmoss.fyi/fmtools/content/issues/new?template=.gitea%2fissue_template%2ffix_tool.md&title=[FIX]%20{{ .Title | urlquery }}" target="_blank">issue</a> or
<a href="https://gitmoss.fyi/fmtools/content/fork">pull request</a>. <a href="https://gitmoss.fyi/fmtools/content/fork" target="_blank">pull request</a>.
</div> </div>
{{ if .Date }} {{ if .Date }}
<div class="footer-date" style="text-align: right;"> <div class="footer-date" style="text-align: right;">

44
layouts/tools/section.html
View File

@ -42,8 +42,9 @@
<tr> <tr>
<th>Tool</th> <th>Tool</th>
<th>Applications</th> <th>Applications</th>
<th>License</th> <th>Licenses</th>
<!-- <th>Developers</th> --> <!-- <th>Developers</th> -->
<!-- <th>Description</th> -->
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -54,7 +55,7 @@
{{ if in .Params.maintenance "Not Maintained" }} {{ if in .Params.maintenance "Not Maintained" }}
<div style="display: flex; align-items: center; gap: 8px;"> <div style="display: flex; align-items: center; gap: 8px;">
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgb(10,10,10); border: 1px solid rgb(80, 80, 80);"></span> <span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgb(128, 28, 28);"></span>
</div> </div>
{{ else }} {{ else }}
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a> <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
@ -76,37 +77,42 @@
<td> <td>
{{ $sep := "" }} {{ $sep := "" }}
{{ range $key, $vals := .Params }} {{ range $key, $vals := .Params }}
{{ if (in (slice "licenses") $key) }} {{ if (in (slice "licenses") $key) }}
{{ $sep }} {{ $sep }}
{{ range $i, $val := $vals }} {{ range $i, $val := $vals }}
{{ partial "term-link.html" (dict "name" $val "taxonomy" $key) }} {{ partial "term-link.html" (dict "name" $val "taxonomy" $key) }}
{{ end }} {{ end }}
{{ $sep = "; " }} {{ $sep = "; " }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</td> </td>
<!-- <td> <!-- <td>
{{ $sep := "" }} {{ $sep := "" }}
{{ range $key, $vals := .Params }} {{ range $key, $vals := .Params }}
{{ if (in (slice "developers") $key) }} {{ if (in (slice "developers") $key) }}
{{ $sep }} {{ $sep }}
{{ range $i, $val := $vals }} {{ range $i, $val := $vals }}
{{ partial "term-link.html" (dict "name" $val "taxonomy" $key) }} {{ partial "term-link.html" (dict "name" $val "taxonomy" $key) }}
{{ end }} {{ end }}
{{ $sep = "; " }} {{ $sep = "; " }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</td> --> </td> -->
<!-- <td class="description">{{ .Content | plainify | truncate 40 }}</td> -->
</tr> </tr>
{{ end }} {{ end }}
</tbody> </tbody>
</table> </table>
<div style="display: flex; align-items: center; gap: 8px; margin: .5rem 0;"> <div style="display: flex; align-items: center; gap: 8px; margin: 1rem 0 0 0;">
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgb(0,0,0); border: 1px solid rgb(80, 80, 80);"></span> <span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgb(128, 28, 28);"></span>
<span style="color: rgb(150, 150, 150); font-size: 1rem;">Black dot indicates tool has not been maintained recently</span> <span style="color: rgb(128, 28, 28); font-size: 1rem;">Red dot indicates tool has not been updated or maintained recently</span>
</div> </div>
<!-- <div style="display: flex; align-items: center; gap: 8px; margin: 0;">
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgb(143, 96, 15);"></span>
<span style="color: rgb(150, 150, 150); font-size: 1rem;">Orange dot indicates closed-source or restrictively licensed tool</span>
</div> -->
{{ end }} {{ end }}