Template Services Update.

Demoweb template_services update

This document has been created for future modifications of the “Template service” for the Demoweb project. It includes minor changes that improve the design for future projects and can also be applied to existing projects.

Mobile Menu. 

Search .menu__item-button and delete the left padding in line 55, the code should look like this: 

.menu__item-button {
  @include media($xlarge) {
   padding-left: 33px;
  }
  .header__menu &{
   display: inline-flex;
   @include media($large){
    display: none;
   }
  }
}

Kontakt Box. 

Search for .contact-card__hours and modify the font-size to 13px 

.contact-card__hours {
  font-size: 13px;
  color: $color__gray-lighter;
  display: block;
}

Blog Author

Search for .author__role and modify the font-size to 13px, if you don't see the author then you will need to relate de author into the blog detail in the admin. 

.author__role{
  color: $color__text;
  display: block;
  font-size: 13px;
}

Kategory Box

Search for .category__box  and modify aligment for the items, there will be diferent aligments when the box have images and when it doesn't have any, so we can just copy the following code: 

.category__box {
  position: relative;
  align-items: center;
  width: 100%;
  z-index: 1;
  padding: 15px 20px;
  background: $color__bg-dark;
  transition: $ease;
  &:hover, &:focus {
   .category__figure {
    opacity: 0.5;
   }
   .category__title {
    color: $color__primary;
   }
  }
  .category__item--image &{
   min-height: 190px;
   aspect-ratio: 16/9;
   height: 100%;
   align-items: end;
  }
}

Popavka mobile

Search for .message-form__checkbox-wrapper and we will need to include a margin top/bottom, so in the code we will add them only for small devices like this:

.message-form__checkbox-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
   input:checked + .message-form__checkbox::before {
    @include pseudo();
    width: 0.8rem;
    height: 1.4rem;
    border-right: 2px solid $color__text;
    border-bottom: 2px solid $color__text;
    transform: rotate(45deg);
    top: 3px;
    bottom: 8px;
    left: 5px;
    right: 5px;
    margin: auto;
  }
  @media (max-width: $small) {
   margin-top: 10px;
   margin-bottom: 10px;
  }
}

Gradient Reference Box

For this last update we will need to modify the latte file modules/reference-item.latte and also the scss .references__figure

In Latte, we need to add a container for the info of reference 

<div class="references__figure --flex --flex-column --flex-end-x">
 <a class="references__link" href="{$item|link}">
  <img class="references__img" src="{$img}" alt="{$page|name|striptags}" n:if="$img">
 </a>
 <div class="references__info">
  <div class="references__spec spec spec--references --flex --flex-centre-y">
   {if isset($item['rubric'])}
    {var $rubric = $item['rubric']}
   {/if}
   {if $rubric}
    <a class="spec__item spec__item--category" href="{$rubric|link}">
     {$rubric|name}
    </a>
   {/if}
   <span class="spec__item spec__item--date">
    {$item['date_inserted']->format('j. n. Y')}
   </span>
  </div>
  <h3 class="references__item-title">
   <a class="references__link" href="{$item|link}">
    {$item|header|noescape}
   </a>
  </h3>
 </div>
</div

.references__figure {
 position: relative;
 min-height: 230px;
 width: 100%;
 z-index: 2;
 overflow: hidden;
 @include media($medium) {
  min-height: 290px;
 }
 @include media($small) {
  .references__item--wide & {
   width: 50%;
  }
 }
}
.references__info {
 position: relative;
 padding: 65px 30px 30px 30px;
}
.references__info::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, #000 40%, transparent 90%);
 z-index: -1;
 pointer-events: none;
 height: 100%;
}