From e0f595cebf5100122dc9cca582d0c07441e6fa32 Mon Sep 17 00:00:00 2001 From: Mario Nachbaur Date: Fri, 17 Oct 2025 14:13:26 +0200 Subject: [PATCH] separate profile styles --- src/static/editor.css | 38 --------- src/static/profile/default.css | 106 +++++++++++++++++++++++ src/static/style.css | 143 ++++++++++---------------------- src/templates/_footerlinks.html | 5 ++ src/templates/editor.html | 7 +- src/templates/error.html | 10 ++- src/templates/index.html | 7 +- src/templates/login.html | 10 +-- src/templates/profile.html | 34 ++++---- src/templates/terms.html | 5 +- 10 files changed, 194 insertions(+), 171 deletions(-) delete mode 100644 src/static/editor.css create mode 100644 src/static/profile/default.css create mode 100644 src/templates/_footerlinks.html diff --git a/src/static/editor.css b/src/static/editor.css deleted file mode 100644 index 2bd025d..0000000 --- a/src/static/editor.css +++ /dev/null @@ -1,38 +0,0 @@ -link-editor-item { - display: block; - margin-top: 1em; - margin-left: -0.25em; - margin-right: -0.25em; - padding: 0.25em; - background: var(--color-background); - border: 1px solid var(--color-border-secondary); - border-radius: 2px; -} - -link-editor-header { - display: flex; - flex-direction: row; - gap: 0.25em; -} - -link-editor-drag-handle { - background: var(--color-background-secondary); - display: flex; - flex-grow: 0; - padding: 2px; - line-height: 100%; - font-size: 1.5em; - align-items: center; - cursor: grab; -} - -link-editor-drag-handle:active { - cursor: grabbing; -} - -link-editor-buttons { - display: flex; - flex-direction: row; - gap: 0.25em; - margin-top: 0.25em; -} diff --git a/src/static/profile/default.css b/src/static/profile/default.css new file mode 100644 index 0000000..505741f --- /dev/null +++ b/src/static/profile/default.css @@ -0,0 +1,106 @@ +:root { + --color-background: #fff; + --color-text: #333; + --color-text-secondary: #696969; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: #111; + --color-text: #fff; + --color-text-secondary: #aaa; + } +} + +body { + background: var(--color-background); + color: var(--color-text); + font-size: 18px; + font-family: "Inter", system-ui, sans-serif, ui-sans-serif; + font-feature-settings: + "kern" 1, + "liga" 1, + "cv05" 1, + "tnum" 1; + font-optical-sizing: auto; + font-variation-settings: normal; + font-weight: 400; + margin: 1rem; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +a { + color: inherit; +} + +.wrapper { + margin: auto; + max-width: 25em; +} + +.wrapper.profile { + font-size: 20px; +} + +header { + margin: 2.5em 0; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 1.5em; + font-weight: inherit; +} + +header .tagline { + font-style: italic; + display: block; + margin-top: 0.5em; +} + +.links-container ul { + list-style: none; + padding: 0; +} + +.link-item { + background: currentColor; + display: block; + padding: 0.5em; + text-align: center; + transition: transform 0.1s; + box-shadow: -3px 3px 0 rgba(from currentColor r g b / 0.6); +} + +.link-item .link-item-title { + color: white; +} + +.link-item .link-item-detail { + color: white; + display: block; + font-size: 0.75em; + opacity: 0.6; + transition: opacity 0.3s; +} + +.link-item:hover { + transform: scale(1.05); +} + +.link-item:hover .link-item-detail { + opacity: 1; +} + +.links-container li + li { + margin-top: 0.75em; +} + +footer { + color: var(--color-text-secondary); + font-size: 14px; + margin: 5em 0; + text-align: center; +} diff --git a/src/static/style.css b/src/static/style.css index f583342..9383c21 100644 --- a/src/static/style.css +++ b/src/static/style.css @@ -1,125 +1,40 @@ +@import url(/static/profile/default.css); + :root { --color-alert: #ee0000; - --color-background: #fff; --color-background-secondary: #eee; --color-border: #bbb; --color-border-secondary: #ddd; - --color-text: #333; - --color-text-secondary: #aaa; } @media (prefers-color-scheme: dark) { :root { - --color-background: #111; --color-background-secondary: #333; --color-border: #555; --color-border-secondary: #333; - --color-text: #fff; } } -html { - font-feature-settings: - "kern" 1, - "liga" 1, - "cv05" 1, - "tnum" 1; -} - -body { - background: var(--color-background); - color: var(--color-text); - font-size: 18px; - font-family: "Inter", system-ui, sans-serif, ui-sans-serif; - font-variation-settings: normal; - font-weight: 400; - font-optical-sizing: auto; - margin: 1rem; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - color: inherit; -} - -.wrapper { - margin: auto; - max-width: 25rem; +p { + text-wrap: pretty; } .wrapper.error p { text-align: center; } -header { - margin: 2.5em 0; - text-align: center; -} - -header h1 { - margin: 0; - font-size: 1.5em; - font-weight: inherit; -} - h2 { font-size: 1.3em; font-weight: 500; } -header .tagline { - font-style: italic; - display: inline-block; - margin-top: 0.5em; -} - -ul { - list-style: none; - padding: 0; -} - -.link-item { - background: currentColor; - display: block; +.link-item.static { flex-grow: 1; - padding: 0.5em; - text-align: center; - transition: transform 0.1s; -} - -.link-item:not(.static) { - box-shadow: -3px 3px 0 rgba(from currentColor r g b / 0.6); -} - -.link-item-title { - color: white; -} - -.link-item .link-item-detail { - color: white; - display: block; - font-size: 0.75em; - opacity: 0.6; - transition: opacity 0.3s; -} - -.link-item:not(.static):hover { - transform: scale(1.05); - - & .link-item-detail { - opacity: 1; - } -} - -li:has(.link-item) + li:has(.link-item) { - margin-top: 1rem; + box-shadow: none; } -li a { - color: inherit; - display: block; - text-decoration: none; +.link-item.static:hover { + transform: none; } .alert { @@ -173,11 +88,43 @@ label:has(input):has(span) span { text-transform: uppercase; } -footer { - color: var(--color-text-secondary); - font-size: 14px; - margin-top: 5em; - text-align: center; +link-editor-item { + display: block; + margin-top: 1em; + margin-left: -0.25em; + margin-right: -0.25em; + padding: 0.25em; + background: var(--color-background); + border: 1px solid var(--color-border-secondary); + border-radius: 2px; +} + +link-editor-header { + display: flex; + flex-direction: row; + gap: 0.25em; +} + +link-editor-drag-handle { + background: var(--color-background-secondary); + display: flex; + flex-grow: 0; + padding: 2px; + line-height: 100%; + font-size: 1.5em; + align-items: center; + cursor: grab; +} + +link-editor-drag-handle:active { + cursor: grabbing; +} + +link-editor-buttons { + display: flex; + flex-direction: row; + gap: 0.25em; + margin-top: 0.25em; } still-building { diff --git a/src/templates/_footerlinks.html b/src/templates/_footerlinks.html new file mode 100644 index 0000000..572fb28 --- /dev/null +++ b/src/templates/_footerlinks.html @@ -0,0 +1,5 @@ +

+ terms of service + · + source code +

diff --git a/src/templates/editor.html b/src/templates/editor.html index 0f0f8d8..92a51c4 100644 --- a/src/templates/editor.html +++ b/src/templates/editor.html @@ -5,8 +5,8 @@ edit your profile — ligo.at + - @@ -122,7 +122,10 @@ diff --git a/src/templates/error.html b/src/templates/error.html index e897318..869fc58 100644 --- a/src/templates/error.html +++ b/src/templates/error.html @@ -2,9 +2,10 @@ - not found — ligo.at + oops! — ligo.at + @@ -17,9 +18,10 @@

{{ message }}

diff --git a/src/templates/index.html b/src/templates/index.html index 0e9337c..cf4ce9c 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -5,6 +5,7 @@ ligo.at + @@ -30,11 +31,7 @@ login