mirror of
https://github.com/priyanshujain/margin.git
synced 2026-10-02 19:17:03 +00:00
changes
This commit is contained in:
pj committed
1 parent
bd44c0ba7e
commit
706db33792
65 files changed
+6844
-1
No files matched your search
@@ -0,0 +1,288 @@
|
||||
@font-face {
|
||||
font-family: "Literata";
|
||||
src: url("/fonts/Literata-VF.ttf") format("truetype-variations");
|
||||
font-weight: 200 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Literata";
|
||||
src: url("/fonts/Literata-Italic-VF.ttf") format("truetype-variations");
|
||||
font-weight: 200 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Hanken Grotesk";
|
||||
src: url("/fonts/HankenGrotesk-VF.ttf") format("truetype-variations");
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Hanken Grotesk";
|
||||
src: url("/fonts/HankenGrotesk-Italic-VF.ttf") format("truetype-variations");
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
--font-book: "Literata", Georgia, "Times New Roman", serif;
|
||||
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 16px;
|
||||
--r-xl: 24px;
|
||||
|
||||
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
--container: 1120px;
|
||||
}
|
||||
|
||||
:root,
|
||||
:root[data-theme="light"] {
|
||||
--paper: #fcfbf7;
|
||||
--shell: #f1ece2;
|
||||
--sidebar: #ece6da;
|
||||
--raised: #fbfaf6;
|
||||
|
||||
--ink: #23201b;
|
||||
--ink-soft: #6b6458;
|
||||
--ink-faint: #9b9484;
|
||||
|
||||
--line: #e3ddce;
|
||||
--line-strong: #d6cfbd;
|
||||
|
||||
--accent: #2a2622;
|
||||
--accent-ink: #100e0b;
|
||||
--accent-wash: rgba(35, 32, 27, 0.08);
|
||||
--accent-contrast: #faf7f0;
|
||||
--selection: rgba(35, 32, 27, 0.14);
|
||||
--glass: rgba(252, 251, 247, 0.86);
|
||||
|
||||
--good: #4f7a52;
|
||||
--danger: #b4453a;
|
||||
|
||||
--shadow-page: 0 1px 2px rgba(35, 32, 27, 0.06), 0 14px 30px rgba(35, 32, 27, 0.09);
|
||||
--shadow-pop: 0 8px 24px rgba(35, 32, 27, 0.14);
|
||||
--shadow-deep: 0 30px 70px -20px rgba(35, 32, 27, 0.28);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--paper: #1d1a16;
|
||||
--shell: #151310;
|
||||
--sidebar: #1a1713;
|
||||
--raised: #232019;
|
||||
|
||||
--ink: #ece6da;
|
||||
--ink-soft: #a89f8e;
|
||||
--ink-faint: #756d5e;
|
||||
|
||||
--line: #2c2823;
|
||||
--line-strong: #3a352d;
|
||||
|
||||
--accent: #efe9dc;
|
||||
--accent-ink: #ffffff;
|
||||
--accent-wash: rgba(239, 233, 220, 0.12);
|
||||
--accent-contrast: #1a1714;
|
||||
--selection: rgba(239, 233, 220, 0.18);
|
||||
--glass: rgba(33, 30, 25, 0.88);
|
||||
|
||||
--good: #88b08a;
|
||||
--danger: #d97a6f;
|
||||
|
||||
--shadow-page: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.5);
|
||||
--shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
|
||||
--shadow-deep: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--shell);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--selection);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-book);
|
||||
font-weight: 560;
|
||||
letter-spacing: -0.012em;
|
||||
line-height: 1.08;
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: -0.006em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin-inline: auto;
|
||||
padding-inline: 24px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: clamp(64px, 8vw, 120px);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-faint);
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
.lede {
|
||||
font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.6;
|
||||
max-width: 46ch;
|
||||
}
|
||||
|
||||
h2 + .lede,
|
||||
.block-head .lede,
|
||||
.block-head--center .lede {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--bg: var(--accent);
|
||||
--fg: var(--accent-contrast);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.55em;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 0.85em 1.4em;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.18s var(--ease),
|
||||
box-shadow 0.18s var(--ease),
|
||||
background 0.18s var(--ease),
|
||||
border-color 0.18s var(--ease);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-pop);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
--bg: transparent;
|
||||
--fg: var(--ink);
|
||||
border-color: var(--line-strong);
|
||||
}
|
||||
|
||||
.btn--ghost:hover {
|
||||
background: var(--accent-wash);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn--lg {
|
||||
font-size: 1.05rem;
|
||||
padding: 1em 1.7em;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-lg);
|
||||
box-shadow: var(--shadow-page);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.book-accent {
|
||||
font-family: var(--font-book);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.logo-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
}
|
||||
.logo-mark img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.logo-mark .dark {
|
||||
display: none;
|
||||
}
|
||||
:root[data-theme="dark"] .logo-mark .light {
|
||||
display: none;
|
||||
}
|
||||
:root[data-theme="dark"] .logo-mark .dark {
|
||||
display: block;
|
||||
}
|
||||
Reference in new issue
Block a user