Merge pull request #14 from theneolanders/main

Updating nav menu branch to current state of main
theneolanders · Dec 12, 2023 · f5ebfb8 · f5ebfb8
2 parents a24ed4e + cd37104
commit f5ebfb8
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 11 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <!-- Main -->
+        <title>404 Not Found</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Style -->
+        <style>
+            .center{
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+                text-align: center;
+                width: 100vw;
+                position: relative;
+                pointer-events: none;
+                user-select: none;
+            }
+
+            @media screen and (min-width: 972px) {
+                .center{    
+                    width: 70%;
+                }
+            }
+        </style>
+
+
+    </head>
+    <body>
+        <main>
+            <div class="center">
+                <img id="imgDisplay" src="https://www.theneolanders.com/assets/404/Neolanders_404.webp" class="center">
+            </div>
+        </main>
+
+		<script>
+			const image = document.getElementById("imgDisplay");
+			const sources = ["https://www.theneolanders.com/assets/404/Neolanders_404.webp", "https://www.theneolanders.com/assets/404/Neolanders_404-2.webp"];
+			image.src = sources[getRndInteger(0,sources.length)];
+
+			function getRndInteger(min, max) {
+				return Math.floor(Math.random() * (max - min) ) + min;
+			}
+		</script>
+    </body>
+</html>
diff --git a/404.md b/404.md
@@ -0,0 +1,3 @@
+---
+permalink: /404.html
+---
diff --git a/assets/404/Neolanders_404-2.webp b/assets/404/Neolanders_404-2.webp
diff --git a/assets/404/Neolanders_404.webp b/assets/404/Neolanders_404.webp
diff --git a/assets/Fonts/Rubik-Italic-VariableFont_wght.ttf b/assets/Fonts/Rubik-Italic-VariableFont_wght.ttf
diff --git a/assets/Fonts/Rubik-VariableFont_wght.ttf b/assets/Fonts/Rubik-VariableFont_wght.ttf
diff --git a/assets/NeolandSpinLow.webp b/assets/NeolandSpinLow.webp
diff --git a/assets/NeolandSpinLowSheet.webp b/assets/NeolandSpinLowSheet.webp
diff --git a/assets/NeolandStatic.webp b/assets/NeolandStatic.webp
diff --git a/bg.jpg b/bg.jpg
diff --git a/index.html b/index.html
@@ -6,12 +6,29 @@
   <title>Neolanders | Home</title>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="We're getting things set up over here.">
+
+  <!-- Open Graph Meta Tags -->
+  <meta property="og:title" content="The Neolanders" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.theneolanders.com/" />
+  <meta property="og:image" content="https://www.theneolanders.com/assets/NeolandStatic.webp" />
+  <meta property="og:description" content="We're getting things set up over here." />
+  <meta property="og:site_name" content="The Neolanders" />
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="The Neolanders">
+  <meta name="twitter:description" content="We're getting things set up over here.">
+  <meta name="twitter:image" content="https://www.theneolanders.com/assets/NeolandStatic.webp">
 </head>
 <body>
-  <div style="width:100%;position: absolute;top: 50%;transform: translateY(-50%);">
-    <h1 class="centered" style="font-size:96px;">Hello world</h1>
-    <p class="centered">We're getting things set up over here</p>
+  <div class="container">
+    <main class="center">
+      <h1>Hello world</h1>
+      <p>We're getting things set up over here</p>
+    </main>
   </div>
 </body>
 </html>
diff --git a/members/index.html b/members/index.html
@@ -0,0 +1 @@
+<h1>Soon...</h1>
diff --git a/style.css b/style.css
@@ -1,29 +1,46 @@
+/* Root Styles */
 * {
-  padding:0px;
-  margin:0px;
+  padding:0;
+  margin:0;
   font-family: 'Roboto', sans-serif;
   color: rgba(255,255,255,1);
   animation-name: fade;
   animation-duration: 8s;
-
 }
+
+html, body {
+  margin: 0;
+}
+
+/* Body */
 body {
-  width:auto;
-  height:auto;
+  width: auto;
+  height: 100vh;
   background-image: linear-gradient(to bottom right, #434969, #000000);
   background-repeat: repeat;
   background-attachment: fixed;
   background-size: 150%;
   animation-name: gradient;
   animation-duration: 6s;
 }
-.centered {
-  margin-left: auto;
-  margin-right: auto;
+
+/* Center text */
+.center {
+  margin: auto;
   width: 50%;
   text-align: center;
+  padding: 10px;
+  position: absolute;
+}
+
+.container{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
 }
 
+/* Start Animation */
 @keyframes fade {
   0%{color: rgba(255,255,255,0);}
   100%{color: rgba(255,255,255,1);}