diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..78cac96 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/extension.ini b/extension.ini new file mode 100644 index 0000000..290019f --- /dev/null +++ b/extension.ini @@ -0,0 +1,23 @@ +# Datenstrom Yellow extension settings + +Extension: LBS +Version: 0.9.0 +Description: LBS ist das offizielle louis-bar-syndrom.info Theme. +Developer: Simon Pipe +Tag: theme +Download: https://git.thepipes.ch/simon/yellow-lbs/archive/main.zip +Documentation: https://git.thepipes.ch/simon/yellow-lbs +DocumentationLanguage: de +Published: 2026-09-28 14:50:00 +Status: available +system/workers/lbs.php: lbs.php, create, update +system/themes/lbs.css: lbs.css, create, update, careful +system/themes/lbs.png: lbs.png, create, careful +system/themes/lbs-opensans-bold.woff: aarau-opensans-bold.woff, create +system/themes/lbs-opensans-light.woff: aarau-opensans-light.woff, create, update +system/themes/lbs-opensans-regular.woff: aarau-opensans-regular.woff, create +system/themes/lbs-lora-bold.woff: lbs-lora-bold.woff, create, update +system/themes/lbs-lora-regular.woff: lbs-lora-regular.woff, create, update +media/site/apple-touch-icon.png: apple-touch-icon.png, create, update, careful +media/site/favicon.png: favicon.png, create, update, careful +media/site/lbs-share.png: lbs-share.png, create, update, careful diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..69c382d Binary files /dev/null and b/favicon.png differ diff --git a/lbs-lora-bold.woff b/lbs-lora-bold.woff new file mode 100644 index 0000000..bcef143 Binary files /dev/null and b/lbs-lora-bold.woff differ diff --git a/lbs-lora-regular.woff b/lbs-lora-regular.woff new file mode 100644 index 0000000..ed2ffff Binary files /dev/null and b/lbs-lora-regular.woff differ diff --git a/lbs-opensans-bold.woff b/lbs-opensans-bold.woff new file mode 100644 index 0000000..ca2f1c2 Binary files /dev/null and b/lbs-opensans-bold.woff differ diff --git a/lbs-opensans-light.woff b/lbs-opensans-light.woff new file mode 100644 index 0000000..32da261 Binary files /dev/null and b/lbs-opensans-light.woff differ diff --git a/lbs-opensans-regular.woff b/lbs-opensans-regular.woff new file mode 100644 index 0000000..ac2b2c6 Binary files /dev/null and b/lbs-opensans-regular.woff differ diff --git a/lbs-share.png b/lbs-share.png new file mode 100644 index 0000000..f6eb147 Binary files /dev/null and b/lbs-share.png differ diff --git a/lbs.css b/lbs.css new file mode 100644 index 0000000..32d5e81 --- /dev/null +++ b/lbs.css @@ -0,0 +1,938 @@ +/* + * louis-bar-syndrom.info + * Theme: Warm Editorial + * + * Designed as a visual replacement/override for the Yellow-CMS Stockholm theme. + * Existing navigation, content and URLs are intentionally left untouched. + * + * The stylesheet works with the existing Yellow-CMS classes, including: + * .page, .header, .navigation, .content, .footer, .important, + * .left, .center, .right, .rounded, .form-control and .btn. + */ + +:root { + /* Warm, calm palette */ + --bg: #fbfaf6; + --surface: #ffffff; + --surface-soft: #f1f5f2; + --important-bg: #edf5f4; + --heading: #234b50; + --text: #334347; + --muted: #667477; + --code: #566366; + --code-bg: #f1f3f2; + --entry: #667477; + + /* Accessible teal accent */ + --link: #176f78; + --link-active: #1f7f88; + --accent: #2f7f82; + --accent-soft: #dceceb; + + --blockquote-accent: #6e9b94; + --important-accent: #2f7f82; + --separator: #d9e1de; + --border: #c5d0cd; + + --shadow-soft: 0 8px 30px rgba(35, 75, 80, 0.07); + --radius: 14px; + --radius-image: 22px; + + --font: "Open Sans", Helvetica, Arial, sans-serif; + --heading-font: "Lora", Georgia, serif; + --monospace-font: Consolas, Menlo, Courier, monospace; +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(lbs-opensans-light.woff) format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(lbs-opensans-regular.woff) format("woff"); +} + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(lbs-opensans-bold.woff) format("woff"); +} + +@font-face { + font-family: "Lora"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(lbs-lora-regular.woff) format("woff"); +} + +@font-face { + font-family: "Lora"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(lbs-lora-bold.woff) format("woff"); +} + +/* ---------- Reset / base ---------- */ + +html, +body, +div, +form, +pre, +span, +tr, +th, +td, +img { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +html { + min-height: 100%; + background: var(--bg); +} + +body { + position: relative; + min-height: 100vh; + margin: 0; + background: + radial-gradient(900px 520px at 4% 8%, rgba(220, 236, 235, 0.62), transparent 68%), + radial-gradient(760px 460px at 96% 22%, rgba(241, 226, 207, 0.58), transparent 66%), + radial-gradient(900px 560px at 70% 100%, rgba(226, 237, 231, 0.42), transparent 70%), + var(--bg); + color: var(--text); + font-family: var(--font); + font-size: 1rem; + font-weight: 400; + line-height: 1.68; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +/* Very subtle organic background shapes. + * They sit behind the page content and keep the large white areas + * from feeling empty without becoming a decorative wallpaper. + */ +body::before, +body::after { + content: ""; + position: fixed; + z-index: 0; + pointer-events: none; + border-radius: 50%; + filter: blur(2px); +} + +body::before { + width: 34rem; + height: 34rem; + top: -19rem; + left: -15rem; + background: rgba(220, 236, 235, 0.34); +} + +body::after { + width: 30rem; + height: 30rem; + right: -14rem; + bottom: -16rem; + background: rgba(241, 226, 207, 0.30); +} + +.page { + position: relative; + z-index: 1; + width: min(1120px, calc(100% - 48px)); + margin: 0 auto; +} + +/* ---------- Typography ---------- */ + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--heading); + font-family: var(--heading-font); + font-weight: 400; + line-height: 1.2; + letter-spacing: -0.015em; +} + +h1 { + font-size: clamp(2.15rem, 4vw, 3.35rem); + letter-spacing: -0.025em; +} + +h2 { + margin-top: 2.25em; + font-size: clamp(1.65rem, 3vw, 2.25rem); +} + +h3 { + margin-top: 1.8em; + font-size: 1.45rem; +} + +strong { + font-weight: 700; + color: #263b3e; +} + +a { + color: var(--link); + text-decoration-thickness: 1px; + text-underline-offset: 0.14em; + transition: color 150ms ease, text-decoration-color 150ms ease; +} + +a:hover, +a:focus { + color: var(--link-active); +} + +a:focus-visible, +button:focus-visible, +input:focus-visible, +textarea:focus-visible { + outline: 3px solid rgba(31, 127, 136, 0.3); + outline-offset: 3px; +} + +/* ---------- Header ---------- */ + +.header { + margin: 0; + padding: 30px 0 24px; + border-bottom: 1px solid var(--separator); +} + +.header::after { + content: ""; + display: table; + clear: both; +} + +.header .sitename { + display: block; + float: left; +} + +.header .sitename h1 { + margin: 0; + font-family: var(--font); + font-size: 1.05rem; + font-weight: 700; + line-height: 1.4; + letter-spacing: 0.045em; +} + +.header .sitename h1 a { + color: var(--heading); + padding: 0; + border: 0; + text-decoration: none; +} + +.header .sitename h1 a:hover { + color: var(--link-active); +} + +.header .sitename p { + margin: 0; + color: var(--muted); +} + +/* ---------- Site logo ---------- */ + +.sitename-logo { + display: inline-block; + width: 33px; + height: 33px; + margin-right: 0.55rem; + vertical-align: -10px; + + background-image: url("lbs.png"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +/* ---------- Navigation ---------- */ + +.navigation { + display: block; + float: right; +} + +.navigation ul { + display: flex; + align-items: center; + gap: 0.35rem; + margin: 0; + padding: 0; + list-style: none; +} + +.navigation li { + display: block; +} + +.navigation a { + display: block; + position: relative; + padding: 0.25rem 0.55rem 0.55rem; + margin: 0; + color: var(--text); + border: 0; + text-decoration: none; + line-height: 1.4; +} + +.navigation a::after { + content: ""; + position: absolute; + left: 0.55rem; + right: 0.55rem; + bottom: 0; + height: 2px; + background: var(--accent); + transform: scaleX(0); + transform-origin: center; + transition: transform 150ms ease; +} + +.navigation a:hover, +.navigation a:focus { + color: var(--heading); +} + +.navigation a:hover::after, +.navigation a:focus::after, +.navigation li a.active::after { + transform: scaleX(1); +} + +.navigation li a.active { + color: var(--heading); + border: 0; +} + +/* ---------- Main content ---------- */ + +.content { + padding: 20px 0 70px; +} + +.content h1 { + margin: 0 0 1.15em; +} + +.content h1 a { + color: var(--heading); +} + +.content h1 a:hover { + color: var(--heading); + text-decoration: none; +} + +.content p { + max-width: none; + margin: 0 0 1.15em; +} + +.content ul, +.content ol { + margin-top: 0.6em; + margin-bottom: 1.5em; +} + +.content li + li { + margin-top: 0.18em; +} + +.content img { + max-width: 100%; + height: auto; +} + +/* Existing image positioning from Yellow-CMS */ +.content .left, +.content .right { + max-width: 44%; + margin-bottom: 1.5rem; +} + +.content .left { + margin-right: 2.5rem; +} + +.content .right { + margin-left: 2.5rem; +} + +/* Make the existing decorative page images feel intentional */ +.content img.rounded, +.content .rounded img, +.content .right.rounded, +.content .left.rounded { + border-radius: var(--radius-image); +} + +.content .right img, +.content .left img { + border-radius: var(--radius-image); +} + +/* A subtle organic frame without forcing a new HTML structure */ +.content .right img { + box-shadow: var(--shadow-soft); +} + +/* ---------- Tables / code ---------- */ + +.content table { + width: 100%; + border-spacing: 0; + border-collapse: collapse; + margin: 1.5rem 0; +} + +.content th, +.content td { + padding: 0.65rem 0.8rem; + text-align: left; + border-bottom: 1px solid var(--separator); +} + +.content th { + color: var(--heading); + font-weight: 700; +} + +.content code, +.content pre { + font-family: var(--monospace-font); +} + +.content code { + padding: 0.15em 0.4em; + background: #eef1ef; + color: var(--code); + border-radius: 5px; +} + +.content pre { + padding: 1rem 1.2rem; + overflow: auto; + line-height: 1.5; + background: #f1f3f1; + color: var(--code); + border: 1px solid var(--separator); + border-radius: var(--radius); +} + +.content pre > code { + padding: 0; + background: transparent; + border: 0; +} + +/* ---------- Quotes / information boxes ---------- */ + +.content blockquote { + margin: 2rem 0; + padding: 0.25rem 0 0.25rem 1.25rem; + color: var(--heading); + font-weight: 600; + border-left: 4px solid var(--blockquote-accent); +} + +.content .important { + margin: 2rem 0; + padding: 1.15rem 1.4rem; + background: var(--important-bg); + border: 0; + border-left: 4px solid var(--important-accent); + border-radius: 0 var(--radius) var(--radius) 0; + box-shadow: none; +} + +.content .important strong { + color: var(--heading); +} + +/* ---------- Lists used by the wiki / Beiträge ---------- */ + +.content .toc, +.content .wikipages ul, +.content .wikitags ul, +.content .wikilinks ul { + padding: 0; + list-style: none; +} + +.content .wikipages ul, +.content .wikitags ul, +.content .wikilinks ul { + column-width: 30em; + column-gap: 3rem; +} + +.content .wikipages li, +.content .wikitags li, +.content .wikilinks li { + break-inside: avoid; + margin-bottom: 0.65rem; +} + +.content .pagination, +.content .previousnext { + margin: 2.5rem 0 0; + padding-top: 1.25rem; + border-top: 1px solid var(--separator); +} + +/* ---------- Forms ---------- */ + +.content form { + margin: 1.5rem 0; +} + +.form-control { + box-sizing: border-box; + min-width: 7em; + padding: 0.65rem 0.8rem; + background: var(--surface); + color: var(--text); + border: 1px solid var(--border); + border-radius: 9px; + font: inherit; + line-height: 1.4; + box-shadow: 0 1px 2px rgba(35, 75, 80, 0.03); +} + +.form-control:focus { + border-color: var(--accent); +} + +textarea.form-control { + min-height: 10rem; + resize: vertical; +} + +.btn { + box-sizing: border-box; + min-width: 7em; + padding: 0.65rem 1.2rem; + background: var(--accent); + color: #fff; + border: 1px solid var(--accent); + border-radius: 999px; + font: inherit; + font-weight: 700; + line-height: 1.35; + text-align: center; + text-decoration: none; + cursor: pointer; + transition: transform 150ms ease, background-color 150ms ease; +} + +.btn:hover, +.btn:focus, +.btn:active { + color: #fff; + background: var(--link-active); + border-color: var(--link-active); + text-decoration: none; +} + +.btn:hover { + transform: translateY(-1px); +} + +.btn:active { + transform: translateY(0); +} + +/* ---------- Footer ---------- */ + +.footer { + margin: 0; + padding: 24px 0 38px; + color: var(--muted); + border-top: 1px solid var(--separator); + text-align: right; + font-size: 0.88rem; + background: transparent; + position: relative; +} + +.footer::before { + content: ""; + position: absolute; + left: 50%; + width: 100vw; + top: 0; + bottom: 0; + transform: translateX(-50%); + background: rgba(251, 250, 246, 0.35); + z-index: -1; +} + +.footer .siteinfo a { + color: var(--entry); +} + +.footer .siteinfo a:hover { + color: var(--entry); +} + +/* ---------- Embedded content ---------- */ + +.content .flexible { + position: relative; + padding-top: 0; + padding-bottom: 56.25%; +} + +.content .flexible iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +/* ---------- Responsive: tablet ---------- */ + +@media screen and (max-width: 62em) { + .page { + width: min(100% - 36px, 900px); + } + + .header { + padding-top: 24px; + } + + .content { + padding-top: 18px; + } + + .content .left, + .content .right { + max-width: 40%; + } +} + +/* ---------- Responsive: phone ---------- */ + +@media screen and (max-width: 44em) { + body { + font-size: 1rem; + line-height: 1.65; + } + + .page { + width: calc(100% - 28px); + } + + .header { + padding: 18px 0 16px; + } + + .header .sitename { + float: none; + } + + .header .sitename h1 { + font-size: 1rem; + } + + /* + * The existing navigation becomes a clean, wrapping row. + * This avoids tiny desktop navigation on phones. + */ + .navigation { + float: none; + margin-top: 0.8rem; + } + + .navigation ul { + flex-wrap: wrap; + gap: 0.1rem 0.15rem; + } + + .navigation a { + padding: 0.3rem 0.42rem 0.45rem; + font-size: 0.92rem; + } + + .navigation a::after { + left: 0.42rem; + right: 0.42rem; + } + + .content { + padding: 16px 0 48px; + } + + .content h1 { + margin-bottom: 1rem; + font-size: 2.15rem; + } + + .content h2 { + margin-top: 2rem; + font-size: 1.7rem; + } + + .content h3 { + font-size: 1.3rem; + } + + /* + * Decorative page images stack above/below the text instead of + * leaving a narrow text column beside them. + */ + .content .left, + .content .right { + float: none; + display: block; + width: 100%; + max-width: 100%; + margin: 0 0 1.5rem; + } + + .content .right img, + .content .left img { + display: block; + width: 100%; + max-height: 320px; + object-fit: cover; + border-radius: 18px; + } + + .content .important { + margin: 1.5rem 0; + padding: 1rem 1.05rem; + } + + .content .wikipages ul, + .content .wikitags ul, + .content .wikilinks ul { + column-count: 1; + column-width: auto; + } + + .content table { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + .form-control { + width: 100%; + max-width: 100%; + } + + .btn { + width: auto; + min-height: 44px; + padding-inline: 1.25rem; + } + + .footer { + padding-bottom: 28px; + } +} + +/* ---------- Very small phones ---------- */ + +@media screen and (max-width: 24em) { + .page { + width: calc(100% - 22px); + } + + .navigation a { + font-size: 0.86rem; + } + + .content h1 { + font-size: 1.95rem; + } +} + +/* ---------- Reduced motion ---------- */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition: none !important; + } +} + +/* ---------- Print ---------- */ + +@media print { + html, + body { + background: #fff; + } + + .page { + width: auto; + max-width: none; + } + + .header { + border-bottom: 0; + } + + .footer { + border-top: 1px solid #ccc; + } +} + + +/* ---------- LBS Hero images from Markdown ---------- */ + +.main h1 + p img, +.entry-title + .entry-content > p:first-child img { + float: right; + width: 500px; + max-width: 50%; + height: auto; + margin: 0.2rem 0 2rem 3.5rem; + border-radius: var(--radius-image); + filter: drop-shadow(0 12px 24px rgba(35, 75, 80, 0.08)); +} + +.content .main::after { + content: ""; + display: table; + clear: both; +} + +/* ---------- Wiki article images centered ---------- */ + +.entry-content p img { + float: none; + display: block; + width: auto; + max-width: 100%; + height: auto; + margin: 1.5rem auto 2rem; +} + +/* Mobile */ +@media screen and (max-width: 44em) { + + .content .main > p:first-of-type img, + .content .main > img:first-of-type { + float: none; + display: block; + width: min(100%, 360px); + max-width: 100%; + margin: 0 auto 2rem; + } + +} + + +/* ---------- Migrated from lbs-erweiterung.css ---------- */ + +/* Desktop sitename refinement */ +@media screen and (min-width: 48.01em) { + .header .sitename h1 a { + letter-spacing: 2px; + font-weight: 500; + padding-left: 0; + border-bottom: none; + } +} + +/* Entry metadata */ +.entry-meta { + color: var(--entry); + font-style: italic; +} + +/* Blockquotes */ +.content blockquote { + font-weight: normal; +} + +/* Wiki lists */ +.content .wikipages ul li, +.content .wikitags ul li, +.content .wikilinks ul li { + break-inside: avoid-column; + display: inline-block; + width: 100%; + margin-bottom: 0.2em; +} + +/* General content images */ +.content img { + max-width: 100%; + height: auto; + display: block; + border-radius: var(--radius-image); +} + +/* Automatic image captions */ +.content p:has(img) { + font-style: italic; + font-size: 0.9em; + color: var(--muted); + text-align: center; + line-height: 1.3; + margin-top: 1.5em; + margin-bottom: 1.5em; +} + +.content p:has(img) img { + font-style: normal; +} + + +/* Mobile navigation refinement */ +@media screen and (max-width: 48em) { + + .header .sitename { + float: none; + width: 100%; + text-align: center; + } + + .navigation { + float: none; + width: 100%; + text-align: center; + } + + .navigation li { + display: inline-block; + } + +} diff --git a/lbs.php b/lbs.php new file mode 100644 index 0000000..4ec1398 --- /dev/null +++ b/lbs.php @@ -0,0 +1,22 @@ +yellow = $yellow; + } + + // Handle update + public function onUpdate($action) { + $fileName = $this->yellow->system->get("coreExtensionDirectory").$this->yellow->system->get("coreSystemFile"); + if ($action=="install") { + $this->yellow->system->save($fileName, array("theme" => "lb")); + } elseif ($action=="uninstall" && $this->yellow->system->get("theme")=="lbs") { + $this->yellow->system->save($fileName, array("theme" => $this->yellow->system->getDifferent("theme"))); + } + } +} diff --git a/lbs.png b/lbs.png new file mode 100644 index 0000000..69c382d Binary files /dev/null and b/lbs.png differ