From 720d752748b793a2f5cf3cc14cb75ad86e8919c0 Mon Sep 17 00:00:00 2001 From: sillylaird Date: Tue, 3 Feb 2026 21:27:57 -0500 Subject: First commit --- assets/css/site.css | 891 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 891 insertions(+) create mode 100644 assets/css/site.css (limited to 'assets/css/site.css') diff --git a/assets/css/site.css b/assets/css/site.css new file mode 100644 index 0000000..4434b60 --- /dev/null +++ b/assets/css/site.css @@ -0,0 +1,891 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +:root{ + --bg: #ffd; + --ink: #000; + --muted: #333; + --accent: #d22; + --gold: #c69214; + --border: #caa; + --shadow: rgba(0,0,0,.10); + + --wrap: 960px; + --r: 6px; + + /* Unified spacing scale */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 0.75rem; + --space-lg: 1rem; + --space-xl: 1.35rem; + --space-2xl: 1.75rem; + --space-3xl: 2.5rem; + + /* Typography scale */ + --fs-xs: 0.85rem; + --fs-sm: 0.9rem; + --fs-base: 1rem; + --fs-lg: 1.05rem; + --fs-xl: 1.15rem; + --fs-2xl: 1.5rem; + --fs-3xl: 1.8rem; +} + +/* --- UNIFIED HEADER BUTTONS STYLE --- */ +.header-button { + font-size: var(--fs-sm); + border: 1px solid var(--border); + padding: 4px 8px; + border-radius: var(--r); + color: var(--ink); + text-decoration: none; + background: var(--bg); + cursor: pointer; + font-family: inherit; + display: inline-flex; + align-items: center; + justify-content: center; + transition: background .15s, color .15s, border-color .15s; +} + +.header-button:hover { + background: var(--accent); + color: #000; + border-color: var(--accent); +} + +/* Reset */ +*, *::before, *::after { box-sizing: border-box; } +html, body { height: 100%; } +body { margin: 0; } + +body{ + font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + line-height: 1.6; + background: var(--bg); + color: var(--ink); + font-size: var(--fs-base); + /* Prevent horizontal scrollbar when menu icon rotates */ + overflow-x: hidden; +} + +/* Typography */ +p{ + margin: var(--space-sm) 0; + line-height: 1.6; +} +p:first-child{ margin-top: 0; } +p:last-child{ margin-bottom: 0; } + +img{ max-width: 100%; height: auto; display: block; } +video{ display: block; } + +/* Accessibility helpers */ +.skip-link{ + position: absolute; + left: -999px; + top: 0; + background: var(--bg); + border: 1px solid var(--border); + padding: .5rem .75rem; + border-radius: var(--r); + z-index: 2000; +} +.skip-link:focus{ left: 1rem; top: 1rem; } + +:focus-visible{ + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* Layout */ +.wrap{ + max-width: var(--wrap); + margin: 0 auto; + padding: var(--space-xl) var(--space-lg) var(--space-3xl); +} + +/* Utilities */ +.stack{ + display: flex; + flex-direction: column; + gap: var(--space-xl); +} + +header.site-header, footer.site-footer{ + background: var(--bg); + border-bottom: 1px solid var(--border); +} + +header.site-header{ + position: sticky; + top: 0; + z-index: 1000; +} + +.header-inner{ + max-width: var(--wrap); + margin: 0 auto; + padding: var(--space-md) var(--space-lg); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-lg); + flex-wrap: wrap; +} + +.brand{ + display: flex; + align-items: center; + gap: var(--space-md); + min-width: 240px; +} + +.logo{ + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--r); +} +.logo img{ + height: 48px; + width: 48px; + object-fit: contain; + border: 2px solid #000; + border-radius: var(--r); +} + +header.site-header .logo:hover img, +header.site-header .logo:focus-visible img{ + border-color: var(--accent); +} + +.brand-text{ + display: flex; + flex-direction: column; + line-height: 1.2; +} +.brand-text strong{ + font-size: var(--fs-lg); + color: var(--gold); + letter-spacing: .2px; +} +.brand-text span{ + font-size: var(--fs-sm); + color: var(--muted); +} + +.header-controls{ + display: flex; + align-items: center; + gap: var(--space-md); +} + +/* Links (match startpage hover) */ +a{ + color: var(--accent); + text-decoration: none; + transition: 0.1s; +} +a:hover{ + background: var(--accent); + color: #000 !important; +} + +/* Menu */ +.menu-wrapper{ position: relative; } + +#menu-toggle{ + width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 22px; + line-height: 1; + transition: transform .25s ease; + border: 1px solid #000; + border-radius: var(--r); + background: var(--bg); + color: var(--ink); + padding: 0; +} + +#menu-toggle:hover { + background: var(--accent); + color: #000; + border-color: #000; +} + +#menu-toggle.active{ + transform: rotate(90deg); + background: var(--bg); + color: var(--ink); + border-color: #000; +} + +#menu-toggle.active:hover{ + background: var(--accent); + color: #000; + border-color: #000; +} + +nav.site-nav{ + position: absolute; + right: 0; + top: calc(100% + var(--space-xs)); + background: var(--bg); + border: 1px solid var(--ink); + border-radius: var(--r); + padding: var(--space-md) var(--space-md); + min-width: 200px; + box-shadow: 0 10px 22px var(--shadow); + z-index: 1200; +} +nav.site-nav ul{ list-style: none; margin: 0; padding: 0; } +nav.site-nav li{ margin: var(--space-sm) 0; } +nav.site-nav a{ + display: block; + padding: var(--space-xs) var(--space-xs); + transition: background .15s, color .15s; + color: var(--ink); +} +nav.site-nav a:hover{ background: var(--accent); color: #000; } + +/* Nav sections */ +nav.site-nav .nav-section{ margin-bottom: var(--space-md); } +nav.site-nav .nav-section:last-child{ margin-bottom: 0; } +nav.site-nav .nav-section + .nav-section{ + border-top: 1px solid var(--border); + padding-top: var(--space-md); +} +nav.site-nav .nav-label{ + font-size: var(--fs-xs); + font-weight: 600; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: var(--space-xs); + padding: var(--space-xs); +} + +/* Language dropdown */ +.lang{ position: relative; } + +.lang-toggle-wrapper{ display: inline-block; } + +.lang-menu{ + position: absolute; + right: 0; + top: calc(100% + var(--space-xs)); + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--r); + box-shadow: 0 10px 22px var(--shadow); + min-width: 160px; + padding: var(--space-sm); + z-index: 1200; +} +.lang-menu a{ + display: block; + padding: var(--space-sm) var(--space-sm); + color: var(--ink); + transition: background .15s; +} +.lang-menu a:hover{ background: var(--accent); color: #000; } + +/* Sections / cards */ +section{ + margin: var(--space-xl) 0; + border: 1px solid var(--border); + border-radius: var(--r); + padding: var(--space-lg); + background: var(--bg); +} + +h1{ + margin: 0 0 var(--space-md) 0; + color: var(--gold); + font-weight: 700; + font-size: var(--fs-2xl); + letter-spacing: .2px; + line-height: 1.2; +} + +h2{ + margin: 0 0 var(--space-md) 0; + color: var(--gold); + font-size: var(--fs-xl); + font-weight: 700; + letter-spacing: .1px; + line-height: 1.3; +} + +/* CHANGELOG SPECIFIC STYLES */ +.changelog-title{ + color: var(--gold) !important; + margin-bottom: var(--space-sm) !important; +} + +.changelog-date{ + font-size: var(--fs-3xl) !important; + font-weight: 700; + color: var(--muted); + margin: var(--space-sm) 0 var(--space-lg) 0; + line-height: 1.1; +} + +.muted{ color: var(--muted); font-size: var(--fs-sm); } + +/* Video */ +.video-wrap{ margin: var(--space-md) 0 0 0; } +.video-wrap video{ + width: 100%; + height: auto; + max-height: 80vh; + background: #000; + border: 1px solid var(--border); + border-radius: var(--r); +} + +/* Lists */ +.contact-list{ + list-style: none; + padding: 0; + margin: var(--space-md) 0 0 0; +} +.contact-list li{ margin: var(--space-sm) 0; line-height: 1.6; } +.contact-address{ font-style: normal; } + +blockquote{ + margin: var(--space-md) 0 0 0; + padding-left: var(--space-md); + border-left: 3px solid var(--border); + color: var(--muted); + font-style: italic; + font-size: var(--fs-sm); + line-height: 1.6; +} + +/* Iframe loading overlay */ +.iframe-clip{ position: relative; } +.iframe-clip iframe{ position: relative; z-index: 1; } +.iframe-clip.is-loading::before{ + content: "Loading..."; + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 221, 0.92); + color: var(--ink); + font-size: var(--fs-sm); + z-index: 2; +} +.iframe-clip.is-loading::after{ + content: ""; + position: absolute; + width: 22px; + height: 22px; + border: 2px solid var(--border); + border-top-color: var(--accent); + border-radius: 50%; + top: calc(50% + 16px); + left: 50%; + transform: translateX(-50%); + animation: iframe-spin 0.8s linear infinite; + z-index: 3; +} +@keyframes iframe-spin{ + to { transform: translateX(-50%) rotate(360deg); } +} + +/* Friends grid */ +.friends-list{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-md); + margin: var(--space-md) 0 0 0; + padding: 0; + list-style: none; +} +.friends-list a{ + display: flex; + align-items: center; + justify-content: center; + height: 42px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--r); + padding: var(--space-sm) var(--space-sm); + color: var(--accent); + transition: background .15s, color .15s, border-color .15s, box-shadow .15s; +} +.friends-list a:hover{ + background: var(--accent); + color: #000; + border-color: var(--accent); + box-shadow: 0 1px 0 var(--accent) inset; +} + +/* Tiles */ +.tile-grid{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--space-md); + list-style: none; + padding: 0; + margin: var(--space-md) 0 0 0; +} +.tile-grid a{ + display: flex; + align-items: center; + justify-content: center; + height: 64px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--r); + padding: var(--space-sm); + transition: background .15s, border-color .15s, box-shadow .15s; +} +.tile-grid a:hover{ + background: var(--accent); + border-color: var(--accent); + box-shadow: 0 1px 0 var(--accent) inset; +} +.tile-grid img{ width: 100%; height: 100%; object-fit: contain; } + +/* Embeds */ +.embed-frame{ + display: block; + width: 100%; + border: 1px solid var(--border); + border-radius: var(--r); + background: var(--bg); + margin: var(--space-md) 0 0 0; +} +.guestbook-form-frame{ + height: 350px; + min-height: 350px; +} +.iframe-clip{ + --sb: 18px; + overflow: hidden; + border-radius: var(--r); + border: 1px solid var(--border); +} +.iframe-clip > iframe{ + width: calc(100% + var(--sb)); + height: calc(100% + var(--sb)); + border: 0; +} +.guestbook-frame{ min-height: 90vh; } + +#guestbook-comments-iframe { + min-height: 600px; /* Adjusted to show more comments */ +} + +.changelog-frame{ min-height: 360px; } + +/* Audio */ +.audio-wrap{ margin: var(--space-md) 0 0 0; } +audio{ width: 100%; max-width: 400px; } + +/* Blog + changelog lists */ +#blog-list, +#changelog-list{ margin: var(--space-md) 0 0 0; } +#blog-list > div:first-child, +#changelog-list > div:first-child{ margin-bottom: var(--space-md); } +#blog-list ol, +#changelog-list ol{ margin: var(--space-md) 0 0 0; padding-left: var(--space-xl); } +#blog-list li, +#changelog-list li{ margin: 0 0 var(--space-md) 0; line-height: 1.6; } +#blog-list .muted, +#changelog-list .muted{ font-size: var(--fs-sm); margin-top: var(--space-xs); } +#blog-list .blog-more{ margin-top: var(--space-xs); } +#changelog-list .changelog-body{ margin-top: var(--space-xs); white-space: pre-line; } +#changelog-list time{ color: var(--accent); } + +/* Footer */ +footer.site-footer{ border-top: 1px solid var(--border); border-bottom: none; } +.footer-inner{ + max-width: var(--wrap); + margin: 0 auto; + padding: var(--space-lg) var(--space-lg) var(--space-2xl); + color: var(--muted); + font-size: var(--fs-sm); + line-height: 1.6; +} +.badge{ + display: inline-flex; + margin-top: var(--space-sm); + border-radius: var(--r); + padding: var(--space-xs); + border: 1px solid var(--border); + background: var(--bg); + transition: border-color .15s; +} +.badge:hover{ border-color: var(--accent); } + +/* Reset Button */ +.reset-button{ + font-size: var(--fs-sm); + border: 1px solid #000; /* Black border */ + padding: 4px 8px; + border-radius: var(--r); + color: #000; /* Black text */ + background: #ffd; /* Light yellow background */ + cursor: pointer; + font-family: inherit; + display: inline-flex; + align-items: center; + justify-content: center; + transition: background .15s, color .15s, border-color .15s; +} + +.reset-button:hover { + background: var(--accent); /* Dark red on hover */ + color: #000; /* Black text on hover */ + border-color: #000; /* Black border on hover */ +} + +@media (max-width: 600px){ + .tile-grid{ + display: flex; + flex-direction: column; + align-items: center; + } + .tile-grid li{ + margin-bottom: 1rem; + text-align: center; + } + .contact-list{ + padding-left: 20px; + } + .friends-list{ + display: flex; + flex-direction: column; + gap: 10px; + } +} + +@media (max-width: 520px){ + header.site-header{ position: sticky; } + .header-inner{ position: relative; } + nav.site-nav{ + min-width: 200px; + max-width: calc(100vw - 2 * var(--space-lg)); + } + .lang-menu{ + right: auto; + left: 0; + max-width: calc(100vw - 32px); + } + #menu-toggle{ display: inline-flex; transition: transform .25s ease; } + #menu-toggle.active{ transform: rotate(90deg); } +} + +@media (prefers-reduced-motion: reduce){ + *{ transition: none !important; scroll-behavior: auto !important; } + #menu-toggle.active{ transform: none; } +} + +/* From style.css */ +h1 { + font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; + font-size: 1.875rem; /* 30px / 16px (base font size) */ + padding-left: 40px; +} + +pre { + font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; + font-size: 12px; + padding-left: 40px; +} + +.button1 { + background-color: black; + font-family: Comic Sans MS; + font-weight: 300; +} + +.member { + float: left; + width: calc(20% - 2%); /* Adjust width to account for margins */ + margin: 1% 1% 45px 1%; +} + +.name { + bottom: 0px; +} + +.member img { + width: 50%; + display: block; +} + +ul.flowxl { + display: flex; + flex-wrap: wrap; + padding: 0; +} + +ul.flowxl > li { + list-style-type: none; + text-align: center; + width: var(--xiconsize); + min-width: var(--xiconsize); + max-width: var(--xiconsize); + max-height: calc(var(--xiconsize) + 60px); + padding: 2px; + margin: 0.125rem; /* Use rem for margin */ + overflow: hidden; + font-size: 1rem; + line-height: 1; +} + +ul.flowxl > li > a { + display: block; + line-height: 1; + font-size: 1.2rem; +} + +ul.flowxl li > a > img, +ul.flowxl li > img { + display: block; + border-radius: 9px; + width: auto; + max-width: var(--xiconsize); + max-height: var(--xiconsize); + overflow: hidden; + margin-left: auto; + margin-right: auto; +} + +ul.flowxl li > a > img[src$=".svg"] { + max-width: 170px; + max-height: 170px; +} + +.country-img { + height: 12.5rem; /* Use rem units for height */ + width: 250px; /* Desired width */ + object-fit: contain; /* Scales image to fit within the box while maintaining aspect ratio */ + max-width: 100%; /* Ensures responsiveness */ +} + +.countries { + flex-wrap: wrap; /* Ensures images wrap if they exceed container width */ + gap: 10px; /* Adds spacing between images */ + justify-content: center; /* Centers the images horizontally */ +} + +.vpn-logo { + width: 200px; /* Set max-width for scaling */ + max-width: 100%; /* Responsive width */ + height: auto; /* Maintain aspect ratio */ + object-fit: contain; /* Handle scaling gracefully */ +} + +.toesu-logo { + width: 200px; /* Set the default width */ + max-width: 100%; /* Ensure image scales on smaller screens */ + height: auto; /* Maintain original aspect ratio */ + object-fit: contain; /* Gracefully handle image scaling */ +} + +@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + + -- cgit v1.2.3