maia.crimew.gay/src/css/style.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;
  counter-reset: footnotes;
}

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;

  p {
    display: inline;
    margin-top: 0;
    line-height: 1.4em;
    position: relative;
    font-style: italic;
  }

  span{
    display:block;
    font-style: normal;
    font-weight: bold;
    margin-top: .2em;
  }
}

blockquote:before {
  color: $accent;
  content: "\201C";
  font-size: 4em;
  line-height: 0;
  margin-right: 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;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
a[aria-describedby="footnotes-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
a[aria-describedby="footnotes-label"]::after {
  content: '[' counter(footnotes) ']'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.6em; /* 3 */
  margin-left: 2px; /* 4 */
  color: $accent; /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
}

/**
 * Resetting the default focused styles on the number
 */
a[aria-describedby="footnotes-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

.footnotes {
  text-align: unset;
  padding-top: initial;
}