backup with placeholder

This commit is contained in:
2026-08-05 14:39:50 -05:00
parent 3a42657a3a
commit c163271a04
2 changed files with 83 additions and 46 deletions
+53 -18
View File
@@ -1509,32 +1509,64 @@ a.deletelink {
.htmx-request.htmx-indicator { display: block; }
/* ========== Home Page ========== */
.home-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px;
gap: 20px;
align-items: stretch;
margin-bottom: 28px;
}
.home-placeholder {
background: var(--md-sys-color-surface);
border: 1px dashed var(--md-sys-color-outline-variant, #45475a);
border-radius: 16px;
padding: 24px 28px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
gap: 8px;
}
.home-placeholder h2 {
font-size: 1.1rem;
color: var(--md-sys-color-on-surface);
margin: 0;
}
.home-placeholder h2 i { color: var(--md-sys-color-primary); }
.home-placeholder-text {
color: var(--md-sys-color-on-surface-variant, #a6adc8);
font-size: 0.85rem;
margin: 0;
}
.home-hero {
background: var(--md-sys-color-surface);
border-radius: 16px;
padding: 48px 32px;
padding: 24px 28px;
text-align: center;
margin-bottom: 24px;
border: 1px solid var(--md-sys-color-outline);
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.home-hero h1 {
font-size: 2.5rem;
font-size: 1.9rem;
font-weight: 700;
color: var(--md-sys-color-primary);
margin-bottom: 12px;
margin-bottom: 8px;
}
.home-hero p {
color: var(--md-sys-color-on-surface-variant);
font-size: 1.1rem;
font-size: 0.95rem;
max-width: 640px;
margin: 0 auto 8px auto;
margin: 0 auto 4px auto;
}
.home-hero .home-hero-sub {
font-size: 0.95rem;
font-size: 0.85rem;
max-width: 560px;
}
.home-hero-actions {
margin-top: 24px;
margin-top: 16px;
display: flex;
gap: 12px;
justify-content: center;
@@ -1570,33 +1602,36 @@ a.deletelink {
}
.home-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-card {
@media (max-width: 900px) {
.home-layout {
grid-template-columns: 1fr;
}
}.stat-card {
background: var(--md-sys-color-surface);
border-radius: 12px;
padding: 20px;
padding: 14px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
gap: 4px;
border: 1px solid var(--md-sys-color-outline);
}
.stat-card i {
font-size: 1.5rem;
font-size: 1.15rem;
color: var(--md-sys-color-primary);
}
.stat-value {
font-size: 1.8rem;
font-size: 1.4rem;
font-weight: 700;
color: var(--md-sys-color-on-surface);
}
.stat-label {
font-size: 0.8rem;
font-size: 0.72rem;
color: var(--md-sys-color-on-surface-variant);
text-transform: uppercase;
letter-spacing: 0.05em;
+30 -28
View File
@@ -4,38 +4,40 @@
{% block title %}Home - Packs Site{% endblock %}
{% block content %}
<div class="home-hero">
<div class="home-hero-inner">
<h1>Packs Site</h1>
<p>Hosted datapacks for the Needs Of Nature mod.</p>
<p class="home-hero-sub">Browse and download packs shared by the community. Upload your own once you have a creator account.</p>
<div class="home-hero-actions">
<a href="{% url 'library:browse' %}" class="btn btn-primary"><i class="fas fa-search"></i> Browse packs</a>
<a href="{% url 'library:project_create' %}" class="btn btn-secondary"><i class="fas fa-upload"></i> Upload a pack</a>
<div class="home-layout">
<div class="home-hero">
<div class="home-hero-inner">
<h1>Packs Site</h1>
<p>Hosted datapacks for the Needs Of Nature mod.</p>
<p class="home-hero-sub">Browse and download packs shared by the community. Upload your own once you have a creator account.</p>
<div class="home-hero-actions">
<a href="{% url 'library:browse' %}" class="btn btn-primary"><i class="fas fa-search"></i> Browse packs</a>
<a href="{% url 'library:project_create' %}" class="btn btn-secondary"><i class="fas fa-upload"></i> Upload a pack</a>
</div>
</div>
</div>
</div>
<div class="home-stats">
<div class="stat-card">
<i class="fas fa-users"></i>
<span class="stat-value">{{ stats.creators }}</span>
<span class="stat-label">Creators</span>
<div class="home-placeholder">
<h2><i class="fas fa-bullhorn"></i> Announcements</h2>
<p class="home-placeholder-text">Placeholder — news and updates will live here.</p>
</div>
<div class="stat-card">
<i class="fas fa-box-open"></i>
<span class="stat-value">{{ stats.packs }}</span>
<span class="stat-label">Packs</span>
</div>
<div class="stat-card">
<i class="fas fa-download"></i>
<span class="stat-value">{{ stats.downloads }}</span>
<span class="stat-label">Downloads</span>
</div>
<div class="stat-card">
<i class="fas fa-tag"></i>
<span class="stat-value">{{ stats.versions }}</span>
<span class="stat-label">Versions</span>
<div class="home-stats">
<div class="stat-card">
<i class="fas fa-users"></i>
<span class="stat-value">{{ stats.creators }}</span>
<span class="stat-label">Creators</span>
</div>
<div class="stat-card">
<i class="fas fa-box-open"></i>
<span class="stat-value">{{ stats.packs }}</span>
<span class="stat-label">Packs</span>
</div>
<div class="stat-card">
<i class="fas fa-download"></i>
<span class="stat-value">{{ stats.downloads }}</span>
<span class="stat-label">Downloads</span>
</div>
</div>
</div>