style: UI consistency — tab bar, calendar, button classes, consistent element sizing

Made-with: Cursor

static/style.css

@@ -36,3 +36,100 @@
 .hidden { display: none !important; }
 
 nav .brand { font-weight: bold; font-size: 1.1rem; }
+
+/* Tab bar */
+.tab-bar {
+    display: flex;
+    gap: 0;
+    border-bottom: 2px solid var(--pico-primary);
+    margin-bottom: 1rem;
+}
+.tab {
+    padding: 0.5rem 1.2rem;
+    background: none;
+    border: none;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: var(--pico-muted-color);
+}
+.tab.active {
+    color: var(--pico-primary);
+    border-bottom-color: var(--pico-primary);
+    font-weight: 600;
+}
+.tab:hover { color: var(--pico-primary); }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+/* Calendar widget */
+.calendar-widget { margin-bottom: 1.5rem; }
+.calendar-nav {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+}
+.calendar-nav button { padding: 0.3rem 0.8rem; }
+.calendar-grid {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+}
+.calendar-grid th,
+.calendar-grid td {
+    text-align: center;
+    padding: 0.3rem;
+}
+.cal-dim { opacity: 0.4; }
+.cal-wk {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--pico-primary);
+    cursor: pointer;
+}
+.cal-week, .cal-week-multi { cursor: pointer; }
+.cal-week:hover, .cal-week-multi:hover {
+    background: var(--pico-secondary-hover-background);
+}
+.cal-week.selected, .cal-week-multi.selected {
+    background: var(--pico-primary-background);
+    color: var(--pico-primary-inverse);
+}
+.cal-week-multi.in-range {
+    background: var(--pico-primary-focus);
+    color: var(--pico-primary-inverse);
+}
+
+/* Publish page */
+.publish-summary {
+    padding: 0.5rem;
+    border-radius: var(--pico-border-radius);
+    background: var(--pico-card-background-color);
+    margin-bottom: 1rem;
+}
+.publish-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    margin-top: 1rem;
+}
+.article-check-item,
+.article-radio-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid var(--pico-muted-border-color);
+}
+
+/* Consistent interactive elements */
+button, [role="button"],
+input[type="submit"],
+select, input[type="text"],
+input[type="number"],
+input[type="search"],
+input[type="date"],
+input[type="url"] {
+    font-size: 0.95rem;
+}

templates/base.html

@@ -13,6 +13,7 @@
             <li><a href="/" class="brand">PI Weekly</a></li>
         </ul>
         <ul>
+            <li><a href="/">Dashboard</a></li>
             <li><a href="/articles">Articles</a></li>
             <li><a href="/publish">Publish</a></li>
             <li><a href="/issues">Issues</a></li>

templates/dashboard.html

@@ -33,7 +33,8 @@
     <form method="post" action="/fetch-now">
         <button type="submit">Fetch Now</button>
     </form>
-    <a href="/publish" role="button" class="outline">New Issue</a>
+    <a href="/articles" role="button" class="outline">View</a>
+    <a href="/publish" role="button">Publish New</a>
 </div>
 
 {% if latest_issue %}