backup with placeholder

nonpacks/static/css/style.css

@@ -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;
+    display: flex;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    flex-direction: column;
-    gap: 16px;
+    gap: 12px;
-    margin-bottom: 32px;
 }
-.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;

nonpacks/templates/landing/home.html

@@ -4,38 +4,40 @@
 {% block title %}Home - Packs Site{% endblock %}
 
 {% block content %}
-<div class="home-hero">
+<div class="home-layout">
-    <div class="home-hero-inner">
+    <div class="home-hero">
-        <h1>Packs Site</h1>
+        <div class="home-hero-inner">
-        <p>Hosted datapacks for the Needs Of Nature mod.</p>
+            <h1>Packs Site</h1>
-        <p class="home-hero-sub">Browse and download packs shared by the community. Upload your own once you have a creator account.</p>
+            <p>Hosted datapacks for the Needs Of Nature mod.</p>
-        <div class="home-hero-actions">
+            <p class="home-hero-sub">Browse and download packs shared by the community. Upload your own once you have a creator account.</p>
-            <a href="{% url 'library:browse' %}" class="btn btn-primary"><i class="fas fa-search"></i> Browse packs</a>
+            <div class="home-hero-actions">
-            <a href="{% url 'library:project_create' %}" class="btn btn-secondary"><i class="fas fa-upload"></i> Upload a pack</a>
+                <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="home-placeholder">
-    <div class="stat-card">
+        <h2><i class="fas fa-bullhorn"></i> Announcements</h2>
-        <i class="fas fa-users"></i>
+        <p class="home-placeholder-text">Placeholder — news and updates will live here.</p>
-        <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>
+    <div class="home-stats">
-        <span class="stat-value">{{ stats.packs }}</span>
+        <div class="stat-card">
-        <span class="stat-label">Packs</span>
+            <i class="fas fa-users"></i>
-    </div>
+            <span class="stat-value">{{ stats.creators }}</span>
-    <div class="stat-card">
+            <span class="stat-label">Creators</span>
-        <i class="fas fa-download"></i>
+        </div>
-        <span class="stat-value">{{ stats.downloads }}</span>
+        <div class="stat-card">
-        <span class="stat-label">Downloads</span>
+            <i class="fas fa-box-open"></i>
-    </div>
+            <span class="stat-value">{{ stats.packs }}</span>
-    <div class="stat-card">
+            <span class="stat-label">Packs</span>
-        <i class="fas fa-tag"></i>
+        </div>
-        <span class="stat-value">{{ stats.versions }}</span>
+        <div class="stat-card">
-        <span class="stat-label">Versions</span>
+            <i class="fas fa-download"></i>
+            <span class="stat-value">{{ stats.downloads }}</span>
+            <span class="stat-label">Downloads</span>
+        </div>
     </div>
 </div>