blog/assets/sass/_home.scss

.obfuscate {
  user-select: none;
  display: inline-flex;
  flex-direction: row-reverse;
}

.sym-at-sign::before {
  content: "@";
}

.sym-dot::before {
  content: ".";
}

#homepageContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;

  #homepage {
    width: 100%;

    h1#title {
      font-weight: normal;
      font-size: 4em;
      margin: 0;
      margin-top: 40px;
    }

    div#about {
      line-height: 1.5em;

      p {
        width: 60%;
        min-width: Min(100%, 520px);
      }

      a code {
        color: $code-color;

        &:hover {
          text-decoration: none;
        }
      }

      ul {
        list-style-type: "\25B8\00A0";
        padding-left: 1.5em;

        li {
          padding-left: .5em;

          p {
            margin: 0.1rem;
          }
        }
      }
    }

    h2 {
      font-weight: normal;
      margin-bottom: 6px;
      color: $text-color;
    }

    h2#blog-posts-title {
      a {
        text-decoration: none;
        color: $text-color;
      }
    }

    #blog-posts {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-content: stretch;

      @media screen and (max-width: 520px) {
        flex-wrap: wrap;
        gap: 6px;
      }
      @media screen and (min-width: 520px) {
        flex-wrap: no-wrap;
        gap: 20px;
      }

      list-style-type: none;
      padding: 0;

      > li {
        display: block;
        width: 100%;
        padding: 8px;
        background-color: $faded-background-color;
        text-decoration: none;

        flex-grow: 1;
        flex-basis: 100%;
      }

      .blog-post-link {
        text-decoration: none;

        .blog-post {
          display: flex;
          width: 100%;
          height: 100%;
          flex-direction: column;
          align-content: stretch;
          justify-content: space-between;

          color: $text-color;
          text-decoration: none;

          .title {
            display: flex;
          }

          .details {
            text-align: right;
            color: $smaller-text-color;
          }
        }

        &:hover .title {
          text-decoration: underline;
          text-decoration-style: dotted;
        }
      }
    }
  }
}