Migrate from Bazel
This commit is contained in:
Marc Plano-Lesay
commit
016dbd0814
GPG key ID:
66A41B08CC62A6CF
59 changed files with 7044 additions and 0 deletions
981
themes/retro-future/sass/style.scss
Normal file
981
themes/retro-future/sass/style.scss
Normal file
|
|
@ -0,0 +1,981 @@
|
|||
// ============================================================================
|
||||
// Retro-Future Theme
|
||||
// A modern, accessible theme with clean typography and thoughtful colors
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Custom Properties (CSS Variables)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
:root {
|
||||
// Color Palette - Light Mode
|
||||
--color-background: oklch(98.2% 0.014 85);
|
||||
--color-text: oklch(31.55% 0.009 17.62);
|
||||
--color-text-muted: oklch(50% 0.009 17.62);
|
||||
--color-primary: oklch(62.78% 0.12 226); // Blue
|
||||
--color-secondary: oklch(70.27% 0.192 13.7); // Orange
|
||||
--color-accent: oklch(86.59% 0.088 168.12); // Teal
|
||||
--color-highlight: rgb(210, 55, 81); // Red
|
||||
--color-border: oklch(85% 0.014 85);
|
||||
|
||||
// Code blocks
|
||||
--color-code-bg: #ffffff;
|
||||
--color-code-border: var(--color-primary);
|
||||
|
||||
// Syntax highlighting
|
||||
--color-syntax-string: oklch(50% 0.15 155);
|
||||
--color-syntax-number: oklch(55% 0.18 50);
|
||||
--color-syntax-function: oklch(48% 0.14 240);
|
||||
--color-syntax-keyword: oklch(52% 0.16 300);
|
||||
--color-syntax-comment: oklch(60% 0.02 85);
|
||||
|
||||
// Spacing Scale
|
||||
--space-xs: 0.25rem; // 4px
|
||||
--space-sm: 0.5rem; // 8px
|
||||
--space-md: 1rem; // 16px
|
||||
--space-lg: 1.5rem; // 24px
|
||||
--space-xl: 2rem; // 32px
|
||||
--space-2xl: 3rem; // 48px
|
||||
--space-3xl: 4rem; // 64px
|
||||
|
||||
// Typography Scale
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1.25rem;
|
||||
--font-size-lg: 1.375rem;
|
||||
--font-size-xl: 1.5rem;
|
||||
--font-size-2xl: 1.75rem;
|
||||
--font-size-2-5xl: 1.875rem;
|
||||
--font-size-3xl: 2.25rem;
|
||||
--font-size-4xl: 3rem;
|
||||
--font-size-5xl: 4rem;
|
||||
|
||||
// Font Families
|
||||
--font-body: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-display: "Bangers", "Comic Sans MS", cursive;
|
||||
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
||||
|
||||
// Line Heights
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-base: 1.6;
|
||||
|
||||
// Layout
|
||||
--layout-content-width: 52rem;
|
||||
--layout-padding: var(--space-md);
|
||||
|
||||
// Border Radius
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
|
||||
// Borders
|
||||
--border-accent-width: 4px;
|
||||
|
||||
// Transitions
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 250ms ease;
|
||||
|
||||
// Icons
|
||||
--icon-size: 18px;
|
||||
|
||||
// Header bio
|
||||
--bio-photo-size: 60px;
|
||||
--bio-photo-border: 3px;
|
||||
--bio-text-max-width: 300px;
|
||||
|
||||
// Scrollbar
|
||||
--scrollbar-size: 12px;
|
||||
--scrollbar-border: 2px;
|
||||
}
|
||||
|
||||
// Dark Mode
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: oklch(31.55% 0.009 17.62);
|
||||
--color-text: oklch(98.2% 0.014 85);
|
||||
--color-text-muted: oklch(70% 0.014 85);
|
||||
--color-primary: oklch(86.59% 0.088 168.12);
|
||||
--color-secondary: oklch(80.27% 0.192 13.7);
|
||||
--color-accent: oklch(62.78% 0.12 226);
|
||||
--color-highlight: rgb(240, 85, 111);
|
||||
--color-border: oklch(45% 0.009 17.62);
|
||||
--color-code-bg: #1a1a1a;
|
||||
--color-syntax-string: oklch(72% 0.15 155);
|
||||
--color-syntax-number: oklch(75% 0.14 50);
|
||||
--color-syntax-function: oklch(75% 0.12 240);
|
||||
--color-syntax-keyword: oklch(78% 0.12 300);
|
||||
--color-syntax-comment: oklch(55% 0.02 85);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Web Fonts
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Bangers&display=swap');
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Reset & Base Styles
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scrollbar-color: var(--color-primary) var(--color-background);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Text selection
|
||||
::selection {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
// Scrollbar styling
|
||||
::-webkit-scrollbar {
|
||||
width: var(--scrollbar-size);
|
||||
height: var(--scrollbar-size);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-primary);
|
||||
border-radius: calc(var(--scrollbar-size) / 2);
|
||||
border: var(--scrollbar-border) solid var(--color-background);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Typography
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 700;
|
||||
line-height: var(--line-height-tight);
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--color-text);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl));
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-2xl));
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
h5, h6 {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--space-md);
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
transition: color var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px dashed var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Code Blocks
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-highlight);
|
||||
padding: 0.125em 0.375em;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-code-border);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-base);
|
||||
background-color: var(--color-code-bg);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-code-border);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--color-text);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
padding: 0 0 0 1em;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
grid-column: 2;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
grid-column: 1;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
border-right: 1px solid var(--color-code-border);
|
||||
color: var(--color-text-muted);
|
||||
user-select: none;
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.code-block {
|
||||
margin-bottom: var(--space-md);
|
||||
|
||||
&__filename {
|
||||
background-color: var(--color-code-border);
|
||||
color: var(--color-code-bg);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
border: 1px solid var(--color-code-border);
|
||||
border-bottom: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||||
}
|
||||
|
||||
&__filename + pre {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Blockquotes & Asides
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
blockquote {
|
||||
border-left: var(--border-accent-width) solid var(--color-primary);
|
||||
padding-left: var(--space-md);
|
||||
margin: var(--space-lg) 0;
|
||||
font-style: italic;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.note {
|
||||
background-color: var(--color-code-bg);
|
||||
border-left: var(--border-accent-width) solid var(--color-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-lg);
|
||||
margin: var(--space-xl) 0;
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-secondary);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: var(--color-text);
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--note {
|
||||
border-left-color: var(--color-primary);
|
||||
.note__title { color: var(--color-primary); }
|
||||
}
|
||||
|
||||
&--info {
|
||||
border-left-color: var(--color-accent);
|
||||
.note__title { color: var(--color-accent); }
|
||||
}
|
||||
|
||||
&--warning {
|
||||
border-left-color: var(--color-highlight);
|
||||
.note__title { color: var(--color-highlight); }
|
||||
}
|
||||
|
||||
&--tip {
|
||||
border-left-color: var(--color-secondary);
|
||||
.note__title { color: var(--color-secondary); }
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Lists
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: var(--space-md);
|
||||
padding-left: var(--space-xl);
|
||||
list-style-position: outside;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
article .post-content,
|
||||
.page-content,
|
||||
.section-content {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "✦";
|
||||
color: var(--color-secondary);
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: -1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: outside;
|
||||
padding-left: 0;
|
||||
margin-left: 1.5em;
|
||||
|
||||
li::marker {
|
||||
color: var(--color-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Layout
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.container {
|
||||
max-width: var(--layout-content-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: var(--layout-padding);
|
||||
padding-right: var(--layout-padding);
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 60vh;
|
||||
padding-bottom: var(--space-3xl);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Header
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.site-header {
|
||||
padding: var(--space-xl) 0;
|
||||
margin-bottom: var(--space-2xl);
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: var(--space-md);
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
transition: color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[aria-current="page"] {
|
||||
color: var(--color-highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
|
||||
&__photo img {
|
||||
width: var(--bio-photo-size);
|
||||
height: var(--bio-photo-size);
|
||||
border-radius: 50%;
|
||||
border: var(--bio-photo-border) solid var(--color-accent);
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
line-height: var(--line-height-base);
|
||||
max-width: var(--bio-text-max-width);
|
||||
}
|
||||
|
||||
&__socials {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-sm);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
color: var(--color-background);
|
||||
background-color: var(--color-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-xs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: rotateY(5deg) rotateX(10deg) rotateZ(5deg);
|
||||
box-shadow: 2px 4px 0px color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-highlight);
|
||||
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.1);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Page Title
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.page-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(var(--font-size-4xl), 8vw, var(--font-size-5xl));
|
||||
font-weight: 400;
|
||||
color: var(--color-primary);
|
||||
margin: 0 0 var(--space-2xl) 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Articles
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
article header {
|
||||
margin-bottom: var(--space-2xl);
|
||||
|
||||
.post-title {
|
||||
margin-bottom: var(--space-sm);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-meta,
|
||||
.post-meta__tags {
|
||||
color: var(--color-highlight);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-meta__tags {
|
||||
@extend %tag-list;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--space-md);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.series-info {
|
||||
background-color: var(--color-code-bg);
|
||||
border-left: var(--border-accent-width) solid var(--color-accent);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-lg);
|
||||
margin-bottom: var(--space-2xl);
|
||||
|
||||
&__header {
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
strong {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav ol {
|
||||
list-style-position: inside;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: var(--space-xs);
|
||||
|
||||
&.current {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Post List
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Shared bullet styling
|
||||
%bullet-point {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "✦";
|
||||
color: var(--color-secondary);
|
||||
position: absolute;
|
||||
left: -1.5em;
|
||||
font-size: 0.7em;
|
||||
top: 0.35em;
|
||||
}
|
||||
}
|
||||
|
||||
// Shared list link styling
|
||||
%list-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Shared tag list styling
|
||||
%tag-list {
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: ",\00a0";
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&__item {
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
&__title {
|
||||
@extend %bullet-point;
|
||||
margin: 0 0 var(--space-sm) 0;
|
||||
font-size: var(--font-size-2-5xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: 600;
|
||||
|
||||
a {
|
||||
@extend %list-link;
|
||||
}
|
||||
}
|
||||
|
||||
&__series {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
margin: var(--space-xs) 0 var(--space-sm) 0;
|
||||
font-style: italic;
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
color: var(--color-highlight);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
margin-bottom: var(--space-sm);
|
||||
letter-spacing: -0.02em;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
&__tags {
|
||||
@extend %tag-list;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Taxonomy List
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.taxonomy-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&__item {
|
||||
@extend %bullet-point;
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-tight);
|
||||
font-weight: 600;
|
||||
|
||||
a {
|
||||
@extend %list-link;
|
||||
}
|
||||
}
|
||||
|
||||
&__count {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 400;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Images
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: var(--space-xl) auto;
|
||||
text-align: center;
|
||||
|
||||
img, video {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-top: var(--space-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Mermaid Diagrams
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.mermaid {
|
||||
margin: var(--space-xl) 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Syntax Highlighting
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
pre code {
|
||||
.z-comment { color: var(--color-syntax-comment); font-style: italic; }
|
||||
.z-keyword,
|
||||
.z-keyword-constant,
|
||||
.z-keyword-declaration,
|
||||
.z-keyword-namespace,
|
||||
.z-keyword-pseudo,
|
||||
.z-keyword-reserved,
|
||||
.z-storage { color: var(--color-syntax-keyword); font-weight: 600; }
|
||||
.z-keyword-type,
|
||||
.z-storage-type { color: var(--color-syntax-function); font-weight: 600; }
|
||||
.z-constant,
|
||||
.z-constant-builtin,
|
||||
.z-constant-language,
|
||||
.z-constant-numeric,
|
||||
.z-constant-other { color: var(--color-syntax-number); }
|
||||
.z-constant-language { font-weight: 600; }
|
||||
.z-constant-character { color: var(--color-syntax-string); }
|
||||
.z-constant-regexp,
|
||||
.z-string-regexp { color: var(--color-highlight); }
|
||||
.z-entity,
|
||||
.z-entity-name,
|
||||
.z-entity-name-function,
|
||||
.z-entity-other,
|
||||
.z-entity-other-inherited-class,
|
||||
.z-support,
|
||||
.z-support-function,
|
||||
.z-support-type { color: var(--color-syntax-function); }
|
||||
.z-entity-name,
|
||||
.z-variable-language { font-weight: 600; }
|
||||
.z-entity-name-class,
|
||||
.z-entity-name-type,
|
||||
.z-entity-other-attribute-name,
|
||||
.z-support-class { color: var(--color-secondary); }
|
||||
.z-entity-name-tag { color: var(--color-syntax-keyword); }
|
||||
.z-invalid { color: var(--color-background); background-color: var(--color-highlight); }
|
||||
.z-invalid-deprecated { color: var(--color-background); background-color: var(--color-text-muted); }
|
||||
.z-markup { color: var(--color-text); }
|
||||
.z-markup-bold { color: var(--color-syntax-number); font-weight: 700; }
|
||||
.z-markup-deleted { color: var(--color-highlight); }
|
||||
.z-markup-heading { color: var(--color-highlight); font-weight: 600; }
|
||||
.z-markup-inserted { color: var(--color-syntax-string); }
|
||||
.z-markup-italic { color: var(--color-syntax-keyword); font-style: italic; }
|
||||
.z-markup-list { color: var(--color-highlight); }
|
||||
.z-markup-quote { color: var(--color-syntax-number); }
|
||||
.z-markup-raw { color: var(--color-syntax-string); }
|
||||
.z-meta { color: var(--color-text); }
|
||||
.z-string { color: var(--color-syntax-string); }
|
||||
.z-string-escape { color: var(--color-syntax-keyword); }
|
||||
.z-support-constant { color: var(--color-syntax-number); }
|
||||
.z-variable,
|
||||
.z-variable-parameter { color: var(--color-text); }
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Utilities
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Pagination
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
margin-top: var(--space-xl);
|
||||
|
||||
&__button {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-background);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
transition: background-color var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Responsive Design
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
:root {
|
||||
--layout-padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.site-header nav ul {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
article .post-content {
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 1.5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue