/* =========================================================================== kamera-blog.de - theme.css --------------------------------------------------------------------------- Alles, was frueher inline im jeder Seite stand, plus die neuen Bausteine (Navigation, Paginierung, Archiv-Hinweis, YouTube-Lightbox). style.css (Kubrick) bleibt unangetastet. Wenn spaeter das Redesign kommt, ist DIESE Datei der einzige Ort, an dem etwas passiert. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Kubrick-Grafiken (frueher inline im jeder einzelnen Seite) --------------------------------------------------------------------------- */ /* Scrollleiste immer anzeigen: sonst springt der zentrierte Inhalt beim Wechsel zwischen kurzen (Startseite) und langen Seiten (News/Archiv), weil die Scrollleiste mal da ist und mal nicht. */ html { scrollbar-gutter: stable; overflow-y: scroll; } body { background: url("/bilder/kubrickbgcolor.jpg"); } #page { background: url("/bilder/kubrickbg.jpg") repeat-y top; border: none; } #header{ background: url("/bilder/kubrickheader.jpg") no-repeat bottom center; margin: 0; padding: 0; height: 138px; width: 100%; box-sizing: border-box; } #footer{ background: url("/bilder/kubrickfooter.jpg") no-repeat bottom; border: none; } /* Header komplett klickbar (ersetzt das alte leere #chname-Div) */ #kb-headerlink { display: block; width: 100%; height: 100%; } .kb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 2. Navigation (neu - vorher gab es keine) --------------------------------------------------------------------------- */ #kb-nav { margin: 0; padding: 0; background: #3a4a55; width: calc(100% - 20px); box-sizing: border-box; margin-left: 10px; } #kb-nav ul { margin: 0; padding: 0; list-style: none; } #kb-nav li { display: inline-block; margin: 0; } #kb-nav a { display: block; padding: 9px 18px; color: #fff; font: bold 12px 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; text-decoration: none; letter-spacing: .03em; } #kb-nav a:hover, #kb-nav a[aria-current] { background: #c1a178; color: #2b3138; } /* --------------------------------------------------------------------------- 3. Beitraege --------------------------------------------------------------------------- */ img { max-width: 100%; height: auto; } .post h2 a { color: #333; text-decoration: none; } .post h2 a:hover { color: #3a4a55; } /* Rubriken-Überschrift (/news/, /tipps/, /archiv/) in Gold – gilt NICHT für Beitragstitel, die ein nacktes

ohne .pagetitle nutzen. */ h1.pagetitle { color: #c1a178; padding-top: 30px; } /* Abstand zwischen Rubrik-Beschreibung und erstem Beitrag */ .kb-rubrik-desc { margin-bottom: 55px; } /* Abstand über der Beitragsüberschrift auf Detailseiten */ .kb-single h1 { padding-top: 55px; } .kb-teaser-img { display: block; margin: 0 0 10px; border-radius: 4px; } .kb-single-img { display: block; margin: 0 0 15px; border-radius: 4px; width: 100%; } .kb-more { white-space: nowrap; } .post small { display: block; margin: 2px 0 8px; color: #777; } /* Archiv-Hinweis: ohne ihn waeren "200 Euro" von 2011 schlicht Falschinfo */ .kb-archiv-hinweis { margin: 0 0 15px; padding: 9px 12px; background: #fdf6e3; border-left: 4px solid #d9a441; border-radius: 0 3px 3px 0; font-size: .92em; color: #6b5424; text-align: left; } .kb-quelle { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid #e6e6e6; font-size: .9em; color: #777; text-align: left; } .kb-related { margin: 40px 0 0; padding: 15px 18px; background: #f6f7f9; border-radius: 4px; text-align: left; } .kb-related h2 { margin: 0 0 8px; font-size: 1.15em; } .kb-related ul { margin: 0; padding: 0 0 0 18px; } .kb-related li { margin: 4px 0; } /* Hinweis-Box fuer leere Rubriken/404 */ .kb-hinweis { padding: 14px 16px; background: #f6f7f9; border-left: 4px solid #c1a178; border-radius: 0 3px 3px 0; text-align: left; } /* --------------------------------------------------------------------------- 4. Paginierung --------------------------------------------------------------------------- */ .kb-pagination { display: block; margin: 35px 0 50px; padding: 0; text-align: center; font-size: 1.05em; } .kb-pagination a, .kb-pagination .kb-pg-cur, .kb-pagination .kb-pg-gap { display: inline-block; min-width: 20px; margin: 2px 1px; padding: 6px 10px; border-radius: 3px; text-decoration: none; line-height: 1; } .kb-pagination a { color: #3a4a55; background: #eef1f6; border: 1px solid #d7dee9; } .kb-pagination a:hover { background: #c1a178; color: #2b3138; border-color: #b3906a; } .kb-pagination .kb-pg-cur { background: #3a4a55; color: #fff; border: 1px solid #3a4a55; font-weight: bold; } .kb-pagination .kb-pg-gap { color: #999; border: 1px solid transparent; } .kb-pg-prev, .kb-pg-next { font-weight: bold; } /* Link von der Startseite zum Archiv (unter den aktuellen Beiträgen) */ .kb-archiv-link { display: block; margin: 35px 0 50px; text-align: center; } .kb-archiv-link a { display: inline-block; padding: 8px 16px; border-radius: 3px; font-size: 1.05em; font-weight: bold; text-decoration: none; color: #3a4a55; background: #eef1f6; border: 1px solid #d7dee9; } .kb-archiv-link a:hover { background: #c1a178; color: #2b3138; border-color: #b3906a; } /* --------------------------------------------------------------------------- 4b. Rubriken-Buttons in der Sidebar (Stil wie Paginierung) --------------------------------------------------------------------------- */ .kb-rubrik-buttons { text-align: left; margin-bottom: 25px; } .kb-rubrik-buttons h2 { margin: 5px 0 15px; font-size: 1.2em; } .kb-rubrik-buttons a { display: block; margin: 0 0 8px; padding: 8px 14px; border-radius: 3px; font-size: 1em; font-weight: bold; text-decoration: none; color: #3a4a55; background: #eef1f6; border: 1px solid #d7dee9; } .kb-rubrik-buttons a:hover { background: #c1a178; color: #2b3138; border-color: #b3906a; } .kb-rubrik-buttons a.is-active { background: #3a4a55; color: #fff; border-color: #3a4a55; } /* --------------------------------------------------------------------------- 5. YouTube Lightbox (frueher inline, jetzt einmal zentral) --------------------------------------------------------------------------- */ .chd-yt { position: relative; width: 100%; max-width: 726px; margin: 0 0 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .chd-yt-open { display: block; position: relative; width: 100%; padding: 0 0 56.25% 0; border: 0; border-radius: 5px; overflow: hidden; background: #0a1424; cursor: pointer; box-shadow: 0 2px 10px rgba(20,40,80,.18); } .chd-yt-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0a1424; } .chd-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(58,74,85,.92); display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.35); pointer-events: none; transition: transform .15s, background .15s; } .chd-yt-open:hover .chd-yt-play { background: #c1a178; transform: translate(-50%,-50%) scale(1.08); } .chd-yt-open:hover .chd-yt-play svg { fill: #2b3138; } .chd-yt-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; } .chd-yt-lb { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: none; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; background: rgba(8,16,32,.88); padding: 4vmin; } .chd-yt-lb.is-open { display: -ms-flexbox; display: flex; } .chd-yt-lb-inner { position: relative; width: 92vw; max-width: 1100px; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 50px rgba(0,0,0,.55); } @supports (width: min(92vw, 100px)) { .chd-yt-lb-inner { width: min(92vw, calc(88vh * 16 / 9)); } } .chd-yt-lb-frame { position: relative; width: 100%; padding-bottom: 56.25%; } .chd-yt-lb-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .chd-yt-lb-close { position: absolute; top: -42px; right: 0; z-index: 5; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .chd-yt-lb-close:hover { background: rgba(255,255,255,.32); } @media (max-width: 600px) { .chd-yt { max-width: 100%; } .chd-yt-play { width: 54px; height: 54px; } .chd-yt-play svg { width: 26px; height: 26px; } } /* --------------------------------------------------------------------------- 5b. Instagram Lightbox (lokales Vorschaubild, Click-to-Load) --------------------------------------------------------------------------- */ .chd-ig { position: relative; width: 100%; max-width: 380px; margin: 0 0 15px; } .chd-ig-open { display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #dfe3e7; cursor: pointer; box-shadow: 0 2px 10px rgba(20,40,80,.18); line-height: 0; } .chd-ig-thumb { display: block; width: 100%; height: auto; } .chd-ig-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(58,74,85,.92); display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.35); pointer-events: none; transition: transform .15s, background .15s; } .chd-ig-open:hover .chd-ig-play { background: #c1a178; transform: translate(-50%,-50%) scale(1.08); } .chd-ig-open:hover .chd-ig-play svg { fill: #2b3138; } .chd-ig-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; } .chd-ig-lb { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: none; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; background: rgba(8,16,32,.88); padding: 4vmin; overflow-y: auto; } .chd-ig-lb.is-open { display: -ms-flexbox; display: flex; } .chd-ig-lb-inner { position: relative; width: 100%; max-width: 540px; } .chd-ig-lb-frame { background: #fff; border-radius: 8px; overflow: hidden; min-height: 200px; } .chd-ig-lb-close { position: absolute; top: -42px; right: 0; z-index: 5; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .chd-ig-lb-close:hover { background: rgba(255,255,255,.32); } @media (max-width: 600px) { .chd-ig { max-width: 100%; } } /* --------------------------------------------------------------------------- 6. Responsive --------------------------------------------------------------------------- */ @media (max-width: 800px) { html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden; } #page { width: auto !important; max-width: 100%; background-size: cover; margin: 0 !important; padding: 0 !important; } #header { width: auto !important; max-width: 100%; background-size: cover; background-position: left; margin: 0 !important; } #kb-nav { width: 100%; margin: 0; } #kb-nav a { padding: 10px 14px; } #content.narrowcolumn, #sidebar { float: none !important; width: auto !important; max-width: 100%; margin: 0 auto !important; padding: 0 12px; box-sizing: border-box; } #footer { width: auto !important; max-width: 100%; margin: 0 !important; box-sizing: border-box; } .alignleft { float: none; display: block; margin: 0 0 10px; } /* Schriften mobil groesser */ .entry, .entry p, #content, #content li { font-size: 15px; line-height: 1.55; } .post h2 { font-size: 22px; line-height: 1.3; } .post h1 { font-size: 26px; line-height: 1.25; } .pagetitle { padding-top: 30px; } .kb-single h1 { padding-top: 55px; } small { font-size: 13px; } #sidebar, #sidebar li, #sidebar h2 { font-size: 15px; } #footer, #footer p { font-size: 13px; } .kb-pagination a, .kb-pagination .kb-pg-cur { padding: 8px 12px; } } /* --------------------------------------------------------------------------- 7. Bearbeiten-Button im Beitrag (nur fuer eingeloggte Redaktion sichtbar) --------------------------------------------------------------------------- */ .kb-admin-editlink { margin: 20px 0 0; padding: 12px 0 0; border-top: 1px dashed #c1a178; text-align: right; } .kb-admin-editlink a { display: inline-block; padding: 7px 16px; border-radius: 3px; font-size: .9em; font-weight: bold; text-decoration: none; color: #fff; background: #3a4a55; border: 1px solid #3a4a55; } .kb-admin-editlink a:hover { background: #c1a178; color: #2b3138; border-color: #b3906a; }