/* Theme Name: AREA85 Theme URI: https://area85.de Author: Kevin Reymann Author URI: https://kevinreymann.de Description: Schlichtes, textfokussiertes Block-Theme für den privaten Blog AREA85. Weißer Hintergrund, klassische Serifenschrift, blauer Akzent, einspaltiger Lesefluss und eine ausgeblendete Off-Canvas-Sidebar. Block-Theme (Full Site Editing) für WordPress 7. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 Version: 0.1.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: area85 Tags: blog, block-theme, full-site-editing, one-column, custom-colors, editor-style, featured-images, threaded-comments */ /* ========================================================================= AREA85 — Front-End-Styles, die theme.json nicht abdeckt (Off-Canvas-Sidebar, Hamburger, Top-Linie, Titel-Unterstreichung) ========================================================================= */ /* ---- Header ------------------------------------------------------------ */ .area85-header { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); } /* Hamburger-Button */ .area85-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--wp--preset--color--contrast); } .area85-burger span { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; } /* Symmetrie-Platzhalter links neben zentriertem Logo */ .area85-header__spacer { width: 2.5rem; height: 2.5rem; } /* Header-Logo (SVG aus dem Theme) */ .area85-logo { margin: 0; line-height: 0; } .area85-logo img { height: clamp(2.75rem, 8.5vw, 5rem); width: auto; max-width: 100%; } /* ---- Off-Canvas-Sidebar ------------------------------------------------ */ .area85-offcanvas { position: fixed; top: 0; right: 0; z-index: 1000; width: min(420px, 88vw); height: 100dvh; overflow-y: auto; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 38%, var(--wp--preset--color--sidebar) 100%); color: var(--wp--preset--color--sidebar-text); transform: translateX(100%); transition: transform .3s ease; overscroll-behavior: contain; } .area85-offcanvas a { color: var(--wp--preset--color--accent); } .area85-offcanvas .wp-block-heading { color: var(--wp--preset--color--contrast); } .area85-offcanvas__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--wp--preset--color--contrast); font-size: 1.75rem; line-height: 1; cursor: pointer; } .area85-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } /* Offen-Zustand (Klasse wird per JS auf gesetzt) */ .area85-offcanvas-open { overflow: hidden; } .area85-offcanvas-open .area85-offcanvas { transform: translateX(0); } .area85-offcanvas-open .area85-backdrop { opacity: 1; visibility: visible; } /* ---- Profil-Kopf (zentriert, modern) ---------------------------------- */ .area85-offcanvas .area85-about { text-align: center; } .area85-offcanvas .area85-avatar { margin: 0 auto; display: flex; justify-content: center; } .area85-offcanvas .area85-avatar img { border-radius: 50%; width: 112px; height: 112px; object-fit: cover; background: #ffffff; border: 4px solid #ffffff; box-shadow: 0 8px 24px rgba(30, 58, 138, .14), 0 1px 2px rgba(0, 0, 0, .06); } .area85-offcanvas .area85-about h2 { margin-bottom: .15rem; } /* ---- Social-Icons (Chips in der Sidebar, dezent im Footer) ------------- */ .area85-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .area85-social__item { margin: 0; } .area85-social__link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .area85-social__icon { width: 22px; height: 22px; display: block; } /* Sidebar: runde, weiße Chips mit Hover-Lift */ .area85-offcanvas .area85-social { justify-content: center; } .area85-offcanvas .area85-social__link { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; border: 1px solid var(--wp--preset--color--sidebar-line); color: var(--wp--preset--color--contrast); box-shadow: 0 1px 2px rgba(30, 58, 138, .06); transition: transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease; } .area85-offcanvas .area85-social__link:hover, .area85-offcanvas .area85-social__link:focus-visible { transform: translateY(-2px); color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); box-shadow: 0 6px 16px rgba(37, 99, 235, .18); } /* glass.photo: farbige Marken-Kachel füllt den Chip rund */ .area85-offcanvas .area85-social__link--glass { background: transparent; border-color: transparent; padding: 0; overflow: hidden; } .area85-social__img { width: 24px; height: 24px; display: block; border-radius: 6px; } .area85-offcanvas .area85-social__link--glass .area85-social__img { width: 44px; height: 44px; border-radius: 50%; } /* Hervorgehobener Website-Link (Akzent-Pille), mittig im wp:html-Block */ .area85-offcanvas .area85-site-link { display: flex; width: max-content; align-items: center; justify-content: center; margin: .9rem auto 0; padding: .5rem 1.1rem; border-radius: 999px; background: var(--wp--preset--color--accent); color: #ffffff; font-family: var(--wp--preset--font-family--system); font-size: .95rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; box-shadow: 0 4px 14px rgba(37, 99, 235, .22); transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; } .area85-offcanvas .area85-site-link:hover, .area85-offcanvas .area85-site-link:focus-visible { background: var(--wp--preset--color--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, .28); text-decoration: none; color: #ffffff; } /* Leisere Section-Labels (Folgen / Archiv / Kategorien) */ .area85-offcanvas h3.wp-block-heading { color: var(--wp--preset--color--contrast-2); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 1.75rem; } /* Trenner dezenter */ .area85-offcanvas .wp-block-separator { border-color: var(--wp--preset--color--sidebar-line); opacity: .6; margin-block: var(--wp--preset--spacing--50); } /* ---- Footer-Variante der Social-Icons (gedämpft, wie Muster) ----------- */ .area85-footer .area85-social { justify-content: center; gap: 1.1rem; margin-top: .5rem; } .area85-footer .area85-social__link { color: var(--wp--preset--color--contrast-2); transition: color .18s ease, transform .18s ease; } .area85-footer .area85-social__link:hover, .area85-footer .area85-social__link:focus-visible { color: var(--wp--preset--color--contrast); transform: translateY(-1px); } .area85-footer .area85-social__img { width: 22px; height: 22px; } /* Suchfeld weiß, Auswahlfelder weiß – lesbar auf hellblauer Sidebar */ .area85-offcanvas .wp-block-search__input, .area85-offcanvas select { background: #ffffff; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--sidebar-line); border-radius: .375rem; } /* Äußeren Rahmen der Suche entfernen – nur Eingabefeld + Button */ .area85-offcanvas .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { border: 0; padding: 0; gap: .5rem; } .area85-offcanvas .wp-block-search__input { padding: .55rem .8rem; } .area85-offcanvas .wp-block-search .wp-block-search__button { margin: 0; border-radius: .375rem; } /* Archiv-/Kategorien-Block bringt ein eigenes Label mit – visuell ausblenden (eigene Überschrift „Archiv"/„Kategorien" übernimmt die Beschriftung) */ .area85-offcanvas .wp-block-archives-dropdown > label, .area85-offcanvas .wp-block-categories > label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Beitrags-Titel: Dunkelblau, ohne Unterstreichung ------------------ */ .area85-post-title, .area85-post-title a { color: var(--wp--preset--color--accent-dark); text-decoration: none; } .area85-post-title a:hover { color: var(--wp--preset--color--accent); text-decoration: none; } /* Datum näher an die Überschrift rücken */ .area85-post-title { margin-top: 0.35rem; } /* Datum-/Meta-Zeile über dem Titel */ .area85-meta { letter-spacing: .02em; } /* „Weiterlesen"-Link unter gekürzten Beiträgen (Mehr-Block) */ .area85-readmore { margin-top: 1.25rem; font-weight: 600; } /* Trenner zwischen Beiträgen in der Übersicht */ .area85-post-divider { margin-block: var(--wp--preset--spacing--60); } /* Bilder dürfen über die Lesespalte hinausragen (wide) – ruhige Rundung */ .entry-content .wp-block-image img, .area85-stream .wp-block-image img { border-radius: .25rem; } /* ---- Zitat-Stil „Große Anführungszeichen" (zentriert, Akzentlinie) ----- */ .wp-block-quote.is-style-area85-quote { position: relative; border: 0; background: transparent; margin-block: 3rem; padding: 3.5rem 2rem 1.5rem; text-align: center; } /* großes, blasses Anführungszeichen oben links – liegt hinter dem Text */ .wp-block-quote.is-style-area85-quote::before { content: "\201C"; /* großes Anführungszeichen */ position: absolute; top: -1rem; left: .5rem; z-index: 0; font-family: Georgia, "Times New Roman", serif; font-size: 8rem; line-height: 1; color: rgba(0, 0, 0, .1); pointer-events: none; } /* kurze Akzentlinie mittig über dem Zitat */ .wp-block-quote.is-style-area85-quote::after { content: ""; position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); width: 7rem; height: 3px; background: var(--wp--preset--color--accent); } /* Text liegt über dem Zeichen */ .wp-block-quote.is-style-area85-quote > * { position: relative; z-index: 1; } .wp-block-quote.is-style-area85-quote p { margin: 0; font-size: var(--wp--preset--font-size--x-large); font-weight: 700; font-style: italic; line-height: 1.35; } .wp-block-quote.is-style-area85-quote cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 400; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); } /* Zugänglichkeit: nur für Screenreader */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } /* Tastatur-Fokus klar sichtbar */ :where(a, button, input, select, .wp-block-search__button):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }