refactor: portfolio, alert, 404, TOC and smaller fixes

Alexander Bilz

06.22.2022 9df825df06bf47bdbb53b67f15601c60f636b898

 assets/scss/partials/components/_post.scss

@@ -27,7 +27,7 @@
      font-size: 2.2rem;
      margin: 0;
    }
    color: var(--heading-color);
    color: $primary;
    &:hover {
      text-decoration: underline;
    }
@@ -39,11 +39,40 @@
      font-weight: 400;
      font-size: 1.4rem;
    }
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 65%;
      max-width: 100%;
    }
    figure {
      max-width: 100%;
      height: auto;
      margin: 0;
      text-align: center;

      &.right {
        float: right;
        margin-left: 1.5em;
        max-width: 50%;
      }

      &.left {
        float: left;
        margin-right: 1.5em;
        max-width: 50%;
      }

      &.big {
        max-width: 100vw;
      }
    }
  }

  .post-footer {
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border-color);
    border-bottom: $border;
    .meta {
      max-width: 100%;
      display: flex;
@@ -52,112 +81,93 @@
        float: left;
        font-size: 1.2rem;
        margin-bottom: 1em;
        color: var(--body-color);
        color: $primary;
        .date {
          margin-right: 10px;
          margin-left: 5px;
        }
      }
      a {
        text-decoration: none;
        color: $primary;
        &:hover {
          color: #2660ab;
        }
      }
      i {
        margin-right: 6px;
      }
    }
    .info {
      .separator a {
        margin-right: 0.2em;
      }
    }
    .tags {
      padding-bottom: 15px;
      font-size: 1.3rem;

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

      ul li {
        list-style-type: none;
        margin: 0;
        padding-right: 5px;
        display: inline;
      }

      a {
        text-decoration: none;
        color: $primary;
        font-weight: 400;
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
  figure {
    max-width: 100%;
    height: auto;
    margin: 0;
    text-align: center;

    &.right {
      float: right;
      margin-left: 1.5em;
      max-width: 50%;
    }
  .post-thumbnail {
    width: 100%;
    padding-bottom: 1em;
    box-shadow: #000;
    border-radius: 0.5em;
    overflow: hidden;
    transition: box-shadow 0.3s ease;

    &.left {
      float: left;
      margin-right: 1.5em;
      max-width: 50%;
    }

    &.big {
      max-width: 100vw;
    img {
      width: 100%;
      height: $thumbnail-height;
      object-fit: cover;
      border: $border;
      border-bottom: 0px;
    }
  }
}

.post .post-footer .meta a {
  text-decoration: none;
  color: var(--body-color);
}

.post .post-footer .meta a:hover {
  color: #2660ab;
}

.post .post-footer .meta i {
  margin-right: 6px;
}

.post .post-footer .tags {
  padding-bottom: 15px;
  font-size: 1.3rem;
}

.post .post-footer .tags ul {
  list-style-type: none;
  display: inline;
  margin: 0;
  padding: 0;
}

.post .post-footer .tags ul li {
  list-style-type: none;
  margin: 0;
  padding-right: 5px;
  display: inline;
}

.post .post-footer .tags a {
  text-decoration: none;
  color: var(--post-color);
  font-weight: 400;
}

.post .post-footer .tags a:hover {
  text-decoration: none;
}

.post .post-thumbnail {
  width: 100%;
  padding-bottom: 1em;
  box-shadow: #000;
  border-radius: 0.5em;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.post .post-thumbnail img {
  width: 100%;
  height: var(--thumbnail-height);
  object-fit: cover;
  border: 1px solid var(--border-color);
  border-bottom: 0px;
}

@media screen and (max-width: 960px) {
  .post figure.right {
    float: unset;
    max-width: 100%;
    margin: 0;
  }
  .post {
    figure {
      max-width: 100%;
      height: auto;
      margin: 0;
      text-align: center;

  .post figure.left {
    float: unset;
    max-width: 100%;
    margin: 0;
      &.right {
        float: unset;
        max-width: 100%;
        margin: 0;
      }

      &.left {
        float: unset;
        max-width: 100%;
        margin: 0;
      }
    }
  }
}