gallery, fixes, etc.

This commit is contained in:
Denys Konovalov 2023-03-03 17:18:54 +01:00
parent 091367b46c
commit 695daa70aa
7 changed files with 217 additions and 78 deletions

View File

@ -456,4 +456,101 @@ 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;
}
}

View File

@ -3,17 +3,10 @@ title: "2018"
draft: false
bg_image: media/backgrounds/page-title.webp
type: schulchronik
pretext: >+
2018 war sowohl für das GCG als auch für Georg Cantor selbst ein ganz
besonderes Jahr. Während der 100. Todestag von unserem Namensgeber gefeiert
wurde, zelebrierte unsere Gymnasium sein 30 jähriges Bestehen.
Im Rahmen dieser Festlichkeiten wurden vielfältige Aktionen geplant. Unter anderem wurde mit viel Mühe und Arbeit eine Rallye zum Thema Cantor zusammengestellt, ein Flashmob in Form eines Unendlichkeitszeichen organisiert und es fand ein fantastisches Schulfest statt, welches die damalige 10. Klasse zusammengestellt hat.
pretext: >
2018 war sowohl für das GCG als auch für Georg Cantor selbst ein ganz besonderes Jahr. Während der 100. Todestag von unserem Namensgeber gefeiert wurde, zelebrierte unser Gymnasium sein 30-jähriges Bestehen.
Im Rahmen dieser Festlichkeiten wurden vielfältige Aktionen geplant. Unter anderem wurde mit viel Mühe und Arbeit eine Rallye zum Thema Cantor zusammengestellt, ein Flashmob in Form eines Unendlichkeitszeichens organisiert und es fand ein fantastisches Schulfest statt, welches die damalige 10. Klasse zusammengestellt hat.
topics:
- title: 30-jähriges Jubiläum
content: |
@ -34,71 +27,33 @@ topics:
{{< figure src="/media/schulchronik/2018/projektarbeit/CantorBroschuere.webp" >}}
{{< /gallery >}}
## Wie entwickelt man eigentlich eine App?
-Was lange währt wird gut-
-Was lange währt, wird gut-
Zeitraum: Mai 2017 bis April 2018
- Zeitraum: Mai 2017 bis April 2018
- Ziel: Erstellung einer mathematischen Stadtrallye für das Smartphone, die historisches und mathematisches Wissen über das Wirken von Georg Cantor an verschiedenen Standorten in Halle vermitteln soll, Ehrung Georg
Cantors anlässlich seines 100. Todestages, Beitrag zum 30-jährigen Schuljubiläum
- Beteiligte: Mitarbeiter und Studenten des Institutes für Didaktik der Mathematik in Leipzig unter Leitung von Fr. Juniorprof. Silvia Schöneburg, Schulchronik AG mit Fr. K. Schmidt, weitere interessierte Schülerinnen und Schüler
Ziel: Erstellung einer
1. Zu Beginn wurden Infos überbmögliche Stationen gesammelt, photographiert und Preise für die Schüler ausgewählt. Frau Schmidt beschäftigte sich mit diesem Arbeitsschritt bis Oktober 2017.
mathematischen Stadtrallye für das Smartphone, die historisches und
1. Ab Oktober bildete sich aus Mitarbeitern und Studenten der Uni Leipzig, Schülern und Fr. Schmidt eine Arbeitsgemeinschaft.
mathematisches Wissen über das Wirken von Georg Cantor an
verschiedenen Standorten in Halle vermitteln soll, Ehrung Georg
Cantors anläßlich seines 100. Todestages, Beitrag zum 30
jährigen Schuljubiläum
Beteiligte: Mitarbeiter und
Studenten des Institutes für Didaktik der Mathematik in Leipzig
unter Leitung von Fr. Juniorprof. Silvia Schöneburg, Schulchronik Ag
mit Fr. K. Schmidt, weitere interessierte Schülerinnen und Schüler
1. Zu Beginn wurden Infos über
mögliche Stationen gesammelt, photographiert und Preise für die
Schüler ausgewählt. Frau Schmidt beschäftigtesich mit diesem
Arbeitsschritt bis Oktober 2017.
1. Ab Oktober bildete sich
aus Mitarbeiternund Studenten der Uni Leipzig, Schülern
und Fr. Schmidt eineArbeitsgemeinschaft.
1. Von Oktober
2017 bisApril 2018 wurden **4
Apps** für die
Klassen 5/6, 7/8, 9/10 und11/12 erstellt.
1. Von Oktober 2017 bis April 2018 wurden **4 Apps** für die Klassen 5/6, 7/8, 9/10 und11/12 erstellt.
1. Anschließend wurde eine **Broschüre** über das Projekt gestaltet.
1. Am 28.09.2018 kam es dann
letztendlich zur Durchführungder Rallyes zum 30-jährigen Schuljubiläum (die Klassen 5-8 werden
von Schülern der Klassen 11 und 12 unterstützt, die zuvor von den
1. Am 28.09.2018 kam es dann letztendlich zur Durchführung der Rallyes zum 30-jährigen Schuljubiläum (die Klassen 5-8 werden von Schülern der Klassen 11 und 12 unterstützt, die zuvor von den
App-Erstellern eingewiesen wurden).
@ -113,7 +68,7 @@ topics:
Neben den klassischen Aktionen bei unseren Schulfesten wie Sportspielen,
Basteleien, Schach usw. gibt es in diesem Jahr anläßlich unseres 30-jährigen
Basteleien, Schach usw. gibt es in diesem Jahr anlässlich unseres 30-jährigen
Schuljubiläums und des 100. Todestages von Georg Cantor auch eine
@ -139,16 +94,16 @@ topics:
**Jede Etage stellt eine Etappe in Cantors Leben dar:**
**1.Etage: Cantors Kindheit und Jugend**
**1. Etage: Cantors Kindheit und Jugend**
**2.Etage: Cantors Leben, Arbeit, Werk**
**2. Etage: Cantors Leben, Arbeit, Werk**
**3.Etage: Cantors Krankheit und Ende**
**3. Etage: Cantors Krankheit und Ende**
**4.Etage: Cantors Vermächtnis und Erbe**
**4. Etage: Cantors Vermächtnis und Erbe**
Deshalb müssen erst alle Stationen einer Etage erfüllt sein, damit man
@ -174,8 +129,7 @@ topics:
superhaufen:
enable: false
- title: Wettbewerbserfolge
content: |
Inhalt
content: "\n\n\n"
superhaufen:
enable: false
cantorpreisträger: Carolina Sirui Cao

View File

@ -4,6 +4,10 @@ draft: false
bg_image: /media/backgrounds/page-title.webp
type: superhaufen
gallery: true
previous:
title: 2018
link: /schulchronik/2018/
enable: true
tiles:
- title: Festveranstaltung
bg_color: "#ffef00"
@ -143,11 +147,11 @@ tiles:
bg_color: "#0fe008"
icon: mdi mdi-theater
content: >
Den Freitag, den zweiten Tag der Festtage zum 30.Jubiläum, verbrachten
Den Freitag, den zweiten Tag der Festtage zum 30. Jubiläum, verbrachten
Schülerinnen und Schüler mit unterschiedlichen Aktionen, wie zum Beispiel
einem Kinobesuch, einer Vorlesung in Physik oder einer Rallye durch die
Stadt Halle auf den Spuren von Georg Cantor, in Form von 4
selbstprogrammierten Cantor-Apps.
Stadt Halle auf den Spuren von Georg Cantor, in Form von 4 selbst
programmierten Cantor-Apps.
font_color: "#ffffff"
unterhaufen:
- title: Überblick
@ -309,7 +313,7 @@ tiles:
Nach reichlicher Überlegung kam unserem Schuldirektor Herrn Gorsler
die Idee einen Flashmob zu veranstalten. Die genaue Form das mit
die Idee, einen Flashmob zu veranstalten. Die genaue Form das mit
Georg Cantor verbundene Unendlichkeitszeichen schlug Frau Schmidt
@ -329,7 +333,7 @@ tiles:
Während des Flashmobs sollte es allerdings nicht still bleiben. Die Schüler
wurden aufgefordert, gemeinsameine veränderte
wurden aufgefordert, gemeinsam eine veränderte
Version des Liedes „Zusammen“ von den Fantastischen Vier zu
@ -338,7 +342,7 @@ tiles:
getroffen und der Text entsprechend des Anlasses angepasst.
Nun waren alle Vorbereitungen getroffen. Am Freitag, den 28.09.2018,
Nun waren alle Vorbereitungen getroffen. Am Freitag, dem 28.09.2018,
liefen die Schülerinnen und Schüler im Anschluss an die Rallye zum
@ -346,7 +350,7 @@ tiles:
ihren Klassen an ihren mit Kreide gekennzeichneten Platz. Plötzlich
erfüllte das ausgewählte Lied „[Zusammen](https://www.youtube.com/watch?v=dQw4w9WgXcQ)“ den Platz, sodass alle
erfüllte das ausgewählte Lied „Zusammen“ den Platz, sodass alle
Schülerinnen und Schüler enthusiastisch und voller Freude anfingen
@ -355,6 +359,8 @@ tiles:
Der Flashmob bildete einen krönenden Abschluss der Festwoche.
{{< slider dir="/media/schulchronik/2018/flashmob" >}}
{{< gallery dir="/media/schulchronik/2018/liedtext" />}}
font_color: "#ffffff"

View File

@ -3,7 +3,7 @@
<div class="row">
<div class="col-md-8">
<ul class="list-inline">
<li class="list-inline-item h2"><a class="text-primary font-secondary" href="{{ if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.BaseURL | absLangURL }}{{end}}">{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{end}}</a></li>
<li class="list-inline-item h2"><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>
<li class="list-inline-item text-white h2 font-secondary">{{ .Title }}</li>
</ul>

View File

@ -0,0 +1,75 @@
<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>
{{- 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>
</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>

View File

@ -21,12 +21,12 @@
</button>
</div>
<div class="modal-body">
<div class="content">
<div class="content mb-2">
{{ .content | markdownify }}
</div>
{{ range .unterhaufen }}
<div class="container mb-0">
<div class="card border-primary rounded-0 hover-shadow mb-5">
<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>

View File

@ -184,6 +184,13 @@ collections:
- {label: "Hintergrundbild", name: "bg_image", widget: "hidden", default: "/media/backgrounds/page-title.webp"}
- {label: "Type", name: "type", widget: "hidden", default: "superhaufen"}
- {label: "Gallerie-Komponente", name: "gallery", widget: "boolean", default: true, required: false, hint: "Benötigt für Gallerie bzw. Bildeinbettung"}
- label: "Rückverlinkung"
name: "previous"
widget: "object"
fields:
- {label: "Aktiviert", name: "enable", widget: "hidden", default: true}
- {label: "Titel", name: "title", widget: "string", required: true}
- {label: "Link", name: "link", widget: "string", required: true}
- label: "Kacheln"
name: "tiles"
widget: "list"