Merge pull request 'Align the platform look and feel with the devplace main-branch design' (#164) from blindxfish/devplacepy:pr1-terminal-theme into master
Some checks failed
DevPlace CI / test (push) Failing after 1h8m25s
Details

Browse Source 
Reviewed-on: #164
This commit is contained in:
retoor 2026-08-10 00:28:42 +02:00
commit f3b91ac75b
30 changed files with 151 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devplacepy/avatar.py
View File

@ -28,6 +28,6 @@ def generate_avatar_svg(seed: str) -> str:
initial = seed[:1].upper() if seed else "?" initial = seed[:1].upper() if seed else "?"
return ( return (
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">' '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">'
f'<rect width="100" height="100" rx="50" fill="#ff6b35"/>' f'<rect width="100" height="100" rx="50" fill="#b73f1e"/>'
f'<text x="50" y="65" text-anchor="middle" fill="white" font-size="40" font-weight="700" font-family="sans-serif">{initial}</text></svg>' f'<text x="50" y="65" text-anchor="middle" fill="white" font-size="40" font-weight="700" font-family="sans-serif">{initial}</text></svg>'
) )

BIN
devplacepy/static/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

14
devplacepy/static/css/admin.css
View File

@ -205,14 +205,14 @@
} }
.admin-btn-primary { .admin-btn-primary {
background: var(--accent, var(--info)); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-color: transparent; border-color: transparent;
} }
.admin-btn-primary:hover { .admin-btn-primary:hover {
background: var(--accent-hover, var(--accent)); background: var(--accent-hover);
color: var(--white); color: var(--on-accent);
} }
.admin-btn-danger { .admin-btn-danger {
@ -399,7 +399,7 @@
.pagination-btn:hover { .pagination-btn:hover {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-color: var(--accent); border-color: var(--accent);
text-decoration: none; text-decoration: none;
} }
@ -443,12 +443,12 @@
.pagination-page-active { .pagination-page-active {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.pagination-page-active:hover { .pagination-page-active:hover {
background: var(--accent-hover); background: var(--accent-hover);
color: var(--white); color: var(--on-accent);
} }
.pagination-ellipsis { .pagination-ellipsis {

2
devplacepy/static/css/auth.css
View File

@ -117,7 +117,7 @@
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-radius: var(--radius); border-radius: var(--radius);
} }

16
devplacepy/static/css/base.css
View File

@ -444,15 +444,13 @@ img {
} }
.btn-primary { .btn-primary {
background: var(--accent-gradient); background: var(--accent);
color: var(--white); color: var(--on-accent);
box-shadow: 0 2px 12px rgba(255, 95, 70, 0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--accent-hover);
color: var(--white); color: var(--white);
box-shadow: var(--glow-accent);
transform: translateY(-1px);
} }
.btn-secondary { .btn-secondary {
@ -554,7 +552,7 @@ img {
justify-content: center; justify-content: center;
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
color: var(--white); color: var(--on-accent);
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
} }
@ -589,7 +587,7 @@ img {
pointer-events: none; pointer-events: none;
} }
.presence-dot.online { background: var(--success, #2f9e44); } .presence-dot.online { background: var(--success); }
.award-badge { .award-badge {
position: absolute; position: absolute;
@ -650,7 +648,7 @@ img {
.nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .nav-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.nav-badge { .nav-badge {
position: absolute; top: -6px; right: -8px; z-index: 1; min-width: 16px; height: 16px; position: absolute; top: -6px; right: -8px; z-index: 1; min-width: 16px; height: 16px;
padding: 0 0.25rem; border-radius: 8px; background: var(--accent); color: var(--white); padding: 0 0.25rem; border-radius: 8px; background: var(--accent); color: var(--on-accent);
font-size: 0.6875rem; font-weight: 700; font-size: 0.6875rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
} }
@ -884,7 +882,7 @@ img {
button.comment-form-submit { button.comment-form-submit {
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
font-weight: 600; font-weight: 600;
font-size: 0.8125rem; font-size: 0.8125rem;
line-height: 1.4; line-height: 1.4;

4
devplacepy/static/css/chat.css
View File

@ -232,7 +232,7 @@ dp-chat[mode="embed"] {
.message-bubble.mine { .message-bubble.mine {
align-self: flex-end; align-self: flex-end;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
@ -429,7 +429,7 @@ dp-chat[mode="embed"] {
height: 36px; height: 36px;
padding: 0; padding: 0;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;

2
devplacepy/static/css/containers.css
View File

@ -209,7 +209,7 @@
.cm-suggest li:hover, .cm-suggest li:hover,
.cm-suggest li.cm-suggest-active { .cm-suggest li.cm-suggest-active {
background: var(--bg-hover, var(--border)); background: var(--bg-card-hover);
} }
.cm-suggest li.cm-suggest-active { .cm-suggest li.cm-suggest-active {

8
devplacepy/static/css/deepsearch.css
View File

@ -160,7 +160,7 @@
.ds-progress-bar { .ds-progress-bar {
height: 100%; height: 100%;
width: 0; width: 0;
background: var(--accent-gradient, var(--accent)); background: var(--accent-gradient);
transition: width 0.3s ease; transition: width 0.3s ease;
} }
@ -241,7 +241,7 @@
.ds-phase.is-done .ds-phase-dot { .ds-phase.is-done .ds-phase-dot {
background: var(--accent); background: var(--accent);
border-color: var(--accent); border-color: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.ds-phase.is-done .ds-phase-name { .ds-phase.is-done .ds-phase-name {
@ -546,7 +546,7 @@ dp-deepsearch-chat {
.ds-chat-msg.user .ds-chat-bubble { .ds-chat-msg.user .ds-chat-bubble {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.ds-chat-msg.agent .ds-chat-bubble { .ds-chat-msg.agent .ds-chat-bubble {
@ -597,7 +597,7 @@ dp-deepsearch-chat {
.ds-chat-send { .ds-chat-send {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border: none; border: none;
border-radius: var(--radius-input); border-radius: var(--radius-input);
padding: 0 var(--space-md); padding: 0 var(--space-md);

2
devplacepy/static/css/docs-chat.css
View File

@ -292,7 +292,7 @@ dp-docs-chat {
.docs-chat-send { .docs-chat-send {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;

4
devplacepy/static/css/docs.css
View File

@ -431,7 +431,7 @@ textarea.param-input {
.format-option.active { .format-option.active {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.format-fixed { .format-fixed {
@ -621,7 +621,7 @@ pre.code-pre > .code-gutter {
.docs-search-snippet mark { .docs-search-snippet mark {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
padding: 0 0.125rem; padding: 0 0.125rem;
border-radius: 3px; border-radius: 3px;
} }

13
devplacepy/static/css/feed.css
View File

@ -38,9 +38,8 @@
} }
.feed-nav-btn.active { .feed-nav-btn.active {
background: var(--accent-gradient); background: var(--accent);
color: var(--white); color: var(--on-accent);
box-shadow: var(--glow-accent);
} }
.feed-nav-actions { .feed-nav-actions {
@ -285,7 +284,7 @@
min-width: 1.25rem; min-width: 1.25rem;
padding: 0 0.375rem; padding: 0 0.375rem;
border-radius: 999px; border-radius: 999px;
background: var(--success, #2f9e44); background: var(--success);
color: var(--white); color: var(--white);
font-size: 0.6875rem; font-size: 0.6875rem;
text-align: center; text-align: center;
@ -368,14 +367,14 @@
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 50%; border-radius: 50%;
background: var(--accent-gradient); background: var(--accent);
color: var(--white); color: var(--on-accent);
font-size: 2rem; font-size: 2rem;
line-height: 1; line-height: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: var(--glow-accent); box-shadow: var(--shadow);
z-index: var(--z-fab); z-index: var(--z-fab);
border: none; border: none;
cursor: pointer; cursor: pointer;

4
devplacepy/static/css/issues.css
View File

@ -35,11 +35,11 @@
text-decoration: none; text-decoration: none;
} }
.issues-filter:hover { .issues-filter:hover {
background: var(--bg-hover); background: var(--bg-card-hover);
} }
.issues-filter.active { .issues-filter.active {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-color: var(--accent); border-color: var(--accent);
} }
.issues-modal-hint { .issues-modal-hint {

22
devplacepy/static/css/landing.css
View File

@ -70,7 +70,7 @@
.dashboard-btn-primary { .dashboard-btn-primary {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-color: var(--accent); border-color: var(--accent);
font-weight: 700; font-weight: 700;
padding: 0.55rem 1.5rem; padding: 0.55rem 1.5rem;
@ -123,7 +123,7 @@
.dashboard-xp-fill { .dashboard-xp-fill {
height: 100%; height: 100%;
background: var(--accent-gradient, linear-gradient(90deg, var(--accent), #f0932b)); background: var(--accent-gradient);
border-radius: 3px; border-radius: 3px;
transition: width 0.4s ease; transition: width 0.4s ease;
} }
@ -171,7 +171,7 @@
.dashboard-posts-grid { .dashboard-posts-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 0.875rem; gap: 0.875rem;
} }
@ -466,7 +466,7 @@
font-size: 1.125rem; font-size: 1.125rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
font-weight: 700; font-weight: 700;
} }
@ -567,7 +567,7 @@
padding: 0.7rem 2rem; padding: 0.7rem 2rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 700; font-weight: 700;
} }
@ -637,7 +637,7 @@
.landing-xp-fill { .landing-xp-fill {
height: 100%; height: 100%;
background: var(--accent-gradient, linear-gradient(90deg, var(--accent), #f0932b)); background: var(--accent-gradient);
border-radius: 3px; border-radius: 3px;
transition: width 0.4s ease; transition: width 0.4s ease;
} }
@ -970,7 +970,7 @@
margin-top: auto; margin-top: auto;
align-self: flex-start; align-self: flex-start;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border: none; border: none;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 0.6rem 1.1rem; padding: 0.6rem 1.1rem;
@ -1004,6 +1004,12 @@
z-index: 1; z-index: 1;
} }
.landing-game-dashboard {
max-width: 1200px;
padding: 0 1.25rem;
margin-top: 2rem;
}
.landing-game-body { .landing-game-body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1105,7 +1111,7 @@
font-size: 1.05rem; font-size: 1.05rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
transition: filter 0.15s ease, transform 0.15s ease; transition: filter 0.15s ease, transform 0.15s ease;

2
devplacepy/static/css/news.css
View File

@ -257,7 +257,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
border-radius: var(--radius); border-radius: var(--radius);
} }

8
devplacepy/static/css/profile.css
View File

@ -49,7 +49,7 @@
} }
.profile-presence.online { .profile-presence.online {
color: var(--success, #2f9e44); color: var(--success);
} }
.profile-presence::before { .profile-presence::before {
@ -64,7 +64,7 @@
} }
.profile-presence.online::before { .profile-presence.online::before {
background: var(--success, #2f9e44); background: var(--success);
} }
.profile-stats { .profile-stats {
@ -231,7 +231,7 @@ a.profile-stat-value:hover {
.profile-tab.active { .profile-tab.active {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.profile-posts { .profile-posts {
@ -464,7 +464,7 @@ a.profile-stat-value:hover {
} }
.ai-correction-status[data-state="success"] { .ai-correction-status[data-state="success"] {
color: var(--success, #2f9e44); color: var(--success);
} }
.ai-correction-status[data-state="error"] { .ai-correction-status[data-state="error"] {

4
devplacepy/static/css/project_files.css
View File

@ -100,7 +100,7 @@
.pf-node-row.active { .pf-node-row.active {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.pf-node-row.pf-selected { .pf-node-row.pf-selected {
@ -110,7 +110,7 @@
.pf-node-row.pf-selected.active { .pf-node-row.pf-selected.active {
background: var(--accent); background: var(--accent);
color: var(--white); color: var(--on-accent);
} }
.pf-node-row.pf-dragging { .pf-node-row.pf-dragging {

5
devplacepy/static/css/projects.css
View File

@ -27,9 +27,8 @@
} }
.projects-tab.active { .projects-tab.active {
background: var(--accent-gradient); background: var(--accent);
color: var(--white); color: var(--on-accent);
box-shadow: var(--glow-accent);
} }
.projects-header { .projects-header {

5
devplacepy/static/css/sidebar.css
View File

@ -76,10 +76,9 @@
.sidebar-link.active, .sidebar-link.active,
.sidebar-link.active:hover { .sidebar-link.active:hover {
background: var(--accent-gradient); background: var(--accent);
color: var(--white); color: var(--on-accent);
font-weight: 600; font-weight: 600;
box-shadow: var(--glow-accent);
} }
.sidebar-dot { .sidebar-dot {

62
devplacepy/static/css/variables.css
View File

@ -1,41 +1,41 @@
/* retoor <retoor@molodetz.nl> */ /* retoor <retoor@molodetz.nl> */
:root { :root {
--bg-primary: #080413; --bg-primary: #271b5b;
--bg-secondary: #120821; --bg-secondary: #1a1736;
--bg-card: #1a1030; --bg-card: #13112a;
--bg-card-hover: #241640; --bg-card-hover: #1a1736;
--bg-input: #140b26; --bg-input: #1a1736;
--bg-modal: #1a1030; --bg-modal: #13112a;
--accent: #ff6b35; --accent: #b73f1e;
--accent-rgb: 255, 107, 53; --accent-rgb: 183, 63, 30;
--accent-hover: #ff7d4d; --accent-hover: #af3050;
--accent-light: rgba(255, 107, 53, 0.12); --accent-light: rgba(183, 63, 30, 0.14);
--accent-2: #ff4f8b; --accent-2: #af3050;
--accent-gradient: linear-gradient(135deg, #ff6b3d, #ff4f6d); --accent-gradient: linear-gradient(135deg, #b73f1e, #af3050, #8f3b71);
--on-accent: #fff;
--text-primary: #f4eefb; --text-primary: #e9e4ff;
--text-secondary: #b8a8d0; --text-secondary: #c8c3e5;
--text-muted: #7a6a90; --text-muted: #9b93c9;
--border: rgba(255, 255, 255, 0.08); --border: #11101f;
--border-light: rgba(255, 255, 255, 0.14); --border-light: #2f2a55;
--success: #4caf50; --success: #34d399;
--warning: #ff9800; --warning: #fbbf24;
--danger: #e53935; --danger: #f87171;
--info: #42a5f5; --info: #60a5fa;
--radius: 12px; --radius: 8px;
--radius-input: 14px; --radius-input: 8px;
--radius-lg: 18px; --radius-lg: 12px;
--radius-xl: 24px; --radius-xl: 16px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-sm: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.28); --shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05);
--glow-accent: 0 6px 24px rgba(255, 95, 70, 0.45);
--white: #fff; --white: #fff;
--overlay-dark: rgba(0, 0, 0, 0.7); --overlay-dark: rgba(0, 0, 0, 0.7);
@ -48,7 +48,7 @@
--space-xl: 1.5rem; --space-xl: 1.5rem;
--space-2xl: 2rem; --space-2xl: 2rem;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace; --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
--nav-height: 56px; --nav-height: 56px;
@ -76,5 +76,5 @@
--topic-fun: #ffab00; --topic-fun: #ffab00;
--topic-politics: #00bcd4; --topic-politics: #00bcd4;
--bg-gradient: linear-gradient(135deg, #080413 0%, #160a28 50%, #080413 100%); --bg-gradient: linear-gradient(135deg, #271b5b 0%, #1d1545 50%, #271b5b 100%);
} }

BIN
devplacepy/static/icon-192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
devplacepy/static/icon-512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
devplacepy/static/icon-maskable-512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

14
devplacepy/static/js/StatisticsCharts.js
View File

@ -1,14 +1,14 @@
// retoor <retoor@molodetz.nl> // retoor <retoor@molodetz.nl>
const CHART_COLORS = [ const CHART_COLORS = [
"#ff6b35", "#b73f1e",
"#7c4dff", "#8f3b71",
"#00bfa5", "#34d399",
"#448aff", "#3a4b70",
"#ffab00", "#ffab00",
"#ff5252", "#f87171",
"#42a5f5", "#61477c",
"#ff4f8b", "#af3050",
]; ];
export class StatisticsCharts { export class StatisticsCharts {

4
devplacepy/static/manifest.json
View File

@ -9,8 +9,8 @@
"orientation": "any", "orientation": "any",
"lang": "en", "lang": "en",
"dir": "ltr", "dir": "ltr",
"background_color": "#0f0a1a", "background_color": "#271b5b",
"theme_color": "#0f0a1a", "theme_color": "#271b5b",
"icons": [ "icons": [
{ {
"src": "/static/icon-192.png", "src": "/static/icon-192.png",

16
devplacepy/static/offline.html
View File

@ -7,11 +7,11 @@
<title>Offline - DevPlace</title> <title>Offline - DevPlace</title>
<style> <style>
:root { :root {
--bg-primary: #0f0a1a; --bg-primary: #271b5b;
--bg-card: #221436; --bg-card: #13112a;
--accent: #ff6b35; --accent: #b73f1e;
--text-primary: #f0e8f8; --text-primary: #e9e4ff;
--text-muted: #9a8db0; --text-muted: #9b93c9;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { body {
@ -22,21 +22,21 @@
justify-content: center; justify-content: center;
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
padding: 1.5rem; padding: 1.5rem;
} }
.offline-card { .offline-card {
max-width: 360px; max-width: 360px;
text-align: center; text-align: center;
background: var(--bg-card); background: var(--bg-card);
border-radius: 16px; border-radius: 12px;
padding: 2.5rem 2rem; padding: 2.5rem 2rem;
} }
.offline-mark { .offline-mark {
width: 72px; width: 72px;
height: 72px; height: 72px;
margin: 0 auto 1.25rem; margin: 0 auto 1.25rem;
border-radius: 16px; border-radius: 12px;
background: var(--accent); background: var(--accent);
color: var(--bg-primary); color: var(--bg-primary);
font-size: 2.75rem; font-size: 2.75rem;

BIN
devplacepy/static/og-default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 63 KiB

13
devplacepy/static/og-default.svg
View File

@ -1,13 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630"> <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<rect width="1200" height="630" fill="#0f0a1a"/> <rect width="1200" height="630" fill="#271b5b"/>
<rect x="0" y="0" width="1200" height="630" fill="url(#g)"/> <rect x="0" y="0" width="1200" height="630" fill="url(#g)"/>
<defs> <defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1"> <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff6b35" stop-opacity="0.15"/> <stop offset="0%" stop-color="#b73f1e" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#1a1028" stop-opacity="0"/> <stop offset="100%" stop-color="#13112a" stop-opacity="0.6"/>
</linearGradient> </linearGradient>
</defs> </defs>
<text x="600" y="280" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="96" font-weight="800" fill="#f0e8f8">DevPlace</text> <text x="600" y="290" text-anchor="middle" font-family="'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif" font-size="104" font-weight="800" fill="#e9e4ff">DevPlace</text>
<text x="600" y="370" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="36" fill="#b8a8d0">The Developer Social Network</text> <rect x="430" y="326" width="340" height="8" rx="4" fill="#b73f1e"/>
<circle cx="600" cy="480" r="8" fill="#ff6b35"/> <text x="600" y="404" text-anchor="middle" font-family="'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif" font-size="36" fill="#c8c3e5">The Developer Social Network</text>
<circle cx="600" cy="478" r="8" fill="#b73f1e"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 832 B

After

Width:  |  Height:  |  Size: 908 B

2
devplacepy/templates/base.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#0f0a1a"> <meta name="theme-color" content="#271b5b">
<meta name="asset-version" content="{{ static_version }}"> <meta name="asset-version" content="{{ static_version }}">
<title>{% if page_title %}{{ page_title }}{% else %}DevPlace - The Developer Social Network{% endif %}</title> <title>{% if page_title %}{{ page_title }}{% else %}DevPlace - The Developer Social Network{% endif %}</title>
<meta name="description" content="{% if meta_description %}{{ meta_description }}{% else %}Track industry shifts. Discover bold releases. Share what you're building in an open environment built by developers, for developers.{% endif %}"> <meta name="description" content="{% if meta_description %}{{ meta_description }}{% else %}Track industry shifts. Discover bold releases. Share what you're building in an open environment built by developers, for developers.{% endif %}">

70
devplacepy/templates/docs/styles-colors.html
View File

@ -8,7 +8,7 @@ The palette is defined once, as CSS custom properties on `:root` in `static/css/
DevPlace is kept open for hours, often at night. The theme is therefore **dark, low-glare, and deliberately quiet**: deep violet-black backgrounds, soft lavender text, and a *single* warm accent. DevPlace is kept open for hours, often at night. The theme is therefore **dark, low-glare, and deliberately quiet**: deep violet-black backgrounds, soft lavender text, and a *single* warm accent.
- **One accent, used sparingly.** A single orange (`--accent`, `#ff6b35`) marks what matters: the primary action, the active navigation item, links, and the current vote. Because nothing else competes for it, the accent always means "act on this". A second strong colour used decoratively breaks it. - **One accent, used sparingly.** A single burnt orange (`--accent`, `#b73f1e`) marks what matters: the primary action, the active navigation item, links, and the current vote. Because nothing else competes for it, the accent always means "act on this". A second strong colour used decoratively breaks it.
- **Backgrounds layer by elevation.** A near-black page sits behind slightly lighter cards, behind a lighter hover state. Depth comes from these few background steps plus a soft shadow, not from borders alone. - **Backgrounds layer by elevation.** A near-black page sits behind slightly lighter cards, behind a lighter hover state. Depth comes from these few background steps plus a soft shadow, not from borders alone.
- **Text is a three-step hierarchy.** Primary for content, secondary for supporting text, muted for metadata. There is no fourth shade. - **Text is a three-step hierarchy.** Primary for content, secondary for supporting text, muted for metadata. There is no fourth shade.
- **Colour with meaning is reserved.** Status colours (success, warning, danger, info) and topic colours carry semantics. They never "brighten up" a layout. - **Colour with meaning is reserved.** Status colours (success, warning, danger, info) and topic colours carry semantics. They never "brighten up" a layout.
@ -19,20 +19,20 @@ Layered from the page backdrop up to interactive surfaces.
| Token | Value | Use it for | Do not | | Token | Value | Use it for | Do not |
|-------|-------|-----------|--------| |-------|-------|-----------|--------|
| `--bg-primary` | `#080413` | The page backdrop (`body`). | Put cards or inputs directly on it without a surface token. | | `--bg-primary` | `#271b5b` | The page backdrop (`body`). | Put cards or inputs directly on it without a surface token. |
| `--bg-secondary` | `#120821` | The top nav, dropdowns, the mobile panel, demo frames. | Use as a card body in the content area. | | `--bg-secondary` | `#1a1736` | The top nav, dropdowns, the mobile panel, demo frames. | Use as a card body in the content area. |
| `--bg-card` | `#1a1030` | Cards, panels, the standard content surface. | Use for the page backdrop. | | `--bg-card` | `#13112a` | Cards, panels, the standard content surface. | Use for the page backdrop. |
| `--bg-card-hover` | `#241640` | Hover state of cards, list rows, and ghost buttons. | Use as a resting background. | | `--bg-card-hover` | `#1a1736` | Hover state of cards, list rows, and ghost buttons. | Use as a resting background. |
| `--bg-input` | `#140b26` | Inputs, textareas, selects. | Use as a content card surface. | | `--bg-input` | `#1a1736` | Inputs, textareas, selects. | Use as a content card surface. |
| `--bg-modal` | `#1a1030` | Modal card body. | Use outside modals. | | `--bg-modal` | `#13112a` | Modal card body. | Use outside modals. |
| `--bg-gradient` | violet gradient | Large hero / landing surfaces only. | Apply to small components. | | `--bg-gradient` | violet gradient | Large hero / landing surfaces only. | Apply to small components. |
## Accent ## Accent
| Token | Value | Use it for | Do not | | Token | Value | Use it for | Do not |
|-------|-------|-----------|--------| |-------|-------|-----------|--------|
| `--accent` | `#ff6b35` | The single primary action, active nav link, links, the voted star, focus border. | A second decorative colour, large fills, or more than one primary action per view. | | `--accent` | `#b73f1e` | The single primary action, active nav link, links, the voted star, focus border. | A second decorative colour, large fills, or more than one primary action per view. |
| `--accent-hover` | `#ff7d4d` | Hover state of accent surfaces and links. | Resting state. | | `--accent-hover` | `#af3050` | Hover state of accent surfaces and links. | Resting state. |
| `--accent-light` | `rgba(255,107,53,.12)` | The tinted background behind an *active* nav item or self-highlight row. | Body text (too low contrast). | | `--accent-light` | `rgba(255,107,53,.12)` | The tinted background behind an *active* nav item or self-highlight row. | Body text (too low contrast). |
| `--accent-rgb` | `255, 107, 53` | Composing any other accent tint: `rgba(var(--accent-rgb), 0.3)`. | Writing `rgba(255, 107, 53, ...)` literally anywhere. | | `--accent-rgb` | `255, 107, 53` | Composing any other accent tint: `rgba(var(--accent-rgb), 0.3)`. | Writing `rgba(255, 107, 53, ...)` literally anywhere. |
@ -42,19 +42,19 @@ A strict three-step hierarchy. Never introduce a fourth text shade.
| Token | Value | Use it for | | Token | Value | Use it for |
|-------|-------|-----------| |-------|-------|-----------|
| `--text-primary` | `#f4eefb` | Headings and body content. | | `--text-primary` | `#e9e4ff` | Headings and body content. |
| `--text-secondary` | `#b8a8d0` | Supporting copy, labels, secondary buttons. | | `--text-secondary` | `#c8c3e5` | Supporting copy, labels, secondary buttons. |
| `--text-muted` | `#7a6a90` | Timestamps, counts, hints, metadata. | | `--text-muted` | `#9b93c9` | Timestamps, counts, hints, metadata. |
## Borders, radius, and shadow ## Borders, radius, and shadow
| Token | Value | Use it for | | Token | Value | Use it for |
|-------|-------|-----------| |-------|-------|-----------|
| `--border` | `rgba(255,255,255,.08)` | The default hairline on cards, inputs, dividers. | | `--border` | `#11101f` | The default hairline on cards, inputs, dividers. |
| `--border-light` | `rgba(255,255,255,.14)` | Hover/emphasis borders. | | `--border-light` | `#2f2a55` | Hover/emphasis borders. |
| `--radius` | `12px` | Buttons, inputs, small controls. | | `--radius` | `8px` | Buttons, inputs, small controls. |
| `--radius-lg` | `18px` | Cards and panels. | | `--radius-lg` | `12px` | Cards and panels. |
| `--radius-xl` | `24px` | Large feature surfaces. | | `--radius-xl` | `16px` | Large feature surfaces. |
| `--shadow-sm` / `--shadow` / `--shadow-lg` | (shadows) | Card hover, raised panels, modals respectively. | | `--shadow-sm` / `--shadow` / `--shadow-lg` | (shadows) | Card hover, raised panels, modals respectively. |
## Status colours (semantic only) ## Status colours (semantic only)
@ -63,10 +63,10 @@ These encode meaning and must only be used to convey it.
| Token | Value | Means | | Token | Value | Means |
|-------|-------|-------| |-------|-------|-------|
| `--success` | `#4caf50` | Success, healthy, online. | | `--success` | `#34d399` | Success, healthy, online. |
| `--warning` | `#ff9800` | Caution; also the colour of a cast vote star. | | `--warning` | `#fbbf24` | Caution; also the colour of a cast vote star. |
| `--danger` | `#e53935` | Errors, destructive actions, the create-post button. | | `--danger` | `#f87171` | Errors, destructive actions, the create-post button. |
| `--info` | `#42a5f5` | Neutral information. | | `--info` | `#60a5fa` | Neutral information. |
## Topic colours (badges only) ## Topic colours (badges only)
@ -83,7 +83,7 @@ Used exclusively for topic badges (`.badge-devlog`, `.badge-showcase`, …) and
## Rules ## Rules
1. **Never hardcode a colour.** Use the token: `color: var(--text-secondary)`, never `color: #b8a8d0`. If a value is missing, add a token to `variables.css` rather than inlining a hex. Accent tints at other alphas compose the channel token: `rgba(var(--accent-rgb), 0.3)`. 1. **Never hardcode a colour.** Use the token: `color: var(--text-secondary)`, never `color: #c8c3e5`. If a value is missing, add a token to `variables.css` rather than inlining a hex. Accent tints at other alphas compose the channel token: `rgba(var(--accent-rgb), 0.3)`.
2. **Never give a global token a fallback.** Write `var(--accent)`, never `var(--accent, #hex)`. A fallback silently masks a dead or misspelled token: the page keeps rendering, but from a value nobody maintains. 2. **Never give a global token a fallback.** Write `var(--accent)`, never `var(--accent, #hex)`. A fallback silently masks a dead or misspelled token: the page keeps rendering, but from a value nobody maintains.
3. **Feature palettes are file-scoped token blocks.** A page with its own semantic palette (the Devii terminal, the AI-usage grades) defines it once as custom properties at the top of its own stylesheet (`devii.css` scopes `--devii-*` on `devii-terminal`; `isslop.css` scopes `--isslop-*` on `:root`) and references only those below. Raw hex values may exist in exactly two places: `variables.css` and these file-scoped blocks. 3. **Feature palettes are file-scoped token blocks.** A page with its own semantic palette (the Devii terminal, the AI-usage grades) defines it once as custom properties at the top of its own stylesheet (`devii.css` scopes `--devii-*` on `devii-terminal`; `isslop.css` scopes `--isslop-*` on `:root`) and references only those below. Raw hex values may exist in exactly two places: `variables.css` and these file-scoped blocks.
4. **One accent per view.** Exactly one primary action should carry `--accent`. Everything else is `--btn-secondary`/ghost. 4. **One accent per view.** Exactly one primary action should carry `--accent`. Everything else is `--btn-secondary`/ghost.
@ -124,20 +124,20 @@ The reference below is rendered live from the tokens, so it always reflects the
<div class="component-demo"> <div class="component-demo">
<div class="component-demo-title">Live palette</div> <div class="component-demo-title">Live palette</div>
<div class="sg-swatch-grid"> <div class="sg-swatch-grid">
<div class="sg-swatch"><span class="sg-chip sg-chip-bg-primary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-primary</span><span class="sg-swatch-hex">#080413</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-bg-primary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-primary</span><span class="sg-swatch-hex">#271b5b</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-bg-secondary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-secondary</span><span class="sg-swatch-hex">#120821</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-bg-secondary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-secondary</span><span class="sg-swatch-hex">#1a1736</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-bg-card"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-card</span><span class="sg-swatch-hex">#1a1030</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-bg-card"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-card</span><span class="sg-swatch-hex">#13112a</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-bg-card-hover"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-card-hover</span><span class="sg-swatch-hex">#241640</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-bg-card-hover"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--bg-card-hover</span><span class="sg-swatch-hex">#1a1736</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-accent"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--accent</span><span class="sg-swatch-hex">#ff6b35</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-accent"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--accent</span><span class="sg-swatch-hex">#b73f1e</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-accent-hover"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--accent-hover</span><span class="sg-swatch-hex">#ff7d4d</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-accent-hover"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--accent-hover</span><span class="sg-swatch-hex">#af3050</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-text-primary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--text-primary</span><span class="sg-swatch-hex">#f4eefb</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-text-primary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--text-primary</span><span class="sg-swatch-hex">#e9e4ff</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-text-secondary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--text-secondary</span><span class="sg-swatch-hex">#b8a8d0</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-text-secondary"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--text-secondary</span><span class="sg-swatch-hex">#c8c3e5</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-text-muted"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--text-muted</span><span class="sg-swatch-hex">#7a6a90</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-text-muted"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--text-muted</span><span class="sg-swatch-hex">#9b93c9</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-border"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--border</span><span class="sg-swatch-hex">rgba(255,255,255,.08)</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-border"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--border</span><span class="sg-swatch-hex">rgba(255,255,255,.08)</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-success"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--success</span><span class="sg-swatch-hex">#4caf50</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-success"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--success</span><span class="sg-swatch-hex">#34d399</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-warning"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--warning</span><span class="sg-swatch-hex">#ff9800</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-warning"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--warning</span><span class="sg-swatch-hex">#fbbf24</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-danger"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--danger</span><span class="sg-swatch-hex">#e53935</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-danger"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--danger</span><span class="sg-swatch-hex">#f87171</span></span></div>
<div class="sg-swatch"><span class="sg-chip sg-chip-info"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--info</span><span class="sg-swatch-hex">#42a5f5</span></span></div> <div class="sg-swatch"><span class="sg-chip sg-chip-info"></span><span class="sg-swatch-info"><span class="sg-swatch-name">--info</span><span class="sg-swatch-hex">#60a5fa</span></span></div>
</div> </div>
</div> </div>

2
devplacepy/templates/landing.html
View File

@ -146,7 +146,7 @@
</section> </section>
{% endif %} {% endif %}
<section class="landing-game" aria-labelledby="landing-game-heading"> <section class="landing-game{% if user %} landing-game-dashboard{% endif %}" aria-labelledby="landing-game-heading">
<div class="landing-game-glow"></div> <div class="landing-game-glow"></div>
<div class="landing-game-body"> <div class="landing-game-body">
<span class="landing-game-eyebrow">New on DevPlace</span> <span class="landing-game-eyebrow">New on DevPlace</span>