Skip to content

Commit e9118bc

Browse files
Erik2609Erik2609
committed
add language toggle
1 parent 0eb5dbb commit e9118bc

File tree

17 files changed

+121
-387
lines changed

17 files changed

+121
-387
lines changed

‎assets/plugins/slick/slick.css‎

Lines changed: 0 additions & 119 deletions
This file was deleted.

‎assets/plugins/slick/slick.min.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎assets/scss/_common.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,6 @@ h4, .h4 {
8080
font-size:18px;
8181
}
8282

83-
.slick-slide {
84-
outline: 0;
85-
}
8683

8784
@media (max-width: 992px) {
8885
.page-title{

‎assets/scss/_menu.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* The switch - the box around the slider */
2+
.switch {
3+
position: relative;
4+
display: inline-block;
5+
width: 40px;
6+
height: 23px;
7+
top: 2px;
8+
z-index: -1;
9+
}
10+
11+
/* Hide default HTML checkbox */
12+
.switch input {
13+
opacity: 0;
14+
width: 0;
15+
height: 0;
16+
}
17+
18+
/* The slider */
19+
.slider {
20+
position: absolute;
21+
cursor: pointer;
22+
top: 0;
23+
left: 0;
24+
right: 0;
25+
bottom: 0;
26+
background-color: #E2ECF6;
27+
-webkit-transition: .4s;
28+
transition: .4s;
29+
}
30+
31+
.slider:before {
32+
position: absolute;
33+
content: "";
34+
height: 16px;
35+
width: 16px;
36+
left: 3px;
37+
bottom: 3px;
38+
background-color: #002B5F;
39+
-webkit-transition: .4s;
40+
transition: .4s;
41+
}
42+
43+
input:checked+.slider {
44+
background-color: #E2ECF6;
45+
}
46+
47+
input:focus+.slider {
48+
box-shadow: 0 0 1px #F2FCFF;
49+
}
50+
51+
input:checked+.slider:before {
52+
-webkit-transform: translateX(16px);
53+
-ms-transform: translateX(16px);
54+
transform: translateX(16px);
55+
}
56+
57+
/* Rounded sliders */
58+
.slider.round {
59+
border-radius: 23px;
60+
}
61+
62+
.slider.round:before {
63+
border-radius: 50%;
64+
}

‎assets/scss/style.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,6 @@ $icon-font: '{{.icon_font | default "Font Awesome 5 Free"}}';
2828

2929
@import 'custom';
3030

31-
@import 'landingpage';
31+
@import 'landingpage';
32+
33+
@import 'menu';

‎assets/scss/templates/_main.scss‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -651,35 +651,6 @@ ul.dashed > li::before {
651651
}
652652
}
653653

654-
.slick-dots {
655-
text-align: center;
656-
margin-top: 20px;
657-
padding: 0;
658-
659-
li {
660-
display: inline-block;
661-
margin: 0 5px;
662-
663-
&.slick-active {
664-
button {
665-
background-color: $primary-color;
666-
}
667-
}
668-
669-
button {
670-
height: 10px;
671-
width: 10px;
672-
border-radius: 50%;
673-
display: block;
674-
color: transparent;
675-
padding: 0;
676-
border: 1px solid $primary-color;
677-
background-color: transparent;
678-
transition: .2s ease;
679-
}
680-
}
681-
}
682-
683654
.module-border-wrap {
684655
height: 100%;
685656
width: 100%;

‎config.toml‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ icon_font = "Font Awesome 5 Free"
3131
[[params.plugins.css]]
3232
link = "plugins/bootstrap/bootstrap.min.css"
3333
[[params.plugins.css]]
34-
link = "plugins/slick/slick.css"
35-
[[params.plugins.css]]
3634
link = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
3735
[[params.plugins.css]]
3836
link = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/brands.min.css"
@@ -45,8 +43,6 @@ link = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min
4543
link = "plugins/jQuery/jquery.slim.min.js"
4644
[[params.plugins.js]]
4745
link = "plugins/bootstrap/bootstrap.min.js"
48-
[[params.plugins.js]]
49-
link = "plugins/slick/slick.min.js"
5046
# [[params.plugins.js]]
5147
# link = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"
5248
# attributes = "crossorigin='anonymous' defer='defer' data-search-pseudo-elements"

‎layouts/partials/header.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,20 +58,23 @@
5858
{{ end }}
5959

6060
<!-- Language toggle -->
61+
6162
{{ if .IsTranslated }}
6263
{{ range .Translations }}
6364
<li class="nav-item d-inline-block" style="min-width: 137px;">
64-
{{ if eq .Site.Language.Lang "en" }}
65-
<a class="nav-link d-inline-block" style="font-weight: 350;" title="English" href="{{ .RelPermalink }}">EN</a>
66-
{{ else }}
67-
<a class="nav-link d-inline-block" title="English" href="{{ .RelPermalink }}">EN</a>
68-
{{ end }}
69-
|
70-
{{ if eq .Site.Language.Lang "nl" }}
71-
<a class="nav-link d-inline-block" style="font-weight: 350;" title="Dutch" href="{{ .RelPermalink }}">NL</a>
72-
{{ else }}
73-
<a class="nav-link d-inline-block" title="Dutch" href="{{ .RelPermalink }}">NL</a>
74-
{{ end }}
65+
<a href="{{ .RelPermalink }}" class="nav-link d-inline-block" title="Language toggle">
66+
<div class="d-inline" {{ if eq .Site.Language.Lang "en" }} style="font-weight: 350;" {{ end}}>
67+
EN
68+
</div>
69+
<!-- Rounded switch -->
70+
<label class="switch d-inline-block">
71+
<input type="checkbox" disabled aria-checked={{if eq .Site.Language.Lang "en" }} "true" checked {{else}} "false" {{ end }} id="lang-toggle" role="switch">
72+
<span class="slider round"></span>
73+
</label>
74+
<div class="d-inline" {{ if eq .Site.Language.Lang "nl" }} style="font-weight: 350;" {{ end}}>
75+
NL
76+
</div>
77+
</a>
7578
</li>
7679
{{ end }}
7780
{{ end }}

0 commit comments

Comments
 (0)