first stab at community showcase section

This commit is contained in:
Ell 2023-08-12 12:30:31 +02:00
parent ebd80ae514
commit 017e97deff
9 changed files with 139 additions and 9 deletions

View file

@ -0,0 +1,24 @@
[
{
"name": "Itty for Tiny Life",
"slug": "itty",
"desc": "Itty adds a social media site (called Itty) that allows your Tinies to interact digitally!",
"author": "ssblur",
"section": "mods",
"links": {
"Steam": "https://steamcommunity.com/sharedfiles/filedetails/?id=2965803577",
"YouTube": "https://www.youtube.com/channel/UC87-8FM-U9OSUYCzIqlhztA"
}
},
{
"name": "Itty for Tiny Life",
"slug": "itty",
"desc": "Itty adds a social media site (called Itty) that allows your Tinies to interact digitally!",
"author": "ssblur",
"section": "mods",
"links": {
"Steam": "https://steamcommunity.com/sharedfiles/filedetails/?id=2965803577",
"YouTube": "https://www.youtube.com/channel/UC87-8FM-U9OSUYCzIqlhztA"
}
}
]

View file

@ -0,0 +1,32 @@
[
{
"name": "🔨 Mods",
"slug": "mods",
"desc": "Mods are cool!"
},
{
"name": "🫂 Households",
"slug": "households",
"desc": "Households are cool!"
},
{
"name": "🏠 Lots",
"slug": "lots",
"desc": "Lots are cool!"
},
{
"name": "🌍 Worlds",
"slug": "worlds",
"desc": "Worlds are cool!"
},
{
"name": "📽️ Media",
"slug": "media",
"desc": "Media is cool!"
},
{
"name": "🎨 Fanart",
"slug": "fanart",
"desc": "Fanart is cool!"
}
]

View file

@ -9,7 +9,7 @@
<div class="feature-title">
<h2>{{ item.title }}</h2>
</div>
<img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%" class="screen">
<img src="media/banners/{{ item.value }}" alt="{{ item.alt }}" width="100%">
</div>
<ul>
{% for line in item.text %}

View file

@ -1,4 +1,4 @@
<a class="nav-item nav-link" href="../../#devlogs">🏡 Back to Main Page</a>
<a class="nav-item nav-link" href="../../#devlogs">🏡 Home</a>
{% if page.previous %}
<a class="nav-item nav-link" href="{{ page.previous.url }}">⏮️ Previous Post</a>
{% endif %}

View file

@ -0,0 +1,4 @@
<a class="nav-item nav-link" href="../../">🏡 Home</a>
{% for section in site.data.community-sections %}
<a class="nav-item nav-link" href="#{{ section.slug }}">{{ section.name }}</a>
{% endfor %}

View file

@ -1,5 +1,6 @@
<a class="nav-item nav-link" href="#top">🎮 Play</a>
<a class="nav-item nav-link" href="#about">🏡 About</a>
<a class="nav-item nav-link" href="#social">🔗 Social</a>
<a class="nav-item nav-link" href="#devlogs">📢 News and Devlogs</a>
<a class="nav-item nav-link" href="#devlogs">📢 News</a>
<a class="nav-item nav-link" href="#roadmap">🛣️ Roadmap</a>
<a class="nav-item nav-link" href="community">💬 Community</a>

41
web/community.html Normal file
View file

@ -0,0 +1,41 @@
---
layout: default
nav: communitynav.html
title: Tiny Life
summary: A fun simulation game where you mess with people's lives
---
<div class="section community-top">
<h1>💬 Community Showcase</h1>
Tiny Life's community is awesome, blah blah blah
</div>
{% for section in site.data.community-sections %}
<div class="section">
<h2 id="{{ section.slug }}">{{ section.name }}</h2>
<p>{{ section.desc }}</p>
{% for content in site.data.community-content %}
{% if content.section == section.slug %}
<div class="community-content">
<div class="community-content-box">
<div class="community-content-box-content">
<h4 class="community-title">{{ content.name }}</h4>
<div class="community-author text-muted">Created by {{ content.author }}</div>
<div class="community-desc">{{ content.desc }}</div>
<div>
{% for link in content.links %}
<a href="{{ link[1] }}">{{ link[0] }}</a>
{% unless forloop.last %}
&ndash;
{% endunless %}
{% endfor %}
</div>
</div>
<img id="{{ content.slug }}" src="/media/community/{{ content.slug }}.png" alt="An image showing off {{ content.name }}" width="100%">
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 KiB

View file

@ -48,7 +48,7 @@ pre.highlight {
.blog-section {
max-width: 700px;
margin-top: 80px;
margin-top: 70px;
}
.blog-section img {
@ -79,7 +79,8 @@ pre.highlight {
margin-bottom: 40px;
}
.feature-banner {
.feature-banner,
.community-content-box {
position: relative;
}
@ -87,8 +88,9 @@ pre.highlight {
margin-top: 1rem;
}
.feature-title {
margin: 10px;
.feature-title,
.community-content-box-content {
margin-top: 10px;
padding: 10px;
color: white;
background: rgb(0, 0, 0, 0.7);
@ -100,6 +102,25 @@ pre.highlight {
white-space: nowrap;
}
.community-content-box-content {
margin: 0;
top: auto;
bottom: 30px;
white-space: initial;
}
.community-content {
margin: 25px auto;
}
.community-title {
white-space: nowrap;
}
.community-desc {
display: block;
}
.feature-title h2 {
margin-bottom: 0;
}
@ -117,11 +138,14 @@ pre.highlight {
margin-right: 20px;
}
.devlog-date {
.devlog-date,
.community-desc,
.community-author {
margin-bottom: 10px;
}
.devlog-title {
.devlog-title,
.community-title {
margin-bottom: 0;
}
@ -182,6 +206,10 @@ pre.highlight {
font-style: italic;
}
.community-top {
margin-top: 70px;
}
body.dark-mode {
color: #d8d8d8;
background-color: #1b1b1b;