Dome
33df5bbe2e
* reorganized CSS into clear sections (Root, Base, Layout, Typography, Components, Utilities) * removed redundant and duplicate rules (header, branding, search, media, etc.) * consolidated repeated selectors into single sources of truth * unified form styles (comments + CF7) * cleaned up sidebar/widget styles and resolved conflicting rules * fixed related posts grid issue (min-width: 0 for grid children) * improved TOC structure and extracted shared calculations * simplified social links and hover behavior * removed unsafe global performance hint (will-change) * added prefers-reduced-motion support for accessibility * improved overall cascade predictability and reduced specificity conflicts No visual changes intended (safe refactor).
2271 lines
39 KiB
CSS
2271 lines
39 KiB
CSS
@charset "UTF-8";
|
||
/*!
|
||
Theme Name: Zeitfresser
|
||
Author: Zeitfresser
|
||
Author URI: https://ztfr.eu/
|
||
Theme URI: https://ztfr.eu/
|
||
Description: Zeitfresser Wordpress Theme
|
||
Version: 2.5
|
||
Tested up to: 6.2
|
||
Requires PHP: 7.0
|
||
License: GNU General Public License v2 or later
|
||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||
Text Domain: zeitfresser
|
||
Tags: blog, custom-colors, custom-header, editor-style, flexible-header, footer-widgets, right-sidebar, two-columns, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, sticky-post
|
||
|
||
This theme is a modified version (fork) of the "Daisy Blog" theme.
|
||
Original Work: Daisy Blog, Copyright 2022 Graphthemes
|
||
Modifications: Zeitfresser WordPress Theme, Copyright 2026 Zeitfresser
|
||
|
||
This theme, like WordPress, is free software: you can redistribute it and/or modify
|
||
it under the terms of the GNU General Public License (v2 or later).
|
||
|
||
Use it to make something cool, have fun, and share what you've learned!*/
|
||
|
||
|
||
|
||
/*--------------------------------------------------------------
|
||
# 1. ROOT / TOKENS
|
||
--------------------------------------------------------------*/
|
||
|
||
|
||
:root {
|
||
--space-md: 1.5rem;
|
||
--space-lg: 2rem;
|
||
|
||
--zeitfresser-toc-top-offset: 10px;
|
||
--zeitfresser-toc-width: 230px;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# 2. BASE (Reset, HTML Elements)
|
||
--------------------------------------------------------------*/
|
||
|
||
/* Reset / Box sizing */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Global */
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--dark-color);
|
||
font-family: var(--secondary-font);
|
||
line-height: var(--line-height);
|
||
font-weight: var(--font-weight);
|
||
color: var(--light-color);
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Header */
|
||
|
||
body header.site-header {
|
||
position: relative;
|
||
background: var(--dark-color);
|
||
}
|
||
|
||
.site-header {
|
||
position: relative;
|
||
background: var(--dark-color);
|
||
}
|
||
|
||
.site-header.sticky-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.logged-in .site-header.sticky-header {
|
||
top: 32px;
|
||
}
|
||
|
||
/* Links */
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:focus {
|
||
outline: thin dotted;
|
||
}
|
||
|
||
a:hover,
|
||
a:active {
|
||
outline: 0;
|
||
color: var(--hover-color);
|
||
}
|
||
|
||
.entry-content a,
|
||
.post-content a {
|
||
color: var(--light-color);
|
||
text-decoration: none;
|
||
|
||
background: linear-gradient(currentColor, currentColor);
|
||
background-size: 100% 1px; /* always visible */
|
||
background-position: 0 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
transition: color 0.2s ease, opacity 0.2s ease;
|
||
}
|
||
|
||
.entry-content a:hover,
|
||
.entry-content a:focus,
|
||
.post-content a:hover,
|
||
.post-content a:focus {
|
||
color: var(--hover-color);
|
||
background-size: 0 1px;
|
||
}
|
||
|
||
/* Media (img, iframe) */
|
||
|
||
embed,
|
||
iframe,
|
||
object {
|
||
max-width: 100%;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
figure {
|
||
margin: 1em 0;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
/* Forms base */
|
||
|
||
button:hover,
|
||
input[type="button"]:hover,
|
||
input[type="reset"]:hover,
|
||
input[type="submit"]:hover {
|
||
border-color: #ccc #bbb #aaa;
|
||
}
|
||
|
||
button:focus,
|
||
button:active,
|
||
input[type="button"]:focus,
|
||
input[type="button"]:active,
|
||
input[type="reset"]:focus,
|
||
input[type="reset"]:active,
|
||
input[type="submit"]:focus,
|
||
input[type="submit"]:active {
|
||
border-color: #aaa #bbb #bbb;
|
||
}
|
||
|
||
input,
|
||
textarea,
|
||
select {
|
||
border-radius: 3px;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="email"],
|
||
input[type="url"],
|
||
input[type="password"],
|
||
input[type="search"],
|
||
input[type="number"],
|
||
input[type="tel"],
|
||
textarea {
|
||
color: #666;
|
||
border: 1px solid #ccc;
|
||
padding: 3px;
|
||
}
|
||
|
||
input:focus,
|
||
textarea:focus {
|
||
color: #111;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
/*--------------------------------------------------------------
|
||
# 3. LAYOUT
|
||
--------------------------------------------------------------*/
|
||
|
||
/* Grid */
|
||
|
||
.main-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 9fr 3fr;
|
||
gap: 40px 80px;
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.custom-grid-view {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: clamp(40px, 6vw, 70px); /* fluid instead of breakpoint */
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.main-wrapper {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Container */
|
||
|
||
.container {
|
||
max-width: var(--container-width);
|
||
margin: 0 auto;
|
||
padding-inline: 70px;
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.container {
|
||
padding-inline: 20px;
|
||
}
|
||
}
|
||
|
||
/* Page spacing */
|
||
|
||
.archive-wrapper {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.page-title {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.page-content,
|
||
.entry-content,
|
||
.entry-summary {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Header Wrapper */
|
||
|
||
.header-wrapper {
|
||
padding: 3rem 0;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.header-wrapper {
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
.site-header {
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
.site-header-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* Sidebar Layout */
|
||
|
||
@media (max-width: 900px) {
|
||
.widget-area {
|
||
margin-top: 0;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.widget-area {
|
||
grid-template-columns: 1fr;
|
||
gap: 1rem;
|
||
}
|
||
}
|
||
|
||
.widget-area ul,
|
||
.widget-area ol {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.widget-area .info {
|
||
font-family: var(--secondary-font);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* Sidebar Widgets */
|
||
|
||
.widget {
|
||
background-color: var(--footer-color);
|
||
color: var(--light-color);
|
||
|
||
padding: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.widget ul li {
|
||
margin-bottom: 0.9rem;
|
||
padding-bottom: 0.6rem;
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
|
||
.widget ul li:last-child {
|
||
margin-bottom: 0;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.widget a {
|
||
color: var(--light-color);
|
||
text-decoration: none;
|
||
|
||
background: linear-gradient(currentColor, currentColor);
|
||
background-size: 0 1px;
|
||
background-position: 0 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
transition: color 0.2s ease, background-size 0.2s ease;
|
||
}
|
||
|
||
.widget a:hover,
|
||
.widget a:focus {
|
||
color: var(--hover-color);
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.widget-title,
|
||
.widget h2,
|
||
.widget h3 {
|
||
color: var(--hover-color);
|
||
margin-bottom: 1rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# 4. TYPOGRAPHY / BUTTONS
|
||
--------------------------------------------------------------*/
|
||
|
||
/* Typography */
|
||
|
||
.widget-title,
|
||
.widget_block h2 {
|
||
font: 400 1.2rem var(--primary-font);
|
||
text-transform: uppercase;
|
||
margin-top: 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
font-family: var(--primary-font);
|
||
font-weight: 400;
|
||
}
|
||
|
||
h1 { font-size: 2.488rem; line-height: 1.4; }
|
||
h2 { font-size: 2.074rem; line-height: 1.2; }
|
||
h3 { font-size: 1.6rem; line-height: 1.2; }
|
||
h4 { font-size: 1.44rem; }
|
||
h5 { font-size: 1.2rem; }
|
||
h6 { font-size: 1rem; line-height: 1.3; }
|
||
|
||
@media (max-width: 900px) {
|
||
h1 { font-size: 1.802rem; }
|
||
h2 { font-size: 1.5rem; }
|
||
h3 { font-size: 1.424rem; }
|
||
h4 { font-size: 1rem; }
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
h1 { font-size: 1.383rem; }
|
||
h2 { font-size: 1.296rem; }
|
||
h3 { font-size: 1.215rem; }
|
||
h4 { font-size: 1rem; }
|
||
}
|
||
|
||
/* Buttons */
|
||
|
||
.wp-block-search__button,
|
||
input[type=submit],
|
||
input[type=button] {
|
||
background: var(--light-color);
|
||
color: var(--dark-color);
|
||
border: none;
|
||
padding: 1.25rem 3rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.wp-block-search__button:hover,
|
||
input[type=submit]:hover,
|
||
input[type=button]:hover {
|
||
background: var(--hover-color);
|
||
}
|
||
|
||
/* Content Lists */
|
||
.post-content > ul,
|
||
.post-content > ol {
|
||
padding-left: 1.75em;
|
||
}
|
||
|
||
.post-content > li {
|
||
padding-left: 0.35em;
|
||
}
|
||
|
||
/*--------------------------------------------------------------
|
||
# 5. COMPONENTS
|
||
--------------------------------------------------------------*/
|
||
|
||
/* Main Navigation */
|
||
|
||
.main-navigation a {
|
||
color: var(--light-color);
|
||
text-decoration: none;
|
||
background: linear-gradient(currentColor, currentColor);
|
||
background-size: 0 1px;
|
||
background-position: 0 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
transition: color 0.2s ease, background-size 0.2s ease;
|
||
}
|
||
|
||
.main-navigation a:hover,
|
||
.main-navigation a:focus {
|
||
color: var(--hover-color);
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.main-navigation ul ul a {
|
||
background: none !important;
|
||
}
|
||
|
||
.main-navigation ul {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.main-navigation ul ul {
|
||
text-align: left;
|
||
transition: transform 0.3s ease, opacity 0.2s ease;
|
||
top: 100%;
|
||
left: 0;
|
||
box-shadow: 0 0px 20px rgba(166, 166, 166, 0.25);
|
||
width: 220px;
|
||
position: absolute;
|
||
z-index: 999;
|
||
transform-origin: top;
|
||
animation-fill-mode: forwards;
|
||
transform: scaleY(0);
|
||
display: block;
|
||
opacity: 0;
|
||
background-color: var(--dark-color);
|
||
}
|
||
|
||
.main-navigation ul ul ul {
|
||
left: 100%;
|
||
top: 0;
|
||
}
|
||
|
||
.main-navigation ul ul li:hover > ul {
|
||
opacity: 1;
|
||
left: 100%;
|
||
}
|
||
|
||
.main-navigation ul li:hover > ul {
|
||
display: block;
|
||
opacity: 1;
|
||
z-index: 1000;
|
||
transform: scaleY(1);
|
||
transition: transform 0.3s ease, opacity 0.2s ease 0.1s;
|
||
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease 0.1s;
|
||
}
|
||
|
||
.main-navigation ul li:focus > ul {
|
||
display: block;
|
||
opacity: 1;
|
||
z-index: 1000;
|
||
transform: scaleY(1);
|
||
transition: transform 0.3s ease, opacity 0.2s ease 0.1s;
|
||
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease 0.1s;
|
||
}
|
||
|
||
.main-navigation ul li li:last-child > a {
|
||
border: none;
|
||
}
|
||
|
||
.main-navigation ul li li a:hover:after {
|
||
display: none;
|
||
}
|
||
|
||
.main-navigation ul li a {
|
||
font-family: var(--secondary-font);
|
||
display: block;
|
||
padding: 8px 20px;
|
||
position: relative;
|
||
z-index: 99;
|
||
transition: color 0.2s ease, background-size 0.2s ease;
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.main-navigation ul li ul li a {
|
||
padding: 10px 20px !important;
|
||
}
|
||
|
||
.main-navigation ul li ul li.page_item_has_children > a::before {
|
||
content: "▾";
|
||
right: 15px;
|
||
}
|
||
|
||
.main-navigation ul li ul li.page_item_has_children > a::before,
|
||
.main-navigation ul li ul li.menu-item-has-children > a::before {
|
||
right: 20px;
|
||
top: 10px;
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.main-navigation ul li ul li.menu-item-has-children > a::before {
|
||
content: "›";
|
||
right: 15px;
|
||
}
|
||
|
||
.main-navigation ul li.focus > ul {
|
||
display: block;
|
||
opacity: 1;
|
||
z-index: 1000;
|
||
transform: scaleY(1);
|
||
transition: transform 0.3s ease, opacity 0.2s ease 0.1s;
|
||
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease 0.1s;
|
||
}
|
||
|
||
.main-navigation ul > li:hover > ul {
|
||
opacity: 1;
|
||
left: 0;
|
||
z-index: 999;
|
||
background: var(--dark-color);
|
||
}
|
||
|
||
.main-navigation ul li.page_item_has_children > a::before {
|
||
content: "▾";
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
-webkit-transform: translateY(-50%);
|
||
transition: all 0.3s ease-in-out;
|
||
-webkit-transition: all 0.3s ease-in-out;
|
||
-moz-transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
.main-navigation ul li.menu-item-has-children > a::before {
|
||
content: "▾";
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
-webkit-transform: translateY(-50%);
|
||
transition: all 0.3s ease-in-out;
|
||
-webkit-transition: all 0.3s ease-in-out;
|
||
-moz-transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
.main-navigation li {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.main-navigation li li {
|
||
float: none;
|
||
display: block;
|
||
}
|
||
|
||
.main-navigation li > a {
|
||
position: relative;
|
||
}
|
||
|
||
.main-navigation li li.current_page_item > a:after {
|
||
display: none;
|
||
}
|
||
|
||
.main-navigation li li.current-menu-item > a:after {
|
||
display: none;
|
||
}
|
||
|
||
.main-navigation .dropdown-toggle::after {
|
||
display: none !important;
|
||
}
|
||
|
||
@media screen and (min-width: 37.5em) {
|
||
.menu-toggle {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1200px) {
|
||
.menu-toggle {
|
||
display: block;
|
||
background: none;
|
||
padding: 0;
|
||
z-index: 999;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.navbar-toggler {
|
||
margin: 0 0 0 auto;
|
||
border: 0;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.main-navigation.toggled #nav-icon span:nth-child(1) {
|
||
top: 7px;
|
||
width: 0%;
|
||
left: 50%;
|
||
}
|
||
|
||
.main-navigation.toggled #nav-icon span:nth-child(2) {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.main-navigation.toggled #nav-icon span:nth-child(3) {
|
||
transform: rotate(-45deg);
|
||
}
|
||
|
||
.main-navigation.toggled #nav-icon span:nth-child(4) {
|
||
top: 7px;
|
||
width: 0%;
|
||
left: 50%;
|
||
}
|
||
|
||
.main-navigation ul li a {
|
||
padding: 10px 15px;
|
||
width: 100%;
|
||
}
|
||
|
||
.main-navigation ul li.page_item_has_children > a::before, .main-navigation ul li.menu-item-has-children > a::before {
|
||
right: 15px;
|
||
}
|
||
|
||
.main-navigation ul li ul li.page_item_has_children > a::before, .main-navigation ul li ul li.menu-item-has-children > a::before {
|
||
right: 15px;
|
||
}
|
||
|
||
.main-navigation ul ul {
|
||
visibility: initial;
|
||
opacity: 1;
|
||
transition: initial;
|
||
top: initial;
|
||
left: initial;
|
||
width: 100%;
|
||
position: static;
|
||
z-index: 999;
|
||
transform-origin: initial;
|
||
animation-fill-mode: initial;
|
||
transform: initial;
|
||
box-shadow: initial;
|
||
height: 0;
|
||
overflow: hidden;
|
||
background-color: var(--dark-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.main-navigation li {
|
||
display: block;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.main-navigation .nav-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--dark-color);
|
||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
||
z-index: 999;
|
||
margin: 0;
|
||
}
|
||
|
||
.main-navigation.toggled .nav-menu {
|
||
display: block;
|
||
z-index: 999;
|
||
}
|
||
|
||
.main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation ul li.focus > ul {
|
||
height: auto;
|
||
overflow: visible;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.main-navigation ul ul ul {
|
||
left: initial;
|
||
top: initial;
|
||
border-style: solid none none;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
|
||
|
||
.header .header-wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.header-wrapper .main-navigation ul {
|
||
float: none;
|
||
}
|
||
}
|
||
|
||
/* Social Navigation */
|
||
|
||
.nav-social-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.social-links li {
|
||
display: flex;
|
||
}
|
||
|
||
.social-links a {
|
||
display: inline-flex;
|
||
margin: 0 0.5rem;
|
||
background: none;
|
||
}
|
||
|
||
.social-links svg {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
fill: var(--light-color);
|
||
transition: fill 0.2s ease;
|
||
}
|
||
|
||
.social-links a:hover svg {
|
||
fill: var(--hover-color);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.social-links {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Navigation Icons */
|
||
|
||
#nav-icon3 {
|
||
width: 40px;
|
||
height: 30px;
|
||
position: relative;
|
||
transform: rotate(0deg);
|
||
transition: 0.5s ease-in-out;
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
|
||
#nav-icon3 span {
|
||
display: block;
|
||
position: absolute;
|
||
height: 3px;
|
||
width: 100%;
|
||
background: var(--light-color);
|
||
border-radius: 9px;
|
||
opacity: 1;
|
||
left: 0;
|
||
transform: rotate(0deg);
|
||
transition: 0.25s ease-in-out;
|
||
}
|
||
|
||
#nav-icon3 span:nth-child(1) {
|
||
top: 0px;
|
||
}
|
||
|
||
#nav-icon3 span:nth-child(2),
|
||
#nav-icon3 span:nth-child(3) {
|
||
top: 11px;
|
||
}
|
||
|
||
#nav-icon3 span:nth-child(4) {
|
||
top: 22px;
|
||
}
|
||
|
||
#nav-icon3.open span:nth-child(1) {
|
||
top: 11px;
|
||
width: 0%;
|
||
left: 50%;
|
||
}
|
||
|
||
#nav-icon3.open span:nth-child(2) {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
#nav-icon3.open span:nth-child(3) {
|
||
transform: rotate(-45deg);
|
||
}
|
||
|
||
#nav-icon3.open span:nth-child(4) {
|
||
top: 11px;
|
||
width: 0%;
|
||
left: 50%;
|
||
}
|
||
|
||
/* Header */
|
||
|
||
header a {
|
||
transition: color 0.3s ease, background 0.3s ease;
|
||
}
|
||
|
||
header.site-header {
|
||
padding: 0;
|
||
position: relative;
|
||
background: var(--dark-color);
|
||
}
|
||
|
||
@media screen and (max-width: 900px) {
|
||
header.site-header {
|
||
margin: 0 0 30px;
|
||
}
|
||
}
|
||
|
||
header.site-header .header-wrapper {
|
||
padding: 3rem 0;
|
||
}
|
||
|
||
@media screen and (max-width: 900px) {
|
||
header.site-header .header-wrapper {
|
||
padding: 1rem 0;
|
||
}
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .nav-social-links {
|
||
display: flex;
|
||
align-items: center;
|
||
grid-gap: 20px;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding {
|
||
min-width: var(--logo-size);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: 350px;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .custom-logo-link {
|
||
background: none;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .custom-logo-link img {
|
||
width: var(--logo-size);
|
||
max-width: none;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity {
|
||
width: -moz-max-content;
|
||
width: max-content;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title {
|
||
font-size: var(--site-identity-font-size);
|
||
font-family: var(--site-identity-font-family);
|
||
line-height: 1.25em;
|
||
width: -moz-max-content;
|
||
width: max-content;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title .logo {
|
||
color: var(--light-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-title .logo:hover {
|
||
color: var(--hover-color);
|
||
}
|
||
|
||
header.site-header .header-wrapper .site-header-wrapper .site-branding .site-identity .site-description {
|
||
font-size: 1rem;
|
||
width: -moz-max-content;
|
||
width: max-content;
|
||
}
|
||
|
||
header.site-header.sticky-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* Social Links */
|
||
|
||
@media only screen and (max-width: 768px) {
|
||
header.site-header .social-links {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
header.site-header .social-links svg {
|
||
fill: var(--light-color);
|
||
max-width: 1rem;
|
||
height: 1rem;
|
||
}
|
||
|
||
header.site-header .social-links svg:hover {
|
||
fill: var(--hover-color);
|
||
}
|
||
|
||
.logged-in header.sticky-header {
|
||
top: 32px;
|
||
}
|
||
|
||
/* Search */
|
||
|
||
.site-header .search-form {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
@media only screen and (max-width: 500px) {
|
||
.site-header .search-form {
|
||
left: -20px;
|
||
right: -20px;
|
||
}
|
||
}
|
||
|
||
.site-header .search-field {
|
||
width: 2rem;
|
||
min-width: 2rem;
|
||
height: 32px;
|
||
padding-left: 45px;
|
||
background: transparent url(images/search.svg) no-repeat 5px center;
|
||
background-size: 20px;
|
||
border: none;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
position: relative;
|
||
color: var(--light-color);
|
||
transition: width 0.4s ease, background 0.4s ease;
|
||
}
|
||
|
||
@media only screen and (max-width: 500px) {
|
||
.site-header .search-field {
|
||
background-position: 15px center;
|
||
}
|
||
}
|
||
|
||
.site-header .search-field:focus {
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
background-image: url(images/search-b.svg);
|
||
border: none;
|
||
cursor: text;
|
||
outline: 0;
|
||
width: 320px;
|
||
}
|
||
|
||
@media only screen and (max-width: 500px) {
|
||
.site-header .search-field:focus {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.site-header .search-field::-moz-placeholder {
|
||
color: var(--light-color) !important;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.site-header .search-field::placeholder {
|
||
color: var(--light-color) !important;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.site-header .search-submit {
|
||
display: none;
|
||
}
|
||
|
||
/* News Snippet */
|
||
|
||
.news-snippet .news-title {
|
||
margin-top: 0.3rem;
|
||
margin-bottom: 0.7rem;
|
||
}
|
||
|
||
.news-snippet .featured-image {
|
||
aspect-ratio: 1 / 1;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.news-snippet .featured-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.news-snippet .summary .excerpt {
|
||
margin: 0.5rem 0;
|
||
font-family: var(--secondary-font);
|
||
color: var(--light-color);
|
||
}
|
||
|
||
.news-snippet .summary {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.news-snippet .summary .category,
|
||
.news-snippet .summary .tags {
|
||
font-family: var(--secondary-font);
|
||
font-weight: 400;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.news-snippet .summary .category a,
|
||
.news-snippet .summary .tags a {
|
||
margin: 0 0.5rem 0.5rem 0;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
text-transform: uppercase;
|
||
background: none;
|
||
position: relative;
|
||
}
|
||
|
||
.news-snippet .summary .category a:before,
|
||
.news-snippet .summary .tags a:before {
|
||
content: ",";
|
||
position: absolute;
|
||
right: -6px;
|
||
}
|
||
|
||
.news-snippet .summary .category a:last-child:before,
|
||
.news-snippet .summary .tags a:last-child:before {
|
||
content: none;
|
||
}
|
||
|
||
.news-snippet .summary .category a:hover,
|
||
.news-snippet .summary .tags a:hover {
|
||
color: var(--hover-color);
|
||
border-color: var(--light-color);
|
||
}
|
||
|
||
.custom-grid-view {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 70px;
|
||
align-items: start;
|
||
}
|
||
@media screen and (max-width: 500px) {
|
||
.custom-grid-view {
|
||
grid-gap: 40px;
|
||
}
|
||
}
|
||
|
||
/* Post Navigation */
|
||
|
||
.news-snippet .news-title a {
|
||
color: var(--light-color);
|
||
text-decoration: none;
|
||
background-image: linear-gradient(currentColor, currentColor);
|
||
background-size: 0 1px;
|
||
background-position: 0 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
transition: color 0.2s ease, background-size 0.2s ease;
|
||
}
|
||
|
||
.news-snippet .news-title a:hover,
|
||
.news-snippet .news-title a:focus {
|
||
color: var(--hover-color);
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.post-navigation {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.post-navigation .nav-links {
|
||
display: flex;
|
||
}
|
||
|
||
.post-navigation .nav-previous,
|
||
.post-navigation .nav-next {
|
||
flex: 1;
|
||
}
|
||
|
||
.post-navigation .nav-next {
|
||
text-align: right;
|
||
}
|
||
|
||
.post-navigation .nav-previous::before {
|
||
content: "←";
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.post-navigation .nav-next::after {
|
||
content: "→";
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.post-navigation a {
|
||
color: var(--light-color);
|
||
text-decoration: none;
|
||
|
||
background: linear-gradient(currentColor, currentColor);
|
||
background-size: 0 1px;
|
||
background-position: 0 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
transition: color 0.2s ease, background-size 0.2s ease;
|
||
}
|
||
|
||
.post-navigation a:hover,
|
||
.post-navigation a:focus {
|
||
color: var(--hover-color);
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.custom-box {
|
||
background-color: var(--footer-color);
|
||
padding: 0.1rem 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
/* Search Widget */
|
||
|
||
.widget_search .wp-block-search__label {
|
||
display: none;
|
||
}
|
||
|
||
.widget_search .wp-block-search__inside-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 4fr 1fr;
|
||
gap: 0;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.widget_search .wp-block-search__inside-wrapper {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.widget_search .wp-block-search__inside-wrapper {
|
||
display: grid;
|
||
}
|
||
}
|
||
|
||
.widget_search input[type="search"] {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 1rem 1.5rem;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.widget_search input[type="submit"],
|
||
.widget_search .wp-block-search__button {
|
||
width: 100%;
|
||
padding: 1rem 2rem;
|
||
}
|
||
|
||
/* Empty State (404 + Search) */
|
||
|
||
.error-404,
|
||
.search-no-results .no-results {
|
||
min-height: 70vh;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.error-404 .page-content,
|
||
.search-no-results .page-content {
|
||
background-color: var(--footer-color);
|
||
padding: 2rem;
|
||
margin: 1.5rem auto 0;
|
||
border-radius: 6px;
|
||
max-width: 500px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.error-404 h1,
|
||
.search-no-results h1,
|
||
.search-no-results h2 {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.search-no-results p {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.error-404 .search-form,
|
||
.search-no-results .search-form {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.error-404 .search-field,
|
||
.search-no-results .search-field {
|
||
flex: 1;
|
||
padding: 0.75rem 1rem;
|
||
background-color: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
color: var(--light-color);
|
||
}
|
||
|
||
.error-404 .search-field:focus,
|
||
.search-no-results .search-field:focus {
|
||
outline: none;
|
||
border-color: var(--hover-color);
|
||
}
|
||
|
||
.error-404 .search-submit,
|
||
.search-no-results .search-submit {
|
||
background-color: var(--footer-color);
|
||
color: var(--light-color);
|
||
|
||
border: 1px solid rgba(255,255,255,0.15);
|
||
|
||
padding: 0.75rem 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.error-404 .search-submit:hover,
|
||
.search-no-results .search-submit:hover {
|
||
background-color: var(--hover-color);
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.error-404 .search-form,
|
||
.search-no-results .search-form {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.error-404 .search-submit,
|
||
.search-no-results .search-submit {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Search Widget */
|
||
|
||
.site-header .search-field:focus {
|
||
width: 320px;
|
||
|
||
background-color: rgba(255,255,255,0.85);
|
||
background-image: url(images/search-b.svg);
|
||
|
||
cursor: text;
|
||
outline: none;
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.site-header .search-field:focus {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.site-header .search-field::placeholder {
|
||
color: var(--dark-color);
|
||
font-weight: 300;
|
||
}
|
||
|
||
.site-header .search-submit {
|
||
display: none;
|
||
}
|
||
|
||
/* Sidebar Search */
|
||
|
||
.widget_search form {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 32px;
|
||
border: 1px solid #4a4d61;
|
||
border-radius: 4px;
|
||
background-color: #383a4a;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.widget_search input[type="search"] {
|
||
flex: 1;
|
||
padding: 0 10px;
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--light-color);
|
||
}
|
||
|
||
.widget_search button[type="submit"] {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
height: 100%;
|
||
border: none;
|
||
background-color: var(--hover-color);
|
||
color: var(--dark-color);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.widget_search form:focus-within {
|
||
border-color: var(--hover-color);
|
||
}
|
||
|
||
/* Posts and Pages */
|
||
|
||
.sticky {
|
||
display: block;
|
||
}
|
||
|
||
.post,
|
||
.page {
|
||
margin: 0;
|
||
}
|
||
|
||
.updated:not(.published) {
|
||
display: none;
|
||
}
|
||
|
||
.entry-content,
|
||
.post-content,
|
||
.inner-article-content {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.page-links {
|
||
clear: both;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.entry-content,
|
||
.post-content,
|
||
.inner-article-content {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.single-post .entry-content > * + * {
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
.single-post .entry-content .wp-block > * + * {
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
.single-post .entry-content > *:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.single-post .entry-content h2,
|
||
.single-post .entry-content h3 {
|
||
margin-top: calc(var(--space-md) * 1.5);
|
||
}
|
||
|
||
.inside-page .inner-article-content {
|
||
font-family: var(--secondary-font);
|
||
}
|
||
|
||
.inside-page .entry-footer a {
|
||
color: var(--light-color);
|
||
}
|
||
|
||
/* Single Posts */
|
||
|
||
header.page-header {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
header.page-header h1 {
|
||
margin: 0;
|
||
}
|
||
|
||
.entry-header .entry-title {
|
||
margin: 0 0 2rem;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.single-post .entry-content ol,
|
||
.single-post .entry-content ul {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.single-post .wp-block-pullquote {
|
||
margin: 4rem 0 1rem;
|
||
}
|
||
|
||
.single-post .wp-block-pullquote blockquote {
|
||
position: relative;
|
||
}
|
||
|
||
.single-post .wp-block-pullquote blockquote p {
|
||
font-style: italic;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.single-post .wp-block-pullquote blockquote::before {
|
||
content: open-quote;
|
||
position: absolute;
|
||
top: -8rem;
|
||
left: 0;
|
||
font-size: 10rem;
|
||
color: var(--light-color);
|
||
}
|
||
|
||
.single-post .wp-block-quote {
|
||
margin: 2rem;
|
||
padding-left: 2rem;
|
||
border-left: 5px solid var(--light-color);
|
||
}
|
||
|
||
.single-post .wp-block-quote p {
|
||
font-style: italic;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.single-post .wp-block-preformatted,
|
||
.single-post .wp-block-verse {
|
||
background: var(--dark-color);
|
||
}
|
||
|
||
.author-post {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: var(--space-lg);
|
||
background: var(--dark-color);
|
||
font-family: var(--primary-font);
|
||
}
|
||
|
||
.author-post .author-image {
|
||
flex: 0 0 80px;
|
||
}
|
||
|
||
.author-post .author-image img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.author-post .author-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.author-post h4 {
|
||
margin: 0 0 1rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Archive */
|
||
|
||
.news-snippet {
|
||
display: flex;
|
||
flex-direction: column;
|
||
contain: content;
|
||
}
|
||
|
||
/* Media */
|
||
|
||
.page-content .wp-smiley,
|
||
.entry-content .wp-smiley,
|
||
.comment-content .wp-smiley {
|
||
border: none;
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.entry-content img,
|
||
.post-content img {
|
||
max-width: 100%;
|
||
height: auto !important;
|
||
}
|
||
|
||
.main-wrapper > * {
|
||
min-width: 0;
|
||
}
|
||
|
||
.entry-content figure,
|
||
.entry-content .wp-block-image,
|
||
.post-content figure,
|
||
.post-content .wp-block-image {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.entry-content,
|
||
.post-content {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Galleries */
|
||
|
||
.gallery {
|
||
display: grid;
|
||
gap: 1rem;
|
||
}
|
||
|
||
/* Captions */
|
||
|
||
.wp-caption {
|
||
max-width: 100%;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.wp-caption img {
|
||
display: block;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
.wp-caption-text {
|
||
text-align: center;
|
||
margin: 0.8em 0;
|
||
}
|
||
|
||
/* Links */
|
||
|
||
.category a,
|
||
.tags a {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin: 0 0.5rem 0.5rem 0;
|
||
text-transform: uppercase;
|
||
color: var(--light-color);
|
||
background: none;
|
||
}
|
||
|
||
/* Author */
|
||
|
||
.post-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.post-author::before {
|
||
content: "";
|
||
width: 20px;
|
||
height: 1px;
|
||
background-color: currentColor;
|
||
}
|
||
|
||
/* Comments */
|
||
|
||
.comments {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
|
||
font-family: var(--primary-font);
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.comments a {
|
||
background: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.comments svg {
|
||
fill: currentColor;
|
||
}
|
||
|
||
/* Category Tags */
|
||
|
||
.category,
|
||
.tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4rem;
|
||
|
||
margin: 1rem 0;
|
||
|
||
font: 400 0.85rem var(--secondary-font);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Related Posts */
|
||
|
||
.related-posts {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.related-posts .post-holder {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.related-posts .post-holder {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.related-posts h5 {
|
||
margin: 1rem 0;
|
||
line-height: 1.25;
|
||
font-family: var(--primary-font);
|
||
}
|
||
|
||
.related-posts .post-holder > * {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Navigation Posts */
|
||
|
||
.posts-navigation .nav-links {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
}
|
||
|
||
/* Pagnation */
|
||
|
||
.pagination a {
|
||
color: var(--light-color);
|
||
text-decoration: none;
|
||
|
||
background: linear-gradient(currentColor, currentColor);
|
||
background-size: 0 1px;
|
||
background-position: 0 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
transition: color 0.2s ease, background-size 0.2s ease;
|
||
}
|
||
|
||
.pagination a:hover,
|
||
.pagination a:focus {
|
||
color: var(--hover-color);
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.pagination ul {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.pagination .active a {
|
||
color: var(--light-color);
|
||
}
|
||
|
||
/* Readmore KANN WEG? */
|
||
|
||
.readmore {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
|
||
font-family: var(--primary-font);
|
||
}
|
||
|
||
.readmore svg {
|
||
height: 1.2em;
|
||
fill: currentColor;
|
||
}
|
||
|
||
/* Header / Footer Meta */
|
||
|
||
.info.ihead,
|
||
.info.ifoot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.info.ifoot {
|
||
margin: 1.3rem 0;
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Meta Info */
|
||
|
||
.info {
|
||
font-size: 0.85rem;
|
||
color: var(--light-color);
|
||
}
|
||
|
||
/* General Comments */
|
||
|
||
.comments-area {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.comments-title {
|
||
font-size: 1.5rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.comment-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.comment-list .comment {
|
||
background-color: var(--footer-color);
|
||
color: var(--light-color);
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
border-left: 4px solid var(--hover-color);
|
||
}
|
||
|
||
.comment-list .children {
|
||
margin-top: 1rem;
|
||
list-style: none;
|
||
padding-left: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.comment-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.comment-author img {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
}
|
||
|
||
.comment-metadata {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.comments-area a {
|
||
color: var(--light-color);
|
||
}
|
||
|
||
.comments-area a:hover {
|
||
color: var(--hover-color);
|
||
}
|
||
|
||
.comment-list .reply a {
|
||
color: var(--hover-color);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Comments CF7 Form */
|
||
|
||
.comment-respond {
|
||
background-color: var(--dark-color);
|
||
color: var(--light-color);
|
||
margin-bottom: var(--space-lg);
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.comment-form input:not([type="submit"]),
|
||
.comment-form textarea,
|
||
.wpcf7 input:not([type="submit"]),
|
||
.wpcf7 textarea {
|
||
width: 100%;
|
||
padding: 1rem;
|
||
background-color: rgba(255,255,255,0.04);
|
||
color: var(--light-color);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
|
||
.comment-form input:not([type="submit"]):focus,
|
||
.comment-form textarea:focus,
|
||
.wpcf7 input:not([type="submit"]):focus,
|
||
.wpcf7 textarea:focus {
|
||
outline: none;
|
||
border-color: var(--hover-color);
|
||
}
|
||
|
||
.comment-form textarea,
|
||
.wpcf7 textarea {
|
||
min-height: 150px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.comment-form input[type="submit"],
|
||
.wpcf7 input[type="submit"] {
|
||
background-color: var(--light-color);
|
||
color: var(--dark-color);
|
||
border: none;
|
||
padding: 0.75rem 1.5rem;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.comment-form input[type="submit"]:hover,
|
||
.wpcf7 input[type="submit"]:hover {
|
||
background-color: var(--hover-color);
|
||
}
|
||
|
||
.wpcf7 p {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Footer */
|
||
|
||
.site-footer {
|
||
background-color: var(--footer-color);
|
||
color: var(--light-color);
|
||
padding: 2rem 0;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.site-footer .site-info {
|
||
text-align: center;
|
||
padding: 1rem 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.site-footer a {
|
||
color: inherit; /* inherits light-color */
|
||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.site-footer a:hover {
|
||
color: var(--hover-color);
|
||
border-bottom-color: var(--hover-color);
|
||
}
|
||
|
||
.site-footer .footer-brand {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.site-footer .footer-brand:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.site-footer .social-links a {
|
||
background: none;
|
||
border-bottom: none;
|
||
text-decoration: none;
|
||
}
|
||
|
||
|
||
/*--------------------------------------------------------------
|
||
# 6. UTILITIES / FIXES
|
||
--------------------------------------------------------------*/
|
||
|
||
/* TOC */
|
||
|
||
:root {
|
||
--toc-viewport-offset: calc(
|
||
var(--zeitfresser-toc-top, 100px) +
|
||
var(--zeitfresser-toc-top-offset)
|
||
);
|
||
}
|
||
|
||
.zeitfresser-floating-toc {
|
||
position: fixed;
|
||
top: calc(var(--toc-viewport-offset));
|
||
left: var(--zeitfresser-toc-left, 24px);
|
||
|
||
width: var(--zeitfresser-toc-width);
|
||
max-height: calc(100vh - var(--toc-viewport-offset) - 36px);
|
||
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
|
||
overflow: visible;
|
||
z-index: 80;
|
||
|
||
opacity: 0;
|
||
transition: opacity 0.12s ease-out;
|
||
}
|
||
|
||
.zeitfresser-floating-toc.is-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__header {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__title {
|
||
font-family: var(--primary-font);
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
|
||
color: rgba(247, 247, 250, 0.76);
|
||
}
|
||
|
||
.zeitfresser-floating-toc__progress {
|
||
height: 2px;
|
||
margin-bottom: 16px;
|
||
|
||
border-radius: 999px;
|
||
background: rgba(189, 147, 249, 0.18);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__progress-bar {
|
||
height: 100%;
|
||
width: 0;
|
||
|
||
background: var(--hover-color);
|
||
transition: width 0.18s ease;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__nav {
|
||
max-height: calc(100vh - var(--toc-viewport-offset) - 46px);
|
||
overflow-y: auto;
|
||
|
||
padding-right: 8px;
|
||
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__item {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__item a {
|
||
transform: translateZ(0);
|
||
display: block;
|
||
padding-left: 14px;
|
||
border-left: 3px solid transparent;
|
||
color: var(--light-color);
|
||
font-size: 0.92rem;
|
||
line-height: 1.35;
|
||
text-decoration: none;
|
||
transition: color 0.18s ease, border-color 0.18s ease;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__item.level-2 a {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__item.level-3 a {
|
||
padding-left: 18px;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__item.level-4 a {
|
||
padding-left: 26px;
|
||
}
|
||
|
||
.zeitfresser-floating-toc__item a:hover,
|
||
.zeitfresser-floating-toc__item a.is-active,
|
||
.zeitfresser-floating-toc__item a[aria-current="true"] {
|
||
color: var(--hover-color);
|
||
border-left-color: var(--hover-color);
|
||
}
|
||
|
||
@media (max-width: 1650px) {
|
||
.zeitfresser-floating-toc {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Accessibility */
|
||
|
||
.screen-reader-text:focus {
|
||
background-color: #f1f1f1;
|
||
border-radius: 3px;
|
||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||
clip: auto !important;
|
||
-webkit-clip-path: none;
|
||
clip-path: none;
|
||
color: #21759b;
|
||
display: block;
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
height: auto;
|
||
left: 5px;
|
||
line-height: normal;
|
||
padding: 15px 23px 14px;
|
||
text-decoration: none;
|
||
top: 5px;
|
||
width: auto;
|
||
z-index: 100000;
|
||
}
|
||
|
||
/* Widgets */
|
||
.widget select {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Media Fixes */
|
||
.wp-smiley {
|
||
border: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Logo wrapper fix */
|
||
.custom-logo-link {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Screen Reader */
|
||
|
||
.screen-reader-text {
|
||
position: absolute !important;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
border: 0;
|
||
clip-path: inset(50%);
|
||
}
|
||
|
||
.screen-reader-text:focus {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 5px;
|
||
width: auto;
|
||
height: auto;
|
||
padding: 15px 23px;
|
||
background: #f1f1f1;
|
||
color: #21759b;
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
z-index: 100000;
|
||
clip-path: none;
|
||
box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
|
||
}
|
||
|
||
/* Alignments WordPress Core */
|
||
|
||
.alignleft {
|
||
float: left;
|
||
margin: 0 1.5em 1.5em 0;
|
||
}
|
||
|
||
.alignright {
|
||
float: right;
|
||
margin: 0 0 1.5em 1.5em;
|
||
}
|
||
|
||
.aligncenter {
|
||
display: block;
|
||
margin: 0 auto 1.5em;
|
||
clear: both;
|
||
}
|
||
|
||
/* Meta Fix */
|
||
|
||
.info.ihead .list-inline {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Comma separator */
|
||
|
||
.category a::after,
|
||
.tags a::after {
|
||
content: ",";
|
||
position: absolute;
|
||
right: -6px;
|
||
}
|
||
|
||
.category a:last-child::after,
|
||
.tags a:last-child::after {
|
||
content: none;
|
||
}
|
||
|
||
.category a:hover,
|
||
.tags a:hover {
|
||
color: var(--hover-color);
|
||
}
|
||
|
||
/* List Inline (Generic Utility) */
|
||
|
||
.list-inline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.list-inline li {
|
||
color: var(--light-color);
|
||
}
|
||
|
||
.list-inline a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
color: inherit;
|
||
background: none;
|
||
}
|
||
|
||
/* Meta Fixes */
|
||
|
||
.info.ihead {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.info.ihead,
|
||
.info.ifoot {
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
/* Comma separator */
|
||
|
||
.category a:not(:last-child)::after,
|
||
.tags a:not(:last-child)::after {
|
||
content: ",";
|
||
margin-left: 0.2rem;
|
||
}
|
||
|
||
.category a:hover,
|
||
.tags a:hover {
|
||
color: var(--hover-color);
|
||
}
|
||
|
||
/* Scroll to Top */
|
||
|
||
.scroll-to-top {
|
||
position: fixed;
|
||
right: 2rem;
|
||
bottom: 2rem;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: var(--light-color);
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.scroll-to-top svg {
|
||
width: 100%;
|
||
fill: var(--dark-color);
|
||
}
|
||
|
||
.scroll-to-top:hover {
|
||
background: var(--hover-color);
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
/* Focus / Anchor Reset */
|
||
|
||
.entry-content:target,
|
||
.post-content:target,
|
||
.inner-article-content:target,
|
||
.entry-content:focus,
|
||
.post-content:focus,
|
||
.inner-article-content:focus {
|
||
background: transparent;
|
||
outline: none;
|
||
box-shadow: none;
|
||
border: none;
|
||
}
|
||
|
||
/* Anchor Offset (Sticky Header Fix) */
|
||
|
||
.entry-content h2,
|
||
.entry-content h3,
|
||
.entry-content h4,
|
||
.inner-article-content h2,
|
||
.inner-article-content h3,
|
||
.inner-article-content h4 {
|
||
scroll-margin-top: 88px;
|
||
}
|
||
|
||
/* Global Scroll Behavior */
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
scrollbar-gutter: stable;
|
||
font-synthesis: none;
|
||
}
|
||
|
||
/* Accessibility: Reduced motion */
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|