Initial Commit

static/css/header.css

@@ -0,0 +1,148 @@
+.header {
+    margin: auto;
+    width: 100%;
+    padding: 1rem;
+    padding-right: 0rem;
+    display: flex;
+    font-size: large;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: white;
+    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
+    position: fixed;
+    z-index: 999;
+    top: 0;
+}
+
+.header-container {
+    width: 100%;
+    max-width: 1152px;
+    display: flex;
+    margin: auto;
+}
+
+.sticky {
+    position: fixed;
+    top: 0;
+}
+
+.logo {
+    height: 3.5rem;
+    max-width: 10rem;
+}
+
+.small-logo {
+    height: 2.5rem;
+    max-width: 10rem;
+}
+
+.menu-icon {
+    display: none;
+    font-size: larger;
+}
+
+.header-items {
+    margin: auto;
+    margin-left: 0px;
+    display: flex;
+}
+
+.header-item {
+    margin-left: 2.5rem
+}
+
+.dropdown {
+    overflow: hidden;
+}
+
+.dropdown .dropbtn { 
+    border: none;
+    outline: none;
+    margin: 0;
+}
+
+.dropdown-content {
+    display: none;
+    position: fixed;
+    background-color: #ffffff;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    padding: 0.5rem 1rem;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+@media screen and (max-width: 600px) {
+    .header-container {
+        display: block;
+    }
+    
+    .home {
+        width: 100vw;
+    }
+    
+    .menu-icon {
+        display: block;
+        position: fixed;
+        top: 30px;
+        right: 30px;
+    }
+
+    .menu-icon .hide {
+        display: none;
+    }
+
+    .small-icon {
+        top: 20px;
+    }
+
+    .header-items {
+        display: none;
+    }
+
+    .header-items.responsive {
+        position: relative;
+        float: none;
+        display: block;
+        text-align: left;
+        margin-top: 0.5rem;
+    }
+
+    .header-items.responsive .header-item {
+        display: block;
+        margin-left: 0rem;
+        padding-bottom: 0.5rem;
+        padding-top: 0.5rem;
+    }
+
+    .header-items.responsive .icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    .header-items.responsive .dropdown {
+        float: none;
+    }
+    .header-items.responsive .dropdown-content {
+        position: relative;
+        box-shadow: none;
+    }
+    .header-items.responsive .dropdown .dropbtn {
+        display: block;
+        width: 100vw;
+        text-align: left;
+    }
+
+}

static/js/header.js

@@ -0,0 +1,23 @@
+const logo = document.getElementById('logo');
+const header = document.getElementById("header");
+const menuIcon = document.getElementById("menu-icon");
+const scrollHeaderListener = () => {
+    if (window.scrollY > 0) {
+    logo.className = "small-logo"
+    menuIcon.classList.add("small-icon")
+    } else {
+    logo.className = "logo"
+    menuIcon.classList.remove("small-icon")
+    }
+};
+
+window.addEventListener("scroll", scrollHeaderListener);
+
+function unfoldHeader() {
+    var headerItems = document.getElementById("header-items");
+    if (headerItems.className === "header-items") {
+    headerItems.classList.add("responsive")
+    } else {
+    headerItems.classList.remove("responsive")
+    }
+}

static/js/progress.js

@@ -0,0 +1,11 @@
+var h = document.documentElement,
+    b = document.body,
+    st = 'scrollTop',
+    sh = 'scrollHeight',
+    progress = document.querySelector('.progress'),
+    scroll;
+
+document.addEventListener('scroll', function() {
+    scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
+    progress.style.setProperty('--scroll', scroll + '%');
+});

static/js/slider.js

@@ -0,0 +1,50 @@
+function setActiveSlideLink(slideNr) {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    for (i = 0; i < slidelinks.length; i++) {
+    if (i == slideNr){
+        slidelinks[i].classList.add("slide-link-active");
+    } else {
+        slidelinks[i].classList.remove("slide-link-active");
+    }
+    }
+}
+
+function scrollToSlide(slideNr) {
+    const slider = document.querySelector('.slider');
+    const slides = slider.querySelector('.slides');
+    const width = slider.querySelector('.slide').clientWidth;
+    slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
+    setActiveSlideLink(slideNr);
+}
+
+function scrollToNextSlideNr(slideNr) {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    nextSlide = slideNr + 1;
+    if (nextSlide >= slidelinks.length){
+        nextSlide = 0;
+    }          
+    scrollToSlide(nextSlide);
+}
+
+function scrollToPrevSlideNr(slideNr) {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    prevSlide = slideNr - 1;
+    if (prevSlide < 0) {
+        prevSlide = slidelinks.length - 1;
+    }
+    scrollToSlide(prevSlide);
+}
+
+function scrollToNextSlide() {
+    const slidelinks = document.querySelectorAll('.slide-link');
+    for (i = 0; i < slidelinks.length; i++) {
+        if (slidelinks[i].classList.contains("slide-link-active")){
+            nextSlide = i+1;
+            if (nextSlide >= slidelinks.length){
+                nextSlide = 0;
+            }          
+            scrollToSlide(nextSlide);
+            break;
+        }
+    }
+}

static/js/totop.js

@@ -0,0 +1,10 @@
+const scrollToTopButton = document.getElementById('totop');
+const scrollToTopListener = () => {
+    if (window.scrollY > 0) {
+        scrollToTopButton.className = "totop show";
+    } else {
+        scrollToTopButton.className = "totop hide";
+    }
+};
+
+window.addEventListener("scroll", scrollToTopListener);