maia.crimew.gay/src/css/style.scss

296 lines
4.1 KiB
SCSS

@import "../_includes/scss/colors.scss";
html {
background-color: $bg;
color: $text;
}
a {
color: $accent;
}
::selection {
background-color: rgba($accent, 0.7);
color: #ffb8e8;
}
.like-a {
color: $accent;
text-decoration: underline;
}
a.active,
li.lavender-webring-curr-site>a {
color: $active-links;
}
#site_header {
padding-bottom: 5px;
border-bottom: 1px solid $accent;
}
footer {
padding-top: 5px;
}
.footer-kitten {
height: 88px;
border-bottom: 1px solid $accent;
margin-bottom: 5px;
>img {
height: 88px;
}
}
.pagination {
display: flex;
justify-content: space-between;
a {
font-weight: bolder;
font-size: large;
}
}
footer,
#site_header,
.lavender-webring-container {
text-align: center;
}
.list-entry {
list-style-type: none;
h2, h3 {
margin-bottom: 0;
}
}
#content {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
padding-bottom: 2em;
}
table {
display: block;
overflow-x: auto;
border-collapse: collapse;
white-space: nowrap;
border: none;
th, td {
border: 1px solid;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
text-align: center;
}
th, tr td:first-child {
border: 1.5px solid;
background-color: $semi-bg;
font-weight: bold;
}
th {
border-top: none;
}
tr {
th, td:first-child {
border-left: none;
}
td, th:last-child {
border-right: none;
}
}
tr:last-child td {
border-bottom: none;
}
}
.byline {
font-size: 0.75rem;
}
.middot::after {
content: '\00B7';
display: inline-block;
}
time,
.author,
.updated,
.year {
font-weight: bold;
}
.article_header,
.page_header {
padding-bottom: 4px;
border-bottom: 1px dotted $divider;
}
.article_header {
img {
width: 100%;
}
}
.related {
margin-top: 18px;
border-top: 1px dotted $divider;
h3 {
margin-top: 4px;
margin-bottom: 0;
}
ul {
margin-top: 4px;
padding-left: 0;
h4 {
margin-top: 4px;
margin-bottom: 0;
}
}
}
.article_header>h1,
.page_header>h1 {
margin: 0.1rem;
}
img,
video {
max-width: 100%;
}
figure {
margin-left: 0;
margin-right: 0;
width: fit-content;
}
figcaption {
text-align: center;
font-style: italic;
}
blockquote {
background-color: $semi-bg;
border-left: 3px solid $accent;
padding: .5em .5em;
quotes: "\201C""\201D""\2018""\2019";
p {
display: inline;
margin-top: 0;
line-height: 1.4em;
}
}
blockquote:before {
color: $accent;
content: open-quote;
font-size: 4em;
line-height: 0;
margin-right: 1px;
vertical-align: -0.4em;
}
blockquote:after {
color: $accent;
content: close-quote;
font-size: 4em;
line-height: 0;
margin-left: 1px;
vertical-align: -0.4em;
}
span.greentext {
color: #789922;
}
blockquote.greentext::before {
content: none;
display: none;
}
blockquote.greentext::after {
content: none;
display: none;
}
.tag {
font-weight: bold;
}
.banner-link {
color: inherit;
text-decoration: inherit;
}
.kofi-banner {
border-radius: 8px;
padding: 4px;
border: 2px solid $accent;
background-color: $semi-bg;
font-size: 1.1rem;
}
.content-warnings {
border-radius: 8px;
padding: 4px;
border: 2px solid $accent;
background-color: $semi-bg;
font-size: 1.1rem;
margin-top: 16px;
margin-bottom: 16px;
width: fit-content;
>p {
margin: 0;
}
}
.lavender-webring-container,
.sleepy-zone-webring-container {
all: unset;
display: flex;
flex-direction: column;
padding: 1em;
font-size: 1.125rem;
}
.lavender-webring-description,
.sleepy-zone-webring-description {
margin-block-end: 0.5em;
}
.lavender-webring-site-links,
.sleepy-zone-webring-site-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
.lavender-webring-prev-site a::before,
.sleepy-zone-webring-prev-site a::before {
content: "";
margin-inline-end: 1ch;
}
.lavender-webring-next-site a::after,
.sleepy-zone-webring-next-site a::after {
content: "";
margin-inline-start: 1ch;
}