aesthetic updates and banner
This commit is contained in:
@ -4,6 +4,7 @@
|
||||
$spacing-unit: 1.5rem
|
||||
$section-spacing: 2rem
|
||||
$border-radius: 8px
|
||||
$body-width: 1024px
|
||||
|
||||
html
|
||||
background: darken($background, 3%)
|
||||
@ -15,7 +16,7 @@ body
|
||||
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
|
||||
width: 100%
|
||||
height: 100%
|
||||
max-width: 1024px
|
||||
max-width: $body-width
|
||||
margin: $spacing-unit auto
|
||||
padding: $spacing-unit
|
||||
box-sizing: border-box
|
||||
@ -190,3 +191,57 @@ pre
|
||||
overflow-x: auto
|
||||
code
|
||||
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
1
layouts/_markup/render-link.html
Normal 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
5
layouts/_partials/banner.html
Normal file
@ -0,0 +1,5 @@
|
||||
<div class="banner">
|
||||
<span class="banner-text">{{ .Site.Params.bannerTitle }}
|
||||
{{ .Site.Params.banner | markdownify }}
|
||||
</span>
|
||||
</div>
|
@ -1,3 +1,4 @@
|
||||
<p><a href="/contribute">Contribute</a> | <a href="/about">About</a> | <a href="/license">License</a> | <a href="/privacy">Privacy</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>© Copyright {{ now.Year }}. An open-source project.</p>
|
||||
|
@ -4,6 +4,9 @@
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
{{ if .Site.Params.banner }}
|
||||
{{ partial "banner.html" . }}
|
||||
{{ end }}
|
||||
<header>
|
||||
{{ partial "header.html" . }}
|
||||
</header>
|
||||
|
@ -37,7 +37,7 @@
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{{ range $term := $terms }}
|
||||
{{ range $term := sort $terms }}
|
||||
{{ partial "term-link.html" (dict "name" $term "taxonomy" $taxonomyname) }}
|
||||
{{ end }}
|
||||
</td>
|
||||
@ -91,8 +91,8 @@
|
||||
<div class="footer-links" style="text-align: left;">
|
||||
Help improve this page!<br/>
|
||||
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/fork">pull request</a>.
|
||||
<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" target="_blank">pull request</a>.
|
||||
</div>
|
||||
{{ if .Date }}
|
||||
<div class="footer-date" style="text-align: right;">
|
||||
|
@ -42,8 +42,9 @@
|
||||
<tr>
|
||||
<th>Tool</th>
|
||||
<th>Applications</th>
|
||||
<th>License</th>
|
||||
<th>Licenses</th>
|
||||
<!-- <th>Developers</th> -->
|
||||
<!-- <th>Description</th> -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -54,7 +55,7 @@
|
||||
{{ if in .Params.maintenance "Not Maintained" }}
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<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>
|
||||
{{ else }}
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
@ -97,16 +98,21 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</td> -->
|
||||
<!-- <td class="description">{{ .Content | plainify | truncate 40 }}</td> -->
|
||||
</tr>
|
||||
{{ end }}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin: .5rem 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="color: rgb(150, 150, 150); font-size: 1rem;">Black dot indicates tool has not been maintained recently</span>
|
||||
<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(128, 28, 28);"></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 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 }}
|
||||
|
||||
|
Reference in New Issue
Block a user