refactor: navbarburger, languageswitch, post

alexanderdavide

05.42.2022 0334363ecdc0f1001b19cba404957a6fa7cbea08

refactor: navbarburger, languageswitch, post

 assets/css/style.css

@@ -241,15 +241,13 @@
  padding-bottom: 22px;
  border-bottom: 1px solid var(--nav-text-color);
}
*/

.theme-switch {
 .theme-switch {
  margin-top: -5px;
  color: var(--nav-text-color);
  font-size: 1.75rem;
}
} 

/*
header .information {
  float: right;
  padding-top: 12px;
@@ -431,6 +429,7 @@
  color: #2660ab;
}
*/
/*
.post {
  background-color: var(--bg-color);
  margin: 30px;
@@ -490,7 +489,6 @@
}

.post .post-content h4 {
  /* color: var(--heading-color); */
  font-size: 1.6rem;
}

@@ -559,7 +557,7 @@
.post figure.big {
  max-width: 100vw;
}

*/
.info {
  margin: 1em;
}
@@ -567,7 +565,7 @@
.info span {
  margin-right: 0.5em;
}

/*
.post .post-footer .meta a {
  text-decoration: none;
  color: var(--body-color);
@@ -626,6 +624,7 @@
  border: 1px solid var(--border-color);
  border-bottom: 0px;
}
*/
/*
.pagination {
  margin: 30px;
@@ -940,10 +939,11 @@
  text-align: center;
  padding-top: 50px;
}

/*
.navbar-burger {
  display: none;
}
*/

#TableOfContents {
  display: block;
@@ -1136,7 +1136,7 @@
  .content {
    z-index: 2;
  }

  /*
  .post figure.right {
    float: unset;
    max-width: 100%;
@@ -1148,6 +1148,7 @@
    max-width: 100%;
    margin: 0;
  }
  */

  .footer--sidebar {
    display: none;
@@ -1189,6 +1190,7 @@
    border-bottom: none;
  } */

  /*
  .navbar-burger {
    cursor: pointer;
    display: block;
@@ -1222,6 +1224,7 @@
  .navbar-burger span:nth-child(3) {
    top: calc(50% + 4px);
  }
  */

  .list-with-title .listing .listing-post .post-time {
    max-width: 20%;

 assets/js/anatole-header.js

@@ -9,9 +9,9 @@
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        var $target = document.getElementById(target);
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
        nav.classList.toggle('is-active');
        $el.classList.toggle('nav--active');
        $target.classList.toggle('nav--active');
        nav.classList.toggle('nav--active');
      });
    });
  }

 assets/scss/main.scss

@@ -15,7 +15,9 @@
@import './partials/components/sidebar';
@import './partials/components/footer';
@import './partials/components/pagination';
@import './partials/components/navbarburger';
@import './partials/components/comment';
@import './partials/components/languageswitch';
@import './partials/components/post';
@import './partials/vendors/mediumzoom';
@import './partials/vendors/contactform';

 assets/scss/partials/components/_languageswitch.scss

@@ -5,6 +5,7 @@
  position: relative;
  display: inline-block;
  padding-right: 20px;

  &__list {
    list-style: none;
    label {
@@ -36,23 +37,25 @@
          white-space: nowrap;
        }
      }
    }
  }

      #languagepicker:checked ~ .dropdown {
        display: block;
      }
  &__picker:checked {
    ~ .dropdown__list {
      display: block;
    }

      #languagepicker:checked ~ .triangle {
        position: absolute;
        top: 15px;
        right: -10px;
        z-index: 10;
        height: 14px;
        overflow: hidden;
        width: 30px;
        background: transparent;
      }
    ~ .triangle {
      position: absolute;
      top: 15px;
      right: -10px;
      z-index: 10;
      height: 14px;
      overflow: hidden;
      width: 30px;
      background: transparent;

      #languagepicker:checked ~ .triangle:after {
      &:after {
        content: '';
        z-index: 20;
        width: 15px;
@@ -67,30 +70,34 @@
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .languageswitch {
    &__list {
      padding-right: inherit;
      label {
        cursor: pointer;
      }
      .triangle {
        display: none;
      }
      &-item {
        .dropdown__list {
          right: inherit;
          position: relative;
          top: inherit;
          padding-right: 0px;
          background: none;
          border-color: inherit;
          box-shadow: none;
          &-item {
            text-align: center;
            padding: 0.5rem 0.75rem;
            padding-left: initial;

  @media screen and (max-width: 960px) {
    .languageswitch {
      &__list {
        padding-right: inherit;

        label {
          cursor: pointer;
        }

        .triangle {
          display: none;
        }

        &-item {
          .dropdown__list {
            right: inherit;
            position: relative;
            top: inherit;
            padding-right: 0px;
            background: none;
            border-color: inherit;
            box-shadow: none;
            &-item {
              text-align: center;
              padding: 0.5rem 0.75rem;
              padding-left: initial;
            }
          }
        }
      }

 assets/scss/partials/components/_navbarburger.scss

New file
@@ -0,0 +1,39 @@
.navbar-burger {
  display: none;
}

@media screen and (max-width: 960px) {
  .navbar-burger {
    cursor: pointer;
    display: block;
    height: 3.25rem;
    position: relative;
    width: 3.25rem;
    margin-left: auto;

    &__line {
      background-color: $primary;
      display: block;
      height: 1px;
      left: calc(50% - 8px);
      position: absolute;
      transform-origin: center;
      transition-duration: 86ms;
      transition-property: background-color, opacity, transform;
      transition-timing-function: ease-out;
      width: 16px;

      &:nth-child(1) {
        top: calc(50% - 6px);
      }

      &:nth-child(2) {
        top: calc(50% - 1px);
      }

      &:nth-child(3) {
        top: calc(50% + 4px);
      }
    }
  }
}

 assets/scss/partials/components/_post.scss

New file
@@ -0,0 +1,163 @@
.post {
  background-color: $accent;
  margin: 30px;

  .post-title {
    h1 {
      text-transform: uppercase;
      font-size: 3em;
      letter-spacing: 1px;
      line-height: 1;
    }
    h2 {
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 2.6rem;
      line-height: 1;
      font-weight: 600;
      color: $primary;
    }

    h3 {
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 1;
      font-weight: 600;
      color: $primary;
      font-size: 2.2rem;
      margin: 0;
    }
    color: var(--heading-color);
    &:hover {
      text-decoration: underline;
    }
  }
  .post-content {
    ul,
    ol {
      line-height: 1.9em;
      font-weight: 400;
      font-size: 1.4rem;
    }
  }

  .post-footer {
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border-color);
    .meta {
      max-width: 100%;
      display: flex;
      color: #bbbbbb;
      .info {
        float: left;
        font-size: 1.2rem;
        margin-bottom: 1em;
        color: var(--body-color);
        .date {
          margin-right: 10px;
          margin-left: 5px;
        }
      }
    }
    .info {
      .separator a {
        margin-right: 0.2em;
      }
    }
  }
  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 .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.left {
    float: unset;
    max-width: 100%;
    margin: 0;
  }
}

 assets/scss/partials/components/_themeswitch.scss

New file
@@ -0,0 +1,4 @@
.themeswitch {
  margin-top: -5px;
  font-size: 1.75rem;
}

 assets/scss/partials/layout/_header.scss

@@ -8,7 +8,7 @@

@media screen and (min-width: 961px), print {
  .header {
    border-bottom: 1px solid $primary;
    border-bottom: 1px solid $primary-light;
  }
}
@media screen and (max-width: 960px) {

 assets/scss/partials/layout/_nav.scss

@@ -1,27 +1,17 @@
.nav {
  /*display: none;*/

  &--active {
    display: block;
  }
  display: none;
  box-shadow: $shadow;

  &__list {
    margin: 0;
    list-style: none;
    padding: 20px 30px;
    background-color: $primary-lighter;
    box-shadow: $shadow;
    width: 100%;

    &-item {
      position: relative;
      display: initial;
      display: block;
      flex-grow: 0;
      flex-shrink: 0;
      line-height: 2.5;
      padding: 0.5rem 0.75rem;
      position: relative;
      text-transform: uppercase;
      text-align: center;
      font-size: 1.3em;
@@ -34,22 +24,32 @@
      padding-bottom: 22px;
    }
  }

  &--active {
    display: block;
  }
}

@media screen and (min-width: 961px), print {
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;

    &__list {
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      min-height: 0;

      background-color: $accent;
      &-item {
        &:not(:last-child) {
          padding-right: 20px;
        }
      }

      &--end {
        flex-shrink: 1;
        justify-content: flex-end;
      }
    }
  }
}

 layouts/partials/navbar.html

@@ -8,9 +8,9 @@
  {{ end }}"
>
  <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true" class="navbar-burger__line"></span>
    <span aria-hidden="true" class="navbar-burger__line"></span>
    <span aria-hidden="true" class="navbar-burger__line"></span>
  </a>
  <nav class="nav">
    <ul class="nav__list" id="navMenu">
@@ -32,14 +32,14 @@
            >{{ .Name }}</a
          >
        </li>

      {{ end }}
      <ul>
      </ul>
      <ul class="nav__list nav__list--end">
        {{ if and .IsTranslated .Site.IsMultiLingual }}
          <li class="languageswitch">
            <ul class="languageswitch__list" aria-label="Language switcher">
              <li class="languageswitch__list-item">
                <input type="checkbox" id="languagepicker" aria-label="switch language" hidden />
                <input class="languageswitch__picker" type="checkbox" id="languagepicker" aria-label="switch language" hidden />
                <label for="languagepicker">{{ .Site.Language.LanguageName }}</label>
                <label for="languagepicker"><i class="fa fa-angle-down" aria-hidden="true"></i></label>
                <div class="triangle"></div>
@@ -68,8 +68,8 @@

        {{ end }}
        {{ if not .Site.Params.disableThemeSwitcher }}
          <li>
            <a class="theme-switch" title="Switch Theme">
          <li class="themeswitch">
            <a title="Switch Theme">
              <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a>
          </li>