homepage revamp

This commit is contained in:
Denys Konovalov 2023-02-01 20:24:20 +01:00
parent 1bfe6add7c
commit 5426b868ea
10 changed files with 71 additions and 33 deletions

@ -4,6 +4,26 @@
// Preloader js // Preloader js
$(window).on('load', function () { $(window).on('load', function () {
$('.preloader').fadeOut(100); $('.preloader').fadeOut(100);
if ($('header').offset().top > 10) {
$('.top-header').addClass('hide');
$('.navigation').addClass('nav-bg');
$('.navigation').css('margin-top','-'+height+'px');
} else {
$('.top-header').removeClass('hide');
if (!$('#top-banner').length) {
$('.navigation').removeClass('nav-bg');
}
$('.navigation').css('margin-top','-'+0+'px');
}
if ($('#top-banner').length) {
$('.navigation').addClass('nav-bg');
$('.hero-section').addClass('hs-banner');
$('.page-title-section').addClass('pts-banner');
} else {
$('.navigation').removeClass('nav-bg');
$('.hero-section').removeClass('hs-banner');
$('.page-title-section').removeClass('pts-banner');
}
}); });
// Sticky Menu // Sticky Menu
@ -15,7 +35,9 @@
$('.navigation').css('margin-top','-'+height+'px'); $('.navigation').css('margin-top','-'+height+'px');
} else { } else {
$('.top-header').removeClass('hide'); $('.top-header').removeClass('hide');
$('.navigation').removeClass('nav-bg'); if ( !$('#top-banner').length) {
$('.navigation').removeClass('nav-bg');
}
$('.navigation').css('margin-top','-'+0+'px'); $('.navigation').css('margin-top','-'+0+'px');
} }
}); });
@ -32,7 +54,7 @@
//Hero Slider //Hero Slider
$('.hero-slider').slick({ $('.hero-slider').slick({
autoplay: true, autoplay: true,
autoplaySpeed: 7500, autoplaySpeed: 5000,
pauseOnFocus: false, pauseOnFocus: false,
pauseOnHover: false, pauseOnHover: false,
infinite: true, infinite: true,

@ -440,4 +440,12 @@ details[open] summary {
#wc-canvas { #wc-canvas {
width: 100%; width: 100%;
height: 600px; height: 600px;
}
.top-banner {
padding-top: 160px !important;
}
.pts-banner {
padding: 80px 0 80px;
} }

@ -10,7 +10,7 @@
margin-right: 40px; margin-right: 40px;
padding-left: 70px; padding-left: 70px;
padding-top: 80px; padding-top: 80px;
padding-right: 30%; padding-right: 70px;
@include desktop-xl { @include desktop-xl {
padding-right: 10%; padding-right: 10%;
@ -19,7 +19,7 @@
@include desktop-lg { @include desktop-lg {
padding-right: 50px; padding-right: 50px;
padding-left: 50px; padding-left: 50px;
padding-top: 30px; padding-top: 40px;
h3 { h3 {
font-size: 20px; font-size: 20px;

@ -2,6 +2,10 @@
padding: 250px 0 200px; padding: 250px 0 200px;
} }
.hs-banner {
padding: 50px 0 200px;
}
.hero-slider { .hero-slider {
.prevArrow, .prevArrow,

@ -17,9 +17,9 @@ gallery: false
--- ---
### Erfolge beim Informatik-Biber-Wettbewerb 2022 ### Erfolge beim Informatik-Biber-Wettbewerb 2022
- 8x 1. Preis in den Jahrgängen 5 & 6 - 8 erste Preise in den Jahrgängen 5 & 6
- 46x 1. Preis in den Jahrgängen 7 bis 12 - 46 erste Preise in den Jahrgängen 7 bis 12
- 51x 2. Preis in allen Jahrgängen - 51 zweite Preis in allen Jahrgängen
"Der Informatik-Biber ist Deutschlands größter Schülerwettbewerb im Bereich Informatik. Teilnehmen können "Der Informatik-Biber ist Deutschlands größter Schülerwettbewerb im Bereich Informatik. Teilnehmen können
Kinder und Jugendliche der Klassen 3 bis 13. Der Wettbewerb fördert das digitale Denken mit lebensnahen und alltagsbezogenen Fragestellungen. Dabei entdecken die Teilnehmenden Faszination und Relevanz informatischer Methoden." [aus dem Flyer 2022](https://bwinf.de/fileadmin/biber/2022/Biber-Flyer_2022.pdf) Kinder und Jugendliche der Klassen 3 bis 13. Der Wettbewerb fördert das digitale Denken mit lebensnahen und alltagsbezogenen Fragestellungen. Dabei entdecken die Teilnehmenden Faszination und Relevanz informatischer Methoden." [aus dem Flyer 2022](https://bwinf.de/fileadmin/biber/2022/Biber-Flyer_2022.pdf)

@ -1,5 +1,5 @@
top_banner: top_banner:
enable: false enable: true
text: "Um zur Aufnahmeprüfung zugelassen werden zu können, müssen das text: "Um zur Aufnahmeprüfung zugelassen werden zu können, müssen das
Aufnahmeformular und eine Kopie des Halbjahreszeugnisses bis spätestens Aufnahmeformular und eine Kopie des Halbjahreszeugnisses bis spätestens
Mittwoch, den 8. Februar 2023, eingereicht werden. <br><br>Wir laden zum Mittwoch, den 8. Februar 2023, eingereicht werden. <br><br>Wir laden zum
@ -37,7 +37,14 @@ slider:
enable: true enable: true
link: https://www.marketing.uni-halle.de/schulbuero/prime-gymnasien/ link: https://www.marketing.uni-halle.de/schulbuero/prime-gymnasien/
label: Mehr erfahren label: Mehr erfahren
- content: Kooperationsschule der Hochschule [Merseburg](https://www.hs-merseburg.de/studium/vor-dem-studium/angebote-fuer-studieninteressierte) und der Hochschule Anhalt - content: Kooperationsschule der Hochschule Merseburg
animation_in: left
animation_out: right
button:
link: https://www.hs-merseburg.de/studium/vor-dem-studium/angebote-fuer-studieninteressierte
label: Mehr erfahren
enable: true
- content: Kooperationsschule der Hochschule Anhalt
animation_in: left animation_in: left
animation_out: right animation_out: right
button: button:
@ -89,16 +96,13 @@ about:
Wir sind eine Schule mit mathematisch-naturwissenschaftlich-technischem Wir sind eine Schule mit mathematisch-naturwissenschaftlich-technischem
Schwerpunkt und möchten interessierte und begabte Schülerinnen und Schüler Schwerpunkt und möchten interessierte und begabte Schülerinnen und Schüler
auf diesem Gebiet fördern. Das schulische Leben unseres Gymnasiums auf diesem Gebiet fördern. Das schulische Leben unseres Gymnasiums
beschränkt sich aber nicht auf den MINT-Bereich. Informieren Sie sich über beschränkt sich aber nicht auf den MINT-Bereich.
unser vielfältiges wissenschaftliches, kulturelles und soziales Angebot.
Informieren Sie sich über unser vielfältiges wissenschaftliches, kulturelles und soziales Angebot.
### Virtueller Rundgang Georg &Pi;inguin, unser Schulmaskottchen, begleitet Sie dabei!
Wer nicht bis zum nächsten Tag der offenen Tür warten möchte, dem bieten wir eine digitale Führung durch das Schulhaus an, um sich bereits virtuell im Schulhaus umzuschauen.
button: button:
enable: true enable: false
label: Digitale Führung durch das Schulhaus label: Digitale Führung durch das Schulhaus
link: https://vr.cantorgymnasium.de/tour/ link: https://vr.cantorgymnasium.de/tour/
blog: blog:

@ -9,7 +9,7 @@
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<div class="col-sm-6 mb-5"> <div class="col-sm-6 mb-5">
<article <article
class="card rounded-0 border-bottom border-primary border-top-0 border-left-0 border-right-0 hover-shadow"> class="card rounded-0 border-primary hover-shadow">
<img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}"> <img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
<div class="card-body"> <div class="card-body">
<ul class="list-inline mb-3"> <ul class="list-inline mb-3">

@ -1,4 +1,4 @@
<article class="card rounded-0 border-bottom border-primary border-top-0 border-left-0 border-right-0 hover-shadow"> <article class="card rounded-0 border-primary hover-shadow">
<img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}"> <img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}">
<div class="card-body"> <div class="card-body">
<ul class="list-inline mb-3"> <ul class="list-inline mb-3">

@ -14,7 +14,7 @@
<h2 class="text-white">{{ $data.homepage.slider.title | markdownify }}</h2> <h2 class="text-white">{{ $data.homepage.slider.title | markdownify }}</h2>
<p class="text-muted mb-4" data-animation-out="fadeOut{{.animation_out | title }}" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeIn{{.animation_in | title }}" data-delay-in="0">{{ .content | markdownify }}</p> <p class="text-muted mb-4" data-animation-out="fadeOut{{.animation_out | title }}" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeIn{{.animation_in | title }}" data-delay-in="0">{{ .content | markdownify }}</p>
{{ if .button.enable }} {{ if .button.enable }}
<a href="{{ .button.link | absLangURL }}" class="btn btn-primary" data-animation-out="fadeOut{{.animation_out | title }}" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeIn{{.animation_in | title }}" data-delay-in=".7">{{ .button.label }}</a> <a href="{{ .button.link | absLangURL }}" class="btn btn-primary" data-animation-out="fadeOut{{.animation_out | title }}" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeIn{{.animation_in | title }}" data-delay-in="0">{{ .button.label }}</a>
{{ end }} {{ end }}
</div> </div>
</div> </div>
@ -29,7 +29,6 @@
.hero-default { .hero-default {
display: none; display: none;
} }
</style> </style>
<section class="hero-section overlay bg-cover" style="background-image: url({{ $data.homepage.slider.bg_image | absURL }});"> <section class="hero-section overlay bg-cover" style="background-image: url({{ $data.homepage.slider.bg_image | absURL }});">
<div class="container"> <div class="container">
@ -53,8 +52,8 @@
</noscript> </noscript>
{{ end }} {{ end }}
{{ if $data.header_logos.enable }} {{ if $data.homepage.header_logos.enable }}
{{ with $data.header_logos }} {{ with $data.homepage.header_logos }}
<section class="bg-white"> <section class="bg-white">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
@ -79,7 +78,7 @@
<section class="section-sm"> <section class="section-sm">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-9 order-2 order-md-1"> <div class="col-md-10 order-2 order-md-1">
<h3 class="section-title">{{ .title | markdownify }}</h3> <h3 class="section-title">{{ .title | markdownify }}</h3>
<div class="content"> <div class="content">
{{ .content | markdownify }} {{ .content | markdownify }}
@ -91,7 +90,7 @@
{{ end }} {{ end }}
</div> </div>
{{ with .image }} {{ with .image }}
<div class="col-md-3 col-6 order-1 order-md-2 mb-md-0 mx-auto"> <div class="col-md-2 col-6 order-1 order-md-2 mb-md-0 mx-auto">
<img class="img-fluid w-100" src="{{ . | absURL }}"> <img class="img-fluid w-100" src="{{ . | absURL }}">
</div> </div>
{{ end }} {{ end }}
@ -123,12 +122,12 @@
{{ if $data.homepage.success_banner.enable }} {{ if $data.homepage.success_banner.enable }}
{{ with $data.homepage.success_banner }} {{ with $data.homepage.success_banner }}
<section class="section bg-cover" data-background="{{ .image | absURL }}" id="success"> <section class="section bg-cover" data-background="{{ .image | absURL }}" id="success">
<div class="container-fluid"> <div class="container">
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col-xl-8 col-lg-7"> <div class="col-12">
<div class="row feature-blocks bg-white justify-content-between"> <div class="row feature-blocks bg-white justify-content-between">
{{ range .feature_item }} {{ range .feature_item }}
<div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-sm-left"> <div class="col-xl-5 mb-xl-5 mb-4 text-sm-left">
{{ with .image }} {{ with .image }}
<img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img> <img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
{{ end }} {{ end }}
@ -165,7 +164,7 @@
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
{{ range first 6 (where .Site.RegularPages "Type" "ganztagsangebote" | shuffle)}} {{ range first 6 (where .Site.RegularPages "Type" "ganztagsangebote" | shuffle)}}
<div class="col-lg-4 col-sm-6 mb-5"> <div class="col-lg-4 col-sm-6">
{{ .Render "ganztagsangebote" }} {{ .Render "ganztagsangebote" }}
</div> </div>
{{ end }} {{ end }}

@ -93,11 +93,13 @@
} }
</style> </style>
</noscript> </noscript>
{{ $top_banner := (index .Site.Data .Site.Language.Lang).homepage.top_banner }} </header>
{{ $top_banner := (index .Site.Data .Site.Language.Lang).homepage.top_banner }}
{{ if and $top_banner.enable }} {{ if and $top_banner.enable }}
{{ if or (not $top_banner.temporarily.enable) (and $top_banner.temporarily.enable (and (le ($top_banner.temporarily.start_date | time.AsTime).Unix now.Unix ) (ge ($top_banner.temporarily.end_date | time.AsTime).Unix now.Unix))) }} {{ if or (not $top_banner.temporarily.enable) (and $top_banner.temporarily.enable (and (le ($top_banner.temporarily.start_date | time.AsTime).Unix now.Unix ) (ge ($top_banner.temporarily.end_date | time.AsTime).Unix now.Unix))) }}
{{ with $top_banner }} {{ with $top_banner }}
<div class="p-3 top-banner" style="background:{{ .color }}"> <div id="top-banner" class="p-3 top-banner" style="background:{{ .color }}">
<div class="container"> <div class="container">
<div class="no-gutters align-items-center"> <div class="no-gutters align-items-center">
<div style="color:{{ .font_color }}"><b><i class="{{ .icon }}"></i> {{ .text | markdownify }}</b></div> <div style="color:{{ .font_color }}"><b><i class="{{ .icon }}"></i> {{ .text | markdownify }}</b></div>
@ -107,7 +109,6 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</header>
{{ if .Params.Gallery }} {{ if .Params.Gallery }}