mirror of
https://github.com/Ellpeck/TinyLifeWeb.git
synced 2024-11-22 19:28:35 +01:00
added (experimental) mailing list
This commit is contained in:
parent
74c393fe86
commit
4dba0ba995
3 changed files with 198 additions and 170 deletions
|
|
@ -1,15 +1,15 @@
|
|||
<div class="section">
|
||||
<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">
|
||||
{% for item in site.data.devlogs %}
|
||||
<div class="devlog">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<div class="devlog-buttons">
|
||||
<a href="{{ item.itch }}">Read on itch</a> – <a href="{{ item.steam }}">Read on Steam</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="section">
|
||||
<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> or subscribe to <a href="#subscribe">the mailing list</a>.</p>
|
||||
|
||||
<div class="devlogs">
|
||||
{% for item in site.data.devlogs %}
|
||||
<div class="devlog">
|
||||
<h4>{{ item.name }}</h4>
|
||||
<div class="devlog-buttons">
|
||||
<a href="{{ item.itch }}">Read on itch</a> – <a href="{{ item.steam }}">Read on Steam</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,17 +1,36 @@
|
|||
<div class="section">
|
||||
<h1 id="social">🔗 Social</h1>
|
||||
<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!
|
||||
</p>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-auto">
|
||||
<a class="twitter-timeline" href="https://twitter.com/TinyLifeGame" width="400" height="650"></a>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h1 id="social">🔗 Social</h1>
|
||||
<p>
|
||||
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>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-auto">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<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 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>
|
||||
289
web/style.css
289
web/style.css
|
|
@ -1,141 +1,150 @@
|
|||
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%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top a:link,
|
||||
.top a:visited {
|
||||
color: lightsteelblue;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 95%;
|
||||
max-width: 950px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.site {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 120px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
position: relative;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
max-width: 60%;
|
||||
color: white;
|
||||
background: rgb(0, 0, 0, 0.7);
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-0 {
|
||||
text-align: left;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.feature-1 {
|
||||
text-align: right;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.devlog {
|
||||
margin-bottom: 20px;
|
||||
min-width: 250px;
|
||||
width: 45%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.trailer {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.trailer iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.roadmap {
|
||||
width: 75%;
|
||||
min-width: 250px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.roadmap-entry {
|
||||
margin: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.roadmap-entry-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.roadmap-entry-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.roadmap-entry-important {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
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%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top a:link,
|
||||
.top a:visited {
|
||||
color: lightsteelblue;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 95%;
|
||||
max-width: 950px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.site {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 120px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
position: relative;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
max-width: 60%;
|
||||
color: white;
|
||||
background: rgb(0, 0, 0, 0.7);
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-0 {
|
||||
text-align: left;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.feature-1 {
|
||||
text-align: right;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.devlog {
|
||||
margin-bottom: 20px;
|
||||
min-width: 250px;
|
||||
width: 45%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.trailer {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.trailer iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.roadmap {
|
||||
width: 75%;
|
||||
min-width: 250px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.roadmap-entry {
|
||||
margin: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.roadmap-entry-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.roadmap-entry-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.roadmap-entry-important {
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.mailing-list {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
Loading…
Reference in a new issue