new font, fix mobile scroll and slider

Author: Erik2609

assets/scss/_common.scss

@@ -1,7 +1,7 @@
 body {
   background-color: $body-color;
   overflow-x: hidden;
-  font-family: avenir, sans-serif !important;
+  font-family: AvenirNextProDemi, avenir, sans-serif !important;
 }
 
 body::-webkit-scrollbar {

assets/scss/_custom.scss

@@ -47,7 +47,7 @@
 }
 
 .ac .ac-trigger {
-	font-family: avenir, sans-serif;
+	font-family: AvenirNextProDemi, avenir, sans-serif;
 }
 
 .ac .ac-trigger::after {

assets/scss/_landingpage.scss

@@ -42,24 +42,53 @@
 }
 
 .landing-page-title {
-    font-size: 4rem;
+    
+    
+    @media (max-width: 1200px) {
+        font-size: 3rem;
+    }
+
+    @media (min-width: 1200px) {
+        font-size: 4.25rem;
+    }
     text-align: center;
     font-weight: 600;
+    font-family: AvenirNextProDemi, avenir, sans-serif;
 }
 .landing-page-slogan-title {
+    @media (max-width: 1200px) {
+        font-size: 1.5rem;
+    }
+
+    @media (min-width: 1200px) {
+        font-size: 2.5rem;
+    }
     margin-top: 1rem;
 }
 
 .landing-page-slogan-slider {
-    margin-top: -0.25rem;
-    height: 4.25rem;
+    @media (max-width: 1200px) {
+        height: 3.75rem;
+    }
+
+    @media (min-width: 1200px) {
+        margin-top: -0.5rem;
+        height: 5rem;
+    }
 }
 
 .landing-page-slogan-slider-li {
     margin-top: 0.3rem;
 }
 
 .landing-page-slide-title {
+    @media (max-width: 1200px) {
+        font-size: 1.5rem;
+    }
+
+    @media (min-width: 1200px) {
+        font-size: 2.5rem;
+    }
     padding: 0.75rem;
     margin: 0;
     margin-top: -0.75rem;
@@ -202,6 +231,53 @@
         transform: rotate(-16deg);
         padding: 9%;
     }
+    
+    .landing-page-scroll-container {
+        z-index: 20;
+        position: absolute;
+        
+        @media (max-width: 1200px) {
+            bottom: 20%;
+            left: 43%;
+        }
+
+        @media (min-width: 1200px) {
+            bottom: 30%;
+            left: 45%;
+        }
+        padding: 1rem;
+        text-align: center;
+    }
+
+    .landing-page-scroll-text {
+        font-size: 1.8rem;
+        color: #005aa7 !important;
+        font-family: sans-serif;
+        margin-bottom: 0rem;
+    }
+    .landing-page-scroll-icon {
+        font-size: 1.5rem;
+        color: #005aa7 !important;
+        animation: bounce 2s infinite;
+        animation-delay: 3s;
+    }
+
+    @-moz-keyframes bounce {
+        0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
+        40% {-moz-transform: translateY(-15px);}
+        60% {-moz-transform: translateY(-7px);}
+    }
+     
+    @-o-keyframes bounce {
+        0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
+        40% {-o-transform: translateY(-15px);}
+        60% {-o-transform: translateY(-7px);}
+    }
+    @keyframes bounce {
+        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+        40% {transform: translateY(-15px);}
+        60% {transform: translateY(-7px);}
+    }
 }
 
 .landing-page-clear-bottom {

assets/scss/templates/_main.scss

@@ -744,7 +744,7 @@ vertical-align: top;
 }
 
 li {
-  font-family: avenir, sans-serif;
+  font-family: AvenirNextProDemi, avenir, sans-serif;
   line-height: 1.7;
 }
 

content/english/_index.md

@@ -2,7 +2,10 @@
 Banner:
   image: /images/svg-illustrations/main_illustration.svg
   tag: definition
-  title: Building public knowledge for responsible algorithms
+  title_line1: Building public knowledge
+  title_line2_before: for
+  title_line2_underline: responsible
+  title_line2_after: algorithms
   phonetica: /æl.ɡə-ˈpruː.dəns/
   type: noun
   description1: Case-based normative advice for ethical algorithms

layouts/index.html

@@ -29,13 +29,14 @@
       <div class="shape shape-circle-middle-left"></div>
     </div>
     <div class="landing-page-col landing-page-col-content col-xl-8 col-12">
-      <h1 class="landing-page-title mt-5" style="color:#005aa7;">{{.title}}</h1>
+      <h1 class="landing-page-title mt-5 mb-0" style="color:#005aa7;">{{.title_line1}}</h1>
+      <h1 class="landing-page-title mt-0" style="color:#005aa7;">{{.title_line2_before}} <u>{{.title_line2_underline}}</u> {{.title_line2_after}}</h1>
       {{ with .slogan }}
       <!-- Slogan -->
       <div class="slider-wrapper">
 
         <!-- main -->
-        <h2 class="landing-page-slogan-title mb-0 d-inline-block" style="color:#005aa7; font-weight:100;">{{.title}}</h2>
+        <h2 class="landing-page-slogan-title mb-3 d-inline-block" style="color:#005aa7; font-weight:100;">{{.title}}</h2>
         <!-- /main -->
 
         <!-- slider -->
@@ -80,6 +81,10 @@ <h2 class="landing-page-slide-title" style="color:#005aa7; font-weight:100;"><i
     <div class="landing-page-col col-xl-8 col-12">
       <div class="shape shape-square-bottom-middle__most-left"></div>
       <div class="shape shape-square-bottom-middle__left"></div>
+      <div class="landing-page-scroll-container">
+        <p class="landing-page-scroll-text d-block">Scroll</p>
+        <i class="fas fa-arrow-down landing-page-scroll-icon"></i>
+      </div>
       <div class="shape shape-square-bottom-middle__right"></div>
       <div class="shape shape-square-bottom-middle__most-right"></div>
     </div>

layouts/partials/head.html

@@ -57,6 +57,8 @@
 <script src="https://unpkg.com/[email protected]/dist/accordion.min.js"></script>
 <!-- /accordion -->
 
+<link href="/css/MyWebfontsKit.css" rel="stylesheet">
+
 <!-- Page specific links -->
 {{ if eq .Type "bias-detection-tool" }}
 <link rel="stylesheet" href="https://static-files-pdf.s3.amazonaws.com/assets/index.css">

static/css/MyWebfontsKit.css

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
+ * 
+ * The fonts listed in this notice are subject to the End User License
+ * Agreement(s) entered into by the website owner. All other parties are 
+ * explicitly restricted from using the Licensed Webfonts(s).
+ * 
+ * You may obtain a valid license at the URLs below.
+ * 
+ * Webfont: Avenir Next Pro Demi by Linotype
+ * URL: https://www.myfonts.com/collections/linotype-foundry
+ 
+ * © 2025 MyFonts Inc. */
+
+
+  
+@font-face {
+  font-family: "AvenirNextProDemi";
+  src: url('webFonts/AvenirNextProDemi/font.woff2') format('woff2'), url('webFonts/AvenirNextProDemi/font.woff') format('woff');
+}
+