/* WebsReady default theme. Every value here is driven by a setting: colours and sizes arrive as CSS variables on :root, layout choices arrive as classes on . The template never hard-codes a colour or size. */ :root { --bg: #ffffff; --text: #1a1a1a; --accent: #2563eb; --link: #2563eb; --fs-base: 16px; --lh: 1.7; --h-scale: 1.25; --content-max: 760px; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: Georgia, Cambria, "Times New Roman", Times, serif; --muted: color-mix(in srgb, var(--text) 55%, var(--bg)); --hairline: color-mix(in srgb, var(--text) 12%, var(--bg)); } /* --- font choices (settings: heading_font / body_font) --- */ .font-body-system { --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .font-body-serif { --font-body: Georgia, Cambria, "Times New Roman", Times, serif; } .font-head-system { --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .font-head-serif { --font-heading: Georgia, Cambria, "Times New Roman", Times, serif; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased; } h1, h2, h3, .brand-name { font-family: var(--font-heading); line-height: 1.2; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: 20px; } /* --- header / footer --- */ .site-header { border-bottom: 1px solid var(--hairline); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; } .brand-name { font-size: calc(var(--fs-base) * 1.3); font-weight: 600; } .brand img { max-height: 40px; } .nav { display: flex; gap: 20px; flex-wrap: wrap; } .nav a { color: var(--text); font-size: calc(var(--fs-base) * 0.95); } .site-footer { margin-top: 80px; padding-block: 32px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: calc(var(--fs-base) * 0.9); } main.wrap { padding-block: 48px; } /* --- post list --- */ .post-list { display: flex; flex-direction: column; gap: 48px; } .list-grid .post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .list-cards .post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .post-card-title { margin: 6px 0 8px; font-size: calc(var(--fs-base) * var(--h-scale)); } .post-card-title a { color: var(--text); } .post-card-excerpt { margin: 0 0 10px; color: var(--muted); } .post-card-meta { color: var(--muted); font-size: calc(var(--fs-base) * 0.85); } .post-cat { font-size: calc(var(--fs-base) * 0.78); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); } .post-cover img { width: 100%; object-fit: cover; border-radius: 8px; aspect-ratio: var(--cover-ratio, 16 / 9); } .list-cards .post-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; } /* --- featured-image placement (settings: featured_image) --- */ .feat-left .post-list, .feat-right .post-list { display: flex; flex-direction: column; } .feat-left .post-card, .feat-right .post-card { display: grid; grid-template-columns: 38% 1fr; gap: 22px; align-items: center; } .feat-right .post-card { grid-template-columns: 1fr 38%; } .feat-right .post-cover { order: 2; } .feat-none .post-cover { display: none; } /* --- cover aspect ratio (settings: cover_ratio) --- */ .ratio-16x9 { --cover-ratio: 16 / 9; } .ratio-4x3 { --cover-ratio: 4 / 3; } .ratio-1x1 { --cover-ratio: 1 / 1; } .ratio-3x1 { --cover-ratio: 3 / 1; } /* --- single post / page --- */ .single-cover { width: 100%; border-radius: 10px; aspect-ratio: var(--cover-ratio, 16 / 9); object-fit: cover; margin-bottom: 28px; } .single-title { margin: 0 0 10px; font-size: calc(var(--fs-base) * 1.8 * var(--h-scale)); } .single-meta { color: var(--muted); font-size: calc(var(--fs-base) * 0.9); margin-bottom: 32px; } .single-body > * { margin-block: 0 1.2em; } .single-body img { border-radius: 8px; } .single-body h2 { font-size: calc(var(--fs-base) * 1.4 * var(--h-scale)); margin-top: 1.6em; } .tags { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; } .tags a { color: var(--muted); font-size: calc(var(--fs-base) * 0.85); } /* --- archive head --- */ .archive-head { margin-bottom: 40px; } .archive-kind { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: calc(var(--fs-base) * 0.78); } .archive-title { margin: 4px 0 0; font-size: calc(var(--fs-base) * 1.4 * var(--h-scale)); } /* --- pagination / misc --- */ .pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 64px; color: var(--muted); } .pagination-pos { font-size: calc(var(--fs-base) * 0.85); } .empty { color: var(--muted); } .notfound { text-align: center; padding-block: 80px; } .notfound h1 { font-size: calc(var(--fs-base) * 4); margin: 0; } .button { display: inline-block; margin-top: 16px; padding: 10px 20px; border-radius: 8px; background: var(--accent); color: #fff; } .button:hover { text-decoration: none; opacity: 0.9; } @media (max-width: 640px) { .list-grid .post-list, .list-cards .post-list { grid-template-columns: 1fr; } .feat-left .post-card, .feat-right .post-card { grid-template-columns: 1fr; } }