7
0
Fork 0

Highlighted events opgesplitst in NLUUG en overige events, zodat deze andere kleur krijgen. Ook in een raster gezet met 3 kolommen.

This commit is contained in:
Michael Boelen 2023-05-20 13:49:26 +02:00
parent 59a0756692
commit 53310dd1f6
2 changed files with 24 additions and 11 deletions

View file

@ -4,8 +4,10 @@ $color-button-hover: #17274d;
$color-button-call-to-action: #138808; $color-button-call-to-action: #138808;
$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia $color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
$color-header: #6A2060; $color-header: #6A2060;
$color-highlight-box-border: #6A2060; $color-highlight-box-other-border: #99AFE2;
$color-highlight-box-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060 $color-highlight-box-other-background: #E3E9F7;
$color-highlight-box-nluug-border: #6A2060;
$color-highlight-box-nluug-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
$color-border: #6A2060; $color-border: #6A2060;
$color-text-inverse: white; $color-text-inverse: white;
@ -67,20 +69,30 @@ footer {
} }
h1, h2, h3, h4, h5, strong, b { h1, h2, h3, h4, h5, strong, b {
font-size: inherit; //font-size: inherit;
font-size: 1.1em;
font-weight: 600; font-weight: 600;
//text-transform: uppercase; //text-transform: uppercase;
} }
// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien // Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
.highlight-box { .highlight-box {
background-color: $color-highlight-box-background;
padding: 10px;
margin: 2px;
border: 2px solid $color-highlight-box-border;
border-radius: 4px; border-radius: 4px;
margin: 2px;
padding: 20px;
} }
// Events voor alleen NLUUG-leden krijgen een andere kleur dan events in samenwerking met of die extra aandacht nodig hebben.
.highlight-box-nluug {
background-color: $color-highlight-box-nluug-background;
border: 1px solid $color-highlight-box-nluug-border;
}
.highlight-box-other {
background-color: $color-highlight-box-other-background;
border: 1px solid $color-highlight-box-other-border;
}
.link { .link {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

View file

@ -17,12 +17,13 @@
{{ end }} {{ end }}
<section> <section>
<h2>Aankomende evenementen</h2>
{{ $upcoming_events := sort .Site.Data.evenementen.kalender "date_start" "asc" }} {{ $upcoming_events := sort .Site.Data.evenementen.kalender "date_start" "asc" }}
<h2>Aankomende evenementen</h2>
<div class="three-column-grid">
{{ range $upcoming_events }} {{ range $upcoming_events }}
{{ if eq .highlight_on_homepage true }} {{ if eq .highlight_on_homepage true }}
<div class="highlight-box"> <div class="highlight-box highlight-box-{{ if .nluug_event }}nluug{{ else }}other{{end }}">
<h3>{{ .name }}</h3> <h3>{{ .name }}</h3>
<p><strong>Datum</strong><br><time class="g time" datetime="{{ dateFormat "2006-01-02" .date_start }}">{{ .date_start | time.Format ":date_full" | strings.FirstUpper }}</time></p> <p><strong>Datum</strong><br><time class="g time" datetime="{{ dateFormat "2006-01-02" .date_start }}">{{ .date_start | time.Format ":date_full" | strings.FirstUpper }}</time></p>
<!-- <div class="m-b-sm"> --> <!-- <div class="m-b-sm"> -->
@ -38,7 +39,7 @@
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div>
<p>Naast de door ons georganiseerde evenementen staat er meer op de agenda.</p> <p>Naast de door ons georganiseerde evenementen staat er meer op de agenda.</p>
<ul> <ul>
{{ range first 10 (where $upcoming_events "date_start" "gt" (dateFormat "2006-01-02" now)) }} {{ range first 10 (where $upcoming_events "date_start" "gt" (dateFormat "2006-01-02" now)) }}