refactor: sidebar

Alexander Bilz

20.02.2022 2c337c28e4f210f465c03743319359828227a25a

refactor: sidebar

 assets/scss/partials/components/_sidebar.scss

@@ -1,7 +1,4 @@
.sidebar {
  -webkit-background-size: cover;
  background-size: cover;
  background-color: var(--bg-color);
  margin-top: 40px;

  @include desktop_and_print {
@@ -9,7 +6,7 @@
    position: fixed;
    height: 100%;
    margin-top: 0;
    width: $sidebar-width;
    width: inherit;
    display: flex;
    flex-direction: column;

@@ -26,19 +23,6 @@
    }
  }

  @include widescreen {
    width: calc(var(--sidebar-width) - 20%);
    @include ltr {
      padding-left: 17%;
      padding-right: 3%;
    }

    @include rtl {
      padding-right: 17%;
      padding-left: 3%;
    }
  }

  &__content {
    @include desktop_and_print {
      display: flex;
@@ -58,26 +42,10 @@
      display: inline;
      padding: 0 4px;
      line-height: 0;

      i {
        @include ltr {
          margin-right: 3px;
        }

        @include rtl {
          margin-left: 3px;
        }
      }

      li {
        display: inline;
        padding: 0 4px;
        line-height: 0;
      }
    }
  }

  &__title {
  &__introduction {
    top: 40%;
    text-align: center;

@@ -86,13 +54,13 @@
      margin: 0 1em;
    }

    img {
    &-profileimage {
      width: 127px;
      height: 127px;
      border-radius: 50%;
    }

    h3 {
    &-title {
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px;

 assets/scss/partials/components/_wrapper.scss

@@ -6,12 +6,19 @@
    flex-direction: row;
  }

  @include widescreen {
    justify-content: center;
  }

  &__main {
    width: 100%;

    @include desktop_and_print {
      width: $content-width;
    }
    @include widescreen {
      width: calc(#{$content-ratio} * 80%);
    }
  }

  &__sidebar {
@@ -20,5 +27,9 @@
    @include desktop_and_print {
      width: $sidebar-width;
    }

    @include widescreen {
      width: calc(#{$sidebar-ratio} * 80%);
    }
  }
}

 layouts/partials/sidebar.html

@@ -8,10 +8,10 @@
  {{ end }}"
>
  <div class="sidebar__content">
    <div class="sidebar__title">
      <img src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture" />
      <h3 title=""><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a></h3>
      <div class="sidebar__title-description">
    <div class="sidebar__introduction">
      <img class="sidebar__introduction-profileimage" src="{{ .Site.Params.profilePicture | relURL }}" alt="profile picture" />
      <h1 class="sidebar__introduction-title" title=""><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Params.Title }}</a></h1>
      <div class="sidebar__introduction-description">
        <p>{{ replace .Site.Params.description "\n" "<br />" | safeHTML }}</p>
      </div>
    </div>