/* ============================================================================= Frontend -- public site + simple utility/auth shells Loaded via FRONTEND_CSS_FILE. Theme variables from functions__get_theme_colors(). Montserrat: fonts.css in (ds-includes/assets/fonts/OFL.txt). ============================================================================= */ :root { --static-color-white: #ffffff; --static-color-grey: #bbbbbb; --static-color-dark-grey: #444444; --static-color-green: #04aa6d; --static-color-teal: #1abc9c; --static-color-blue: #3669f4; --static-color-orange: #dd8d24; --static-color-red: #f44336; --static-color-black: #000000; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ----------------------------------------------------------------------------- 1. Base & layout ----------------------------------------------------------------------------- */ body.public-shell { min-height: 100vh; margin: 0; background: var(--color-background-header); color: var(--color-text-main); font: 1em Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } body.public-shell * { box-sizing: border-box; margin: 0; padding: 0; } .public-shell .wrap { width: 1200px; margin: 0 auto; padding: 0 10px; } /* ----------------------------------------------------------------------------- 2. Header ----------------------------------------------------------------------------- */ #header { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: var(--color-background-header); border-bottom: 1px solid var(--color-background-header-border); box-shadow: 0 0 10px var(--color-background-gradient); z-index: 1000; } #header.header-nav-open { height: auto; } #nav { display: none; align-items: center; justify-content: flex-end; flex-shrink: 0; } .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--color-headers); text-decoration: none; } .nav-toggle:focus { outline: none; } .nav-toggle:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; border-radius: 4px; } .nav-toggle__inner { position: relative; display: block; width: 22px; height: 16px; } .nav-toggle__bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; } .nav-toggle__bar:nth-child(1) { top: 0; } .nav-toggle__bar:nth-child(2) { top: 7px; } .nav-toggle__bar:nth-child(3) { top: 14px; } #header.header-nav-open .nav-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); } #header.header-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } #header.header-nav-open .nav-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); } #header .wrap { display: flex; height: 100%; align-items: center; gap: 20px; } #header-pusher { height: 60px; transition: height 0.3s ease; } #main [id] { scroll-margin-top: 90px; } #brand { display: flex; height: 60px; align-items: center; } #brand-box { display: flex; width: 100%; align-items: center; justify-content: flex-start; } #brand a { display: flex; width: auto; align-items: center; justify-content: flex-start; gap: 10px; font-weight: bold; text-decoration: none; } #brand a img { display: block; width: 30px; height: 30px; } #brand a span { font-size: 22px; line-height: 100%; color: var(--color-headers); } /* Mobile slide panel: invisible on desktop (children participate in #header .wrap flex) */ .header-nav-panel { display: contents; } .header-nav-panel__inner { display: contents; } /* scripts.js wraps #navigation in .navigation-scroll -- this is the flex row child on desktop */ .navigation-scroll { flex: 1; min-width: 0; } #navigation { flex: 1; } #navigation ul { display: block; width: 100%; overflow: hidden; height: 40px; /* text-align: center; */ } #navigation.navigation-right ul { text-align: right; margin-right: -20px; } #navigation li { display: inline-block; } #navigation li a { display: block; height: 40px; line-height: 40px; margin: 0 20px; color: var(--color-action-hover); text-decoration: none; font-weight: bold; transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease; text-transform: uppercase; font-size: 0.9em; opacity: 0.7; } #navigation li a:hover { color: var(--color-action); opacity: 1; } #header-actions { display: flex; flex-direction: row; gap: 10px; align-items: center; } #header-secondary a { display: inline-block; width: auto; padding: 8px 20px; border-radius: 6px; font-size: 0.9em; font-weight: bold; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--color-action-hover) 25%, transparent); color: var(--color-text-main); transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease; } #header-secondary a:hover { background: color-mix(in srgb, var(--color-action) 10%, transparent); border: 1px solid var(--color-action); color: var(--color-action-hover); transform: scale(1); opacity: 1; } #header-primary a { display: inline-block; width: auto; padding: 8px 20px; border-radius: 6px; font-size: 0.9em; font-weight: bold; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; border: 2px solid var(--color-action); background: var(--color-action); color: var(--color-action-text); transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } #header-primary a:hover { border: 2px solid var(--color-action-hover); background: var(--color-action-hover); color: var(--color-action-text-hover); transform: scale(1.03); } /* ----------------------------------------------------------------------------- 3. Main -- article / CMS content column ----------------------------------------------------------------------------- */ #main { background: var(--color-background-main); background: linear-gradient(to bottom right, var(--color-background-main), var(--color-background-gradient)); } #main .wrap { display: flex; flex-direction: row; padding: 60px 10px 30px; gap: 60px; } #main.home .wrap { display: flex; flex-direction: column; padding: 0 10px 0; gap: 60px; } #section-content { width: calc(100% - 360px); font-size: 1.2em; } #section-content.slim { width: 100%; max-width: 700px; margin: 0 auto; } #section-content.full { width: 100%; margin: 0 auto; } #main .wrap aside { width: 300px; } #archive-content { margin: 0 auto; margin-bottom: 30px; font-size: 1.2em; width: 100%; } body.public-shell #section-content a { color: var(--color-action-hover); font-weight: bold; transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } body.public-shell #section-content a:hover { color: var(--color-action-hover); } #archive-content h1, #section-content h1, #section-content h2, #section-content h3, #section-content h4 { font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: var(--color-headers); font-weight: bold; margin-bottom: 30px; } #archive-content h1 a, #section-content h1 a, #section-content h2 a, #section-content h3 a, #section-content h4 a { color: var(--color-headers); font-weight: bold; text-decoration: none; transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } #archive-content h1 a:hover, #section-content h1 a:hover, #section-content h2 a:hover, #section-content h3 a:hover, #section-content h4 a:hover { color: var(--color-action); text-decoration: underline; } #archive-content h1 { text-align: center; } #archive-content .blog-description { text-align: center; max-width: 700px; margin: 0 auto 40px; line-height: 150%; margin-top: -30px; } #archive-content h1, #section-content h1 { font-size: 2.4em; line-height: 150%; } #section-content .page-featured-image { margin: 0 0 30px; } #section-content .page-featured-image img { display: block; width: 100%; height: auto; } #section-content h2 { font-size: 1.6em; line-height: 150%; } #section-content h3 { font-size: 1.4em; line-height: 150%; } #section-content h4 { font-size: 1.2em; line-height: 150%; } #section-content p { line-height: 150%; margin-bottom: 30px; } #section-content ul, #section-content ol { line-height: 150%; margin-bottom: 30px; margin-left: 30px; } #section-content li { line-height: 150%; margin-bottom: 10px; } div.blog-archive-list, div.blog-topic-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } div.blog-archive-list { margin-left: 0; padding-left: 0; margin-bottom: 30px; } .blog-archive-list__item { background: var(--color-background-box); border-radius: 10px; box-shadow: 0 0 10px var(--color-background-gradient); overflow: hidden; } .blog-archive-list__image { display: block; width: 100%; aspect-ratio: 16/9; background: var(--color-background-main); border-bottom: 1px solid var(--color-border); } .blog-archive-list__image img { display: block; width: 100%; height: 100%; object-fit: cover; } div.blog-archive-list__details { padding: 20px; } .blog-archive-list__title { display: block; font-weight: bold; color: var(--color-action-hover); transition: color 0.2s ease; text-decoration: none; font-size: 1.2em; } .blog-archive-list__title:hover { color: var(--color-action); } time.blog-archive-list__date { display: block; font-size: 0.8em; opacity: 0.75; margin-top: 10px; } nav.blog-archive-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; margin-bottom: 30px; font-size: 0.95em; justify-content: center; } .blog-archive-pagination a { color: var(--color-action-hover); text-decoration: none; transition: color 0.2s ease; } .blog-archive-pagination a:hover { color: var(--color-action); } .blog-archive-pagination__meta { opacity: 0.8; } div.blog-topic-index { margin-top: 60px; } .blog-topic-index__item { background: var(--color-background-box); border-radius: 10px; box-shadow: 0 0 10px var(--color-background-gradient); overflow: hidden; } a.blog-topic-index__link { display: block; padding: 20px; font-weight: bold; color: var(--color-headers); text-decoration: none; transition: color 0.2s ease; } .blog-topic-index__link:hover { color: var(--color-action); } a.blog-topic-index__link span { color: var(--color-text-main); font-weight: normal; } #section-content strong { color: var(--color-headers); font-weight: bold; } /* Single blog post */ .post-single .post-header { margin-bottom: 30px; } .post-single div.post-info { margin-top: -30px; display: flex; flex-direction: row; align-items: center; margin-bottom: 30px; gap: 20px; border-top: 1px solid var(--color-border); padding-top: 10px; } .post-single div.post-meta { font-size: 0.8em; line-height: 150%; display: flex; flex-direction: row; gap: 20px; align-items: center; flex: 1; } .post-author { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .post-author__avatar { display: block; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--color-background-box); border: 1px solid var(--color-headers); } .post-author__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .post-author__name { color: var(--color-headers); font-size: 0.8em; } .post-dates { margin: 0; opacity: 0.4; color: var(--color-action-hover); flex: 1; text-align: center; } .post-dates time { display: block; } .post-dates time + time { margin-top: 6px; } .post-topics { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .post-topics__item { max-width: 140px; min-width: 0; } .post-topics__item a { display: block; max-width: 100%; padding: 0px 6px; border-radius: 10px; border: 1px solid var(--color-action-hover); color: var(--color-action-hover); text-decoration: none; font-size: 0.9em; transition: color 0.2s ease, border-color 0.2s ease, opacity 0.3s ease; opacity: 0.4; height: 30px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-topics__item a:hover { color: var(--color-action); border-color: var(--color-action); opacity: 1; } .post-sidebar { flex-shrink: 0; } div.post-sidebar__heading { text-transform: uppercase; font-weight: bold; margin-top: 240px; margin-bottom: 15px; opacity: 0.7; } .post-related-list { list-style: none; } li.post-related-list__item { border-top: 1px solid var(--color-border); line-height: 150%; padding: 15px 0; } .post-related-list__link { display: block; color: var(--color-action-hover); text-decoration: none; font-weight: bold; } .post-related-list__link:hover { color: var(--color-action); } /* ----------------------------------------------------------------------------- 4. Footer ----------------------------------------------------------------------------- */ #footer { background: var(--color-background-header); padding: 60px 0; border-top: 1px solid var(--color-background-header-border); } #footer .wrap { display: flex; flex-direction: row; gap: 160px; } #footer-info { max-width: 30%; } #footer-brand-box { display: flex; width: 100%; align-items: center; justify-content: flex-start; } #footer-brand a { display: flex; width: auto; align-items: center; gap: 10px; font-weight: bold; text-decoration: none; } #footer-brand a img { display: block; width: 30px; height: 30px; } #footer-brand a span { font-size: 22px; line-height: 100%; color: var(--color-headers); } #footer-about { font-size: 0.9em; line-height: 150%; margin-top: 10px; } #footer-copyright { font-size: 0.9em; line-height: 150%; margin-top: 10px; opacity: 0.7; } #footer-extra { font-size: 0.9em; line-height: 150%; margin-top: 30px; } #footer-navigation { display: flex; flex: 1; flex-direction: row; width: 100%; font-size: 0.9em; gap: 30px; } #footer-navigation ul { display: flex; flex-direction: column; } #footer-navigation li { display: block; margin-top: 15px; } .footer-cat { flex: 1; } .footer-cat-label { text-transform: uppercase; font-weight: bold; margin-bottom: 10px; opacity: 0.7; } .footer-cat-label a, .footer-cat-label a:hover { color: inherit; text-decoration: none; } #footer-navigation li a { color: var(--color-action-hover); text-decoration: none; transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } #footer-navigation li a:hover { color: var(--color-action); } /* ============================================================================= 5. Simple shell -- base (layout, notice, error, login, join, signup) ============================================================================= */ body.simple-shell { min-height: 100vh; margin: 0; background: var(--color-background-main); background: linear-gradient(to bottom right, var(--color-background-main), var(--color-background-gradient)); color: var(--color-text-main); font: 16px/1.5 Arial, Helvetica, sans-serif; } body.simple-shell * { box-sizing: border-box; } body.simple-shell.login-page { transition: padding-top 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .simple-main { max-width: 540px; margin: 50px auto; padding: 0 10px; } .simple-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 50px; color: inherit; font-weight: bold; text-decoration: none; border: none; outline: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s ease; } .simple-brand:focus, .simple-brand:focus-visible { outline: none; box-shadow: none; } .simple-brand__mark { line-height: 0; display: flex; align-items: center; flex-shrink: 0; } .simple-brand__mark img { display: block; width: 30px; height: 30px; } .simple-brand__name { font-size: 22px; line-height: 30px; display: flex; align-items: center; color: var(--color-headers); } /* Post-logout bar (login.php) */ .logout-notice { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; margin: 0; padding: 14px 16px; font-size: 1.2em; font-weight: bold; text-align: center; line-height: 150%; background: var(--static-color-green); color: var(--static-color-white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); } .logout-notice.logout-notice--open { transform: translateY(0); } /* ----------------------------------------------------------------------------- 6. Simple shell -- utility card (layout.php) ----------------------------------------------------------------------------- */ .utility-card { background: var(--color-background-box); border-radius: 10px; padding: 30px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 50%, transparent), 0 24px 80px color-mix(in srgb, var(--color-shadow) 70%, transparent); } .utility-card__title { margin: 0 0 25px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); font-size: 1.9em; font-weight: bold; line-height: 1.35; color: var(--color-headers); text-align: center; font-family: 'Montserrat', Arial, Helvetica, sans-serif; } .utility-lede { margin: 0; font-size: 1.2em; line-height: 1.45; } .utility-lede p { margin: 0 0 1em; } .utility-lede p:last-child { margin-bottom: 0; } .utility-footer { display: flex; justify-content: flex-end; margin-top: 25px; padding-top: 0; } .utility-action { display: block; width: 100%; padding: 15px; border-radius: 10px; font-size: 1.2em; font-weight: bold; line-height: 1; text-align: center; text-decoration: none; background: var(--color-action); color: var(--color-action-text); transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } .utility-action:hover { background: var(--color-action-hover); color: var(--color-action-text-hover); transform: scale(1.02); } /* ----------------------------------------------------------------------------- 7. Simple shell -- auth forms (login, join, signup) ----------------------------------------------------------------------------- */ .login-card { background: var(--color-background-box); border-radius: 10px; padding: 30px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-shadow) 50%, transparent), 0 24px 80px color-mix(in srgb, var(--color-shadow) 70%, transparent);; } .login-card__title { margin: 0 0 25px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); font-size: clamp(28px, 4vw, 38px); font-weight: bold; line-height: 1.35; color: var(--color-headers); text-align: center; font-family: 'Montserrat', Arial, Helvetica, sans-serif; } .login-lede { margin: 0 0 20px; font-size: 1.2em; line-height: 1.45; } .login-formHost { position: relative; min-height: 8rem; } .login-form { margin: 0 auto; } .login-form label { display: block; margin-bottom: 0.35rem; font-weight: bold; color: var(--color-headers); } .login-form input[type="email"] { width: 100%; padding: 12px 14px; font-size: 1.2em; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-form-field); color: var(--color-form-field-text); transition: border-color 0.2s ease; } .login-form input[type="email"]:focus { outline: 2px solid var(--color-action); outline-offset: 0; } .login-turnstile { margin-top: 18px; width: 100%; min-height: 65px; text-align: center; } .login-form button[type="submit"] { width: 100%; font-size: 1.2em; margin-top: 15px; padding: 15px; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; background: var(--color-action); color: var(--color-action-text); transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } .login-form button[type="submit"]:hover:not(:disabled) { background: var(--color-action-hover); color: var(--color-action-text-hover); transform: scale(1.02); } .login-form button[type="submit"]:disabled { opacity: 0.7; cursor: not-allowed; } .login-overlay { position: absolute; inset: -2px; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 2; } .login-overlay.is-open { opacity: 1; pointer-events: auto; } .login-overlay__backdrop { position: absolute; inset: 0; background: var(--color-spinner-background); } .login-overlay__spinner { position: relative; z-index: 1; width: 42px; height: 42px; border: 3px solid var(--color-spinner-2); border-top-color: var(--color-spinner); border-radius: 50%; animation: login-spin 0.75s linear infinite; } @keyframes login-spin { to { transform: rotate(360deg); } } .login-error, p.login-error { margin: 20px 0 0; padding: 30px; border-radius: 10px; font-size: 1.2em; font-weight: bold; line-height: 150%; background: var(--static-color-red); color: var(--static-color-white); } .login-success { margin: 20px 0 0; padding: 30px; border-radius: 10px; font-size: 1.2em; font-weight: bold; line-height: 150%; background: var(--static-color-green); color: var(--static-color-white); } .login-error span.email-lead, .login-success span.email-lead { display: block; text-align: center; margin-bottom: 20px; padding-bottom: 20px; overflow: hidden; } .login-error span.email-lead { border-bottom: 1px solid var(--static-color-white); } .login-success span.email-lead { border-bottom: 1px solid var(--static-color-white); } .login-footerLink { text-align: center; margin-top: 28px; font-size: 1.05em; line-height: 1.5; } .login-footerLink a { color: var(--color-action); font-weight: bold; text-decoration: none; } .login-footerLink a:hover { text-decoration: underline; } .is-hidden { display: none !important; } /* CONTENT CODE */ body.public-shell div.block-code { padding: 18px; margin-bottom: 30px; font-family: monospace; background: var(--color-background-gradient); border: 1px solid var(--color-border); border-radius: 12px; } body.public-shell div.block-code span.block-code-line { display: block; } body.public-shell div.block-code span.block-code-line--indent-1 { margin-left: 15px; } body.public-shell div.block-code span.block-code-line--indent-2 { margin-left: 30px; } body.public-shell div.block-code span.block-code-line--indent-3 { margin-left: 45px; } body.public-shell div.block-code span.block-code-comment { color: #666; font-style: italic; } body.public-shell div.block-code span.block-code-command, body.public-shell div.block-code span.block-code-method, body.public-shell div.block-code span.block-code-function { color: color-mix(in srgb, var(--static-color-blue) 50%, #ffffff); font-weight: 600; } body.public-shell div.block-code span.block-code-option, body.public-shell div.block-code span.block-code-var { color: color-mix(in srgb, var(--static-color-orange) 70%, #ffffff); } body.public-shell div.block-code span.block-code-string { color: color-mix(in srgb, var(--static-color-green) 60%, #ffffff); } body.public-shell div.block-code span.block-code-key { color: color-mix(in srgb, var(--static-color-grey) 50%, #ffffff); } body.public-shell div.block-code span.block-code-bool { color: var(--color-action); } body.public-shell div.block-code span.block-code-null { color: var(--color-action); } body.public-shell div.block-code span.block-code-number { color: color-mix(in srgb, var(--static-color-blue) 55%, #ffffff); } body.public-shell div.block-code span.block-code-punctuation { color: color-mix(in srgb, var(--static-color-grey) 75%, #ffffff); } /* CONTENT TABLE */ body.public-shell div.block-table-wrap { margin-bottom: 30px; font-family: monospace; background: var(--color-background-gradient); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; } body.public-shell table.block-table { border: 0; width: 100%; font-size: 0.9em; border-collapse: collapse; } body.public-shell table.block-table th { background: var(--color-background-box); border: 1px solid var(--color-border); color: var(--color-headers); font-weight: bold; padding: 10px; text-align: left; } body.public-shell table.block-table th.block-table-highlight { color: var(--color-action); } body.public-shell table.block-table td { border: 1px solid var(--color-border); padding: 10px; text-align: left; } body.public-shell table.block-table td.block-table-highlight { background: color-mix(in srgb, var(--color-action) 5%, transparent); } body.public-shell table.block-table th.block-table-center, body.public-shell table.block-table td.block-table-center { text-align: center; } body.public-shell table.block-table tr:first-child th, body.public-shell table.block-table tr:first-child td { border-top: 0; } body.public-shell table.block-table tr:last-child th, body.public-shell table.block-table tr:last-child td { border-bottom: 0; } body.public-shell table.block-table th:first-child, body.public-shell table.block-table td:first-child { border-left: 0; } body.public-shell table.block-table th:last-child, body.public-shell table.block-table td:last-child { border-right: 0; } body.public-shell table.block-table span.block-table-check { color: var(--static-color-green); } body.public-shell table.block-table span.block-table-cross { color: var(--color-text-main); } /* CONTENT CTA */ body.public-shell div.block-cta-wrap { margin-bottom: 30px; } body.public-shell #section-content a.block-cta-button { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: 20px; border-radius: 6px; font-size: 1em; font-weight: bold; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; border: 2px solid var(--color-action); background: var(--color-action); color: var(--color-action-text); transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease; } body.public-shell #section-content a.block-cta-button:hover { border: 2px solid var(--color-action-hover); background: var(--color-action-hover); color: var(--color-action-text-hover); transform: scale(1.03); } /* Tablet (< 1200px) */ @media (max-width: 1199px) { .public-shell .wrap { width: 768px; } #main .wrap { flex-direction: column; } div.blog-archive-list, div.blog-topic-index { grid-template-columns: repeat(2, 1fr); } #section-content { width: 100%; } #main .wrap aside { width: 100%; } div.post-sidebar__heading { margin-top: 0; } #footer .wrap { flex-direction: column; gap: 60px; } #footer-info { max-width: 100%; } } /* Mobile (< 768px) */ @media (max-width: 767px) { #header { height: auto; min-height: 60px; } #header:not(.header-nav-open) { overflow: hidden; } #header.header-nav-open { top: 0; right: 0; bottom: 0; left: 0; height: auto; min-height: 100vh; min-height: 100dvh; overflow: hidden; } body.public-shell.header-nav-open { overflow: hidden; } #header .wrap { flex-wrap: wrap; align-items: center; height: auto; min-height: 60px; gap: 0; padding-left: 0; padding-right: 0; } #header #brand { padding-left: 10px; } #header #nav { padding-right: 10px; } #header.header-nav-open .wrap { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 60px minmax(0, 1fr); flex-wrap: nowrap; align-items: stretch; width: 100%; height: 100%; min-height: 100vh; min-height: 100dvh; } #brand { flex: 1; min-width: 0; } #header.header-nav-open #brand { grid-row: 1; grid-column: 1; flex: none; } #nav { display: flex; } #header.header-nav-open #nav { grid-row: 1; grid-column: 2; } .header-nav-panel { display: grid; grid-template-rows: 0fr; flex-basis: 100%; width: 100%; order: 10; transition: grid-template-rows 0.3s ease; } #header.header-nav-open .header-nav-panel { display: flex; flex-direction: column; grid-row: 2; grid-column: 1 / -1; flex-basis: auto; order: unset; min-height: 0; transition: none; } .header-nav-panel__inner { display: flex; flex-direction: column; overflow: hidden; min-height: 0; border-top: 1px solid var(--color-background-header-border); } #header.header-nav-open .header-nav-panel__inner { flex: 1 1 auto; height: 100%; min-height: 0; } #navigation { flex: none; width: 100%; } .navigation-scroll { display: contents; } #header.header-nav-open .navigation-scroll { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } #header.header-nav-open .navigation-scroll #navigation { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .navigation-scroll-fade { position: absolute; left: 0; right: 0; height: 20px; pointer-events: none; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .navigation-scroll-fade.is-visible { opacity: 1; visibility: visible; } .navigation-scroll-fade--top { top: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.1), transparent ); } .navigation-scroll-fade--bottom { bottom: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.1), transparent ); } #header.header-nav-open .navigation-scroll #navigation::-webkit-scrollbar { display: none; } #navigation ul { height: auto; text-align: center; } #navigation.navigation-right ul { margin-right: 0; text-align: center; } #navigation li { display: block; border-bottom: 1px solid var(--color-background-header-border); } #navigation.navigation-scroll-overflow li:last-child { border-bottom: none; } #navigation li a { margin: 0; height: 60px; line-height: 60px; } #header-actions { flex-basis: 100%; width: 100%; display: flex; flex-direction: column; gap: 15px; margin: 10px 0; padding: 15px 0; justify-content: center; flex-wrap: wrap; } #header.header-nav-open #header-actions { flex: 0 0 auto; flex-basis: auto; width: 100%; margin-top: auto; margin-bottom: 0; padding: 15px 10px; padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-background-header-border); } .public-shell .wrap { width: 100%; } div.blog-archive-list, div.blog-topic-index { grid-template-columns: repeat(1, 1fr); } #section-content h1 { text-align: center; } .post-single div.post-info { margin-top: -20px; } .post-single div.post-info { flex-direction: column; gap: 10px; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; } .post-single div.post-meta { flex-direction: column; gap: 10px; } div.post-topics { margin-bottom: 5px; } #footer-navigation { display: grid; grid-template-columns: repeat(2, 1fr); } @media (prefers-reduced-motion: reduce) { .header-nav-panel { transition: none; } } }