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

themes/nluug/assets/scss/styles.scss

@@ -1,7 +1,11 @@
 
 $color-button: #1D3160;
 $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 {
     box-sizing: border-box;
@@ -64,8 +68,28 @@ header {
     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 {
-	//white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

themes/nluug/layouts/index.html

@@ -27,13 +27,27 @@
   {{ end }}
 
   <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 := 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>
       {{ range first 10 $upcoming_events }}
         <li>{{ .date_start | dateFormat "02-01-2006" }} - {{ .name }}</li>
       {{ end }}
     </ul>
 
+
 {{ end }}

themes/nluug/layouts/partials/header.html

@@ -1,7 +1,8 @@
 <header>
   <nav style="padding:0;width:100%;">
     <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 := . }}
       {{ range .Site.Menus.main }}
         <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
@@ -9,6 +10,7 @@
         </li>
       {{ end }}
     </ul>
+    </div>
   </nav>
 </header>
 <hr class="hr-list" style="padding: 0;margin: 0;">