Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-11-22 11:23:29 +01:00
Code Issues Projects Releases Wiki Activity

added (experimental) mailing list

Browse source
This commit is contained in:
Ell 2022-07-11 19:50:49 +02:00
parent 74c393fe86
commit 4dba0ba995
3 changed files with 198 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/_includes/devlogs.html
View file

@ -1,15 +1,15 @@
<div class="section"> <div class="section">
<h1 id="devlogs">📝 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> <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> or subscribe to <a href="#subscribe">the mailing list</a>.</p>
<div class="devlogs"> <div class="devlogs">
{% for item in site.data.devlogs %} {% for item in site.data.devlogs %}
<div class="devlog"> <div class="devlog">
<h4>{{ item.name }}</h4> <h4>{{ item.name }}</h4>
<div class="devlog-buttons"> <div class="devlog-buttons">
<a href="{{ item.itch }}">Read on itch</a> &ndash; <a href="{{ item.steam }}">Read on Steam</a> <a href="{{ item.itch }}">Read on itch</a> &ndash; <a href="{{ item.steam }}">Read on Steam</a>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

51
web/_includes/social.html
View file

@ -1,17 +1,36 @@
<div class="section"> <div class="section">
<h1 id="social">🔗 Social</h1> <h1 id="social">🔗 Social</h1>
<p> <p>
If you want to stay up to date with Tiny Life's development, you should follow the game on Twitter. You can also join the Discord to ask questions or share your gameplay! If you want to stay up to date with Tiny Life's development, you should follow the game on Twitter or subscribe to the mailing list below. You can also join the Discord to ask questions or share your gameplay!
</p> </p>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-auto"> <div class="col-auto">
<a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="400" height="650"></a> <a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="400" height="600"></a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<iframe id="discord-widget" title="Ellpeck Games Discord server" width="400" height="650" allowtransparency="true" frameborder="0" src="https://discordapp.com/widget?id=181435613147430913&theme=light"></iframe> <iframe id="discord-widget" title="Ellpeck Games Discord server" width="400" height="600" allowtransparency="true" frameborder="0" src="https://discordapp.com/widget?id=181435613147430913&theme=light"></iframe>
</div> </div>
</div> </div>
<div id="subscribe" class="mailing-list bg-light">
<h3>📫 Subscribe</h3>
<p>You can also subscribe to the mailing list, which means you will be notified about future news and devlog posts via email. We promise not to send too many emails, but you can always unsubscribe easily, too.</p>
<form method="post" action="https://lists.ellpeck.de/subscription/form" class="listmonk-form text-center">
<div>
<input type="hidden" name="nonce">
<p><input type="email" name="email" required placeholder="E-mail"></p>
<p><input type="text" name="name" placeholder="Name (optional)"></p>
<p>
<input id="16f4b" type="checkbox" name="l" checked value="16f4bf5a-7133-4255-958e-1d325fea6ba8">
<label for="16f4b">🏡 Tiny Life News</label>
</p>
<p><input type="submit" value="Subscribe"></p>
</div>
</form>
</div>
</div> </div>

289
web/style.css
View file

@ -1,141 +1,150 @@
html { html {
scroll-padding-top: 70px; scroll-padding-top: 70px;
} }
body { body {
position: relative; position: relative;
font-family: Lato, sans-serif; font-family: Lato, sans-serif;
} }
.navbar-container { .navbar-container {
max-width: 950px; max-width: 950px;
} }
.top { .top {
background-image: url("media/large_background.png"); background-image: url("media/large_background.png");
background-size: 400%; background-size: 400%;
color: white; color: white;
} }
.top a:link, .top a:link,
.top a:visited { .top a:visited {
color: lightsteelblue; color: lightsteelblue;
} }
.top-content { .top-content {
text-align: center; text-align: center;
padding-top: 70px; padding-top: 70px;
} }
.section { .section {
width: 95%; width: 95%;
max-width: 950px; max-width: 950px;
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.site { .site {
padding-bottom: 20px; padding-bottom: 20px;
} }
.top-container { .top-container {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px; border-radius: 5px;
margin-bottom: 30px; margin-bottom: 30px;
margin-top: 120px; margin-top: 120px;
padding: 20px; padding: 20px;
} }
.link { .link {
display: inline-block; display: inline-block;
width: 150px; width: 150px;
} }
.screenshot { .screenshot {
position: relative; position: relative;
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.feature { .feature {
margin: 10px; margin: 10px;
padding: 10px; padding: 10px;
max-width: 60%; max-width: 60%;
color: white; color: white;
background: rgb(0, 0, 0, 0.7); background: rgb(0, 0, 0, 0.7);
border-radius: 8px; border-radius: 8px;
position: absolute; position: absolute;
top: 0; top: 0;
} }
.feature p { .feature p {
margin-bottom: 0; margin-bottom: 0;
} }
.feature-0 { .feature-0 {
text-align: left; text-align: left;
left: 0; left: 0;
} }
.feature-1 { .feature-1 {
text-align: right; text-align: right;
right: 0; right: 0;
} }
.footer { .footer {
text-align: center; text-align: center;
padding: 15px; padding: 15px;
} }
.devlog { .devlog {
margin-bottom: 20px; margin-bottom: 20px;
min-width: 250px; min-width: 250px;
width: 45%; width: 45%;
display: inline-block; display: inline-block;
} }
.trailer { .trailer {
margin-top: 60px; margin-top: 60px;
margin-bottom: 40px; margin-bottom: 40px;
position: relative; position: relative;
width: 100%; width: 100%;
height: 0; height: 0;
padding-bottom: 56.25%; padding-bottom: 56.25%;
} }
.trailer iframe { .trailer iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.roadmap { .roadmap {
width: 75%; width: 75%;
min-width: 250px; min-width: 250px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.roadmap-entry { .roadmap-entry {
margin: 20px; margin: 20px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.roadmap-entry-left { .roadmap-entry-left {
text-align: left; text-align: left;
} }
.roadmap-entry-right { .roadmap-entry-right {
text-align: right; text-align: right;
} }
.roadmap-entry-important { .roadmap-entry-important {
text-align: center; text-align: center;
margin-top: 60px; margin-top: 60px;
margin-bottom: 60px; margin-bottom: 60px;
}
.mailing-list {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
padding: 20px;
border-radius: 5px;
} }