Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-05-15 20:48:45 +02:00
Code Issues Projects Releases Wiki Activity

added a navbar

Browse source
This commit is contained in:
Ell 2022-05-31 21:44:35 +02:00
parent bc59f496cd
commit 332d856a17
10 changed files with 50 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/_includes/about.html
View file

@ -1,6 +1,5 @@
<div class="section">
<span id="about"></span>
<h1>About Tiny Life</h1>
<h1 id="about">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>

3
web/_includes/devlogs.html
View file

@ -1,6 +1,5 @@
<div class="section">
<span id="devlogs"></span>
<h1>Devlogs</h1>
<h1 id="devlogs">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">

3
web/_includes/indexnav.html Normal file
View file

@ -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>

19
web/_includes/navbar.html Normal file
View file

@ -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>

3
web/_includes/roadmap.html
View file

@ -1,6 +1,5 @@
<div class="section">
<span id="roadmap"></span>
<h1>Roadmap</h1>
<h1 id="roadmap">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>

5
web/_includes/top.html
View file

@ -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>

10
web/_layouts/default.html
View file

@ -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>

1
web/index.html
View file

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

BIN
web/media/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

29
web/style.css
View file

@ -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-bottom: 60px;
}
.top-footer {
position: absolute;
bottom: 30px;
left: auto;
right: auto;
padding-top: 50px;
}
.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 {