:root { --text-color: #111; --border-color: #eee; --background-light: #eee; --orange: rgba(255, 100, 0, 0.8); --orange-light: rgba(255, 100, 0, 0.4); --orange-solid: #ff6400; --white: white; --transparent: transparent; /* Role color palette: base solids + lighter glow variants */ --author-solid: #dc2626; /* red */ --author-color: color-mix(in oklab, var(--author-solid) 90%, white); --maintainer-solid: #16a34a; /* green */ --maintainer-color: color-mix(in oklab, var(--maintainer-solid) 90%, white); --contributor-solid: #8b5cf6; /* purple */ --contributor-color: color-mix(in oklab, var(--contributor-solid) 90%, white); --ribbon-length: 1200px; /* long enough to cover the card diagonally */ --corner-gap: 10px; /* small padding so text isn’t flush with corner */ --ribbon-stack-gap: 28px; /* distance between the two ribbons along the diagonal */ --ribbon-width: 720px; /* length of each ribbon */ --ribbon-top: 12px; /* distance from top edge for the first ribbon */ --ribbon-right: -332px; /* center horizontally ~40px inside along diagonal */ --ribbon-gap: 18px; /* vertical gap between the two ribbons */ /* Role-specific fine-tuning */ --role-gap-extra: 9px; /* extra separation from the fork banner */ --role-right-adjust: 9px; /* keep aligned horizontally with the fork banner */ /* Theme surfaces (light default) */ --page-bg: #ffffff; --card-bg: #ffffff; --muted-bg: #f6f7f9; --control-bg: #f1f5f9; --control-hover-bg: #e2e8f0; --control-border: #cbd5e1; --control-text: #0f172a; } /* System default: dark mode variables */ @media (prefers-color-scheme: dark) { :root { --text-color: #e5e7eb; --border-color: #2a2f3a; --background-light: #1f2730; --orange: rgba(255, 180, 0, 0.35); --orange-light: rgba(255, 180, 0, 0.25); --orange-solid: #ffb400; --page-bg: #0b0f14; --card-bg: #111827; --muted-bg: #111827; --control-bg: #1f2937; --control-hover-bg: #374151; --control-border: #334155; --control-text: #e5e7eb; } } /* Forced overrides via attribute on */ :root[data-theme="light"] { --text-color: #111; --border-color: #eee; --background-light: #eee; --orange: rgba(255, 100, 0, 0.8); --orange-light: rgba(255, 100, 0, 0.4); --orange-solid: #ff6400; --page-bg: #ffffff; --card-bg: #ffffff; --muted-bg: #f6f7f9; --control-bg: #f1f5f9; --control-hover-bg: #e2e8f0; --control-border: #cbd5e1; --control-text: #0f172a; } :root[data-theme="dark"] { --text-color: #e5e7eb; --border-color: #2a2f3a; --background-light: #1f2730; --orange: rgba(255, 180, 0, 0.35); --orange-light: rgba(255, 180, 0, 0.25); --orange-solid: #ffb400; --page-bg: #0b0f14; --card-bg: #111827; --muted-bg: #111827; --control-bg: #1f2937; --control-hover-bg: #374151; --control-border: #334155; --control-text: #e5e7eb; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; max-width: 48rem; margin: 2rem auto; padding: 0 1rem; color: var(--text-color); background: var(--page-bg); } header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .theme-toggle { appearance: none; background: var(--control-bg); color: var(--control-text); border: 1px solid var(--control-border); border-radius: 9999px; padding: 0.375rem 0.625rem; font-size: 0.9rem; line-height: 1; cursor: pointer; box-shadow: 0 0 8px var(--orange-light); } .theme-toggle:hover { background: var(--control-hover-bg); } h1 { border-bottom: 1px solid var(--border-color); padding-bottom: .25rem; display: flex; align-items: baseline; /* keep pills aligned with the text baseline on wide screens */ column-gap: 1rem; /* space between title text and first pill */ row-gap: 0.5rem; /* vertical gap when pills wrap to the next line */ flex-wrap: wrap; /* allow pills to drop below the title when needed */ } h2 { margin-top: 0.2rem; margin-bottom: 0.1rem; } li { margin: 0; } a.text-link { display: inline-block; text-decoration: underline; color: var(--orange-solid); } .link-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; text-decoration: none; color: inherit; font-size: 0.875rem; font-weight: 600; width: 20px; height: 20px; box-shadow: 0 0 10px var(--orange); background-color: var(--orange); padding: 0.3rem 0.5rem; margin-right: 0.5rem; } .min-language { .language { width: 14px; height: 14px; padding: 0.1rem 0.1rem; margin-right: 0.1rem; margin-bottom: -0.2rem; box-shadow: none; background-color: var(--transparent); } } a { text-decoration: none; color: inherit; } .project-list { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; list-style: none; padding: 0; } .card { width: 450px; box-sizing: border-box; border: 1px solid var(--border-color); padding: 1rem; border-radius: 4px; position: relative; overflow: hidden; background: var(--card-bg); .tag { display: inline-block; background-color: var(--background-light); border-radius: 9999px; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600; margin: -0.1rem 0.5rem 0 0; box-shadow: 0 0 10px var(--orange-light); } .tag.author { box-shadow: 0 0 10px var(--author-color); } .tag.maintainer { box-shadow: 0 0 10px var(--maintainer-color); } .tag.contributor { box-shadow: 0 0 10px var(--contributor-color); } } /* Project card positioning for corner banners */ .card { position: relative; overflow: hidden; } /* Absolute + rotate recipe anchored to the card */ .card .corner-banner { position: absolute; width: var(--ribbon-width); padding: 9px 0; text-align: center; font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; transform: rotate(45deg); transform-origin: 50% 50%; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 10; /* Center content precisely */ display: flex; align-items: center; justify-content: center; line-height: 1; } /* Fork/Clone (closest to corner) */ .card .banner-fork { top: var(--ribbon-top); right: var(--ribbon-right); background: linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%); z-index: 11; } /* Role ribbon stacked underneath */ .card .banner-role { top: calc(var(--ribbon-top) + var(--ribbon-gap) + var(--role-gap-extra)); right: calc(var(--ribbon-right) + var(--role-right-adjust)); z-index: 10; } /* Keep role-specific colors */ .card .banner-role.author { background: color-mix(in oklab, var(--author-color) 90%, black 10%); } .card .banner-role.maintainer { background: color-mix(in oklab, var(--maintainer-color) 90%, black 10%); } .card .banner-role.contributor { background: color-mix(in oklab, var(--contributor-color) 90%, black 10%); } .author { box-shadow: 0 0 10px var(--author-color); } .maintainer { box-shadow: 0 0 10px var(--maintainer-color); } .contributor { box-shadow: 0 0 10px var(--contributor-color); } .projects { max-width: none; } /* Ensure pills don’t use any upward shift by default (helps small viewports) */ h1 .tag-list { transform: none; margin-left: 0; } /* Remove mobile-specific overrides no longer needed due to flex wrapping */ /* (intentionally left blank to avoid conflicting rules) */ .tag-list { display: inline-flex; flex-wrap: wrap; gap: 1.1rem 0.8rem; list-style: none; padding: 0; > * { margin: 0; } .tag { display: inline-block; background-color: var(--background-light); border-radius: 9999px; padding: 0.3rem 1rem 0.3rem 1.75rem; font-size: 0.75rem; font-weight: 600; margin-left: 1.5rem; margin-right: 0; border: 2px solid var(--transparent); box-shadow: 0 0 10px var(--orange-light); transition: margin-left 0.3s ease; } .tag.author { box-shadow: 0 0 10px var(--author-color); } .tag.maintainer { box-shadow: 0 0 10px var(--maintainer-color); } .tag.contributor { box-shadow: 0 0 10px var(--contributor-color); } .tag-link { display: inline-block; background-color: var(--background-light); border-radius: 9999px; /*padding: 0.3rem 1rem 0.3rem 1.75rem;*/ box-shadow: 0 0 10px var(--orange-light); text-decoration: none; color: inherit; /*margin: 0 0.5rem 0 0;*/ position: relative; } .tag-link.author { box-shadow: 0 0 10px var(--author-color); } .tag-link.maintainer { box-shadow: 0 0 10px var(--maintainer-color); } .tag-link.contributor { box-shadow: 0 0 10px var(--contributor-color); } .tag-link.active { background-color: var(--orange); } .tag-link.author.active { background-color: var(--author-color); } .tag-link.maintainer.active { background-color: var(--maintainer-color); } .tag-link.contributor.active { background-color: var(--contributor-color); } .tag-link.active .tag { background-color: var(--orange); color: var(--white); border: 2px solid var(--orange-solid); margin-left: 0; margin-right: 1.5rem; } .tag-link.author.active .tag.author { background-color: var(--author-color); color: var(--white); border: 2px solid var(--author-solid); margin-left: 0; margin-right: 1.5rem; } .tag-link.maintainer.active .tag.maintainer { background-color: var(--maintainer-color); color: var(--white); border: 2px solid var(--maintainer-solid); margin-left: 0; margin-right: 1.5rem; } .tag-link.contributor.active .tag.contributor { background-color: var(--contributor-color); color: var(--white); border: 2px solid var(--contributor-solid); margin-left: 0; margin-right: 1.5rem; } .count { position: absolute; top: 0.5rem; font-size: 0.75rem; font-weight: 600; padding: 0 0.5rem; color: var(--text-color); } .count.left { left: 0; opacity: 1; z-index: 1; } .count.right { right: 0; opacity: 1; z-index: -1; } .tag-link.active .count.left { opacity: 0; z-index: -1; } .tag-link.active .count.right { opacity: 1; color: var(--white); z-index: 1; } } /* On wide viewports, nudge H1 pills up slightly to align with x-height */ @media (min-width: 51rem) { h1 .tag-list { transform: translateY(-6px); } }