progress

src/components/Navigation.astro

@@ -4,4 +4,8 @@
 	<a href="/about"> About </a>
 	<div class="nav-seperator">|</div>
 	<a href="/blog"> Blog </a>
+	<div class="nav-seperator">|</div>
+	<a href="/tutorials"> Tutorials </a>
+	<div class="nav-seperator">|</div>
+	<a href="/docs"> Docs </a>
 </div>

src/pages/index.astro

@@ -17,6 +17,16 @@ import Card from '../components/Card.astro';
 				title="Community"
 				body="Join our Discord and help with the development."
 			/>
+			<Card
+				href="/tutorials"
+				title="Getting Started"
+				body="Check out some tutorials and write your first language!"
+			/>
+			<Card 
+				href="/docs"
+				title="Documentation"
+				body="Read the docs."
+			/>
 		</ul>
 	</main>
 </Layout>
@@ -59,5 +69,7 @@ import Card from '../components/Card.astro';
 		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
 		gap: 2rem;
 		padding: 0;
+		max-width: 800px;
+		margin: auto;
 	}
 </style>

src/scripts/menu.js

@@ -1,3 +1,8 @@
-document.querySelector('.hamburger').addEventListener('click', () => {
-  document.querySelector('.nav-links').classList.toggle('expanded');
-});
+document.querySelector(".hamburger").addEventListener("click", () => {
+  document.querySelector(".nav-links").classList.toggle("expanded");
+
+  let seperators = document.querySelectorAll(".nav-seperator");
+  for (let seperator of seperators) {
+    seperator.classList.toggle("nav-seperator-expanded");
+  }
+});

src/styles/global.css

@@ -32,14 +32,19 @@
   color: var(--accent-text);
 }
 
-.nav-links a:hover, a:focus {
+.nav-links a:hover,
+a:focus {
   text-decoration: underline;
 }
 
 .expanded {
   display: unset;
 }
 
+.nav-seperator-expanded {
+  display: none;
+}
+
 @media screen and (min-width: 636px) {
   .nav-links {
     display: inline-flex;
@@ -59,4 +64,4 @@
     font-size: 40px;
     font-weight: 200;
   }
-}
+}