improved fonts

1 files changed, 58 insertions, 28 deletions

diff --git a/index.html b/index.html
index 563bca2..9b70370 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,9 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/minecraftia" type="text/css" />
+<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/minecraft" type="text/css"/>
+<!--todo die beiden minecraft schriften runterladen und selber hosten-->
 <style>
     body,
     h1,
@@ -14,14 +17,41 @@
     h3,
     h4,
     h5,
-    h6 {
-        font-family: "Lato", sans-serif
+    h6,
+    p {
+        font-family: "Lato", sans-serif;
+
+    }
+
+    .mcfont {
+        font-family: 'MinecraftiaRegular';
+        font-weight: normal;
+        font-style: normal;
     }
+    .mctitle {
+        font-family: 'MinecrafterAltRegular';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 6em !important;
+        color: rgb(164, 165, 177);
+        text-shadow:   
+        1px 2px 0 black,
+        2px 4px 0 black,
+        3px 6px 0 black,
+        4px 8px 0 black,
+        5px 10px 0 black,
+        6px 12px 0 black,
+        7px 14px 0 black,
+        8px 16px 0 black,
+        9px 18px 0 black,
+        10px 20px 0 black;
+    
 
+    }
     .w3-bar,
     h1,
     button {
-        font-family: "Montserrat", sans-serif
+        font-family: "Montserrat", sans-serif;
     }
 
     .fa-anchor,
@@ -36,42 +66,44 @@
     <div class="w3-top">
         <div class="w3-bar w3-green w3-card w3-left-align w3-large">
             <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-white"
-                href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i
+                href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu" target="_blank"><i
                     class="fa fa-bars"></i></a>
-            <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
+            <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white" target="_blank">Home</a>
             <a href="https://kobert.dev/campus_trailer.mp4"
-                class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Trailer</a>
-            <a href="./map" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Live-Map</a>
-            <a href="./sg" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Neu: Survival
+                class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" target="_blank">Trailer</a>
+            <a href="./map" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"
+                target="_blank">Live-Map</a>
+            <a href="./sg" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"
+                target="_blank">Neu: Survival
                 Games</a>
-            <a href="TODO redirect"
-                class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Discord</a>
+            <a href="https://discord.gg/dFGcb4jUd4"
+                class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" target="_blank">Discord</a>
         </div>
 
         <!-- Navbar on small screens -->
-        <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
-            <a href=".https://kobert.dev/campus_trailer.mp4" class="w3-bar-item w3-button w3-padding-large">Trailer</a>
-            <a href="./dynmap" class="w3-bar-item w3-button w3-padding-large">Live-Map</a>
-            <a href="./sg" class="w3-bar-item w3-button w3-padding-large">Neu: Survival Games</a>
-            <a href="TODO redirect" class="w3-bar-item w3-button w3-padding-large">Discord</a>
+        <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large" target="_blank">
+            <a href=".https://kobert.dev/campus_trailer.mp4" class="w3-bar-item w3-button w3-padding-large"
+                target="_blank">Trailer</a>
+            <a href="./dynmap" class="w3-bar-item w3-button w3-padding-large" target="_blank">Live-Map</a>
+            <a href="./sg" class="w3-bar-item w3-button w3-padding-large" target="_blank">Neu: Survival Games</a>
+            <a href="https://discord.gg/dFGcb4jUd4" class="w3-bar-item w3-button w3-padding-large"
+                target="_blank">Discord</a>
         </div>
     </div>
 
     <!-- Header -->
     <header class="w3-container w3-black w3-center"
         style="padding:128px 16px; background-image: url('./schloss.png'); background-repeat: no-repeat; background-position: center; background-size: cover;">
-        <h1 class="w3-margin w3-jumbo">Der Minecraft Campus</h1>
-        <p class="w3-xlarge">Besuche den KIT-Campus in Minecraft!</p>
+        <h1 class="w3-margin w3-jumbo mctitle">Der Minecraft Campus</h1>
+        <p class="w3-xlarge mcfont" style="color: rgb(234, 235, 243);">Besuche den KIT-Campus in Minecraft!</p>
     </header>
     <!-- First Grid -->
     <div class="w3-row-padding w3-padding-64 w3-container">
         <div class="w3-content">
             <div class="w3-twothird">
                 <h1>Der KIT-Campus als Minecraft-Welt</h1>
-                <h5 class="w3-padding-32">Um sich den virtuellen Campus anzusehen, benötigst du die Minecraft Java
-                    Edition. So kommst du auf den Campus:</h5>
-
-                <p class="w3-text-grey">----beschreibung</p>
+                <p class="w3-padding-32 w3-text mcfont">Um sich den virtuellen Campus anzusehen, benötigst du die Minecraft Java
+                    Edition. So kommst du auf den Campus:</p>
             </div>
 
             <div class="w3-third w3-center">
@@ -83,7 +115,7 @@
         <img width="100%" srcset="./mensa.png">
     </figure>
     <!-- Second Grid -->
-    <div class="w3-container w3-center w3-padding-64">
+    <div class="w3-container w3-center w3-padding-64 mcfont">
         <div class="w3-content">
             <div class="w3-third w3-center">
                 <svg width="50%" viewBox="0 0 34 34" class="logo-3LF899" color="#7289DA">
@@ -99,13 +131,11 @@
             </div>
 
             <div class="w3-twothird">
-                <h1>Unser Discord-Server</h1>
-                <h5 class="w3-padding-32">
-                    Verpasse keine neue Aktion auf dem Campus!
-                </h5>
+                <h1>Unser Discord-Server </h1>
 
-                <p class="w3-text-grey">Für Fragen, Anregungen, gegenseitigen Austausch, Ankündigung von weiteren
-                    Aktionen, oder falls du Lust bekommen hast selbst mitzuhelfen.</p>
+                <p class="w3-text-grey mcfont">Verpasse keine neue Aktion auf dem Server! Für Fragen, Anregungen,
+                    gegenseitigen Austausch, Ankündigung von weiteren Aktionen, oder falls du Lust bekommen hast selbst
+                    mitzuhelfen.</p>
             </div>
         </div>
     </div>