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): ?> - - +
- +
-