Sometimes it’s nice to give a visual little call out in the middle of some block of text. Perhaps it’s a notification or you really just want to make a small section of stuff semantically stay together.
Here’s how I use mostly built-in css classes in the madrone theme (and a couple of custom classes using the css-injector) to make some “cards” and/or call outs in a fairly fast way.
Custom classes
The custom classes to add to the css injector are:
.shadow-cphhs-01 {
box-shadow: 0 3px 8px rgb(228, 229, 234), 0 0 2px rgba(28, 16, 49, 0.12);
}
.brp5rem {
border-radius: 0.5rem !important;
}
.brp5rem-img img {
border-radius: 0.5rem !important;
}
.brp5em {
border-radius: 0.5em !important;
}
.brp5em-img img {
border-radius: 0.5em !important;
}
.margin-inline-auto {
margin-inline: auto !important;
}
.mw5ch {
max-width: 5ch;
}
.mw10ch {
max-width: 10ch;
}
.mw15ch {
max-width: 15ch;
}
.mw20ch {
max-width: 20ch;
}
.mw25ch {
max-width: 25ch;
}
.mw30ch {
max-width: 30ch;
}
.mw35ch {
max-width: 35ch;
}
.mw40ch {
max-width: 40ch;
}
.mw45ch {
max-width: 45ch;
}
.mw50ch {
max-width: 50ch;
}
.mw55ch {
max-width: 55ch;
}
.mw60ch {
max-width: 60ch;
}
.mw65ch {
max-width: 65ch;
}
.mw70ch {
max-width: 70ch;
}
.mw75ch {
max-width: 75ch;
}
.mw80ch {
max-width: 80ch;
}
.mw85ch {
max-width: 85ch;
}
.mw90ch {
max-width: 90ch;
}
.mw95ch {
max-width: 95ch;
}
.mw100ch {
max-width: 100ch;
}
.mw105ch {
max-width: 105ch;
}
.mw110ch {
max-width: 110ch;
}
.mw115ch {
max-width: 115ch;
}
.mw120ch {
max-width: 120ch;
}
.mw125ch {
max-width: 125ch;
}