feat: add alt text extraction from URLs for images and improve CSS variable usage for progress bars

Add `_alt_from_url` helper in Python rendering and `altFromUrl` in JS ContentRenderer to generate descriptive alt attributes from image filenames, replacing empty alt strings. Update image embed templates and Avatar component to use derived alt text. Migrate inline `style.width` assignments to CSS custom properties (`--poll-pct`, `--hud-xp`, `--quest-pct`, `--bar-pct`, `--quota-pct`) across PollManager, GameFarm, and profile/quest CSS for better maintainability. Introduce new admin, docs, projects, services, and base CSS utility classes. Add "Code Farm" docs page entry.

devplacepy/static/css/admin.css

@@ -508,3 +508,78 @@
         padding: 0.25rem 0.375rem;
     }
 }
+
+.admin-btn-danger-text {
+    color: var(--danger);
+}
+
+.admin-news-col-title {
+    width: 30%;
+}
+
+.admin-news-status-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.admin-news-status-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+
+.admin-news-img-cell {
+    text-align: center;
+    font-size: 0.8125rem;
+}
+
+.admin-news-img-empty {
+    opacity: 0.2;
+}
+
+.admin-news-date-cell {
+    white-space: nowrap;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.admin-settings-intro {
+    margin-bottom: 1rem;
+}
+
+.admin-settings-group-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+    margin: 0 0 0.75rem;
+}
+
+.admin-settings-group-title-spaced {
+    margin-top: 1.5rem;
+}
+
+.admin-settings-divider {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 1.5rem 0;
+}
+
+.admin-settings-num {
+    max-width: 120px;
+}
+
+.admin-settings-select {
+    max-width: 160px;
+}
+
+.admin-settings-select-wide {
+    max-width: 220px;
+}
+
+.admin-settings-code {
+    width: 100%;
+    font-family: monospace;
+    font-size: 0.8125rem;
+}

devplacepy/static/css/base.css

@@ -84,6 +84,16 @@
 .inline-form {
     display: inline;
 }
+.empty-state-borderless {
+    border: none;
+}
+.meta-muted {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+.meta-muted-spaced {
+    margin-left: 0.5rem;
+}
 .hidden {
     display: none !important;
 }
@@ -1096,6 +1106,11 @@ body:has(.page-messages) {
         display: none;
     }
 
+    .topnav-tools-dropdown,
+    .topnav-icon[href="/leaderboard"] {
+        display: none;
+    }
+
     .topnav-hamburger {
         display: inline-flex;
         align-items: center;
@@ -1260,11 +1275,11 @@ body:has(.page-messages) {
     font-family: var(--font-mono);
     font-size: 0.6875rem;
     line-height: 1;
-    color: var(--text-muted);
+    color: var(--text-secondary);
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-input);
-    opacity: 0.55;
+    opacity: 0.85;
     pointer-events: none;
     user-select: none;
 }

devplacepy/static/css/components-docs.css

@@ -23,3 +23,15 @@
     align-items: center;
     gap: 0.75rem;
 }
+
+.docs-demo-ctx-target {
+    padding: 1.5rem;
+    cursor: context-menu;
+    user-select: none;
+}
+
+.docs-demo-thumb,
+.docs-demo-avatar {
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+}

devplacepy/static/css/engagement.css

@@ -193,7 +193,7 @@
 .poll-option-bar {
     position: absolute;
     inset: 0;
-    width: 0;
+    width: var(--poll-pct, 0);
     background: rgba(255, 107, 53, 0.18);
     transition: width 0.3s ease;
     z-index: 0;

devplacepy/static/css/game.css

@@ -71,6 +71,7 @@
 .hud-xp-fill {
     display: block;
     height: 100%;
+    width: var(--hud-xp, 0);
     background: var(--accent);
     transition: width 0.4s ease;
 }
@@ -436,6 +437,7 @@
 .quest-fill {
     display: block;
     height: 100%;
+    width: var(--quest-pct, 0);
     background: var(--accent);
 }
 

devplacepy/static/css/notifications.css

@@ -115,4 +115,7 @@
     }
 }
 
+.notif-icon-fixed {
+    flex-shrink: 0;
+}
 

devplacepy/static/css/profile.css

@@ -90,6 +90,7 @@ a.profile-stat-value:hover {
 
 .profile-level-bar .bar-fill {
     height: 100%;
+    width: var(--bar-pct, 0);
     background: var(--accent);
     border-radius: 3px;
 }
@@ -587,6 +588,7 @@ a.profile-stat-value:hover {
 .ai-quota-fill {
     display: block;
     height: 100%;
+    width: var(--quota-pct, 0);
     background: var(--accent);
     border-radius: 999px;
     transition: width 0.3s ease;

devplacepy/static/css/projects.css

@@ -300,3 +300,16 @@
     background: var(--bg-card-hover);
     color: var(--warning);
 }
+
+.project-platforms {
+    margin-bottom: 1.5rem;
+}
+
+.project-section-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}

devplacepy/static/css/services.css

@@ -414,3 +414,7 @@
     color: var(--text-secondary);
     padding: 0 0.5rem;
 }
+
+.service-field-input {
+    max-width: 160px;
+}