Merge pull request 'Homepage Revamp' (#191) from cantortechnik/gcg-website:master into master

Reviewed-on: https://git.cantorgymnasium.de/gcg/gcg-website/pulls/191

.drone.dev.yml

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

.drone.yml

@@ -81,18 +81,6 @@ steps:
         recursive: 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:
     branch:
         - master

assets/js/script.js

@@ -4,6 +4,26 @@
   // Preloader js
   $(window).on('load', function () {
     $('.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
@@ -15,7 +35,9 @@
       $('.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');
     }
   });
@@ -32,7 +54,7 @@
   //Hero Slider
   $('.hero-slider').slick({
     autoplay: true,
-    autoplaySpeed: 7500,
+    autoplaySpeed: 5000,
     pauseOnFocus: false,
     pauseOnHover: false,
     infinite: true,

assets/scss/_common.scss

@@ -441,3 +441,11 @@ details[open] summary {
   width: 100%;
   height: 600px;
 }
+
+.top-banner {
+ padding-top: 160px !important; 
+}
+
+.pts-banner {
+  padding: 80px 0 80px;
+}

assets/scss/templates/_homepage.scss

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

assets/scss/templates/_slider.scss

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

content/german/blog/informatik-biber-2022.md

@@ -17,9 +17,9 @@ gallery: false
 ---
 ### 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
 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)

data/de/homepage.yml

@@ -37,7 +37,14 @@ slider:
         enable: true
         link: https://www.marketing.uni-halle.de/schulbuero/prime-gymnasien/
         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_out: right
       button:
@@ -89,16 +96,13 @@ about:
     Wir sind eine Schule mit mathematisch-naturwissenschaftlich-technischem
     Schwerpunkt und möchten interessierte und begabte Schülerinnen und Schüler
     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.
     
     
-    ## Virtueller Rundgang
+    Informieren Sie sich über unser vielfältiges wissenschaftliches, kulturelles und soziales Angebot.
-
+    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:
-    enable: true
+    enable: false
     label: Digitale Führung durch das Schulhaus
     link: https://vr.cantorgymnasium.de/tour/
 blog:

layouts/_default/list.html

@@ -9,7 +9,7 @@
           {{ range $paginator.Pages }}
           <div class="col-sm-6 mb-5">
             <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 }}">
               <div class="card-body">
                 <ul class="list-inline mb-3">

layouts/_default/post.html

@@ -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 }}">
   <div class="card-body">
     <ul class="list-inline mb-3">

layouts/index.html

@@ -11,10 +11,10 @@
       <div class="hero-slider-item">
         <div class="row">
           <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>
             {{ 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 }}
           </div>
         </div>
@@ -29,7 +29,6 @@
     .hero-default {
       display: none;
     }
-    
   </style>
   <section class="hero-section overlay bg-cover" style="background-image: url({{ $data.homepage.slider.bg_image | absURL }});">
     <div class="container">
@@ -53,8 +52,8 @@
 </noscript>
 {{ 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">
   <div class="container">
     <div class="row align-items-center">
@@ -79,8 +78,8 @@
 <section class="section-sm">
   <div class="container">
     <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">
           {{ .content | markdownify }}
         </div>
@@ -91,7 +90,7 @@
         {{ end }}
       </div>
       {{ 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 }}">
       </div>
       {{ end }}
@@ -123,12 +122,12 @@
 {{ if $data.homepage.success_banner.enable }}
 {{ with $data.homepage.success_banner }}
 <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="col-xl-8 col-lg-7">
+      <div class="col-12">
         <div class="row feature-blocks bg-white justify-content-between">
           {{ 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 }}
               <img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
             {{ end }}
@@ -165,7 +164,7 @@
     </div>
     <div class="row justify-content-center">
       {{ 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" }}
       </div>
       {{ end }}

layouts/partials/header.html

@@ -93,11 +93,13 @@
       }
     </style>
   </noscript>
+</header>
+
 {{ $top_banner := (index .Site.Data .Site.Language.Lang).homepage.top_banner }}
   {{ 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))) }}
   {{ 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="no-gutters align-items-center">
         <div style="color:{{ .font_color }}"><b><i class="{{ .icon }}"></i> {{ .text | markdownify }}</b></div>
@@ -107,7 +109,6 @@
   {{ end }}
   {{ end }}
   {{ end }}
-</header>
 
 {{ if .Params.Gallery }}