prova warning banner alternativo (#217)

Per un riscontro a #216.

L'idea sarebbe di farlo solo in homepage; il warning dovrebbe essere visibile senza prendere troppo a pugni chi se lo trova davanti.

Ho creato un nuovo blocco (o sezione) in homepage, ma non ho ancora finito di sistemare gli stili.

Reviewed-on: BgLUG/bglug.it#217
Reviewed-by: omar <omarl@noreply.libreschool.org>
Co-authored-by: paspo <paolo@asperti.com>
Co-committed-by: paspo <paolo@asperti.com>
This commit is contained in:
Paolo Asperti 2024-09-12 19:18:32 +00:00 committed by Paolo Asperti
parent 5e41d042b1
commit e28d08b476
6 changed files with 77 additions and 19 deletions

View File

@ -120,3 +120,55 @@ div.highlight pre code > span::before {
display: inline-block;
padding-right: 0.2em;
}
/* important warning */
#importantwarning {
text-align: center;
padding: 3.5em 0;
background: _palette(bg);
.container header {
display: flex;
background-color: _palette(accent, bg);
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15))', 'url("images/bg01.png")'));
border-radius: 12px;
color: _palette(accent, fg);
padding-top: 2em;
padding-bottom: 2em;
vertical-align: middle;
.warningicon {
// float: left;
margin-left: 0.5em;
padding-right: 0.5em;
font-size: 3em;
// text-align: left;
display: flex;
}
h2 {
text-align: left;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
display: inline-block;
margin: 0;
}
.button {
background: _palette(accent, fg);
color: _palette(fg);
display: inline-block;
margin-left: auto;
margin-right: 2em;
vertical-align: middle;
text-align: center;
&:hover {
color: _palette(accent, bg) !important;
}
}
}
}

View File

@ -1,8 +1,4 @@
---
importantWarning:
enabled: false
link: /en/where
message: "BGLUG is closed on 10 october"
banner:
enable: true
image: homepage_banner.jpg
@ -11,6 +7,12 @@ banner:
contents: "Learn more..."
url: who
items:
- type: important-warning
enabled: false
link:
url: /en/where
title: More info
contents: "BGLUG is closed on 10 october"
- heading: Latest posts
type: posts
content_type: posts

View File

@ -1,8 +1,4 @@
---
importantWarning:
enabled: false
link: /it/dove-siamo
message: "Il BGLUG è chiuso il 10 ottobre"
banner:
enable: true
image: homepage_banner.jpg
@ -11,6 +7,12 @@ banner:
contents: "Scopri di più..."
url: chi-siamo
items:
- type: important-warning
enabled: false
link:
url: /it/dove-siamo
title: Ulteriori informazioni
contents: "Il BGLUG è chiuso il 10 ottobre"
- heading: Ultimi post
type: posts
content_type: posts

View File

@ -1,9 +0,0 @@
<div>
{{ with index ( index .Site.Data .Site.Language.Lang | default .Site.Data ) (.Param "homepage_data" | default "homepage") }}
{{ if .importantWarning.enabled}}
<div style="text-align: center; background-color: yellow; font-weight: bold; font-size: xx-large; padding-top: 10px; padding-bottom: 10px;">
<a href="{{ urls.AbsURL .importantWarning.link }}" style="color: blue; text-decoration: underline;">⚠️⚠️⚠️ {{ .importantWarning.message }} ⚠️⚠️⚠️</a>
</div>
{{- end -}}
{{ end }}
</div>

View File

@ -43,5 +43,3 @@
</ul>
</nav>
</div>
{{- partial "head/important-warning.html" . }}

View File

@ -0,0 +1,13 @@
{{- if .item.enabled -}}
<section id="importantwarning">
<div class="container">
<header>
<i class="warningicon fa-solid fa-triangle-exclamation"></i>
<h2>{{ .item.contents | markdownify }}</h2>
{{- with .item.link }}
<a href="{{ .url }}" class="button">{{ .title }}</a>
{{- end }}
</header>
</div>
</section>
{{- end -}}