From fde5cc4d0ee909eec407f4849b0e7529bb859c52 Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 10 Feb 2026 22:25:44 +0100 Subject: [PATCH] Update default styles and templates Remove hero section styles Add CSS reset and variables Improve typography and layout Update base template with CSS versioning Restructure list templates with semantic HTML Add proper container classes Improve code organization and readability --- README.md | 2 +- app/default/content/styles.css | 112 --------------- app/default/styles/styles.css | 189 ++++++++++++------------- app/default/templates/base.php | 58 ++++---- app/default/templates/list-compact.php | 74 +++------- app/default/templates/list-grid.php | 63 +++------ app/default/templates/list.php | 18 +-- 7 files changed, 171 insertions(+), 345 deletions(-) delete mode 100644 app/default/content/styles.css diff --git a/README.md b/README.md index 9f55bc6..de45ab6 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Drop markdown, HTML and PHP files in directories to instantly publish online. A ## How it works -Your file system is your site structure. Create folders, drop in content files, and they're live. Create `content/about/intro.md` and it turns into `yoursite.com/about/`. Need more presentational controll then what Markdown offers? Drop in an HTML file. Dynamic content? Add a PHP script. No routing configuration, no build step, just save a file, refresh the browser. +Your file system is your site structure. Create folders, drop in content files – and they're live. Create `content/about/intro.md` and it turns into `yoursite.com/about/`. Need more presentational control then what Markdown offers? Drop in an HTML file. Dynamic content? Add a PHP script. No routing configuration, no build step, just save a file, refresh the browser. Since everything is just files and folders, you can mount your site via SFTP or WebDAV and edit content directly from your local machine — save a file, and the change is live. Create websites like it's 1996! diff --git a/app/default/content/styles.css b/app/default/content/styles.css deleted file mode 100644 index 0abceb8..0000000 --- a/app/default/content/styles.css +++ /dev/null @@ -1,112 +0,0 @@ -/* Hero section for frontpage */ -.hero { - background: linear-gradient(135deg, oklch(95% 0.05 250) 0%, oklch(98% 0.02 250) 100%); - border-radius: 0.75rem; - padding: var(--space-m); - margin-block: var(--space-s); - text-align: center; - - & .hero-title { - font-size: clamp(2rem, 5vw, 2.5rem); - margin-block: 0 var(--space-xs); - background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(30% 0.2 280)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 900; - } - - & .hero-subtitle { - font-size: clamp(1rem, 2vw, 1.125rem); - color: var(--color-muted); - margin-block-end: var(--space-m); - max-width: 32rem; - margin-inline: auto; - } - - & .cta-button { - display: inline-block; - background: var(--color-accent); - color: white; - padding: var(--space-xs) var(--space-m); - border-radius: 0.5rem; - text-decoration: none; - font-weight: 600; - margin-block-start: var(--space-xs); - - &:hover { - background: oklch(45% 0.15 250); - color: white; - } - } -} - -.features { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); - gap: var(--space-s); - margin-block: var(--space-m); - - & .feature-card { - background: var(--color-background); - padding: var(--space-s); - border-radius: 0.5rem; - border: 1px solid var(--color-border); - text-align: center; - transition: transform 0.2s, box-shadow 0.2s; - text-decoration: none; - color: inherit; - display: block; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px oklch(0% 0 0 / 0.1); - border-color: var(--color-accent); - } - - & .feature-icon { - font-size: 2rem; - display: block; - margin-block-end: var(--space-xs); - } - - & .feature-title { - font-weight: bold; - margin-block: var(--space-xs); - color: var(--color-text); - font-size: 0.9rem; - } - - & .feature-description { - font-size: 0.85rem; - color: var(--color-muted); - margin: 0; - } - } -} - -.stats { - display: flex; - justify-content: center; - gap: var(--space-m); - flex-wrap: wrap; - margin-block-start: var(--space-m); - padding-block-start: var(--space-s); - border-block-start: 1px solid var(--color-border); - - & .stat { - text-align: center; - - & .stat-value { - display: block; - font-size: 1.25rem; - font-weight: bold; - color: var(--color-accent); - } - - & .stat-label { - font-size: 0.8rem; - color: var(--color-muted); - } - } -} diff --git a/app/default/styles/styles.css b/app/default/styles/styles.css index 2c8d029..e94e52a 100644 --- a/app/default/styles/styles.css +++ b/app/default/styles/styles.css @@ -1,8 +1,11 @@ +/* RESET */ +* { box-sizing: border-box; margin-bottom: 0 } + +/* VARIABLES */ :root { --color-text: oklch(20% 0 0); --color-background: oklch(98% 0 0); --color-accent: oklch(50% 0.15 250); - --color-accent-light: oklch(95% 0.05 250); --color-border: oklch(85% 0 0); --color-muted: oklch(50% 0 0); @@ -11,17 +14,13 @@ --space-m: 2rem; --space-l: 4rem; - --size-content: 65ch; - --size-constrained: 42rem; - --size-wide: 90rem; -} - -* { - box-sizing: border-box; + --size-content: 42rem; } +/* GLOBAL */ html { font-family: system-ui, sans-serif; + font-size: clamp(16px, 2.3vw, 20px); line-height: 1.6; color: var(--color-text); background: var(--color-background); @@ -30,139 +29,99 @@ html { body { margin: 0; display: grid; - grid-template-columns: - [full-start] minmax(var(--space-s), 1fr) - [content-start] minmax(0, var(--size-constrained)) - [content-end] minmax(var(--space-s), 1fr) - [full-end]; grid-template-rows: auto 1fr auto; min-height: 100vh; } +/* CONTENT CENTERING */ +.contain, :where(main > article, main > section, main > div) { + display: grid; + grid-template-columns: minmax(var(--space-s), 1fr) minmax(0, var(--size-content)) minmax(var(--space-s), 1fr); + & > * { grid-column: 2 } +} + +/* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6 { - line-height: 1.2; - margin-block: 1.5em 0.5em; + font-weight: 400; + line-height: 1.3; + margin-top: 1.3em; + text-wrap: pretty; } +h1 { font-size: 2.3rem } +h4 { font-weight: 700 } -h1 { font-size: clamp(2rem, 5vw, 3rem); } -h2 { font-size: clamp(1.5rem, 4vw, 2rem); } -h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); } - -p, ul, ol, dl { - max-width: var(--size-content); - margin-block: 1em; -} +p, ul, ol, dl { margin-block: 1em } a { color: var(--color-accent); - text-underline-offset: 0.2em; - - &:hover { - text-decoration: none; - } + text-decoration: none; + &:hover { text-decoration: underline } } -header, main, footer { - grid-column: content; -} +img { max-width: 100%; height: auto; display: block } +/* HEADER */ header { - border-block-end: 1px solid var(--color-border); - padding-block: var(--space-s); - display: flex; - flex-wrap: wrap; - gap: var(--space-s); - align-items: center; + border-bottom: 1px solid var(--color-border); + + & > div { + display: flex; + flex-wrap: wrap; + gap: var(--space-s); + align-items: center; + padding-block: var(--space-s); + } & nav { display: flex; gap: var(--space-s); flex-wrap: wrap; + align-items: center; - &:first-child { - flex: 1; - } + &:first-child { flex: 1 } & a { text-decoration: none; - - &:hover { - text-decoration: underline; - } - - &[aria-current] { - font-weight: bold; - } + &:hover { text-decoration: underline } + &[aria-current] { font-weight: bold } } } - - & .language-switcher { - margin-inline-start: auto; - } } -main { - padding-block: var(--space-m); -} +/* MAIN */ +main { padding-block: var(--space-m) } +/* FOOTER */ footer { - border-block-start: 1px solid var(--color-border); + border-top: 1px solid var(--color-border); padding-block: var(--space-s); font-size: 0.875rem; color: var(--color-muted); - - & nav { - display: flex; - gap: var(--space-s); - margin-block-end: var(--space-xs); - } - - & p { - margin: 0; - } -} - -img { - max-width: 100%; - height: auto; - display: block; + & p { margin: 0 } } +/* CODE */ code { - background: var(--color-accent-light); + background: oklch(95% 0.02 250); padding: 0.125em 0.25em; border-radius: 0.25em; font-size: 0.9em; } pre { - background: var(--color-accent-light); + background: oklch(95% 0.02 250); padding: var(--space-s); border-radius: 0.5em; overflow-x: auto; - - & code { - background: none; - padding: 0; - } + & code { background: none; padding: 0 } } -table { - border-collapse: collapse; - width: 100%; - margin-block: var(--space-s); -} - -th, td { - padding: var(--space-xs); - text-align: start; - border-block-end: 1px solid var(--color-border); -} - -th { - font-weight: bold; -} +/* TABLES */ +table { border-collapse: collapse; width: 100%; margin-block: var(--space-s) } +th, td { padding: var(--space-xs); text-align: start; border-bottom: 1px solid var(--color-border) } +th { font-weight: bold } +/* BLOCKQUOTES */ blockquote { margin-inline: 0; padding-inline-start: var(--space-s); @@ -170,9 +129,41 @@ blockquote { color: var(--color-muted); } -article { - & time { - color: var(--color-muted); - font-size: 0.875rem; - } +/* ARTICLE */ +article time { color: var(--color-muted); font-size: 0.875rem } + +/* LIST VIEWS */ +.list-item { + margin-bottom: var(--space-m); + & img { margin-bottom: var(--space-xs) } + & h2 { margin-top: 0 } +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); + gap: var(--space-m); +} + +.card { + border: 1px solid var(--color-border); + border-radius: 0.5rem; + padding: var(--space-s); + & img { margin-bottom: var(--space-xs); border-radius: 0.25rem } + & h3 { margin-top: 0 } +} + +.compact-list { + list-style: none; + padding: 0; + & li { border-bottom: 1px solid var(--color-border); padding-block: var(--space-xs) } + & a { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: var(--space-s); + &:hover strong { text-decoration: underline } + } + & time { white-space: nowrap; font-size: 0.875rem } + & p { margin-top: var(--space-xs); color: var(--color-muted); font-size: 0.9rem } } diff --git a/app/default/templates/base.php b/app/default/templates/base.php index d739dbe..a2b643c 100644 --- a/app/default/templates/base.php +++ b/app/default/templates/base.php @@ -1,3 +1,14 @@ + @@ -10,7 +21,7 @@ - + @@ -19,41 +30,34 @@ -
- - 1): ?> - - +
- +
-