forked from github/pelican
fix: headings hierarchy, font sizes, optimize sizes for breakpoints
This commit is contained in:
parent
6c0f3cbd58
commit
49ea09bbbe
9 changed files with 298 additions and 215 deletions
|
|
@ -26,16 +26,16 @@
|
|||
@apply font-headings text-rp-dawn-text dark:text-rp-moon-love;
|
||||
}
|
||||
h1 {
|
||||
@apply text-7xl mb-9;
|
||||
@apply text-5xl md:text-7xl mb-9;
|
||||
}
|
||||
h2 {
|
||||
@apply text-5xl mb-9;
|
||||
@apply text-4xl md:text-5xl mb-9;
|
||||
}
|
||||
h3 {
|
||||
@apply text-4xl;
|
||||
@apply text-3xl md:text-4xl;
|
||||
}
|
||||
h4 {
|
||||
@apply text-3xl;
|
||||
@apply md:text-3xl;
|
||||
}
|
||||
h5 {
|
||||
@apply text-2xl;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
@apply drop-shadow-lg;
|
||||
}
|
||||
dd {
|
||||
@apply ml-24;
|
||||
@apply ml-12 md:ml-24;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
/*
|
||||
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
|
|
@ -550,7 +550,7 @@ video {
|
|||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
|
||||
[hidden] {
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -559,7 +559,7 @@ html {
|
|||
/* text-xl == prose-xl */
|
||||
font-family: Erode, serif;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity));
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -579,19 +579,19 @@ html {
|
|||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(196 167 231 / var(--tw-text-opacity));
|
||||
color: rgb(196 167 231 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity));
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
text {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(196 167 231 / var(--tw-text-opacity));
|
||||
color: rgb(196 167 231 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -629,7 +629,7 @@ h1,
|
|||
h6 {
|
||||
font-family: Fira Sans, sans-serif;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity));
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -640,32 +640,53 @@ h1,
|
|||
h5,
|
||||
h6 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(235 111 146 / var(--tw-text-opacity));
|
||||
color: rgb(235 111 146 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2.25rem;
|
||||
font-size: 4.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 2.25rem;
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@media (min-width: 768px) {
|
||||
h1 {
|
||||
font-size: 4.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 2.25rem;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@media (min-width: 768px) {
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
h3 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -682,14 +703,20 @@ img {
|
|||
}
|
||||
|
||||
dd {
|
||||
margin-left: 6rem;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
dd {
|
||||
margin-left: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Preflight is injected here */
|
||||
|
||||
.prose {
|
||||
color: #575279;
|
||||
max-width: 65ch;
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
|
|
@ -1162,13 +1189,13 @@ dd {
|
|||
|
||||
code {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 237 232 / var(--tw-bg-opacity));
|
||||
background-color: rgb(244 237 232 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
code {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(42 40 62 / var(--tw-bg-opacity));
|
||||
background-color: rgb(42 40 62 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1180,8 +1207,12 @@ code {
|
|||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
.col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
|
|
@ -1192,10 +1223,18 @@ code {
|
|||
margin: 1rem;
|
||||
}
|
||||
|
||||
.-mt-9 {
|
||||
margin-top: -2.25rem;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.ml-14 {
|
||||
margin-left: 3.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1241,8 +1280,8 @@ code {
|
|||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
.grid-cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-\[max-content_max-content_max-content\] {
|
||||
|
|
@ -1274,38 +1313,43 @@ code {
|
|||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.border-b-4 {
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
|
||||
.border-t-2 {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.border-rp-dawn-gold {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(234 157 52 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.border-rp-dawn-overlay {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(242 233 225 / var(--tw-border-opacity));
|
||||
border-color: rgb(242 233 225 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-rp-dawn-base {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 244 237 / var(--tw-bg-opacity));
|
||||
background-color: rgb(250 244 237 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-rp-dawn-overlay {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(242 233 225 / var(--tw-bg-opacity));
|
||||
background-color: rgb(242 233 225 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-rp-dawn-surface {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 250 243 / var(--tw-bg-opacity));
|
||||
background-color: rgb(255 250 243 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -1338,8 +1382,20 @@ code {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.font-tags {
|
||||
font-family: ui-sans-serif, sans-serif;
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.font-subheading {
|
||||
font-family: Stardom, sans-serif;
|
||||
}
|
||||
|
||||
.font-texts {
|
||||
font-family: Erode, serif;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
|
|
@ -1352,52 +1408,55 @@ code {
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.text-rp-dawn-foam {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(86 148 159 / var(--tw-text-opacity));
|
||||
color: rgb(86 148 159 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-rp-dawn-overlay {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(242 233 225 / var(--tw-text-opacity));
|
||||
color: rgb(242 233 225 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-rp-dawn-pine {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(40 105 131 / var(--tw-text-opacity));
|
||||
color: rgb(40 105 131 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-rp-dawn-text {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity));
|
||||
color: rgb(87 82 121 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-rp-dawn-rose {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(215 130 126 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-rp-dawn-love {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(180 99 122 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
|
|
@ -1944,8 +2003,24 @@ code {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
.md\:col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.md\:col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.md\:col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.md\:col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.md\:grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:border-l-4 {
|
||||
|
|
@ -1957,6 +2032,11 @@ code {
|
|||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.md\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.md\:text-7xl {
|
||||
font-size: 4.5rem;
|
||||
line-height: 1;
|
||||
|
|
@ -1988,36 +2068,51 @@ code {
|
|||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:border-rp-moon-overlay {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(57 53 82 / var(--tw-border-opacity));
|
||||
border-color: rgb(57 53 82 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-rp-moon-base {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(35 33 54 / var(--tw-bg-opacity));
|
||||
background-color: rgb(35 33 54 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-rp-moon-overlay {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(57 53 82 / var(--tw-bg-opacity));
|
||||
background-color: rgb(57 53 82 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-rp-moon-surface {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(42 39 63 / var(--tw-bg-opacity));
|
||||
background-color: rgb(42 39 63 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-rp-moon-foam {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 207 216 / var(--tw-text-opacity));
|
||||
color: rgb(156 207 216 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-rp-moon-rose {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(234 154 151 / var(--tw-text-opacity));
|
||||
color: rgb(234 154 151 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-rp-moon-text {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(224 222 244 / var(--tw-text-opacity));
|
||||
color: rgb(224 222 244 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-rp-moon-gold {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(246 193 119 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-rp-moon-base {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(35 33 54 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-rp-moon-iris {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(196 167 231 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue