navigation with hamburger; centering

prachtsaal · May 30, 2024 · d1876ba · d1876ba
1 parent 4ea8970
commit d1876ba
Show file tree

Hide file tree

Showing 25 changed files with 464 additions and 82 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,6 @@
+<footer class="text-center m-16">
+    <a href="/impressum.html">Impressum</a>
+    <div class="mt-8">
+        Copyright &copy; 2024 Prachtsaal Studio. All rights reserved.
+    </div>
+</footer>
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,10 +1,23 @@
-<nav>
-  <ul>
-    <li><a href="/">Home</a></li>
-    <li><a href="/events/">Events</a></li>
-    <li><a href="/people/">People</a></li>
-    <li><a href="/communities/">Communities</a></li>
-    <li><a href="/cooperative/">Cooperative</a></li>
-    <li><a href="/history/">History</a></li>
-  </ul>
-</nav>
+<nav class="flex m-6 justify-between items-start">
+  <div>
+    <a href="/">
+      <img src="/assets/img/prachtsaal-logo.png" width="100px">
+    </a>
+  </div>
+
+  <div>
+    <div class="flex justify-end cursor-pointer sm:hidden" id="burger">
+      <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
+    </div>  
+    <!-- <div class="hidden block sm:flex sm:flex-row sm:space-x-12" id="menu"> -->
+    <div class="hidden sm:flex" id="menu">
+      <ul class="sm:flex sm:flex-row sm:space-x-8">
+        <li><a href="/events/">events</a></li>
+        <li><a href="/communities/">communities</a></li>
+        <li><a href="/cooperative/">cooperative</a></li>
+        <li><a href="/history/">history</a></li>
+      </ul>
+
+    </div>  
+  </div>
+</nav>  
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,25 +1,23 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="font-sans">
+
 <head>
   <meta charset="utf-8">
+  <link href="/assets/css/styles.css" rel="stylesheet">
   <title>{{ page.title }}</title>
   {% if page.description %}
   <meta name="description" content="{{ page.description }}">
   {% endif %}
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="/style/common.css">
-  {% if page.add-style %}
-  <link rel="stylesheet" href="/style/{{ page.add-style }}">
-  {% endif %}
   {% if page.add-js %}
   <script src="/js/{{ page.add-js }}"></script>
   {% endif %}
 </head>
+
 <body>
-{% include navigation.html %}
+
 {{ content }}
-<footer>
-  Copyright &copy; 2024 Prachtsaal, <a href="/impressum.html">Impressum</a>
-</footer>
+
 </body>
+
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -0,0 +1,18 @@
+---
+layout: default
+---
+<div class="flex justify-center">
+    <div class="flex-col mx-12 lg:max-w-6xl justify-between">
+
+        <div>
+            {% include navigation.html %}
+
+            {{ content }}
+        </div>
+
+        {% include footer.html %}
+
+    </div>
+</div>
+<script src="/js/menu.js"></script>
+
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<div class="flex justify-center">
+    <div class="flex-col mx-12 lg:max-w-6xl justify-between">
+
+        <div>
+            {% include navigation.html %}
+
+            <header class="m-28">
+                <h1>{{ page.title }}</h1>
+            </header>    
+
+            {{ content }}
+        </div>
+
+        {% include footer.html %}
+
+    </div>
+</div>
+<script src="/js/menu.js"></script>
+
diff --git a/assets/css/source.css b/assets/css/source.css
@@ -1,5 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
+
+h1 {
+    @apply text-6xl font-prachtsaal font-bold text-center;
+}
+
+h2 {
+    @apply text-2xl mb-8;
+}