added a navbar

web/_data/roadmap.json

@@ -14,6 +14,10 @@
     "name": "🍷 Bars and Other Public Lots",
     "desc": "There will be a lot more public lot types in the future, including bars, museums, festival spots, and more!",
     "stage": "Before Release"
+}, {
+    "name": "🫂 More Complex Relationships",
+    "desc": "While there's already friendship, romance and dating in the game, we'd like to include marriage, jealousy, open relationships, polyamory, consequences for cheating on partners, and more.",
+    "stage": "Before Release"
 }, {
     "name": "🔗 Workshop Support",
     "desc": "We plan on adding support for both Steam Workshop and the CurseForge modding platform to allow you to share custom lots, households, maps and mods with other players.",

web/_includes/about.html

@@ -1,6 +1,5 @@
 <div class="section">
-    <span id="about"></span>
+    <h1 id="about">About Tiny Life</h1>
-    <h1>About Tiny Life</h1>
     <p>Tiny Life is a fun simulation game that aims to capture the essence of games like The Sims, but in an isometric pixelart style.</p>
     <p>In the game, you control a set of people that live together in a household. You take care of their daily needs, build their skills, forge new relationships... or just mess up their entire life in whatever way you can think of!</p>
 

web/_includes/devlogs.html

@@ -1,6 +1,5 @@
 <div class="section">
-    <span id="devlogs"></span>
+    <h1 id="devlogs">Devlogs</h1>
-    <h1>Devlogs</h1>
     <p>Along with every major update, we publish a devlog that features additional information as well as some screenshots. You can read them on itch or on Steam. You can also read <a href="https://docs.tinylifegame.com/Changelog">the full changelog</a>.</p>
 
     <div class="devlogs">

web/_includes/indexnav.html

@@ -0,0 +1,3 @@
+<a class="nav-item nav-link" href="#about">About</a>
+<a class="nav-item nav-link" href="#devlogs">Devlogs</a>
+<a class="nav-item nav-link" href="#roadmap">Roadmap</a>

web/_includes/navbar.html

@@ -0,0 +1,19 @@
+<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
+    <div class="container navbar-container">
+        <a class="navbar-brand" href="#">
+            <img src="/media/icon.png" width="40" height="40" alt="The Tiny Life logo">
+        </a>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-label="Navbar toggler">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbar-content">
+            <div class="navbar-nav mr-auto" id="nav-items">
+                {% if page.nav %}
+                {% include {{page.nav}} %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</nav>

web/_includes/roadmap.html

@@ -1,6 +1,5 @@
 <div class="section">
-    <span id="roadmap"></span>
+    <h1 id="roadmap">Roadmap</h1>
-    <h1>Roadmap</h1>
     <p>
         There's a lot of stuff planned for the game! Everything on this list will be part of free updates in the future, provided that you buy the game once it's purchasable. Right now, the game is still in public beta, so everything is free!<br>
         <span class="text-muted">This list is not exhaustive! There are a lot of planned and work-in-progress features that we want to keep secret for now.</span>

web/_includes/top.html

@@ -3,7 +3,7 @@
         <image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
         <h4>A fun simulation game where you mess with people's lives</h4>
 
-        <div class="container">
+        <div class="container top-container">
             <div class="row">
                 <div class="col site">
                     <h3>Play the free beta</h3>
@@ -24,9 +24,6 @@
             <a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
         </div>
     </div>
-    <div class="top-footer">
-        <p>▼ Scroll down for more ▼</p>
-    </div>
 </div>
 
 <script>

web/_layouts/default.html

@@ -11,7 +11,7 @@
     <meta name="keywords" content="Ellpeck, Tiny Life, Steam, itch, itch.io, Sandbox, Life Simulator, Simulator, Sim, Isometric, Pixelart, Pixel Art, Retro">
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" href="favicon.ico">
 
@@ -38,10 +38,14 @@
     </script>
 </head>
 
-<body>
+<body data-spy="scroll" data-target="#navbar" data-offset="80">
+    {% include navbar.html %}
+
     {{ content }}
 
-    <p class="footer"><a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2022 Ellpeck</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a></p>
+    <div class="footer bg-light">
+        <a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2022 Ellpeck</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a>
+    </div>
 </body>
 
 </html>

web/index.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+nav: indexnav.html
 title: Tiny Life
 summary: A fun simulation game where you mess with people's lives
 ---

web/style.css

@@ -1,3 +1,16 @@
+html {
+    scroll-padding-top: 70px;
+}
+
+body {
+    position: relative;
+    font-family: Lato, sans-serif;
+}
+
+.navbar-container {
+    max-width: 950px;
+}
+
 .top {
     background-image: url("media/large_background.png");
     background-size: 400%;
@@ -11,15 +24,7 @@
 
 .top-content {
     text-align: center;
-    padding-top: 20px;
+    padding-top: 50px;
-    padding-bottom: 60px;
-}
-
-.top-footer {
-    position: absolute;
-    bottom: 30px;
-    left: auto;
-    right: auto;
 }
 
 .section {
@@ -35,7 +40,7 @@
     padding-bottom: 20px;
 }
 
-.container {
+.top-container {
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     margin-bottom: 30px;
@@ -80,10 +85,8 @@
 }
 
 .footer {
-    margin-top: 15px;
-    margin-bottom: 15px;
-    width: 100%;
     text-align: center;
+    padding: 15px;
 }
 
 .devlog {