152 lines
2.5 KiB
CSS
152 lines
2.5 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@source inline("bg-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,{100..900..100},950}");
|
|
|
|
/* icon */
|
|
icon,
|
|
pull,
|
|
pull-2 {
|
|
@apply inline-block;
|
|
width: 1.5em;
|
|
height: 1.28em;
|
|
vertical-align: text-bottom;
|
|
--icon-src: "";
|
|
background-image: var(--icon-src);
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
}
|
|
icon.masked {
|
|
mask-image: var(--icon-src);
|
|
mask-size: contain;
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
background-image: unset;
|
|
}
|
|
icon.big {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
pull {
|
|
margin-right: -0.5em;
|
|
width: 0;
|
|
}
|
|
pull-2 {
|
|
margin-right: -1em;
|
|
width: 0;
|
|
}
|
|
icon.big .icon-label,
|
|
icon.big .icon-label-stroke {
|
|
line-height: 2;
|
|
}
|
|
.icon-label,
|
|
.icon-label-stroke {
|
|
position: absolute;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 1.28;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
.icon-label {
|
|
color: white;
|
|
}
|
|
.icon-label-stroke {
|
|
color: black;
|
|
-webkit-text-stroke: 0.14em black;
|
|
}
|
|
|
|
/* prose */
|
|
|
|
@utility prose {
|
|
@apply prose-h2:first:mt-0 prose-h3:first:mt-0 prose-h4:first:mt-0 prose-h5:first:mt-0;
|
|
code {
|
|
background: #0001;
|
|
@apply rounded;
|
|
padding: 0.2em 0.4em;
|
|
margin: 0 0.2em;
|
|
&::before,
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
blockquote {
|
|
p {
|
|
&:first-of-type::before,
|
|
&:last-of-type::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*alert*/
|
|
|
|
.markdown-alert-title {
|
|
@apply hidden;
|
|
}
|
|
|
|
.markdown-alert-title + * {
|
|
@apply mt-0;
|
|
}
|
|
|
|
.markdown-alert {
|
|
@apply px-4 pt-4 rounded mb-4 border;
|
|
}
|
|
|
|
.markdown-alert-note {
|
|
@apply bg-blue-50 border-blue-500;
|
|
}
|
|
|
|
.markdown-alert-tip {
|
|
@apply bg-green-50 border-green-500;
|
|
}
|
|
|
|
.markdown-alert-important {
|
|
@apply bg-red-50 border-red-500;
|
|
}
|
|
|
|
.markdown-alert-warning {
|
|
@apply bg-yellow-50 border-yellow-500;
|
|
}
|
|
|
|
.markdown-alert-caution {
|
|
@apply bg-orange-50 border-orange-500;
|
|
}
|
|
|
|
/* cols */
|
|
|
|
.cols {
|
|
@apply lg:flex lg:gap-4;
|
|
}
|
|
.col {
|
|
@apply lg:flex-1;
|
|
}
|
|
.col-2 {
|
|
@apply lg:flex-2;
|
|
}
|
|
.col-3 {
|
|
@apply lg:flex-3;
|
|
}
|
|
.col-4 {
|
|
@apply lg:flex-4;
|
|
}
|
|
.col-5 {
|
|
@apply lg:flex-5;
|
|
}
|
|
|
|
/* concealed / revealed */
|
|
|
|
.concealed {
|
|
opacity: 0;
|
|
}
|
|
|
|
.revealed,
|
|
.concealed .revealed {
|
|
opacity: unset;
|
|
}
|