docs: document DEVPLACE_DISABLE_SERVICES env var, news router, modal class toggle, and news service behavior

devplacepy/static/css/landing.css

@@ -53,13 +53,12 @@
 }
 
 .landing-hero {
-    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
-    padding: 4rem 2rem;
+    padding: 4rem 2rem 3rem;
     position: relative;
     z-index: 1;
 }
@@ -126,48 +125,6 @@
     font-weight: 600;
 }
 
-.landing-daily-topic {
-    max-width: 800px;
-    margin: 3rem auto 0;
-    padding: 1.5rem;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    text-align: left;
-    position: relative;
-    z-index: 1;
-}
-
-.landing-daily-topic-label {
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: var(--accent);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin-bottom: 0.5rem;
-}
-
-.landing-daily-topic h3 {
-    font-size: 1.125rem;
-    margin-bottom: 0.5rem;
-}
-
-.landing-daily-topic p {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.75rem;
-}
-
-.landing-daily-topic-links {
-    display: flex;
-    gap: 1rem;
-}
-
-.landing-daily-topic-links a {
-    font-size: 0.8125rem;
-    font-weight: 600;
-}
-
 .landing-auth-link {
     font-size: 0.875rem;
     color: var(--text-secondary);
@@ -181,88 +138,170 @@
     font-weight: 600;
 }
 
-.landing-news {
+.landing-section {
     max-width: 960px;
-    margin: 2rem auto 3rem;
+    margin: 0 auto 3rem;
     padding: 0 2rem;
     width: 100%;
     position: relative;
     z-index: 1;
 }
 
-.landing-news h2 {
+.landing-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+}
+
+.landing-section-header h2 {
     font-size: 1.25rem;
     font-weight: 700;
-    margin-bottom: 1rem;
     color: var(--text-primary);
 }
 
-.landing-news-grid {
+.landing-section-link {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--accent);
+    transition: color 0.2s;
+}
+
+.landing-section-link:hover {
+    color: var(--accent-hover);
+}
+
+.landing-posts-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
 }
 
-.landing-news-card {
-    display: flex;
-    flex-direction: column;
+.landing-post-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
+    border-radius: var(--radius-xl);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
     transition: transform 0.2s, box-shadow 0.2s;
-    text-decoration: none;
 }
 
-.landing-news-card:hover {
+.landing-post-card:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }
 
-.landing-news-img {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    overflow: hidden;
-    background: var(--bg-secondary);
+.landing-post-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.landing-news-img img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.landing-news-body {
-    padding: 0.75rem 1rem;
+.landing-post-author-wrap {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
     flex: 1;
+    min-width: 0;
 }
 
-.landing-news-source {
-    font-size: 0.6875rem;
+.landing-post-author {
+    font-size: 0.8125rem;
     font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--accent);
+    color: var(--text-primary);
 }
 
-.landing-news-body h3 {
-    font-size: 0.875rem;
+.landing-post-time {
+    font-size: 0.6875rem;
+    color: var(--text-muted);
+}
+
+.landing-post-title {
+    font-size: 1rem;
     font-weight: 700;
-    color: var(--text-primary);
     line-height: 1.4;
     margin: 0;
 }
 
-.landing-news-date {
-    font-size: 0.6875rem;
-    color: var(--text-muted);
+.landing-post-title a {
+    color: var(--text-primary);
+    transition: color 0.2s;
+}
+
+.landing-post-title a:hover {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.landing-post-content {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.landing-post-footer {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border);
     margin-top: auto;
 }
 
+.landing-post-stat {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-weight: 600;
+}
+
+.landing-post-open {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--accent);
+    margin-left: auto;
+    transition: color 0.2s;
+}
+
+.landing-post-open:hover {
+    color: var(--accent-hover);
+}
+
+.landing-footer {
+    text-align: center;
+    padding: 2rem;
+    position: relative;
+    z-index: 1;
+    margin-top: auto;
+}
+
+.landing-footer p {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+}
+
+.landing-footer-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.landing-footer-links a {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.landing-footer-links a:hover {
+    color: var(--text-primary);
+}
+
 @media (max-width: 768px) {
     .landing-hero h1 {
         font-size: 2rem;
@@ -273,10 +312,10 @@
     .landing-nav {
         padding: 0.75rem 1rem;
     }
-    .landing-news-grid {
-        grid-template-columns: 1fr;
-    }
-    .landing-news {
+    .landing-section {
         padding: 0 1rem;
     }
+    .landing-posts-grid {
+        grid-template-columns: 1fr;
+    }
 }