91 lines
1.7 KiB
CSS
91 lines
1.7 KiB
CSS
.heading {
|
|
@apply leading-tight font-medium;
|
|
font-family: serif;
|
|
color: theme('colors.eucalyptus.700');
|
|
}
|
|
h1 {
|
|
@apply heading text-5xl;
|
|
@apply lg:text-4xl;
|
|
}
|
|
h2 {
|
|
@apply heading text-2xl;
|
|
@apply lg:text-3xl;
|
|
}
|
|
h3 {
|
|
@apply heading text-xl;
|
|
@apply lg:text-2xl;
|
|
}
|
|
h4 {
|
|
@apply heading text-lg;
|
|
@apply lg:text-xl;
|
|
}
|
|
h5 {
|
|
@apply heading text-lg;
|
|
}
|
|
h6 {
|
|
@apply heading text-lg;
|
|
}
|
|
p {
|
|
font-family: serif;
|
|
}
|
|
|
|
/* block quotes */
|
|
.note-blockquote {
|
|
border-left: 4px solid #0078d4; /* Blue left border */
|
|
padding: 1em;
|
|
position: relative;
|
|
}
|
|
|
|
.tip-blockquote {
|
|
border-left: 4px solid #107c10; /* Green left border */
|
|
padding: 1em;
|
|
position: relative;
|
|
}
|
|
|
|
.important-blockquote {
|
|
border-left: 4px solid #8250df; /* Red left border */
|
|
padding: 1em;
|
|
position: relative;
|
|
}
|
|
|
|
.warning-blockquote {
|
|
border-left: 4px solid #ffc83d; /* Yellow left border */
|
|
padding: 1em;
|
|
position: relative;
|
|
border-radius: 0px 12px 12px 0px;
|
|
}
|
|
|
|
.caution-blockquote {
|
|
border-left: 4px solid #d13438; /* Dark red left border */
|
|
padding: 1em;
|
|
position: relative;
|
|
border-radius: 0px 12px 12px 0px;
|
|
}
|
|
|
|
/* Common styles for icons */
|
|
|
|
.note-blockquote::before {
|
|
content: '\24D8 \0020 \0020 \0020 Note';
|
|
color: #0078d4; /* Blue icon */
|
|
}
|
|
|
|
.tip-blockquote::before {
|
|
content: '\1F4A1 \0020 \0020 \0020 Tip';
|
|
color: #107c10; /* Green icon */
|
|
}
|
|
|
|
.important-blockquote::before {
|
|
content: '\272E \0020 \0020 \0020 Important';
|
|
color: #8250df; /* Red icon */
|
|
}
|
|
|
|
.warning-blockquote::before {
|
|
content: '\26A0 \0020 \0020 \0020 Warning';
|
|
color: #ffc83d; /* Yellow icon */
|
|
}
|
|
|
|
.caution-blockquote::before {
|
|
content: '\1F6D1 \0020 \0020 \0020 Caution';
|
|
color: #d13438; /* Dark red icon */
|
|
}
|