Fixed anchorpoint, tiny-ing and centering of navbar

frontend/angular.json

@@ -98,5 +98,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

frontend/src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <ng-container>
   <header id="top">
-    <nav id="nav">
+    <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
           <div id="menu_toggle">
@@ -25,7 +25,7 @@
                   <li><a [routerLink]="['/skyblock']">Skyblock</a></li>
                   <li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
                   <li><a
-                    href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
+                    href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
                     Board</a></li>
                 </ul>
               </li>
@@ -81,7 +81,7 @@
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
               <li class="nav_li"><a class="nav_link2"
-                                    href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
+                                    href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
                 Board</a></li>
             </ul>
           </li>
@@ -134,11 +134,11 @@
     <ng-container *ngIf="current_page === 'home'">
       <div class="title">
         <h1 style="display: none;">{{ title }}</h1>
-        <img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
+        <img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
              width="550">
         <h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
       </div>
-      <a id="scrollbutton" href="#scrollingpoint">
+      <a id="scroll-button" (click)="scrollToSection()">
         <span></span>
         <p style="display: none;">Scroll Down</p>
       </a>

frontend/src/app/header/header.component.scss

@@ -1,4 +1,6 @@
 header {
+  background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
+  background-size: cover;
   text-align: center;
   width: 100%;
   height: 100vh;
@@ -12,18 +14,25 @@ header .container {
   justify-content: space-between;
 }
 
+#header-img {
+  width: 45%;
+  max-width: 550px;
+  padding-bottom: 15px;
+  margin-top: -120px;
+}
+
 #nav {
   position: fixed;
   width: 100%;
   height: 110px;
   z-index: 3;
-  transition: height 0.3s, 0.5s background ease;
+  transition: height 0.3s, background 0.5s ease;
 }
 
 #nav.active {
   height: 80px;
   background-color: var(--color-primary);
-  box-shadow: 0px 2px 3px -1px rgba(30,30,30,0.1);
+  box-shadow: 0 2px 3px -1px rgba(30,30,30,0.1);
 }
 
 .nav_link.active {
@@ -118,11 +127,11 @@ nav img {
 }
 
 #menu_toggle span:first-child {
-  transform-origin: 0% 0%;
+  transform-origin: 0 0;
 }
 
 #menu_toggle span:nth-last-child(2) {
-  transform-origin: 0% 100%;
+  transform-origin: 0 100%;
 }
 
 #menu_toggle input:checked ~ span {
@@ -153,7 +162,7 @@ nav img {
   background: #cdcdcd;
   border-radius: 3px;
   z-index: 1;
-  transform-origin: 4px 0px;
+  transform-origin: 4px 0;
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
 }
 
@@ -167,7 +176,7 @@ nav img {
   padding: 125px 50px 50px;
   background: var(--color-primary);
   list-style-type: none;
-  transform-origin: 0% 0%;
+  transform-origin: 0 0;
   transform: translate(-100%, 0);
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
@@ -241,7 +250,7 @@ nav img {
   transition-delay: 0.1s;
   font-size: 0.9em;
   min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   z-index: 1;
   text-align: left;
   width: 200px;
@@ -251,6 +260,105 @@ nav img {
   display: none;
 }
 
+#scroll-button {
+  position: absolute;
+  bottom: 50px;
+  left: 50%;
+  z-index: 2;
+  display: inline-block;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  color: #fff;
+  transition: opacity .3s;
+  padding-top: 40px;
+}
+
+#scroll-button:hover {
+  opacity: .5;
+  cursor: pointer;
+}
+
+#scroll-button span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 46px;
+  height: 46px;
+  margin-left: -23px;
+  border: 2px solid #fff;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+
+#scroll-button span::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 16px;
+  height: 16px;
+  margin: -12px 0 0 -8px;
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  box-sizing: border-box;
+}
+
+#scroll-button span::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  content: '';
+  width: 44px;
+  height: 44px;
+  box-shadow: 0 0 0 0 rgba(255,255,255,.1);
+  border-radius: 100%;
+  opacity: 0;
+  -webkit-animation: sdb03 3s infinite;
+  animation: sdb03 3s infinite;
+  box-sizing: border-box;
+}
+
+@-webkit-keyframes sdb03 {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  60% {
+    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes sdb03 {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  60% {
+    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 @-moz-document url-prefix() {
   .dropdown2{
     top: 12px;
@@ -259,7 +367,13 @@ nav img {
 
 @supports (-ms-ime-align:auto) {
   .dropdown2{
-    top: 0px;
+    top: 0;
+  }
+}
+
+@media (max-width: 1000px) {
+  #scroll-button {
+    padding-top: 5px;
   }
 }
 
@@ -337,8 +451,3 @@ nav img {
     display: none;
   }
 }
-
-header {
-  background-size: cover;
-  background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
-}

frontend/src/app/header/header.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, HostListener, Input} from '@angular/core';
 import {ALTITUDE_VERSION} from '../constant';
 
 @Component({
@@ -12,6 +12,28 @@ export class HeaderComponent {
   @Input() sub_title: string = '';
   @Input() current_page: string = ''
 
+  public active: string = ''
+
+  @HostListener('window:scroll', [])
+  onWindowScroll(): void {
+    const scrollPosition = window.scrollY;
+    if (scrollPosition > 0) {
+      this.active = 'active';
+    } else {
+      this.active = '';
+    }
+  }
+
+  scrollToSection(): void {
+    const element = document.getElementById('scrollingpoint');
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } else {
+      console.error('Element with id "scrollingpoint" not found.');
+    }
+  }
+
+
   public getCurrentPageId(options: string[]) {
     if (options.includes(this.current_page)) {
       return 'current_page'

frontend/src/app/home/home.component.scss

@@ -0,0 +1,20 @@
+#section1 {
+  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/town2.jpg");
+  background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/town2.jpg");
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/town2.jpg");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  text-align: center;
+}
+
+#section2 {
+  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/windmill.png");
+  background: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/windmill.png");
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/public/img/backgrounds/windmill.png");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}

frontend/src/app/theme/theme.component.scss

@@ -7,7 +7,6 @@
 }
 
 .switch-div{
-  position: absolute;
   right: 40px;
 }
 

frontend/src/styles.scss

@@ -1,4 +1,15 @@
-/* You can add global styles to this file, and also import other style files */
+:root{
+  --white: #FFFFFF;
+  --black: #282828;
+  --pureblack: #000000;
+  --grey: #A3A3A3;
+  --link: #1f9bde;
+  --linkhover: #00d9ff;
+  --navlink: #4b4b4b;
+  --switch: #FBFBFE;
+  --error: #c23c3c;
+}
+
 .theme-light {
   --color-primary: #FBFBFE;
   --color-secondary: #FBFBFE;