Bootstrap v5 Migration, Style Cleanups, Formular-Umgestaltung, Layout-Verbesserungen (schließt #222)

This commit is contained in:
Denys Konovalov 2023-04-04 18:34:22 +02:00
parent fc670ffd77
commit db3c576840
35 changed files with 193 additions and 437 deletions

@ -42,7 +42,7 @@
});
//Hero Slider
$('.hero-slider-items').slick({
$('.hero-slider').slick({
autoplay: true,
autoplaySpeed: 5000,
pauseOnFocus: false,

@ -122,14 +122,6 @@ a h4 {
}
}
.outline-0 {
outline: 0 !important;
}
.d-unset {
display: unset !important;
}
.bg-primary {
background: $primary-color !important;
}
@ -170,60 +162,6 @@ a h4 {
font-family: $secondary-font;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.mb-70 {
margin-bottom: 70px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
.mb-90 {
margin-bottom: 90px !important;
}
.mb-100 {
margin-bottom: 100px !important;
}
.pl-150 {
padding-left: 150px;
}
.zindex-1 {
z-index: 1;
}
.overflow-md-hidden {
@include desktop {
overflow: hidden;
}
}
.vertical-align-middle {
vertical-align: middle;
}
@ -465,100 +403,3 @@ details[open] summary {
.fb-tile-icon {
font-size: 96px;
}
.img-slider{
position: relative;
margin: 10px;
width: 95%;
height: 500px;
background: #1D212B;
}
.img-slider .is-slide{
z-index: 1;
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.img-slider .is-slide.active{
clip-path: circle(150% at 0 50%);
transition: 2s;
transition-property: clip-path;
}
.img-slider .is-slide img{
z-index: 1;
width: 100%;
border-radius: 5px;
}
.img-slider .is-navigation{
z-index: 2;
position: absolute;
display: flex;
bottom: 20px;
left: 50%;
border-radius: 10px;
transform: translateX(-50%);
background-color: #1a1a37;
}
.img-slider .is-navigation .is-btn{
background: rgba(255, 255, 255, 0.5);
width: 12px;
height: 12px;
margin: 10px;
border-radius: 50%;
cursor: pointer;
}
.img-slider .is-navigation .is-btn.active{
background: #2696E9;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
@media (max-width: 820px){
.img-slider{
width: 600px;
height: 375px;
}
.img-slider .is-navigation{
bottom: 25px;
}
.img-slider .is-navigation .is-btn{
width: 10px;
height: 10px;
margin: 8px;
}
}
@media (max-width: 620px){
.img-slider{
width: 400px;
height: 250px;
}
.img-slider .is-navigation{
bottom: 15px;
}
.img-slider .is-navigation .is-btn{
width: 8px;
height: 8px;
margin: 6px;
}
}
@media (max-width: 420px){
.img-slider{
width: 320px;
height: 200px;
}
.img-slider .is-navigation{
bottom: 10px;
}
}

@ -1,4 +1,3 @@
/* banner feature */
.feature-icon {
font-size: 60px;
color: $secondary-color;
@ -41,18 +40,6 @@
}
}
/* /banner feature */
/* course */
.card-btn {
font-size: 12px;
padding: 5px 10px;
}
.flex-basis-33 {
flex-basis: 33.3333%;
}
.hover-shadow {
transition: .3s ease;
@ -61,9 +48,6 @@
}
}
/* /course */
/* success story */
.success-video {
min-height: 300px;
@ -138,57 +122,6 @@
}
}
/* /success story */
/* events */
.card-date {
position: absolute;
background: $primary-color;
font-family: $secondary-font;
text-align: center;
padding: 10px;
color: $white;
top: 0;
left: 0;
text-transform: uppercase;
span {
font-size: 40px;
}
}
/* /events */
/* footer */
.input-wrapper {
position: relative;
button {
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
}
.form-control {
height: 60px;
background: $white;
border-radius: 0;
padding-left: 25px;
&:focus {
border-color: $primary-color;
box-shadow: none;
}
}
.newsletter-block {
.form-control {
height: 90px;
}
}
.bg-footer {
background-color: #182b45;
}
@ -202,5 +135,3 @@
border-color: #494a43 !important;
padding-top: 75px;
}
/* /footer */

@ -29,14 +29,14 @@ params:
- media/zeichnung.webp
plugins:
css:
- https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.css
- https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css
- https://assets.cantorgymnasium.de/slick/v1.8/slick.css
- https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css
- https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css
- https://assets.cantorgymnasium.de/fonts/fira/fira.css
- https://assets.cantorgymnasium.de/fonts/tilt-warp/tilt-warp.css
js:
- https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.js
- https://assets.cantorgymnasium.de/bootstrap/v5/js/bootstrap.min.js
- https://assets.cantorgymnasium.de/slick/v1.8/slick.min.js
- https://assets.cantorgymnasium.de/lazyload/v17/dist/lazyload.min.js
head_js:

@ -252,9 +252,7 @@ tiles:
icon: mdi mdi-bank-outline
font_color: white
content: >
<iframe id="pdf-js-viewer"
src="/plugins/pdfjs/web/viewer.html?file=%2Fmedia%2Fprojektwoche%2F2023%2Fp14%2FMedizin_Cantor.pdf"
title="webviewer" frameborder="0" width="100%" height="400vh"></iframe>
<iframe src="/media/projektwoche/2023/p14/Medizin_Cantor.pdf" width="100%" height="600vh"></iframe>
- title: Wir fotografieren die Unendlichkeit
bg_color: "#ccff66"
icon: mdi mdi-camera-outline

@ -15,11 +15,11 @@ jedem Interessierten die wechselvolle Geschichte des GCG präsentiert.
---
<div class="row">
<div class="col-3">
<div class="col-md-3 col-12">
<img src="/media/schulchronik/cantor1.webp">
</div>
<div class="col-9">
<h1>"Aus dem Paradies, das Cantor uns geschaffen, soll uns niemand vertreiben können."</h1>
<div class="col-md-9 col-12">
<p class="fs-1 fw-bold">"Aus dem Paradies, das Cantor uns geschaffen, soll uns niemand vertreiben können."</p>
aus 'David Hilbert, Über das Unendliche', Math. Ann. 95
</div>
</div>

@ -10,9 +10,6 @@
- id: contact_info
translation: Kontaktdaten
- id: subscribe_newsletter
translation: Newsletter abbonieren
- id: subscribe
translation: Abbonieren

@ -1,6 +1,6 @@
<div class="card border-primary rounded-0 hover-shadow mb-4">
<div class="card-body">
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 30 }}</a></h4>
<a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "show_more"}}</a>
</div>
</div>

@ -1,8 +1,8 @@
<div class="card border-primary rounded-0 hover-shadow mb-4">
<a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}"></a>
<div class="card-body">
<div class="row col-12 mb-3"><i class="mdi mdi-bookmark-outline mr-2"></i>{{ .Params.category }}</div>
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
<div class="row col-12 mb-3"><div class="col-1"><i class="mdi mdi-bookmark-outline me-2"></i></div><div class="col-11">{{ .Params.category }}</div></div>
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 30 }}</a></h4>
<a href="{{ .Permalink }}" class="btn btn-primary btn-sm text-uppercase" data-pagefind-ignore>{{ i18n "read_more"}}</a>
</div>
</div>

@ -2,13 +2,13 @@
<a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
<div class="card-body">
<div class="row mb-2">
<div class="col-6"><i class="mdi mdi-calendar-today mr-2"></i>{{ time.Format "02. Jan 2006" .PublishDate }}</div>
<div class="col-6"><i class="mdi mdi-calendar-today me-2"></i>{{ time.Format "02. Jan 2006" .PublishDate }}</div>
<div class="col-6">
<i class="mdi mdi-fountain-pen-tip mr-2"></i>
<i class="mdi mdi-fountain-pen-tip me-2"></i>
<a href="{{ `author` | relLangURL }}/{{ .Params.author | urlize }}">{{ .Params.author | title }}</a>
</div>
</div>
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 30 }}</a></h4>
<p class="card-text">{{ .Summary | truncate 100 }}</p>
<a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "read_more" }}</a>
</div>

@ -2,8 +2,8 @@
<a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
<div class="card-body">
<div class="container">
<div class="row mb-2"><i class="mdi mdi-calendar-today mr-2"></i>{{ .Params.schedule }}</div>
<div class="row mb-2"><i class="mdi mdi-crowd mr-2"></i>{{ .Params.class }}</div>
<div class="row mb-2"><div class="col-1"><i class="mdi mdi-calendar-today"></i></div><div class="col-11">{{ .Params.schedule }}</div></div>
<div class="row mb-2"><div class="col-1"><i class="mdi mdi-crowd"></i></div><div class="col-11">{{ .Params.class }}</div></div>
</div>
<h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title | truncate 20 }}</a></h4>
<a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>{{ i18n "show_more"}}</a>

@ -11,17 +11,17 @@
<div class="col-12">
<div class="row mb-3">
<div class="col-6 mb-md-0 text-light">
<span class="font-weight-bold mr-1">{{ i18n "posted_by" }}:</span>
<span class="fw-bold me-1">{{ i18n "posted_by" }}:</span>
<a href="{{ `author/` | relLangURL }}{{ .Params.Author | urlize }}">{{ .Params.author | title }}</a>
</div>
<div class="col-6 mb-3 mb-md-0 text-light">
<span class="font-weight-bold mr-1">{{ i18n "date" }}:</span>
<span class="fw-bold me-1">{{ i18n "date" }}:</span>
{{ time.Format "02. Jan 2006" .PublishDate }}
</div>
</div>
<div class="row">
<div class="col-12 mb-md-0 text-light">
<span class="font-weight-bold mr-1">{{ i18n "category" }}:</span>
<span class="fw-bold me-1">{{ i18n "category" }}:</span>
{{ range $index, $elements:= .Params.categories }}
{{ if ne $index 0 }}, {{ end }}
<a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}">{{ . | title }}</a>

@ -6,37 +6,54 @@
<div class="col-lg-8 mb-4 mb-lg-0">
<form action="https://php.cantorgymnasium.de/formtools/process.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="form_tools_form_id" value="5" />
<div style="display:none">
<div hidden>
<input type="text" name="bad_email" value="" />
</div>
<div class="input-group">
<input type="text" class="form-control mb-3" id="surname" name="visitor_surname" placeholder="Name (Schüler/in)" required>
<input type="text" class="form-control mb-3" id="name" name="visitor_name" placeholder="Vorname" required>
<label for="birthday">Geburtsdatum</label>
<input type="date" class="form-control mb-3" id="birthday" name="visitor_birthday" min="2005-01-01" required>
<div class="row">
<input type="text" class="form-control mb-3 col-lg-8 ml-3 mr-4" id="street" name="street" placeholder="Straße" required><input type="text" class="form-control mb-3 col-lg-3" id="house" name="house" placeholder="Hausnummer" required>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Geburtsdatum</span>
<input type="date" class="form-control" id="birthday" name="visitor_birthday" min="2005-01-01" required>
</div>
<input type="text" class="form-control mb-3" id="street" name="street" placeholder="Straße" required>
<div class="input-group">
<input type="text" class="form-control mb-3" id="house" name="house" placeholder="Hausnummer" required>
<input type="text" class="form-control mb-3" id="adresszusatz" name="adresszusatz" placeholder="Adresszusatz">
<div class="row">
<input type="text" inputmode="numeric" class="form-control mb-3 col-lg-5 ml-3 mr-4" id="zipcode" name="zipcode" placeholder="PLZ" pattern="[0-9]{5}" title="Postleitzahlen bestehen aus exakt 5 Ziffern" required><input type="text" class="form-control mb-3 col-lg-6" id="city" name="city" placeholder="Stadt" required>
</div>
<div class="input-group">
<input type="text" inputmode="numeric" class="form-control mb-3" id="zipcode" name="zipcode" placeholder="PLZ" pattern="[0-9]{5}" title="Postleitzahlen bestehen aus exakt 5 Ziffern" required>
<input type="text" class="form-control mb-3" id="city" name="city" placeholder="Stadt" required>
</div>
<input type="text" class="form-control mb-3" id="landkreis" name="landkreis" placeholder="Landkreis">
<div class="row">
<input type="tel" class="form-control mb-3 col-lg-5 ml-3 mr-4" id="tpriv" name="tpriv" placeholder="Telefon privat"><input type="tel" class="form-control mb-3 col-lg-6" id="tdienstl" name="tdienstl" placeholder="Telefon dienstl.">
<div class="input-group">
<input type="tel" class="form-control mb-3" id="tpriv" name="tpriv" placeholder="Telefon privat">
<input type="tel" class="form-control mb-3" id="tdienstl" name="tdienstl" placeholder="Telefon dienstl.">
</div>
<input type="text" class="form-control mb-3" id="dpname" name="dpname" placeholder="Abweichender Elternname">
<input type="text" class="form-control mb-3" id="grundschule" name="grundschule" placeholder="Grundschule" required>
<input type="email" class="form-control mb-3" id="mail" name="visitor_email" placeholder="Ihre E-Mail Adresse" required>
<textarea name="visitor_message" id="message" class="form-control mb-3" placeholder="Bemerkungen"></textarea>
<label for="zeugnis_1">Zeugnis (Vorderseite)</label>
<input type="file" class="form-control mb-3" id="zeugnis_1" name="zeugnis_1" accept="image/*,.pdf">
<label for="zeugnis_2">Zeugnis (Rückseite)</label>
<input type="file" class="form-control mb-3" id="zeugnis_2" name="zeugnis_2" accept="image/*,.pdf">
<label for="slbe">Schullaufbahnempfehlung</label>
<input type="file" class="form-control mb-3" id="slbe" name="slbe" accept="image/*,.pdf">
<input type="checkbox" id="accept" name="accept" required>
<label for="accept" class="mr-2">Hiermit melden wir unser Kind verbindlich zur Aufnahmeprüfung an.</label>
<div class="input-group mb-3">
<input type="file" class="form-control" id="zeugnis_1" name="zeugnis_1" accept="image/*,.pdf">
<span class="input-group-text">Zeugnis (Vorderseite)</span>
</div>
<div class="input-group mb-3">
<input type="file" class="form-control" id="zeugnis_2" name="zeugnis_2" accept="image/*,.pdf">
<span class="input-group-text">Zeugnis (Rückseite)</span>
</div>
<div class="input-group mb-3">
<input type="file" class="form-control" id="slbe" name="slbe" accept="image/*,.pdf">
<span class="input-group-text">Schullaufbahnempfehlung</span>
</div>
<div class="input-group">
<div class="input-group-text">
<input type="checkbox" class="form-check-input" id="accept" name="accept" required>
</div>
<span class="input-group-text">Hiermit melden wir unser Kind verbindlich zur Aufnahmeprüfung an.</span>
<button type="submit" value="send" class="btn btn-primary">{{ i18n "send" }}</button>
</div>
</form>
</div>
<div class="col-lg-4">

@ -18,7 +18,7 @@
<a href="{{ .Permalink }}" class="h4 mb-3 d-block">{{ .Title }}</a>
<p class="mb-0">{{ .Summary | truncate 100 }}</p>
</div>
<div class="d-md-table-cell text-right pr-0 pr-md-4" data-pagefind-ignore>
<div class="d-md-table-cell text-end pe-0 pe-md-4" data-pagefind-ignore>
<a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a>
</div>
</div>

@ -12,7 +12,7 @@
<img class="rounded-circle img-fluid mb-4" src="https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon">
{{ end }}
<figcaption>
<h4 class="font-weight-bold">{{ .Title }}</h4>
<h4 class="fw-bold">{{ .Title }}</h4>
</figcaption>
</figure>
<hr>

@ -11,7 +11,7 @@
<a href="{{ .Permalink }}" class="h4 mb-3 d-block">{{ .Title }}</a>
<p class="mb-0">{{ .Summary | truncate 100 }}</p>
</div>
<div class="d-md-table-cell text-right pr-0 pr-md-4" data-pagefind-ignore><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a></div>
<div class="d-md-table-cell text-end pe-0 pe-md-4" data-pagefind-ignore><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "read_more"}}</a></div>
</div>
{{ end }}
</div>

@ -8,7 +8,7 @@
</div>
</div>
<div class="row">
<div class="col-12 mb-50 content">
<div class="col-12 content">
{{ range .Params.files }}
<div class="container mb-0">
<div class="card border-primary rounded-0 hover-shadow mb-4">

@ -4,7 +4,7 @@
<div class="container">
<div class="row">
<div class="col-12 mb-4">
<img style="height: 500px;width: 100%;object-fit: cover;" src="{{ .Params.image | relURL }}"
<img class="w-100" style="height: 600px;object-fit: cover;" src="{{ .Params.image | relURL }}"
class="img-fluid w-100">
</div>
</div>
@ -16,8 +16,8 @@
<div class="row">
<div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
<div class="d-flex align-items-center">
<i class="mdi mdi-calendar-today-outline text-primary icon-md mr-2"></i>
<div class="text-left">
<i class="mdi mdi-calendar-today-outline text-primary icon-md me-2"></i>
<div class="text-start">
<h6 class="mb-0">{{ i18n "schedule" | upper }}</h6>
<p class="mb-0">{{ .Params.schedule }}</p>
</div>
@ -25,8 +25,8 @@
</div>
<div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
<div class="d-flex align-items-center">
<i class="mdi mdi-timer-sand text-primary icon-md mr-2"></i>
<div class="text-left">
<i class="mdi mdi-timer-sand text-primary icon-md me-2"></i>
<div class="text-start">
<h6 class="mb-0">{{ i18n "duration" | upper }}</h6>
<p class="mb-0">{{ .Params.duration }}</p>
</div>
@ -34,8 +34,8 @@
</div>
<div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
<div class="d-flex align-items-center">
<i class="mdi mdi-crowd text-primary icon-md mr-2"></i>
<div class="text-left">
<i class="mdi mdi-crowd text-primary icon-md me-2"></i>
<div class="text-start">
<h6 class="mb-0">{{ i18n "class" | upper }}</h6>
<p class="mb-0">{{ .Params.class }}</p>
</div>
@ -43,8 +43,8 @@
</div>
<div class="col-lg-3 col-sm-6 mb-3 mb-sm-0">
<div class="d-flex align-items-center">
<i class="mdi mdi-map-marker-radius-outline text-primary icon-md mr-2"></i>
<div class="text-left">
<i class="mdi mdi-map-marker-radius-outline text-primary icon-md me-2"></i>
<div class="text-start">
<h6 class="mb-0">{{ i18n "room" | upper }}</h6>
<p class="mb-0">{{ .Params.room }}</p>
</div>

@ -6,11 +6,10 @@
{{ with $data.homepage.slider }}
<section class="hero-section overlay bg-cover hero-default" data-background="{{ .bg_image | absURL }}">
<div class="container">
<div class="hero-slider">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">{{ $data.homepage.slider.title | markdownify }}</h2>
<div class="hero-slider-items">
<h2 class="text-white position-relative">{{ $data.homepage.slider.title | markdownify }}</h2>
<div class="hero-slider">
{{ range .slider_item }}
<div class="hero-slider-item">
<p class="text-muted mb-4" >{{ .content | markdownify }}</p>
@ -23,7 +22,6 @@
</div>
</div>
</div>
</div>
</section>
{{ end }}
<noscript>
@ -102,7 +100,7 @@
{{ end }}
{{ if $data.homepage.blog.enable }}
<section class="mb-4">
<section class="section-sm mb-4">
<div class="container">
<div class="row">
<div class="col-12">
@ -115,7 +113,7 @@
<img class="card-img-top rounded-0" src="{{ $data.ausblick.image | relURL }}" alt="{{ $data.ausblick.title }}">
<div class="card-body">
<ul class="list-inline mb-3">
<li class="list-inline-item mr-3 ml-0"><i class="mdi mdi-fountain-pen-tip"></i> <a
<li class="list-inline-item me-3 ms-0"><i class="mdi mdi-fountain-pen-tip"></i> <a
href="{{ `author` | relLangURL }}/{{ $data.ausblick.author | urlize }}">{{ $data.ausblick.author | title }}</a></li>
</ul>
<h4 class="card-title">{{ $data.ausblick.title }}</h4>
@ -143,7 +141,7 @@
<div class="col-12">
<div class="row feature-blocks bg-white justify-content-between">
{{ range .feature_item }}
<div class="col-xl-5 mb-xl-5 mb-4 text-sm-left">
<div class="col-xl-5 mb-xl-5 mb-4">
{{ with .image }}
<img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
{{ end }}
@ -170,10 +168,10 @@
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center section-title justify-content-between">
<h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.ganztagsangebote.title }}</h2>
<h2 class="mb-0 text-nowrap me-3">{{ $data.homepage.ganztagsangebote.title }}</h2>
<div class="border-top w-100 border-primary d-none d-sm-block"></div>
<div>
<a href="{{ `ganztagsangebote` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
<a href="{{ `ganztagsangebote` | relLangURL }}" class="btn btn-sm btn-primary-outline ms-sm-3 d-none d-sm-block">{{ i18n "see_all" }}</a>
</div>
</div>
</div>
@ -224,10 +222,10 @@
<div class="row">
<div class="col-12">
<div class="d-flex align-items-center section-title justify-content-between">
<h2 class="mb-0 text-nowrap mr-3">{{ $data.homepage.termine.title }}</h2>
<h2 class="mb-0 text-nowrap me-3">{{ $data.homepage.termine.title }}</h2>
<div class="border-top w-100 border-primary d-none d-sm-block"></div>
<div>
<a href="{{`termine` | relLangURL }}" class="btn btn-sm btn-primary-outline ml-sm-3 d-none d-sm-block text-nowrap">{{ i18n "all_events" }}</a>
<a href="{{`termine` | relLangURL }}" class="btn btn-sm btn-primary-outline ms-sm-3 d-none d-sm-block text-nowrap">{{ i18n "all_events" }}</a>
</div>
</div>
</div>
@ -244,7 +242,7 @@
{{ end }}
{{ range first 3 $events }}
<li class="d-md-table mb-4 w-100 border-bottom hover-shadow">
<li class="d-md-table mb-4 w-100 border-bottom hover-shadow ps-0">
<div class="d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc">
<span class="h2 d-block">{{ time.Format "2" .date}}</span>
<span class="d-block">{{ time.Format "Jan 2006" .date}}</span>
@ -257,9 +255,9 @@
<p class="h4 mb-0 d-block">{{ .title }}</p>
</div>
{{ with .location }}
<div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle">
<div class="d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle">
<p>
<i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>
<i class="mdi mdi-map-marker-radius-outline icon-s text-primary me-2"></i>
{{ . | markdownify }}
</p>
</div>

@ -22,7 +22,7 @@ crossorigin=""/>
<div class="col-lg-6 mb-4 mb-lg-0">
<form action="https://php.cantorgymnasium.de/formtools/process.php" method="post">
<input type="hidden" name="form_tools_form_id" value="2" />
<div style="display:none">
<div hidden>
<input type="text" name="bad_email" value="" />
</div>
<input type="text" class="form-control mb-3" id="name" name="visitor_name" placeholder="Ihr Name">

@ -28,9 +28,9 @@
<div class="bg-white">
<h4 class="mb-4">{{ i18n "latest_article" }}</h4>
{{ range first 5 ( where .Site.Pages "Type" "post" )}}
<div class="media border-bottom border-color pb-3 mb-3">
<a href="{{ .Permalink }}"><img class="mr-3 post-thumb-sm" src="{{ .Params.Image | absURL }}"></a>
<div class="media-body">
<div class="d-flex border-bottom border-color pb-3 mb-3">
<a href="{{ .Permalink }}"><img class="me-3 post-thumb-sm" src="{{ .Params.Image | absURL }}"></a>
<div class="flex-grow-1">
<a href="{{ .Permalink }}">
<h5 class="mt-0">{{ .Title }}</h5>
</a>

@ -48,10 +48,10 @@
<div class="copyright py-4 bg-footer">
<div class="container">
<div class="row">
<div class="col-sm-7 text-sm-left text-center">
<div class="col-sm-7 text-sm-start text-center">
<p class="mb-0">{{ .Site.Params.copyright | markdownify | emojify }}</p>
</div>
<div class="col-sm-5 text-sm-right text-center">
<div class="col-sm-5 text-smend text-center">
<ul class="list-inline">
{{ range .Site.Params.social }}
<li class="list-inline-item"><a class="d-inline-block p-2" href="{{ .link | safeURL }}"><i class="{{ .icon }} text-primary"></i></a></li>

@ -61,14 +61,12 @@
</head>
<div id="pagefind-search" class="modal" data-pagefind-ignore>
<div id="pagefind-search" class="modal fade" data-pagefind-ignore>
<div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Suche</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-pagefind-ignore>
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" data-pagefind-ignore></button>
</div>
<div class="modal-body">
<div class="content">

@ -10,15 +10,15 @@
<div class="row mb-4">
<div class="col-7">
<div class="d-flex align-items-center">
<i class="mdi mdi-crowd text-primary icon-md mr-2"></i>
<div class="text-left">
<i class="mdi mdi-crowd text-primary icon-md me-2"></i>
<div class="text-start">
<h6 class="mb-0">{{ i18n "class" | upper }}</h6>
<p class="mb-0">{{ .Params.class }}</p>
</div>
</div>
</div>
{{ if .Params.web_url }}
<div class="col-5 text-right mb-4 mb-xl-0">
<div class="col-5 text-end mb-4 mb-xl-0">
<a href="{{ .Params.web_url | safeURL }}" class="btn btn-primary">{{ i18n "website" }}</a>
</div>
{{ end }}

@ -3,7 +3,7 @@
<div class="top-header py-2 bg-white">
<div class="container">
<div class="row no-gutters align-items-center">
<div class="col-lg-4 text-center text-lg-left">
<div class="col-lg-4 text-center text-lg-start">
<ul class="list-inline">
{{ range .Site.Params.social }}
<li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-color" href="{{ .link | safeURL }}"><i
@ -11,10 +11,10 @@
{{ end }}
</ul>
</div>
<div class="col-lg-8 text-center text-lg-right">
<div class="col-lg-8 text-center text-lg-end">
<ul class="list-inline">
<li class="list-inline-item">
<a class="text-color mr-3" href="tel:{{ .Site.Params.mobile }}"><strong>{{ i18n "call" | upper }} :
<a class="text-color me-3" href="tel:{{ .Site.Params.mobile }}"><strong>{{ i18n "call" | upper }} :
</strong> {{ .Site.Params.mobile }}</a>
</li>
<li class="list-inline-item">
@ -39,7 +39,7 @@
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{{ .Site.BaseURL | absLangURL }}">{{ .Site.Params.Home }}</a>
</li>

@ -1,16 +1,26 @@
<div id="{{ md5 .title }}" class="modal">
<div id="{{ md5 .title }}" class="modal fade">
<div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">{{ .title }}</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-pagefind-ignore>
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" data-pagefind-ignore></button>
</div>
<div class="modal-body">
<div class="content">
<div class="content mb-4">
{{ .content | markdownify }}
</div>
{{ range .unterhaufen }}
<div class="container mb-0">
<div class="card border-primary rounded-0 hover-shadow mb-2">
<div class="card-body mb-0">
<details class="mb-0">
<summary class="mb-0">{{ .title }}</summary>
<div class="content"><p class="content">{{ .content | markdownify }}</p></div>
</details>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>

@ -1,7 +1,7 @@
<section class="page-title-section overlay" style="background-image: url('{{ .Params.Bg_image | relURL}}'),url('{{`media/backgrounds/page-title.webp`| relURL}}');" >
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="col-md-8 position-relative">
<ul class="list-inline">
<li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-secondary" href="{{ if .Params.Previous.enable }}{{ .Params.Previous.link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.baseURL | absLangURL }}{{ end }}">{{ if .Params.previous.enable }}{{ .Params.previous.title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{ end }}{{ end }}</a></li>
<li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>

@ -9,9 +9,9 @@
<h2 class="mb-3">{{ i18n "cantorpreisträger" }}</h2>
{{ range where (where .Site.RegularPages "Title" .Params.Title ) "Type" "=" "cantorpreis" }}
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="media mb-2 mb-sm-0 align-items-center">
<img class="mr-4 img-fluid person-thumb-sm" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
<div class="media-body">
<div class="d-flex mb-2 mb-sm-0 align-items-center">
<img class="me-4 img-fluid person-thumb-sm" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
<div class="flex-grow-1">
<h4 class="mt-0"><a href="{{ .Permalink }}">{{ .Params.Name }}</a></h4>
{{ .Description }}
</div>
@ -58,12 +58,9 @@
color: function (word, weight) {
return (weight === 200) ? '#ffbc3b' : '#1a1a37';
},
hover: function(item, dimension, event) {
console.log("item:", item);
console.log("dimension:", dimension);
console.log("event:", event);
/* hover: function(item, dimension, event) {
item && item[2] ? event.target.style.textDecorationLine = "underline" : null
},
},*/
fontFamily: 'Tilt Warp, serif',
fontWeight: 700,
list: JSON.parse("{{ $topics }}"),

@ -7,7 +7,7 @@
{{ if $isimg }}
{{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
<div class="col-lg-3 col-md-4 col-sm-6">
<a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}"><img class="lazy img-thumbnail" style="width: 100%;height:100%;object-fit: cover;" data-src="{{ $linkURL }}"></a>
<a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}"><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src="{{ $linkURL }}"></a>
</div>
{{ end }}
{{ end }}

@ -1,3 +1,3 @@
<div class="col-lg-3 col-md-4 col-sm-6">
<a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail" style="width: 100%;height:100%;object-fit: cover;" data-src='{{ .Get "src" }}'></a>
<a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src='{{ .Get "src" }}'></a>
</div>

@ -1,75 +1,44 @@
<div class="img-slider">
{{- with (.Get "dir") -}}
{{- $files := readDir (print "/static/" .) }}
{{- range $index, $file := $files -}}
{{- $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{- if $isimg }}
{{- $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
<div class="is-slide {{if eq $index 0 }}active{{end}}">
<img src="{{ $linkURL }}" alt="">
<div class="carousel carousel-dark slide" data-bs-ride="true" id='slider-{{ md5 (.Get "dir") }}'>
{{ $dir := (.Get "dir") }}
{{ with $dir }}
{{ $files := readDir (print "/static/" .) }}
<div class="carousel-indicators">
{{ range $index, $file := $files }}
{{ $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{ if $isimg }}
{{ $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
{{ if eq $index 0 }}
<button type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}" class="active"></button>
{{ else }}
<button type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide-to="{{ $index }}"></button>
{{ end }}
{{ end }}
{{ end }}
</div>
{{- end }}
{{- end }}
{{- end }}
<div class="is-navigation">
<div class="is-btn active"></div>
<div class="is-btn"></div>
<div class="is-btn"></div>
<div class="is-btn"></div>
<div class="carousel-inner">
{{ range $index, $file := $files }}
{{ $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
{{ if $isimg }}
{{ $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
{{ if eq $index 0 }}
<div class="carousel-item active">
<img src="{{ $linkURL }}" class="d-block w-100">
</div>
{{ else }}
<div class="carousel-item">
<img src="{{ $linkURL }}" class="d-block w-100">
</div>
{{ end }}
{{ end }}
{{ end }}
</div>
{{ end }}
<button class="carousel-control-prev" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Zurück</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slider-{{ md5 $dir }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vor</span>
</button>
</div>
<script type="text/javascript">
var slides = document.querySelectorAll('.is-slide');
var btns = document.querySelectorAll('.is-btn');
let currentSlide = 1;
// Javascript for image slider manual navigation
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
});
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
manualNav(i);
currentSlide = i;
});
});
// Javascript for image slider autoplay navigation
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
if(slides.length == i){
i = 0;
}
if(i >= slides.length){
return;
}
repeater();
/// Time in ms
}, 5000);
}
repeater();
}
repeat();
</script>

@ -32,8 +32,8 @@
<p class="h4 mb-0 d-block">{{ .title }}</p>
</div>
{{ with .location }}
<div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle border-bottom">
<p><i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>{{ . | markdownify }}</p>
<div class="d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle border-bottom">
<p><i class="mdi mdi-map-marker-radius-outline icon-s text-primary me-2"></i>{{ . | markdownify }}</p>
</div>
{{ end }}
</li>

@ -323,7 +323,7 @@
});
</script>
<script id="preview-styles">
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.css");
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css");
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/fira/fira.css");
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css");
CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css");
@ -474,7 +474,7 @@
h('div', {className: "row"},
widgetsFor('elements').map(function(element, index) {
return h('div', {className: "col-lg-4 col-sm-6 mb-4"},
h('div', {className: "card rounded-0 hover-shadow border-top-0 border-left-0 border-right-0"},
h('div', {className: "card rounded-0 hover-shadow border-top-0 border-start-0 border-end-0"},
h('div', {className: "card-body"},
h('h4', {className: "card-title mb-3"}, element.data.title),
h('div', {className: "content"}, element.widgets.content))));
@ -513,9 +513,9 @@
h('div', {className: "d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2"},
h('p', {className: "h4 mb-0 d-block"}, event.data.title)),
event.data.location != null && event.data.location != "" ?
h('div', {className: "d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle"},
h('div', {className: "d-md-table-cell text-end pe-0 pe-md-4 p-2 vertical-align-middle"},
h('p', {},
h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"}), event.data.location)) : null);
h('i', {className: "mdi mdi-map-marker-radius-outline icon-s text-primary me-2"}), event.data.location)) : null);
})))))));
};
CMS.registerPreviewTemplate("event-index", EventPreview);
@ -596,16 +596,16 @@
),
h('div', {className: "col-12"},
h('ul', {className: "list-inline"},
h('li', {className: "list-inline-item mr-4 mb-3 mb-md-0 text-light"},
h('span', {className: "font-weight-bold mr-2"}, "Geschrieben von:"),
h('li', {className: "list-inline-item me-4 mb-3 mb-md-0 text-light"},
h('span', {className: "fw-bold me-2"}, "Geschrieben von:"),
entry.data.author
),
h('li', { className: "list-inline-item mr-4 mb-3 mb-md-0 text-light" },
h('span', { className: "font-weight-bold mr-2"}, "Datum:"), entry.data.date ?
h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" },
h('span', { className: "fw-bold me-2"}, "Datum:"), entry.data.date ?
Intl.DateTimeFormat('de-De', { day: 'numeric', month: 'short', year: 'numeric'}).format(new Date(entry.data.date)) : ""
),
h('li', { className: "list-inline-item mr-4 mb-3 mb-md-0 text-light" },
h('span', { className: "font-weight-bold mr-2"}, "Kategorie:"),
h('li', { className: "list-inline-item me-4 mb-3 mb-md-0 text-light" },
h('span', { className: "fw-bold me-2"}, "Kategorie:"),
entry.data.categories != null ? entry.data.categories.map((category, index) => {
var text = (index != 0 ? ", " : "") + category;
return text;
@ -683,37 +683,37 @@
h('div', {className: "row align-items-center mb-5"},
h('div', {className: "col-xl-8 order-sm-3 order-xl-2 col-12 order-2"},
h('ul', {className: "list-inline"},
h('li', {className: "list-inline-item mr-4 mb-3 mb-sm-0"},
h('li', {className: "list-inline-item me-4 mb-3 mb-sm-0"},
h('div', {className: "d-flex align-items-center"},
h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md mr-2"}),
h('div', {className: "text-left"},
h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md me-2"}),
h('div', {className: "text-start"},
h('h6', {className: "mb-0"}, "Zeit"),
h('p', {className: "mb-0"}, entry.data.schedule)
)
)
),
h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
h('div', {className: "d-flex align-items-center"},
h('i', {className: "mdi mdi-timer-sand text-primary icon-md mr-2"}),
h('div', {className: "text-left"},
h('i', {className: "mdi mdi-timer-sand text-primary icon-md me-2"}),
h('div', {className: "text-start"},
h('h6', {className: "mb-0"}, "Dauer"),
h('p', {className: "mb-0"}, entry.data.duration)
)
)
),
h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
h('div', {className: "d-flex align-items-center"},
h('i', {className: "mdi mdi-crowd text-primary icon-md mr-2"}),
h('div', {className: "text-left"},
h('i', {className: "mdi mdi-crowd text-primary icon-md me-2"}),
h('div', {className: "text-start"},
h('h6', {className: "mb-0"}, "Klassen(n)"),
h('p', {className: "mb-0"}, entry.data.class)
)
)
),
h('li', { className: "list-inline-item mr-4 mb-3 mb-sm-0" },
h('li', { className: "list-inline-item me-4 mb-3 mb-sm-0" },
h('div', {className: "d-flex align-items-center"},
h('i', {className: "mdi mdi-map-marker-radius-outline text-primary icon-md mr-2"}),
h('div', {className: "text-left"},
h('i', {className: "mdi mdi-map-marker-radius-outline text-primary icon-md me-2"}),
h('div', {className: "text-start"},
h('h6', {className: "mb-0"}, "Raum"),
h('p', {className: "mb-0"}, entry.data.room)
)
@ -791,10 +791,10 @@
h('div', {className: "row align-items-center mb-5"},
h('div', {className: "col-xl-8 order-sm-2 order-xl-2 col-12 order-2 col-sm-6"},
h('ul', {className: "list-inline"},
h('li', {className: "list-inline-item mr-4 mb-3 mb-sm-0"},
h('li', {className: "list-inline-item me-4 mb-3 mb-sm-0"},
h('div', {className: "d-flex align-items-center"},
h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md mr-2"}),
h('div', {className: "text-left"},
h('i', {className: "mdi mdi-calendar-today-outline text-primary icon-md me-2"}),
h('div', {className: "text-start"},
h('h6', {className: "mb-0"}, "Klasse(n)"),
h('p', {className: "mb-0"}, entry.data.class)
)
@ -802,7 +802,7 @@
),
)
),
h('div', {className: "col-xl-2 text-left text-xl-right order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0"},
h('div', {className: "col-xl-2 text-start text-xl-end order-sm-3 order-3 order-xl-3 col-sm-6 col-12 mb-4 mb-xl-0"},
h('a', {href: entry.data.web_url, className: "btn btn-primary"}, "Website")
),
h('div', { className: "col-12 mt-4 order-4"},

@ -310,7 +310,7 @@
});
</script>
<script id="preview-styles">
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v4/bootstrap.min.css");
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css");
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/fira/fira.css");
CMS.registerPreviewStyle("https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css");
CMS.registerPreviewStyle("https://cantorgymnasium.de/scss/style.css");