/** * Hub + theme (aross.se) * Mobile-first, data-theme on */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); :root { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { --surface: #f7f6f4; --surface-elevated: #ffffff; --text: #1a1a18; --text-muted: #5c5c56; --border: rgba(26, 26, 24, 0.1); --shadow: rgba(26, 26, 24, 0.06); --accent: #2c2c28; --focus: #2563eb; } html[data-theme="dark"] { --surface: #121210; --surface-elevated: #1c1c19; --text: #f2f1ed; --text-muted: #9c9b94; --border: rgba(242, 241, 237, 0.12); --shadow: rgba(0, 0, 0, 0.35); --accent: #e8e7e3; --focus: #93c5fd; } /* If theme script is blocked, follow OS preference */ html:not([data-theme]) { --surface: #f7f6f4; --surface-elevated: #ffffff; --text: #1a1a18; --text-muted: #5c5c56; --border: rgba(26, 26, 24, 0.1); --shadow: rgba(26, 26, 24, 0.06); --accent: #2c2c28; --focus: #2563eb; } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --surface: #121210; --surface-elevated: #1c1c19; --text: #f2f1ed; --text-muted: #9c9b94; --border: rgba(242, 241, 237, 0.12); --shadow: rgba(0, 0, 0, 0.35); --accent: #e8e7e3; --focus: #93c5fd; } } /* --- Hub page --- */ /* Gradient Background */ .bg-blobs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; overflow: hidden; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); transition: background 0.5s ease; } html[data-theme="dark"] .bg-blobs { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .bg-blobs { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } } .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; animation: float 20s infinite ease-in-out alternate; } .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: rgba(255, 182, 255, 0.4); animation-delay: 0s; } .blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: rgba(182, 255, 255, 0.4); animation-delay: -5s; } .blob-3 { top: 40%; left: 30%; width: 40vw; height: 40vw; background: rgba(182, 200, 255, 0.4); animation-delay: -10s; } html[data-theme="dark"] .blob-1 { background: rgba(138, 43, 226, 0.3); } html[data-theme="dark"] .blob-2 { background: rgba(65, 105, 225, 0.3); } html[data-theme="dark"] .blob-3 { background: rgba(0, 206, 209, 0.3); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .blob-1 { background: rgba(138, 43, 226, 0.3); } html:not([data-theme]) .blob-2 { background: rgba(65, 105, 225, 0.3); } html:not([data-theme]) .blob-3 { background: rgba(0, 206, 209, 0.3); } } @keyframes float { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(5%, 5%) scale(1.05) rotate(5deg); } 50% { transform: translate(2%, 10%) scale(0.95) rotate(-5deg); } 75% { transform: translate(-5%, 5%) scale(1.02) rotate(2deg); } 100% { transform: translate(0, 0) scale(1) rotate(0deg); } } .bg-glass-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .bg-glass-overlay { background: rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .bg-glass-overlay { background: rgba(0, 0, 0, 0.1); } } body.page-hub { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.5; background: transparent; color: var(--text); text-align: center; -webkit-font-smoothing: antialiased; } .page-hub .hub-skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .page-hub .hub-skip:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 0.75rem; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 0.5rem; z-index: 100; clip: auto; } .hub-top { display: none; } .hub-main { width: 100%; max-width: 28rem; margin: 0 auto; padding: 2.5rem 2rem; text-align: left; } @media (max-width: 480px) { .hub-main { padding: 2rem 1.5rem; } } .glass-panel { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 1.5rem; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.2); margin-top: auto; margin-bottom: auto; } @media (max-height: 800px), (max-width: 600px) { .glass-panel { margin-top: 2rem; margin-bottom: 2rem; } } @media (max-width: 480px) { .glass-panel { margin-top: 1rem; margin-bottom: 1rem; } } html[data-theme="dark"] .glass-panel { background: rgba(18, 18, 16, 0.65); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .glass-panel { background: rgba(18, 18, 16, 0.65); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } } .hub-main__intro { margin-bottom: 2rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } .hub-main__intro-text { flex: 1; } .hub-main__avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } html[data-theme="dark"] .hub-main__avatar { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-main__avatar { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } } .hub-main__title { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-size: clamp(2rem, 6vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; margin-bottom: 0.25rem; color: var(--text); } .hub-main__subtitle { font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 1.125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--focus); margin-top: 0; margin-bottom: 1rem; } .hub-main__tagline { font-size: 1rem; font-weight: 500; color: var(--text-muted); margin: 0; line-height: 1.55; max-width: 36ch; } .hub-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .hub-links__item { margin: 0; } .hub-links__item--secondary { margin-top: 0.35rem; } .hub-link--secondary { background: rgba(255, 255, 255, 0.2); border: 1px dashed rgba(255, 255, 255, 0.6); box-shadow: none; } html[data-theme="dark"] .hub-link--secondary { background: rgba(30, 30, 28, 0.2); border: 1px dashed rgba(255, 255, 255, 0.15); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-link--secondary { background: rgba(30, 30, 28, 0.2); border: 1px dashed rgba(255, 255, 255, 0.15); } } .hub-link--secondary:hover { background: rgba(255, 255, 255, 0.4); border-style: solid; transform: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } html[data-theme="dark"] .hub-link--secondary:hover { background: rgba(40, 40, 38, 0.4); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-link--secondary:hover { background: rgba(40, 40, 38, 0.4); } } .hub-link--secondary .hub-link__label { font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); } .hub-link--secondary .hub-link__hint { font-size: 0.75rem; } .hub-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 1rem 1.125rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); text-decoration: none; color: var(--text); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } html[data-theme="dark"] .hub-link { background: rgba(30, 30, 28, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-link { background: rgba(30, 30, 28, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } } .hub-link:hover { background: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } html[data-theme="dark"] .hub-link:hover { background: rgba(40, 40, 38, 0.8); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-link:hover { background: rgba(40, 40, 38, 0.8); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } } .hub-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .hub-link__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .hub-link__hint { font-size: 0.8125rem; color: var(--text-muted); font-weight: 400; } .hub-footer { flex-shrink: 0; padding: 1.5rem 1.25rem 2rem; max-width: 28rem; margin: 0 auto; width: 100%; position: relative; z-index: 10; text-align: center; } .hub-footer__line { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); } html[data-theme="dark"] .hub-footer__line { color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-footer__line { color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } } .hub-footer__links { margin-top: 0.75rem; display: flex; justify-content: center; gap: 1rem; } .hub-footer__link { font-size: 0.75rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.2em; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); } .hub-footer__link:hover { color: var(--text); } html[data-theme="dark"] .hub-footer__link { color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } html[data-theme="dark"] .hub-footer__link:hover { color: #fff; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hub-footer__link { color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } html:not([data-theme]) .hub-footer__link:hover { color: #fff; } } /* --- Interior pages (posts, items, tags) --- */ body.page-interior { font-family: "Inter", system-ui, -apple-system, sans-serif; background: var(--surface); color: var(--text); text-align: center; -webkit-font-smoothing: antialiased; } html[data-theme="light"] body.page-interior, html[data-theme="dark"] body.page-interior { background: var(--surface); color: var(--text); } .page-interior header { background: var(--surface-elevated); border-bottom: 1px solid var(--border); } .page-interior header .wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; padding: 1rem 1.25rem; text-align: center; } .page-interior .site-header__row { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; flex-wrap: wrap; } .page-interior .site-name { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .page-interior nav { margin-top: 0; } .page-interior nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; } .page-interior nav a { color: var(--text-muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .page-interior nav a:hover { color: var(--text); } .page-interior nav a.selected { color: var(--text); border-bottom-color: var(--text-muted); } .page-interior .wrapper { text-align: left; max-width: 44rem; padding: 2rem 1.25rem 3rem; } .page-interior h1 { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .page-interior h2 { font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .page-interior .item-list > li { background: var(--surface-elevated); border: 1px solid var(--border); box-shadow: 0 1px 2px var(--shadow); } .page-interior .item-list h1 a { color: var(--text); text-decoration: none; } .page-interior .item-list h1 a:hover { text-decoration: underline; text-underline-offset: 0.15em; } .page-interior article p, .page-interior .content { color: var(--text); } .page-interior .description { color: var(--text-muted); } .page-interior footer { color: var(--text-muted); padding-bottom: 2rem; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--border); } .page-interior footer .hub-footer__line { text-shadow: none; } .page-interior footer .hub-footer__link { text-shadow: none; } html[data-theme="dark"] .page-interior footer .hub-footer__line, html[data-theme="dark"] .page-interior footer .hub-footer__link { text-shadow: none; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .page-interior footer .hub-footer__line, html:not([data-theme]) .page-interior footer .hub-footer__link { text-shadow: none; } } .page-interior code { border-color: var(--border); background: var(--surface-elevated); } .page-interior pre code { border-color: var(--border); background: var(--surface-elevated); } /* Code highlight follows data-theme */ html[data-theme="light"] .hljs { color: #383a42; background: #fafafa; } html[data-theme="dark"] .hljs { color: #abb2bf; background: #282c34; } html[data-theme="dark"] .hljs-comment, html[data-theme="dark"] .hljs-quote { color: #5c6370; font-style: italic; } html[data-theme="dark"] .hljs-doctag, html[data-theme="dark"] .hljs-keyword, html[data-theme="dark"] .hljs-formula { color: #c678dd; } html[data-theme="dark"] .hljs-section, html[data-theme="dark"] .hljs-name, html[data-theme="dark"] .hljs-selector-tag, html[data-theme="dark"] .hljs-deletion, html[data-theme="dark"] .hljs-subst { color: #e06c75; } html[data-theme="dark"] .hljs-literal { color: #56b6c2; } html[data-theme="dark"] .hljs-string, html[data-theme="dark"] .hljs-regexp, html[data-theme="dark"] .hljs-addition, html[data-theme="dark"] .hljs-attribute, html[data-theme="dark"] .hljs-meta-string { color: #98c379; } html[data-theme="dark"] .hljs-built_in, html[data-theme="dark"] .hljs-class .hljs-title { color: #e6c07b; } html[data-theme="dark"] .hljs-attr, html[data-theme="dark"] .hljs-variable, html[data-theme="dark"] .hljs-template-variable, html[data-theme="dark"] .hljs-type, html[data-theme="dark"] .hljs-selector-class, html[data-theme="dark"] .hljs-selector-attr, html[data-theme="dark"] .hljs-selector-pseudo, html[data-theme="dark"] .hljs-number { color: #d19a66; } html[data-theme="dark"] .hljs-symbol, html[data-theme="dark"] .hljs-bullet, html[data-theme="dark"] .hljs-link, html[data-theme="dark"] .hljs-meta, html[data-theme="dark"] .hljs-selector-id, html[data-theme="dark"] .hljs-title { color: #61aeee; } html:not([data-theme]) .hljs { color: #383a42; background: #fafafa; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .hljs { color: #abb2bf; background: #282c34; } } @media (prefers-reduced-motion: reduce) { .theme-toggle, .hub-link, .hub-link--secondary { transition: none; } .theme-toggle:hover, .hub-link:hover, .hub-link--secondary:hover { transform: none; } }