Homepage Revamp #191

Merged
Denys Konovalov merged 6 commits from :master into master 2023-02-01 20:35:01 +01:00
12 changed files with 109 additions and 47 deletions

36
.drone.dev.yml Normal file

@ -0,0 +1,36 @@
kind: pipeline
type: docker
name: dev
steps:
- name: hugo build
image: plugins/hugo
settings:
hugo_version: 0.110.0
validate: false
extended: true
url: https://dev.cantorgymnasium.de/
commands:
- apk add --update --no-cache tzdata
- /bin/drone-hugo
- name: deploy
image: drillster/drone-rsync
settings:
hosts: [ "cantorgymnasium.de" ]
port:
from_secret: ssh_port
user: web-push
key:
from_secret: ssh_key
source: public/
target: /opt/data/webdata/gcg-website-dev/
recursive: true
delete: true
trigger:
branch:
- master
event:
- push
- cron
- rollback

@ -81,18 +81,6 @@ steps:
recursive: true recursive: true
delete: true delete: true
- name: notification
image: appleboy/drone-telegram
settings:
token:
from_secret: telegram_token
to:
from_secret: telegram_room_id
when:
status:
- success
- failure
trigger: trigger:
branch: branch:
- master - master

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

@ -1,5 +1,9 @@
.hero-section { .hero-section {
padding: 250px 0 290px; padding: 250px 0 200px;
}
.hs-banner {
padding: 50px 0 200px;
} }
.hero-slider { .hero-slider {

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

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

@ -11,10 +11,10 @@
<div class="hero-slider-item"> <div class="hero-slider-item">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<h1 class="text-white">{{ $data.homepage.slider.title | markdownify }}</h1> <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,8 +78,8 @@
<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">
<h2 class="section-title">{{ .title | markdownify }}</h2> <h3 class="section-title">{{ .title | markdownify }}</h3>
<div class="content"> <div class="content">
{{ .content | markdownify }} {{ .content | markdownify }}
</div> </div>
@ -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 }}