Opschonen van CSS in HTML, toevoegen van highlight-box in CSS en op homepage

This commit is contained in:
Michael Boelen 2023-05-10 14:36:33 +02:00
parent 38864e5a22
commit 4b16d535d6
3 changed files with 44 additions and 4 deletions

View file

@ -1,7 +1,11 @@
$color-button: #1D3160; $color-button: #1D3160;
$color-button-hover: #17274d; $color-button-hover: #17274d;
$color-header: #1D3160; $color-header: #6A2060;
$color-highlight-box-border: #6A2060;
$color-highlight-box-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
$color-border: #6A2060;
$color-text-inverse: white;
*, :after, :before { *, :after, :before {
box-sizing: border-box; box-sizing: border-box;
@ -64,8 +68,28 @@ header {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
.header {
padding:0;
margin:0;
background-color: $color-header;
color: $color-text-inverse;
text-align:right;
}
.header ul li:last-child {
padding-right: 10px;
}
// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
.highlight-box {
background-color: $color-highlight-box-background;
padding: 10px;
margin: 2px;
border: 2px solid $color-highlight-box-border;
border-radius: 4px;
}
.link { .link {
//white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

View file

@ -27,13 +27,27 @@
{{ end }} {{ end }}
<h2>Aankomende evenementen</h2> <h2>Aankomende evenementen</h2>
<p>Naast de door ons georganiseerde evenementen staat er meer op de agenda. Zie de uitgebreide evenementenkalender voor meer details.</p>
{{ $upcoming_events := .Site.Data.evenementen.kalender }} {{ $upcoming_events := .Site.Data.evenementen.kalender }}
{{ $upcoming_events := sort $upcoming_events ".date_start" "asc" }} {{ $upcoming_events := sort $upcoming_events ".date_start" "asc" }}
{{ range $upcoming_events }}
{{ if eq .highlight_on_homepage true }}
<div class="highlight-box">
<div><strong>{{ .name }}</strong></div>
{{ with .date_start }}<p>Datum: {{ . }}</p>{{ end }}
{{ with .event_address }}<p>Adres: {{ . }}</p>{{ end }}
{{ with .event_url }}<a href="{{ . }}" class="button">Meer informatie</a>{{ end }}
</div>
{{ end }}
{{ end }}
<p>Naast de door ons georganiseerde evenementen staat er meer op de agenda. Zie de uitgebreide evenementenkalender voor meer details.</p>
<ul> <ul>
{{ range first 10 $upcoming_events }} {{ range first 10 $upcoming_events }}
<li>{{ .date_start | dateFormat "02-01-2006" }} - {{ .name }}</li> <li>{{ .date_start | dateFormat "02-01-2006" }} - {{ .name }}</li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}

View file

@ -1,7 +1,8 @@
<header> <header>
<nav style="padding:0;width:100%;"> <nav style="padding:0;width:100%;">
<a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a> <a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
<ul style="padding:0;padding-right:15px;margin:0;text-align:right;background-color:#6A2060;color:white;text-align:right;"> <div class="header">
<ul>
{{ $currentPage := . }} {{ $currentPage := . }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"> <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
@ -9,6 +10,7 @@
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</div>
</nav> </nav>
</header> </header>
<hr class="hr-list" style="padding: 0;margin: 0;"> <hr class="hr-list" style="padding: 0;margin: 0;">