Fediversity/fediversity_website_archive
Archived
7
0
Fork 0
forked from laurens/fediversity_website
Code Pull requests Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
themes/nluug/assets/scss/styles.scss
View file

@ -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;

16
themes/nluug/layouts/index.html
View file

@ -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 }}

4
themes/nluug/layouts/partials/header.html
View file

@ -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;">