From 3f0f9907ed34e5227080861ce3ba55500f334dc6 Mon Sep 17 00:00:00 2001 From: Andrew Simonson Date: Tue, 17 Feb 2026 14:55:20 -0600 Subject: [PATCH] projects restyle and timeline deprecation --- src/static/css/App.css | 374 +++++++++++++++++++-------- src/templates/partials/project.html | 53 ++-- src/templates/partials/timeline.html | 13 - src/templates/projects.html | 2 +- 4 files changed, 292 insertions(+), 150 deletions(-) delete mode 100755 src/templates/partials/timeline.html diff --git a/src/static/css/App.css b/src/static/css/App.css index c61d44c..d96ed43 100755 --- a/src/static/css/App.css +++ b/src/static/css/App.css @@ -621,101 +621,285 @@ tr { } +/* Project List Grid */ .projectList { - padding: 0px; - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 480px)); gap: 1.5em; - margin-left: auto; - margin-right: auto; width: 100%; } +/* Project Card */ .project { - border-top: .3rem rgba(var(--accent-rgb), 0.8) solid; - background-color: rgba(var(--bg-card-rgb), 0.85); - border-radius: 0.5em; - transition: transform 0.3s ease, box-shadow 0.3s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + position: relative; + background: rgba(var(--bg-card-rgb), 0.92); + border: 1px solid rgba(var(--accent-rgb), 0.15); + border-left: 3px solid rgba(var(--accent-rgb), 0.75); + display: flex; + flex-direction: column; + overflow: hidden; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); +} + +/* Corner bracket: top-right */ +.project::before { + content: ''; + position: absolute; + top: -1px; + right: -1px; + width: 18px; + height: 18px; + border-top: 2px solid rgba(var(--accent-rgb), 0.5); + border-right: 2px solid rgba(var(--accent-rgb), 0.5); + z-index: 5; + pointer-events: none; + transition: border-color 0.3s ease; +} + +/* Corner bracket: bottom-left */ +.project::after { + content: ''; + position: absolute; + bottom: -1px; + left: 2px; + width: 18px; + height: 18px; + border-bottom: 2px solid rgba(var(--accent-rgb), 0.5); + border-left: 2px solid rgba(var(--accent-rgb), 0.5); + z-index: 5; + pointer-events: none; + transition: border-color 0.3s ease; } .project:hover { - transform: translateY(-4px); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); + border-color: rgba(var(--accent-rgb), 0.45); + border-left-color: rgb(var(--accent-rgb)); + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--accent-rgb), 0.08); } -.projTitle { - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--border-subtle); +.project:hover::before, +.project:hover::after { + border-color: rgba(var(--accent-rgb), 0.9); } -.projTitle>* { - margin: 0; -} - -.projTitle h3 { - font-size: 1.2rem; - color: var(--text-heading); -} - -.projBody { +/* Project Image */ +.projImageWrap { position: relative; - z-index: 3; - display: flex; - min-height: 15em; + width: 100%; + height: 200px; + overflow: hidden; + background: #0c0c0c; + flex-shrink: 0; } -.projBody p { +.projImageWrap img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center top; + filter: saturate(0.6) brightness(0.7); + transition: filter 0.5s ease, transform 0.5s ease; + display: block; +} + +.project:hover .projImageWrap img { + filter: saturate(0.85) brightness(0.85); + transform: scale(1.04); +} + +/* Scanlines overlay */ +.projImageWrap::before { + content: ''; + position: absolute; + inset: 0; + background: repeating-linear-gradient( + 0deg, + transparent, + transparent 3px, + rgba(0, 0, 0, 0.1) 3px, + rgba(0, 0, 0, 0.1) 4px + ); + z-index: 2; + pointer-events: none; +} + +/* Gradient fade into card body */ +.projImageWrap::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 55%; + background: linear-gradient(to bottom, transparent, rgba(var(--bg-card-rgb), 0.98)); + z-index: 3; +} + +/* Placeholder for projects without an image */ +.projImagePlaceholder { + width: 100%; + height: 100%; + background-image: + repeating-linear-gradient( + 45deg, + rgba(var(--accent-rgb), 0.04) 0px, + rgba(var(--accent-rgb), 0.04) 1px, + transparent 1px, + transparent 8px + ), + repeating-linear-gradient( + -45deg, + rgba(var(--accent-rgb), 0.04) 0px, + rgba(var(--accent-rgb), 0.04) 1px, + transparent 1px, + transparent 8px + ); +} + +/* Status Badge */ +.proj-status-badge { + position: absolute; + top: 0.75em; + right: 0.75em; + z-index: 4; + display: inline-flex; + align-items: center; + gap: 0.45em; + padding: 0.25em 0.65em 0.25em 0.5em; + font-family: 'Courier New', Courier, monospace; + font-size: 0.62rem; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + border: 1px solid currentColor; + background: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(6px); +} + +.proj-status-badge.complete { color: var(--status-online); } +.proj-status-badge.WIP { color: var(--status-degraded); } +.proj-status-badge.incomplete { color: var(--status-offline); } + +.status-indicator { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background: currentColor; + box-shadow: 0 0 6px currentColor; + flex-shrink: 0; +} + +.proj-status-badge.complete .status-indicator { + animation: statusPulse 2.5s ease-in-out infinite; +} + +.proj-status-badge.WIP .status-indicator { + animation: statusPulse 0.9s ease-in-out infinite; +} + +.proj-status-badge.incomplete .status-indicator { + opacity: 0.45; +} + +@keyframes statusPulse { + 0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; } + 50% { opacity: 0.2; box-shadow: none; } +} + +/* Project Content */ +.projContent { + padding: 1.1em 1.4em 1.4em 1.2em; + display: flex; + flex-direction: column; + flex: 1; + gap: 0.6em; +} + +.project h3 { margin: 0; + font-size: 1.05rem; + font-weight: 700; + color: var(--text-heading); + letter-spacing: 0.02em; + line-height: 1.3; + display: block; + border-bottom: none; +} + +.projDesc { + font-size: 0.83rem; + line-height: 1.65; + color: rgba(236, 235, 235, 0.65); + margin: 0; + flex: 1; +} + +/* Project Links */ +.projLinks { + display: flex; + flex-wrap: wrap; + gap: 0.5em; + margin-top: auto; + padding-top: 0.25em; +} + +.proj-link { + display: inline-flex; + align-items: center; + gap: 0.45em; + padding: 0.3em 0.8em 0.3em 0.6em; + border: 1px solid rgba(var(--accent-rgb), 0.35); + background: rgba(var(--accent-rgb), 0.07); + color: rgba(236, 235, 235, 0.75); + text-decoration: none; + font-family: 'Courier New', Courier, monospace; + font-size: 0.68rem; + letter-spacing: 0.1em; + text-transform: uppercase; + transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; +} + +.proj-link::before { + content: '>'; + color: rgba(var(--accent-rgb), 0.7); + font-weight: 700; + transition: color 0.2s ease; +} + +.proj-link:hover { + background: rgba(var(--accent-rgb), 0.18); + border-color: rgba(var(--accent-rgb), 0.7); + color: #ecebeb; +} + +.proj-link:hover::before { + color: rgb(var(--accent-rgb)); +} + +.proj-link img.projectLink { + height: 0.9em; + width: auto; + filter: invert(1) opacity(0.75); + padding: 0; + margin: 0; + transition: filter 0.2s ease; +} + +.proj-link:hover img.projectLink { + filter: invert(1); } .grow { flex-grow: 1; } -.projImage > img { - width: 100%; - height: 100%; - max-height: 50vh; - object-fit: contain; - border-radius: 1em; -} - -.projImage { - flex: 0 0 min(100%, 25em); - margin: 1em 0; -} - -.project .projTitle { - padding-top: 1rem; - z-index: inherit; -} - -.backedBody { - padding: .25em; - height: unset !important; -} - -.projDesc { - max-width: 50em; - margin: 0 2em; -} - .tab { display: inline; float: right; } -.project h3 { - display: inline-block; - border-bottom: black solid .2rem; -} - -.projectLink { - margin-top: auto; - height: 3rem; -} - .bottomBox a, .placeholding { vertical-align: middle; display: inline; @@ -723,17 +907,6 @@ tr { height: unset; } -.project a img, .project a p { - padding: .5rem; - filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(52deg) brightness(106%) contrast(101%); - transition: filter 0.2s ease, transform 0.2s ease; -} - -.project a img:hover, .project a p:hover { - filter: invert(66%) sepia(0%) saturate(3964%) hue-rotate(99deg) brightness(100%) contrast(105%); - transform: scale(1.1); -} - .footer { position: fixed; bottom: 0; @@ -1101,30 +1274,6 @@ tr { text-decoration: underline; } -.timeline-item { - border-left: solid rgba(var(--accent-rgb), 0.6) 3px; - padding-left: 1em; - margin-bottom: 1.5em; - transition: border-color 0.3s ease; -} - -.timeline-item:hover { - border-left-color: var(--accent); -} - -.timeline-item h2 { - margin-top: 0px; - margin-left: .5em; - font-family: robotoreg; -} - -.timeline-item p { - margin-bottom: 0px; - padding-bottom: 2em; - padding-left: 3em; - font-family: robotoreg; -} - .datetext { margin: .25em; font-size: small; @@ -1173,6 +1322,10 @@ tr { @media screen and (max-width: 1400px) { + .projectList { + grid-template-columns: repeat(auto-fill, minmax(280px, 420px)); + } + #homepage { flex-direction: column; } @@ -1181,7 +1334,7 @@ tr { min-width: 0; } - /* fuckin iOS gotta render gaussian blurs differently so better fuckin uhh make rasters for mobile users */ + /* iOS gotta render gaussian blurs differently so better uhh make rasters for mobile users */ /* Be sure to uncomment this if we ever stop using jebwin memes */ /* #homeIcon { @@ -1304,11 +1457,6 @@ tr { .projDesc { margin: 0; } - - .timeline { - padding-left: 1em; - } - .col { width: 100%; margin-bottom: 0; @@ -1374,6 +1522,16 @@ tr { } } +@media screen and (max-width: 600px) { + .projectList { + grid-template-columns: 1fr; + } + + .projImageWrap { + height: 160px; + } +} + /* Reusable Card & State Components */ .page-subtitle { text-align: center; diff --git a/src/templates/partials/project.html b/src/templates/partials/project.html index 9391f38..154f97a 100755 --- a/src/templates/partials/project.html +++ b/src/templates/partials/project.html @@ -1,35 +1,32 @@ {% macro project(title, classes, status, bgi, content, links) %}
-
-

{{ title }}

-

{{ status }}

+
+ {% if bgi|length > 0 %} + {% set path = url_for('static', filename='photos/projects/' + bgi) %} + Ref image for {{ title }} project + {% else %} +
+ {% endif %} +
+ {{ status }} +
-
-
- {% if bgi|length > 0 %} {% set path = url_for('static', - filename='photos/projects/' + bgi) %} - Ref image for {{ title }} project - {% endif %} -
- -
-
-

{{ content }}

-
- {% for i in links %} {% set src = 'icons/' + i[0] + '.svg' %} - {% if i[1].startswith('https://') or i[1].startswith('http://') %} - - {{i[0]}} - - {% endif %} - {% endfor %} -
-
+
+

{{ title }}

+

{{ content }}

+ {% if links %} +
+ {% for i in links %} + {% set src = 'icons/' + i[0] + '.svg' %} + {% if i[1].startswith('https://') or i[1].startswith('http://') %} + + {{ i[0] }} + {{ i[2] }} + + {% endif %} + {% endfor %}
+ {% endif %}
{% endmacro %} diff --git a/src/templates/partials/timeline.html b/src/templates/partials/timeline.html deleted file mode 100755 index dc0bf6c..0000000 --- a/src/templates/partials/timeline.html +++ /dev/null @@ -1,13 +0,0 @@ -{% macro timeitem(title, classes, date, deets) %} -
-

{{date}}

-
-

{{title}}

-
-

- {{deets}} -

-
-
-
-{% endmacro %} \ No newline at end of file diff --git a/src/templates/projects.html b/src/templates/projects.html index 07eb240..6a4473d 100755 --- a/src/templates/projects.html +++ b/src/templates/projects.html @@ -71,7 +71,7 @@
-
+
{% from 'partials/project.html' import project %} {% for i in var["projects"] %} {{ project(i, var["projects"][i]["classes"], var["projects"][i]["status"], var["projects"][i]["bgi"],