src/app.scss
html {
  font-size: 20px;

  @media only screen and (max-width: 768px) {
    font-size: 18px;
  }
}

body {
  margin: 0;
  padding: 0;
}

html.dark body {
  background-color: #242424;
  color: #cbcbcb;
}

#app {
  box-sizing: border-box;
  width: 80%;
  max-width: 900px;
  margin: 2rem auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #242424;

  @media only screen and (max-width: 768px) {
    width: 100%;
    padding: 0 1rem;
    max-width: unset;
  }
}

html.dark #app {
  background-color: #242424;
  color: #ebebeb;
}

a {
  color: #242424;
  &:visited {
    color: #242424;
  }
}

html.dark a {
  color: #f5f5f5;
  &:visited {
    color: #f5f5f5;
  }
}

h1 {
  font-size: 2rem;
  line-height: 0.9;
  margin-top: 0;

  @media only screen and (max-width: 768px) {
    font-size: 1.6rem;
  }
}

ol,
ul {
  padding-left: 1rem;
  margin: 0;

  li {
    margin-bottom: 1rem;
  }
}

blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 8px solid #ebebeb;
}

code {
  font-size: 0.9rem;
  padding: 0 0.4rem;
  border-radius: 0.2rem;
  background-color: #f6f6f6;
}

html.dark code {
  background-color: #3e3e3e;
}

pre {
  code {
    overflow: scroll;
    display: block;
    padding: 1rem 0.5rem;
    border-radius: 0.2rem;
  }
}

.unfinished-setup {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.header {
  &.home h1 {
    font-size: 3rem;
  }

  .external-link {
    text-align: right;
    margin-top: -1rem;
    font-size: 0.8em;
    color: #cbcbcb;

    @media only screen and (max-width: 768px) {
      margin-bottom: 1rem;
      margin-right: 2.5rem;
    }

    a {
      text-decoration: underline;
      color: #cbcbcb;
    }
  }

  .picture-container {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: -0.25rem;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      clip-path: circle(50%);
    }
  }

  &.note {
    margin-bottom: 2rem;
    .picture-container {
      width: 1.5rem;
      height: 1.5rem;
      margin-bottom: -0.4rem;
    }
  }

  a {
    text-decoration: none;
    span {
      text-decoration: underline;
    }
  }
}

html.dark .header {
  a {
    &:visited {
      color: #cbcbcb;
    }
  }

  .external-link {
    color: #747474;
    a {
      color: #747474;
    }
  }
}

.topic-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 1rem;

  div {
    display: inline-grid;
    margin-right: 1rem;

    a {
      padding: 0.4rem 1rem;
      background-color: #e0e0e0;
      text-decoration: none;
      border-radius: 4px;

      &:hover {
        background-color: #ebebeb;
      }

      &.selected {
        background-color: #242424;
        color: #f5f5f5;
      }
    }
  }
}

html.dark .topic-wrapper {
  div {
    a {
      background-color: #747474;
      color: #242424;

      &:hover {
        background-color: #f5f5f5;
      }

      &.selected {
        background-color: #cbcbcb;
      }
    }
  }
}

.externalLink {
  display: block;
  text-align: right;
  margin-top: -1rem;
  font-size: 0.8em;
  color: #cbcbcb;

  a {
    color: #cbcbcb;
  }
}

.link-button {
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: none;
  }
}

.about {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 8px solid #ebebeb;
}

html.dark .about {
  border-bottom: 8px solid #373737;
}

.separator {
  margin-bottom: 2rem;
  border-bottom: 8px solid #ebebeb;
}

html.dark .separator {
  border-bottom: 8px solid #373737;
}

.block {
  border-bottom: 8px solid #f5f5f5;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  color: #747474;

  .summary {
    white-space: pre-wrap;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;

    @media only screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    h2 {
      font-size: 1.1rem;
      border-bottom: 4px solid #dadada;
      padding-bottom: 8px;
    }

    &.full-notes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;

      .item {
        margin-bottom: 2rem;
      }

      @media only screen and (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .item {
      break-inside: avoid;

      a {
        text-decoration: none;

        &:hover img {
          transform: scale(1.02);
        }
      }

      img,
      video {
        width: 100%;
        object-fit: cover;
        margin-bottom: 0.5rem;
        border-radius: 4px;
        transition: transform 0.3s ease;
      }

      .content img {
        margin: 1rem 0;
      }

      .title {
        display: block;
        margin-bottom: 0.4rem;
        font-size: 1.1rem;
        font-weight: bolder;
      }

      .summary {
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
        word-break: break-word;
        color: #747474;
      }

      .content {
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
        word-break: break-word;
        color: #747474;

        &.cropped {
          position: relative;
          max-height: 80vh;
          overflow: hidden;
        }

        .content-fade {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 60px;
          background: linear-gradient(transparent, #fff);
          pointer-events: none;
        }
      }

      .date {
        font-size: 0.8rem;
        color: #a9a9a9;
        margin-top: 0.4rem;
      }

      .pinned {
        filter: grayscale(100%);
        font-size: 0.8rem;
        color: #494949;
        margin-top: 0.2rem;
      }
    }

    &.odd {
      .item:first-child {
        grid-column: 1 / -1;
      }
    }
  }

  &.articles .grid {
    .item {
      img {
        height: 240px;
      }
    }
    &.odd {
      .item:first-child img {
        height: 360px;
      }
    }
  }

  &.images .grid {
    .item {
      img {
        height: 360px;
      }
    }

    &.odd {
      .item:first-child img {
        height: auto;
      }
    }
  }

  .list {
    margin-top: 1rem;

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;

      li {
        margin-bottom: 1rem;

        &:last-child {
          margin-bottom: 0;
        }

        &:hover {
          padding-left: 12px;
          margin-left: -20px;
          border-left: 8px solid #747474;
        }

        &.fullNote {
          &:hover {
            padding-left: 0;
            margin-left: 0;
            border-left: 0;
          }
        }

        a {
          display: block;
          text-decoration: none;

          &:hover .summary {
            color: #242424;
          }

          h2 {
            font-size: 1.1rem;
            border-bottom: 4px solid #dadada;
            padding-bottom: 8px;
          }

          .summary,
          .content {
            margin-bottom: 0.4rem;
            font-size: 0.9rem;
            overflow-wrap: break-word;
            color: #747474;

            img,
            video {
              display: block;
              max-width: 100%;
              max-height: 90vh;
              margin: 1rem auto;
            }
          }

          .content {
            margin-bottom: 2rem;
          }

          .date {
            font-size: 0.8rem;
            color: #a9a9a9;
          }
        }
      }
    }
  }

  .slide {
    .splide__slide {
      font-size: 0.9rem;
      overflow-wrap: break-word;

      a {
        text-decoration: none;
      }

      .date {
        font-size: 0.8rem;
        color: #a9a9a9;
        margin-bottom: 0.3rem;
      }
    }

    .splide__arrow--prev {
      left: -3em;
    }
    .splide__arrow--next {
      right: -3em;
    }

    @media only screen and (max-width: 768px) {
      .splide__arrow--prev {
        display: none;
      }
      .splide__arrow--next {
        display: none;
      }
    }

    .splide__arrow {
      background: none;
      svg {
        fill: #a9a9a9;
      }
    }
  }
}

html.dark .block {
  border-bottom: 8px solid #373737;

  .grid {
    color: #cbcbcb;

    .item {
      .content {
        .content-fade {
          background: linear-gradient(transparent, #242424);
        }
      }
    }

    &.full-notes {
      .item {
        .title {
          border-bottom: 4px solid #777777;
        }
      }
    }

    .summary,
    .content {
      color: #a6a6a6;
    }

    .date,
    .pinned {
      color: #777777;
    }
  }

  .list {
    color: #cbcbcb;
    &.short-feed-full {
      .summary {
        color: #ffffff;
      }
    }

    .summary {
      color: #a6a6a6;
    }

    .date,
    .pinned {
      color: #777777;
    }

    a {
      &:hover {
        border-color: #747474;
      }

      &:hover .summary {
        color: #f5f5f5;
      }
    }
  }

  .slide {
    a {
      color: #cbcbcb;
    }
  }
}

.event-wrapper {
  position: relative;
  overflow-wrap: break-word;

  h1,
  h2,
  h3 {
    display: block;
    margin-top: 1.4rem;
    margin-bottom: 0.6rem;
  }

  h1:first-of-type {
    margin-top: 0rem;
  }

  .content {
    margin-top: 1.5rem;
  }

  p {
    line-height: 1.3rem;
    margin-top: 0rem;
  }

  .date {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #a9a9a9;
  }

  img {
    display: block;
    margin: 2rem auto;
    max-width: 100%;
    border-radius: 4px;

    &.note-banner {
      margin: 2.5rem auto 3.5rem auto;
      transform: scale(1.04); /* Zoom and re-center */
      width: 100%;
      object-fit: cover;
      max-height: 50vh;
    }

    &.note-image {
      margin: 0;
      margin-top: 1.5rem;
      width: 100%;
    }
  }

  video {
    width: 100%;
    margin: 2rem auto;
  }

  audio {
    width: 100%;
    margin: 2rem auto;
  }
}

.footer {
  margin-top: 4rem;
  padding-top: 2rem;
  margin-bottom: 2rem;
  border-top: 8px solid #ebebeb;
  font-size: 0.8rem;
  text-align: center;
  color: #cbcbcb;

  a {
    color: #cbcbcb;
  }
}

html.dark .footer {
  border-top: 8px solid #373737;
  color: #747474;
  a {
    color: #747474;
    &:visited {
      color: #747474;
    }
  }
}

zap-threads {
  font-size: 0.9rem;
}
