155 lines
3.3 KiB
CSS
155 lines
3.3 KiB
CSS
/* Basic typographical styles */
|
|
|
|
/**
|
|
* All font sizes are based on 16px base font size and 1920px wide screen
|
|
* Default size is expressed as percentage of screen width.
|
|
* text-14px: 12px-27px, default: 14px
|
|
* text-16px: 14px-28px, default: 16px
|
|
* text-18px: 14px-30px, default: 18px
|
|
* text-20px: 16px-32px, default: 20px
|
|
* text-22px: 17px-33px, default: 22px
|
|
* text-25px: 18px-35px, default: 25px
|
|
* text-30px: 19px-37px, default: 30px
|
|
* text-35px: 20px-40px, default: 35px
|
|
* text-38px: 22px-48px, default: 38px
|
|
* text-40px: 24px-56px, default: 40px
|
|
* text-45px: 25px-64px, default: 45px
|
|
* text-50px: 27px-72px, default: 50px
|
|
* text-55px: 28px-76px, default: 55px
|
|
* text-60px: 30px-80px, default: 60px
|
|
* text-70px: 30px-76px, default: 70px
|
|
* text-75px: 32px-80px, default: 75px
|
|
*/
|
|
|
|
@theme {
|
|
--font-sans: "Raleway", sans-serif;
|
|
--line-height: 1.6;
|
|
|
|
--text-base: 1rem;
|
|
--text-14px: clamp(0.75rem, 0.7292vw, 1.7rem);
|
|
--text-16px: clamp(0.875rem, 0.8333vw, 1.8rem);
|
|
--text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
|
|
--text-20px: clamp(1rem, 1.0417vw, 2rem);
|
|
--text-22px: clamp(1.1rem, 1.15vw, 2.1rem);
|
|
--text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
|
|
--text-30px: clamp(1.185rem, 1.5625vw, 2.35rem);
|
|
--text-35px: clamp(1.25rem, 1.8229vw, 2.5rem);
|
|
--text-38px: clamp(1.4rem, 1.9791vw, 3rem);
|
|
--text-40px: clamp(1.5rem, 2.0834vw, 3.5rem);
|
|
--text-45px: clamp(1.6rem, 2.3438vw, 4rem);
|
|
--text-50px: clamp(1.7rem, 2.6042vw, 4.5rem);
|
|
--text-70px: clamp(1.9rem, 3.6458vw, 4.8rem);
|
|
--text-75px: clamp(2rem, 3.9063vw, 5rem);
|
|
|
|
--h1: calc(var(--text-base) * 2.25);
|
|
--h2: calc(var(--text-base) * 1.75);
|
|
--h3: calc(var(--text-base) * 1.5);
|
|
--h4: calc(var(--text-base) * 1.25);
|
|
--h5: calc(var(--text-base) * 1.125);
|
|
--h6: calc(var(--text-base) * 1.05);
|
|
}
|
|
|
|
body {
|
|
background-color: white;
|
|
color: black;
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-base);
|
|
line-height: var(--line-height);
|
|
}
|
|
|
|
::selection { background: var(--color-warning); }
|
|
|
|
@layer components {
|
|
h1, h2, h3,
|
|
h4, h5, h6 {
|
|
font-weight: 700;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
h1, .h1 {
|
|
font-size: var(--h1);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: var(--h2);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-size: var(--h3);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
h4, .h4 {
|
|
font-size: var(--h4);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h5, .h5 { font-size: var(--h5); }
|
|
|
|
h6, .h6 { font-size: var(--h6); }
|
|
}
|
|
|
|
a, .link {
|
|
color: var(--color-info);
|
|
text-decoration: none;
|
|
transition: color 200ms;
|
|
cursor: pointer;
|
|
|
|
&:hover { color: var(--color-primary); }
|
|
}
|
|
|
|
h1 a, .h1 a,
|
|
h2 a, .h2 a,
|
|
h3 a, .h3 a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
li ul, li ol { margin: 0 1rem; }
|
|
|
|
ul { list-style-type: disc; }
|
|
|
|
ol { list-style-type: decimal; }
|
|
|
|
ol ol { list-style: lower-alpha; }
|
|
|
|
ol ol ol { list-style: lower-roman; }
|
|
|
|
ol ol ol ol { list-style: lower-alpha; }
|
|
|
|
pre, code,
|
|
samp, style { font-family: monospace; }
|
|
|
|
pre {
|
|
font-size: 0.875rem;
|
|
overflow: auto;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
pre code {
|
|
background-color: inherit;
|
|
border-radius: 0;
|
|
color: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
code {
|
|
@apply bg-black/40 px-[3px] py-[2px] font-mono text-light text-xs rounded-sm;
|
|
}
|
|
|
|
hr {
|
|
background-color: black;
|
|
border: none;
|
|
display: block;
|
|
height: 1px;
|
|
margin: 1rem 0;
|
|
width: 100%;
|
|
}
|