From a54711b04e2527ece8139b3576cfb1c7c4773444 Mon Sep 17 00:00:00 2001 From: Sarah Withee Date: Mon, 5 Oct 2026 01:30:34 -0400 Subject: [PATCH 1/2] Revamp UI with improved styling and layout; introduce typography updates, CSS variables, and responsive design enhancements --- web/static/css/app.css | 183 ++++++++++++++++++++++++++++++--- web/templates/base.html | 25 +++-- web/templates/concepts.html | 50 +++++---- web/templates/index.html | 198 +++++++++++++++++++----------------- 4 files changed, 308 insertions(+), 148 deletions(-) diff --git a/web/static/css/app.css b/web/static/css/app.css index 08cfd28a3..3cde9a7d4 100644 --- a/web/static/css/app.css +++ b/web/static/css/app.css @@ -1,7 +1,40 @@ -@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600"); +:root { + --ct-primary: #304ffe; + --ct-primary-hover: #1a2fff; + --ct-accent: #fdd835; + --ct-bg: #ffffff; + --ct-bg-subtle: #f8f9fa; + --ct-text: #1a1a1a; + --ct-text-muted: #6c757d; + --ct-border: rgba(0, 0, 0, 0.08); + --ct-border-strong: rgba(0, 0, 0, 0.125); + --ct-radius-sm: 0.375rem; + --ct-radius: 0.5rem; + --ct-radius-lg: 0.75rem; + --ct-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04); + --ct-shadow-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); + --ct-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; + --jumbotron-padding-y: 3rem; +} + +* { + font-family: var(--ct-font-sans); +} + +body { + color: var(--ct-text); + background-color: var(--ct-bg); + line-height: 1.7; +} a { - color: #304ffe; + color: var(--ct-primary); + text-decoration: none; +} + +a:hover { + color: var(--ct-primary-hover); + text-decoration: underline; } .navbar-nav { @@ -49,10 +82,11 @@ a { } .jumbotron { - padding-top: var(--jumbotron-padding-y); - padding-bottom: var(--jumbotron-padding-y); + padding-top: calc(var(--jumbotron-padding-y) * 1.5); + padding-bottom: calc(var(--jumbotron-padding-y) * 1.5); margin-bottom: 0; - background-color: #fff; + background: radial-gradient(circle at top, #ffffff 0%, #f8f9ff 100%); + border-bottom: 1px solid var(--ct-border); } @media (min-width: 767px) { @@ -63,11 +97,21 @@ a { } .jumbotron .container { - max-width: 60rem; + max-width: 64rem; } .jumbotron .container h1 { - font-size: 3.5rem; + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.1; +} + +.jumbotron .lead { + color: var(--ct-text-muted); + font-size: clamp(1.05rem, 2.5vw, 1.25rem); + line-height: 1.6; + margin-top: 1.25rem; } .jumbotron p:last-child { @@ -75,12 +119,15 @@ a { } .bg-blue { - background-color: #304ffe; + background-color: var(--ct-primary); } .card-header { - background: #fdd835; + background: var(--ct-accent); color: #000; + border-bottom: 0; + font-weight: 600; + letter-spacing: -0.01em; } #contribution-alert { @@ -116,9 +163,65 @@ footer p { font-weight: bold; } +.album { + background-color: var(--ct-bg-subtle); +} + +.nav-tabs { + border-bottom: 1px solid var(--ct-border); +} + +.nav-tabs .nav-link { + color: var(--ct-text-muted); + border: 0; + border-bottom: 2px solid transparent; + padding: 0.75rem 1rem; + font-weight: 500; + transition: color 150ms ease, border-color 150ms ease; +} + +.nav-tabs .nav-link:hover { + color: var(--ct-text); + border-bottom-color: var(--ct-border); +} + +.nav-tabs .nav-link.active { + color: var(--ct-primary); + border-bottom-color: var(--ct-primary); + background-color: transparent; +} + +.category-header { + font-weight: 700; + letter-spacing: -0.015em; + color: var(--ct-text); +} + +.ct-card { + border: 1px solid var(--ct-border); + border-radius: var(--ct-radius-lg); + box-shadow: var(--ct-shadow); + transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; + overflow: hidden; +} + +.ct-card:hover { + transform: translateY(-2px); + box-shadow: var(--ct-shadow-hover); +} + +.ct-card .card-header { + border-radius: 0; +} + +.ct-card .card-body { + background-color: #ffffff; +} + .card-footer { border: 0; - background-color: #fff; + background-color: #ffffff; + padding: 1rem 1.5rem 1.5rem; } a.toTop { @@ -131,9 +234,63 @@ a.toTop { } #start-of-row { - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - border: 1px solid rgba(0,0,0,.125); + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + border: 1px solid var(--ct-border); +} + +.ct-table-header .card { + border: 1px solid var(--ct-border); + border-radius: 0; + background-color: #ffffff; +} + +.ct-table-header .card:first-child { + border-top-left-radius: var(--ct-radius); + border-bottom-left-radius: var(--ct-radius); +} + +.ct-table-header .card:last-child { + border-top-right-radius: var(--ct-radius); + border-bottom-right-radius: var(--ct-radius); +} + +.ct-table-header h5 { + font-weight: 600; + letter-spacing: -0.01em; +} + +.ct-concept-header { + background-color: var(--ct-bg-subtle); +} + +.ct-concept-cell { + background-color: var(--ct-bg-subtle); +} + +.card-group .card .card-body .strong { + font-weight: 600; + line-height: 1.6; +} + +.syntax { + font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 0.95rem; + line-height: 1.6; +} + +.ct-comment { + color: var(--ct-text-muted); + background-color: rgba(0, 0, 0, 0.02); + padding: 0.5rem 0.75rem; + border-radius: var(--ct-radius-sm); + font-size: 0.95rem; +} + +.ct-comment-divider { + margin-top: 0.75rem; + margin-bottom: 0.75rem; + border-top: 1px dashed var(--ct-border); } textarea { diff --git a/web/templates/base.html b/web/templates/base.html index 7949c57ac..df9e20a03 100644 --- a/web/templates/base.html +++ b/web/templates/base.html @@ -13,27 +13,26 @@ - + - + - Code Thesaurus - {{ title }} + + + + + - - + + @@ -42,13 +41,13 @@