new-ryuslash.org/src/less/include/components.less
Tom Willemse de402ded78 Add a note component
This highlights a specific piece of text.
2022-03-20 21:25:26 -07:00

81 lines
1.4 KiB
Text

@import "colors";
.content-wrapper {
max-width: 60rem;
margin: 0 auto;
}
.footer {
font-size: 0.8rem;
padding: 10px 0;
text-align: center;
@media (prefers-color-scheme: dark) {
border-top: 3px @dark-foreground dotted;
}
@media (prefers-color-scheme: light) {
border-top: 3px @light-foreground dotted;
}
}
.footer-text {
line-height: normal;
margin: 0;
}
.listless-list {
list-style-type: none;
li {
display: inline;
}
}
.note {
margin-left: 3rem;
border-width: 1px;
border-style: solid;
padding: 0 1rem;
@media (prefers-color-scheme: dark) {
background-color: #1f2c3f;
border-color: #547ea8;
}
@media (prefers-color-scheme: light) {
background-color: #547ea8;
border-color: #1f2c3f;
}
}
.subtitle {
font-size: 0.9rem;
margin: 0;
text-align: center;
padding: 10px;
@media (prefers-color-scheme: dark) {
background-color: @dark-background-highlight;
}
@media (prefers-color-scheme: light) {
background-color: @light-background-highlight;
}
}
.title-header {
text-align: center;
padding: 20px;
margin: 0;
font-size: 2.5rem;
@media (prefers-color-scheme: dark) {
color: @dark-primary;
background-color: @dark-background-highlight;
}
@media (prefers-color-scheme: light) {
color: @light-primary;
background-color: @light-background-highlight;
}
}