src/wolnelektury/static/2021/css/layout/_header.scss

   1 .l-header {
   2   max-width: 1140px;
   3   margin: 0 auto;
   4   display: flex;
   5   align-items: center;
   6   justify-content: space-between;
   7   padding: 40px 36px;
   8   border-bottom: 4px solid $color-light-gray;
   9 }
  10
  11 .l-header__img {
  12   margin: 0;
  13   font-size: 0;
  14   width: 200px;
  15   height: 200px;
  16   overflow: hidden;
  17   display: flex;
  18   align-items: center;
  19   justify-content: center;
  20   border-radius: 50%;
  21
  22   img {
  23     width: 200px;
  24     height: auto;
  25   }
  26 }
  27
  28 .l-header__content {
  29   display: flex;
  30   flex-direction: column;
  31   justify-content: center;
  32   margin-left: 58px;
  33   margin-right: auto;
  34
  35   p {
  36     letter-spacing: -0.02em;
  37     font-weight: $bold;
  38     @include font-size(32px);
  39     line-height: 100%;
  40     color: $color-primary;
  41     margin: 0;
  42   }
  43
  44   h1 {
  45     letter-spacing: -0.02em;
  46     color: $color-primary;
  47     font-weight: $bold;
  48     @include font-size(64px);
  49     line-height: 100%;
  50     margin: 0;
  51   }
  52
  53   ul {
  54     letter-spacing: -0.02em;
  55     color: $color-secondary;
  56     font-weight: $bold;
  57     @include font-size(24px);
  58     list-style: none;
  59     line-height: 100%;
  60     display: flex;
  61     padding: 0;
  62     margin: 0;
  63
  64     li {
  65       margin-right: 10px;
  66       &:not(:last-child):after { content: "/";margin-left: 10px; }
  67     }
  68   }
  69 }
  70
  71 .l-header__actions {
  72   .l-button {
  73     appearance: none;
  74     border: 0;
  75     padding: 0;
  76     background: transparent;
  77     cursor: pointer;
  78   }
  79 }