fix images and font bold styles

This commit is contained in:
Michal Vanko 2024-09-15 20:38:58 +02:00
parent 73d3219799
commit e8330c10c2
3 changed files with 39 additions and 13 deletions

View File

@ -78,13 +78,16 @@ a {
.article-body {
h1 {
@apply px-4 text-2xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
@apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
}
h2 {
@apply px-4 text-xl text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
@apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
}
p {
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-2xl;
@apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
}
strong {
@apply font-medium;
}
pre {
@apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
@ -93,7 +96,7 @@ a {
@apply p-4;
img {
@apply rounded shadow-md mx-auto max-w-image;
@apply rounded shadow-md mx-auto lg:max-w-image;
}
}
figcaption {

View File

@ -1156,6 +1156,9 @@ a {
font-size: 1.5rem;
line-height: 2rem;
}
h1 {
font-weight: 600;
}
h1 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
@ -1193,6 +1196,9 @@ a {
font-size: 1.25rem;
line-height: 1.75rem;
}
h2 {
font-weight: 600;
}
h2 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
@ -1265,10 +1271,15 @@ a {
}
@media (min-width: 1024px) {
p {
font-size: 1.5rem;
line-height: 2rem;
font-size: 1.75rem;
line-height: 2.25rem;
letter-spacing: -0.015em;
font-weight: 400;
}
}
strong {
font-weight: 500;
}
pre {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
@ -1298,9 +1309,6 @@ a {
margin-left: auto;
margin-right: auto;
}
img {
max-width: 70rem;
}
img {
border-radius: 0.25rem;
}
@ -1309,6 +1317,11 @@ a {
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
img {
max-width: min(70rem, 95vw);
}
}
}
figcaption {
margin-top: 0.5rem;
@ -1348,7 +1361,7 @@ a {
margin-bottom: 1rem;
}
table {
max-width: 70rem;
max-width: min(70rem, 95vw);
}
table {
table-layout: auto;
@ -1562,7 +1575,7 @@ a {
margin-left: auto;
margin-right: auto;
aspect-ratio: 16 / 9;
max-width: 70rem;
max-width: min(70rem, 95vw);
}
.hover\:bg-pink-200:hover {

View File

@ -19,15 +19,25 @@ module.exports = {
spacing: {
note: "60rem",
read: "64rem",
image: "70rem",
image: "min(70rem, 95vw)",
maxindex: "100rem",
},
width: {
note: "60rem",
read: "64rem",
image: "70rem",
image: "min(70rem, 95vw)",
maxindex: "100rem",
},
fontSize: {
readxl: [
"1.75rem",
{
lineHeight: "2.25rem",
letterSpacing: "-0.015em",
fontWeight: "400",
},
],
},
},
},
plugins: [],