@import 'colorsJM.css'; /* ========================= THEME TOKENS (Default = Light) ========================= */ :root { /* Backgrounds */ --bg-main: #ffffff; --bg-card: #f4f4f6; --bg-green: var(--colorA); /* Text */ --text-primary: #111111; /* Überschriften, Haupttext */ --text-secondary: #555555; /* Meta, Labels */ --text-muted: #888888; /* Hinweise */ --text-inverse: #ffffff; /* Text auf dunklen Flächen */ /* Links */ --link: var(--colorC); --link-hover: var(--colorC); /* Borders */ --border-color: var(--colorA); /* Derived / Mappings (hier benutzt du dann überall diese) */ --page-bg: var(--bg-main); --card-bg: var(--bg-card); --page-text: var(--text-primary); } /* ========================= DARK MODE (toggle class on ) ========================= */ html.theme-dark { --bg-main: var(--colorA); --bg-card: #181c24; --text-primary: #e9edf1; --text-secondary: #b6bcc6; --text-muted: #8b93a1; --text-inverse: #000000; --link: var(--colorC); --link-hover: var(--colorC); --border-color: var(--colorC); /* derived bleibt automatisch korrekt */ --page-bg: var(--bg-main); --card-bg: var(--bg-card); --page-text: var(--text-primary); } /* ========================= BASE LAYOUT / TYPO ========================= */ html { font-size: 14px; position: relative; min-height: 100%; } @media (min-width: 768px) { html { font-size: 16px; } } body { margin-bottom: 60px; background: var(--page-bg); color: var(--page-text); } /* ========================= COMMON ELEMENTS ========================= */ a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } /* Beispiel "Card" */ .card, .card-body, .card-header { background: var(--card-bg); color: var(--text-primary); border-color: var(--border-color); } /* Text-Helferklassen (optional) */ .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } /* Borders */ hr, .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border-color) !important; } /* Bootstrap Focus (wie bei dir, nur farblich neutral) */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .navBarBackground{ background: var(--colorA); } .main-content { max-width: 1200px; /* nach Geschmack: 960 / 1140 / 1200 / 1400 */ margin: 0 auto; /* horizontal zentrieren */ padding: 1rem; } .two-column-layout { display: grid; grid-template-columns: 3fr 7fr; /* 30 / 70 */ gap: 1.5rem; } .two-column-layout .left { flex: 0 0 30%; } .two-column-layout .right { flex: 0 0 70%; padding-top: 3em; } .center-content { display: flex; flex-direction: column; /* untereinander */ align-items: center; /* horizontal zentriert */ text-align: center; /* Text zentriert */ gap: 0.5rem; /* Abstand zwischen den Zeilen */ } .socialNetworkContainer { display: flex; /* Aligns children in a row */ flex-wrap: wrap; margin-left: 1em; margin-right: 1em; justify-content: center; /* Centers the items horizontally */ align-items: center; /* Centers the items vertically */ padding-top: 1em; padding-bottom: 1em; } .socialNetworkEntry { margin: 0 0.5em; /* Adds space around each icon */ text-decoration: none; /* Removes underline from links */ color: var(--border-color); } .socialNetworkEntry:hover { color: var(--border-color); } .socialNetworkEntry i { font-size: 3em; /* Adjust the size of icons */ vertical-align: middle; /* Aligns icons vertically to the middle */ } .page-header { font-size: 3em; font-variant: small-caps; text-align: left; } .page-sub-header { font-size: 2em; font-variant: small-caps; text-align: left; } /* Paragraph Style*/ .paragraph-container{ } .paragraph-header { font-size: 2em; font-variant: small-caps; text-align: left; } .paragraph-text { padding-left: 0.5em; font-size: 1.2em; } .text-center{ text-align: center; } /* Entry*/ .entry-list-container{ } .entry-container { width: 100%; /* Takes full width of its parent */ display: flex; /* Lays out children in a row */ align-items: flex-start; /* oben ausrichten */ gap: 0.5rem; /* Abstand zwischen Datum & Inhalt */ margin-bottom: 3em; /* Adds space between entries */ position: relative; /* Set the parent position to relative */ overflow: hidden; /* Optional: hides the overflowing part of pseudo-elements */ /*background-color: var(--colorCA);*/ align-items: stretch; /* Standard – wichtig! */ } .entry-container::before, .entry-container::after { content: ''; position: absolute; /* Change to absolute positioning */ border: 0.5em solid transparent; box-sizing: border-box; } .entry-container::before { border-color: var(--border-color) transparent transparent var(--border-color); top: 0; left: 0; width: 66%; height: 33%; } .entry-container::after { border-color: transparent var(--border-color) var(--border-color) transparent; bottom: 0; right: 0; width: 66%; height: 33%; } .entry-date { flex: 0 0 25%; /* Prozent */ text-align: center; display: flex; /* für Zentrierung */ justify-content: center; align-items: center; } .entry-content { flex: 1; /* nimmt den Rest */ padding-top: 0.75em; padding-right: 1em; padding-bottom: 1.25em; } .entry-top-info-line { text-align: left; /* Aligns text to the left */ font-size: 1.2em; line-height: 1.1; } .entry-title { text-align: left; /* Aligns text to the left */ font-size: 1.4em; font-weight: bold; line-height: 1.1; } .entry-subtitle { text-align: left; margin-top: auto; line-height: 1.2; } .entry-bottom-info-line { text-align: left; margin-top: auto; font-style: italic; line-height: 1.2; } .entry-location { text-align: right; margin-top: auto; line-height: 1.2; } .entry-links{ margin-top: 0.5em; } .entry-link-container { padding: 0.25em; border: solid; border-start-end-radius: 0.75em; border-color: var(--border-color); } @media (max-width: 768px) { .two-column-layout { grid-template-columns: 1fr; } }