mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-29 17:02:28 +00:00
Merge pull request #504 from PR0M3TH3AN/codex/refactor-blog-css-with-design-tokens
Align blog layout with design tokens
This commit is contained in:
5 files changed
+122
-96
No files matched your search
@@ -56,7 +56,10 @@
|
||||
</script>
|
||||
</head>
|
||||
<body class="blog-body">
|
||||
<div id="app" class="blog-app-root"></div>
|
||||
<div
|
||||
id="app"
|
||||
class="blog-app-root mx-auto my-8 w-full max-w-none px-4 md:w-[var(--blog-layout-fluid-width)] md:max-w-[var(--blog-layout-max-width)] md:px-0"
|
||||
></div>
|
||||
<script>
|
||||
window.wnjParams = {
|
||||
position: "bottom",
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-logo-accent:var(--color-primary);--color-logo-wordmark:var(--color-neutral-700);--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:var(--color-neutral-700);--color-logo-background-inverse:var(--color-white);--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-info-glass:rgba(37,99,235,.18);--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--blog-embed-height:Line truncated
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-logo-accent:var(--color-primary);--color-logo-wordmark:var(--color-neutral-700);--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:var(--color-neutral-700);--color-logo-background-inverse:var(--color-white);--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-info-glass:rgba(37,99,235,.18);--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--blog-embed-height:Line truncated
|
||||
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.ng-animate-shim{visibility:hidden}.ng-anchor{position:absolute}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-md);padding-bottom:var(--space-md)}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:Line truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.ng-animate-shim{visibility:hidden}.ng-anchor{position:absolute}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-md);padding-bottom:var(--space-md)}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:Line truncated
|
||||
+82
-93
@@ -2632,12 +2632,12 @@
|
||||
|
||||
/* Blog layout root scaffolding */
|
||||
.blog-html {
|
||||
font-size: 20px;
|
||||
font-size: var(--blog-font-size-root);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-html {
|
||||
font-size: 18px;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2653,21 +2653,10 @@
|
||||
|
||||
.blog-app-root {
|
||||
box-sizing: border-box;
|
||||
width: 80%;
|
||||
max-width: 760px;
|
||||
margin: 2rem auto;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-family-sans);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-app-root {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .blog-app-root {
|
||||
background-color: var(--color-text-strong);
|
||||
color: var(--color-blog-gray-170);
|
||||
@@ -2694,53 +2683,53 @@
|
||||
|
||||
.blog-app-root ol,
|
||||
.blog-app-root ul {
|
||||
padding-left: 1rem;
|
||||
padding-left: var(--space-md);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-app-root ol li,
|
||||
.blog-app-root ul li {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.blog-app-root blockquote {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
border-left: 8px solid var(--color-blog-gray-170);
|
||||
padding-left: var(--space-md);
|
||||
border-left: var(--space-xs) solid var(--color-blog-gray-170);
|
||||
}
|
||||
|
||||
.blog-app-root code {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--blog-font-size-body);
|
||||
background-color: var(--color-blog-neutral-120);
|
||||
}
|
||||
|
||||
.blog-app-root pre code {
|
||||
overflow: scroll;
|
||||
display: block;
|
||||
padding: 1rem 0.5rem;
|
||||
padding: var(--space-md) var(--space-xs);
|
||||
}
|
||||
|
||||
.blog-app-root .unfinished-setup {
|
||||
width: 80%;
|
||||
width: var(--blog-layout-fluid-width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blog-app-root .header.home h1 {
|
||||
font-size: 3rem;
|
||||
font-size: var(--blog-font-size-display);
|
||||
}
|
||||
|
||||
.blog-app-root .header .external-link {
|
||||
text-align: right;
|
||||
margin-top: -1rem;
|
||||
font-size: 0.8em;
|
||||
margin-top: calc(var(--space-md) * -1);
|
||||
font-size: var(--blog-font-size-meta);
|
||||
color: var(--color-blog-gray-220);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-app-root .header .external-link {
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 2.5rem;
|
||||
margin-bottom: var(--space-md);
|
||||
margin-right: var(--blog-space-inline-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2752,11 +2741,11 @@
|
||||
.blog-app-root .header .picture-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: var(--blog-avatar-size);
|
||||
height: var(--blog-avatar-size);
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
margin-bottom: -0.25rem;
|
||||
margin-bottom: calc(var(--space-2xs) * -1);
|
||||
}
|
||||
|
||||
.blog-app-root .header .picture-container img {
|
||||
@@ -2771,9 +2760,9 @@
|
||||
}
|
||||
|
||||
.blog-app-root .header.note .picture-container {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-bottom: -0.4rem;
|
||||
width: var(--blog-avatar-size-compact);
|
||||
height: var(--blog-avatar-size-compact);
|
||||
margin-bottom: calc(var(--blog-space-snug) * -1);
|
||||
}
|
||||
|
||||
.blog-app-root .header a {
|
||||
@@ -2848,22 +2837,22 @@
|
||||
}
|
||||
|
||||
.blog-app-root .about {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 8px solid var(--color-blog-gray-170);
|
||||
margin-bottom: var(--space-xl);
|
||||
padding-bottom: var(--space-md);
|
||||
border-bottom: var(--space-xs) solid var(--color-blog-gray-170);
|
||||
}
|
||||
|
||||
.dark .blog-app-root .about {
|
||||
border-bottom: 8px solid var(--color-card);
|
||||
border-bottom: var(--space-xs) solid var(--color-card);
|
||||
}
|
||||
|
||||
.blog-app-root .separator {
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 8px solid var(--color-blog-gray-170);
|
||||
margin-bottom: var(--space-xl);
|
||||
border-bottom: var(--space-xs) solid var(--color-blog-gray-170);
|
||||
}
|
||||
|
||||
.dark .blog-app-root .separator {
|
||||
border-bottom: 8px solid var(--color-card);
|
||||
border-bottom: var(--space-xs) solid var(--color-card);
|
||||
}
|
||||
|
||||
.blog-app-root .top-notes {
|
||||
@@ -2873,9 +2862,9 @@
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 8px solid var(--color-blog-neutral-100);
|
||||
margin-bottom: var(--space-md);
|
||||
padding-bottom: var(--space-xl);
|
||||
border-bottom: var(--space-xs) solid var(--color-blog-neutral-100);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -2897,7 +2886,7 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-app-root .top-notes .note {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2909,40 +2898,40 @@
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.blog-app-root .top-notes .note .title {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: var(--blog-space-snug);
|
||||
font-size: var(--blog-font-size-title);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.blog-app-root .top-notes .note .summary {
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: var(--blog-space-snug);
|
||||
font-size: var(--blog-font-size-body);
|
||||
}
|
||||
|
||||
.blog-app-root .top-notes .note .date {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--blog-font-size-meta);
|
||||
color: var(--color-blog-gray-275);
|
||||
}
|
||||
|
||||
.dark .blog-app-root .top-notes {
|
||||
color: var(--color-blog-gray-220);
|
||||
border-bottom: 8px solid var(--color-card);
|
||||
border-bottom: var(--space-xs) solid var(--color-card);
|
||||
}
|
||||
|
||||
.blog-app-root .short-notes {
|
||||
border-bottom: 8px solid var(--color-blog-neutral-100);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: var(--space-xs) solid var(--color-blog-neutral-100);
|
||||
padding-bottom: var(--space-md);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.blog-app-root .short-notes .splide__slide {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--blog-font-size-body);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -2951,9 +2940,9 @@
|
||||
}
|
||||
|
||||
.blog-app-root .short-notes .splide__slide .date {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--blog-font-size-meta);
|
||||
color: var(--color-blog-gray-275);
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: var(--blog-space-compact);
|
||||
}
|
||||
|
||||
.blog-app-root .short-notes .splide__arrow--prev {
|
||||
@@ -2980,7 +2969,7 @@
|
||||
}
|
||||
|
||||
.dark .blog-app-root .short-notes {
|
||||
border-bottom: 8px solid var(--color-card);
|
||||
border-bottom: var(--space-xs) solid var(--color-card);
|
||||
}
|
||||
|
||||
.dark .blog-app-root .short-notes a {
|
||||
@@ -2988,12 +2977,12 @@
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes {
|
||||
margin-top: 1rem;
|
||||
margin-top: var(--space-md);
|
||||
color: var(--color-blog-gray-440);
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes.short-feed-full li {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes.short-feed-full .summary {
|
||||
@@ -3007,21 +2996,21 @@
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li h2 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: var(--blog-font-size-title);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li h2 a {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--blog-font-size-title);
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li .summary {
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: var(--blog-space-snug);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -3031,23 +3020,23 @@
|
||||
|
||||
.blog-app-root .listing-notes ul li .summary img {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
margin: var(--space-xl) auto;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li .summary video {
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
margin: var(--space-xl) auto;
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li .summary audio {
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
margin: var(--space-xl) auto;
|
||||
}
|
||||
|
||||
.blog-app-root .listing-notes ul li .date {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--blog-font-size-meta);
|
||||
color: var(--color-blog-gray-275);
|
||||
}
|
||||
|
||||
@@ -3060,78 +3049,78 @@
|
||||
}
|
||||
|
||||
.blog-app-root h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 0.9;
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--blog-line-height-tight);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-app-root h1 {
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--blog-font-size-h1-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper {
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
margin-top: var(--space-xl);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper h1,
|
||||
.blog-app-root .note-wrapper h2,
|
||||
.blog-app-root .note-wrapper h3 {
|
||||
margin-top: 1.4rem;
|
||||
margin-bottom: 0.6rem;
|
||||
margin-top: var(--blog-space-heading-stack);
|
||||
margin-bottom: var(--blog-space-heading-gap);
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper h1:first-of-type {
|
||||
margin-top: 0rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper .content {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper p {
|
||||
line-height: 1.3rem;
|
||||
margin-top: 0rem;
|
||||
line-height: var(--blog-line-height-body);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper .date {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: var(--space-xs);
|
||||
font-size: var(--blog-font-size-meta);
|
||||
color: var(--color-blog-gray-275);
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper img {
|
||||
display: block;
|
||||
margin: 2rem auto;
|
||||
margin: var(--space-xl) auto;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper img.note-banner {
|
||||
margin: 2.5rem auto 3.5rem;
|
||||
margin: var(--blog-space-media-stack-start) auto var(--blog-space-media-stack-end);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper video {
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
margin: var(--space-xl) auto;
|
||||
}
|
||||
|
||||
.blog-app-root .note-wrapper audio {
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
margin: var(--space-xl) auto;
|
||||
}
|
||||
|
||||
.blog-app-root .footer {
|
||||
margin-top: 4rem;
|
||||
padding-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-top: 8px solid var(--color-blog-gray-170);
|
||||
font-size: 0.8rem;
|
||||
margin-top: var(--blog-space-stack-xxl);
|
||||
padding-top: var(--space-xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
border-top: var(--space-xs) solid var(--color-blog-gray-170);
|
||||
font-size: var(--blog-font-size-meta);
|
||||
text-align: center;
|
||||
color: var(--color-blog-gray-220);
|
||||
}
|
||||
@@ -3141,7 +3130,7 @@
|
||||
}
|
||||
|
||||
.dark .blog-app-root .footer {
|
||||
border-top: 8px solid var(--color-card);
|
||||
border-top: var(--space-xs) solid var(--color-card);
|
||||
color: var(--color-blog-gray-440);
|
||||
}
|
||||
|
||||
|
||||
@@ -158,6 +158,28 @@
|
||||
--color-blog-rust-700: rgb(124 45 18);
|
||||
--color-blog-purple-700: rgb(126 34 206);
|
||||
--color-blog-purple-accent: rgb(146 55 156);
|
||||
|
||||
/* Blog layout */
|
||||
--blog-font-size-root: 1.25rem;
|
||||
--blog-font-size-display: 3rem;
|
||||
--blog-font-size-title: 1.1rem;
|
||||
--blog-font-size-body: 0.9rem;
|
||||
--blog-font-size-meta: 0.8rem;
|
||||
--blog-font-size-h1-mobile: 1.6rem;
|
||||
--blog-layout-fluid-width: 80%;
|
||||
--blog-layout-max-width: 47.5rem;
|
||||
--blog-space-compact: 0.3rem;
|
||||
--blog-space-snug: 0.4rem;
|
||||
--blog-space-stack-xxl: 4rem;
|
||||
--blog-space-inline-lg: 2.5rem;
|
||||
--blog-space-media-stack-start: 2.5rem;
|
||||
--blog-space-media-stack-end: 3.5rem;
|
||||
--blog-space-heading-stack: 1.4rem;
|
||||
--blog-space-heading-gap: 0.6rem;
|
||||
--blog-avatar-size: 2.5rem;
|
||||
--blog-avatar-size-compact: 1.5rem;
|
||||
--blog-line-height-body: 1.3rem;
|
||||
--blog-line-height-tight: 0.9;
|
||||
--color-blog-purple-muted: rgb(150 96 156);
|
||||
--color-blog-gray-300: rgb(153 153 153);
|
||||
--color-blog-purple-500: rgb(168 85 247);
|
||||
|
||||
@@ -31,6 +31,18 @@ Tokens are sourced from `css/tokens.css` and consumed as CSS custom properties.
|
||||
|
||||
Limit overrides to variables defined in `css/tokens.css` and document any long-lived changes in this file so the design tokens remain the source of truth. Feature-flagged experiments should wrap overrides in a `data-flag-<name>` selector or toggle them via controller logic so the defaults remain stable when the flag is off.
|
||||
|
||||
### Blog layout tokens
|
||||
|
||||
The blog embed now consumes dedicated typography and spacing tokens alongside Tailwind utilities. `css/tokens.css` exposes the following helpers:
|
||||
|
||||
- `--blog-font-size-root`, `--blog-font-size-display`, `--blog-font-size-title`, `--blog-font-size-body`, `--blog-font-size-meta`, and `--blog-font-size-h1-mobile` scale copy across the blog shell, hero headings, and metadata.
|
||||
- `--blog-line-height-body` and `--blog-line-height-tight` set the rhythm for long-form text and compact headers.
|
||||
- `--blog-layout-fluid-width` and `--blog-layout-max-width` define the responsive container width; pair them with Tailwind utilities (`mx-auto`, `md:w-[var(--blog-layout-fluid-width)]`, `md:max-w-[var(--blog-layout-max-width)]`) when mounting the blog root.
|
||||
- `--blog-space-compact`, `--blog-space-snug`, `--blog-space-heading-stack`, `--blog-space-heading-gap`, `--blog-space-inline-lg`, `--blog-space-media-stack-start`, `--blog-space-media-stack-end`, and `--blog-space-stack-xxl` standardise the bespoke gaps used throughout article summaries, media blocks, and footer treatments.
|
||||
- `--blog-avatar-size` and `--blog-avatar-size-compact` size topic avatars responsively.
|
||||
|
||||
Templates should reference these tokens (directly or via Tailwind arbitrary values) instead of hard-coded measurements so the embed stays in sync with future blog refreshes.
|
||||
|
||||
### Previewing themes
|
||||
|
||||
The design-system kitchen sink (`docs/kitchen-sink.html`) exposes a theme switcher that mirrors the production toggle contract. Use the "Theme" select menu in the header to flip between `default`, `light`, and any preview keys (for example, `contrast`). This control updates `document.documentElement.dataset.theme` at runtime, letting you verify hover/focus/disabled states without redeploying. When authoring new palettes, add them to `css/tokens.css`, confirm the kitchen-sink toggle picks them up, and record before/after screenshots for review so the CI snapshots have clear context.
|
||||
|
||||
Reference in new issue
Block a user