/* ============================================================ mans.hu — editorial blog stylesheet Plain HTML + CSS. No build step, no dependencies except one Google Font (Newsreader), linked in each page's . Adapted from a starter template — see starter-site/ for the source. ============================================================ */ :root { /* Palette — black & white */ --ink: #171614; /* near-black text */ --ink-2: #4d4c4a; /* secondary text */ --ink-3: #656462; /* meta / tertiary text */ --ink-4: #c2c1be; /* disabled / caption credit */ --paper: #ffffff; /* page background */ --rule: #e3e2df; /* hairline dividers */ /* Type */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---- reset-ish ---- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; padding-bottom: 80px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--ink-2); } ::selection { background: var(--ink); color: #fff; } /* ============================================================ MASTHEAD ============================================================ */ .masthead { max-width: 960px; margin: 0 auto; padding: 0 24px; } .masthead__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); } .masthead__brand { text-align: center; padding: 22px 0 14px; } .masthead__wordmark { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(44px, 8vw, 92px); } .masthead__tagline { font-family: var(--serif); font-style: italic; font-size: clamp(14px, 2vw, 18px); color: var(--ink-2); margin-top: 6px; } .masthead__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; padding: 12px 0; border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .masthead__nav a { color: var(--ink-3); } .masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--ink); } /* ============================================================ LAYOUT WRAPPERS ============================================================ */ .feed { max-width: 720px; margin: 0 auto; padding: 0 24px; } .article { max-width: 690px; margin: 0 auto; padding: 0 24px; } /* small reusable label / kicker */ .kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .byline { font-size: 13px; color: var(--ink-3); } .byline strong { color: var(--ink); font-weight: 600; } /* ============================================================ LEAD STORY ============================================================ */ .lead { padding: 40px 0 36px; border-bottom: 2px solid var(--ink); } .lead__media { aspect-ratio: 16 / 9; background: var(--rule); margin-bottom: 22px; overflow: hidden; } .lead__media img { width: 100%; height: 100%; object-fit: cover; } .lead .kicker { display: block; margin-bottom: 12px; } .lead__title { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 14px; } .lead__dek { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0 0 18px; max-width: 60ch; } /* ============================================================ STORY (feed row) — text left, thumbnail right ============================================================ */ .story { display: flex; gap: 24px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--rule); } .story__body { flex: 1; min-width: 0; } .story .kicker { display: block; margin-bottom: 8px; } .story__title { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 8px; } .story__dek { font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); margin: 0 0 10px; } .story__thumb { width: 132px; height: 110px; flex-shrink: 0; background: var(--rule); overflow: hidden; } .story__thumb img { width: 100%; height: 100%; object-fit: cover; } /* variant: thumbnail on the LEFT (used on section pages) */ .story--left { flex-direction: row; } .story--left .story__thumb { width: 150px; height: 120px; order: -1; } /* ============================================================ SECTION HEADER ============================================================ */ .section-head { padding: 44px 0 28px; border-bottom: 2px solid var(--ink); text-align: center; } .section-head .kicker { display: block; letter-spacing: 0.1em; margin-bottom: 12px; } .section-head__title { font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 7vw, 68px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 14px; } .section-head__desc { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-2); margin: 0 auto; max-width: 52ch; } /* ============================================================ ARTICLE PAGE ============================================================ */ .article__head { text-align: center; padding: 44px 0 0; } .article__head .kicker { display: block; letter-spacing: 0.1em; margin-bottom: 16px; } .article__title { font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 18px; } .article__dek { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--ink-2); margin: 0 auto 26px; max-width: 56ch; } .article__meta { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); } .article__meta strong { color: var(--ink); font-weight: 600; } .article figure { margin: 28px 0 8px; } .article figure .media { aspect-ratio: 3 / 2; background: var(--rule); overflow: hidden; } .article figure img { width: 100%; height: 100%; object-fit: cover; } .article figcaption { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.4; } .article figcaption .credit { color: var(--ink-4); } /* the readable body — this is the type contract that makes it feel editorial */ .prose { font-family: var(--serif); font-size: 20px; line-height: 1.65; color: var(--ink); } .prose p { margin: 22px 0 0; } .prose p:first-of-type { margin-top: 26px; } /* drop cap on the first paragraph */ .prose > p:first-of-type::first-letter { font-size: 64px; font-weight: 700; line-height: 0.72; float: left; padding: 6px 10px 0 0; } .prose h2 { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; margin: 38px 0 4px; } .prose blockquote { margin: 34px 0; padding: 0 0 0 24px; border-left: 3px solid var(--ink); font-style: italic; font-size: 26px; line-height: 1.3; letter-spacing: -0.01em; } .article__foot { margin-top: 44px; padding-top: 24px; border-top: 2px solid var(--ink); } .article__foot a { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } /* ============================================================ FOOTER ============================================================ */ .site-footer { max-width: 960px; margin: 60px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--rule); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: center; } /* small screens: stack the feed thumbnail under the text */ @media (max-width: 560px) { .story, .story--left { flex-direction: column; } .story__thumb, .story--left .story__thumb { width: 100%; height: 200px; order: 0; } }