src/wolnelektury/static/2022/styles/layout/_themes.scss

   1 .l-themes__wrapper {
   2   width: 100%;
   3
   4   h2 {
   5     margin: 0;
   6     font-weight: 600;
   7     font-size: 21.5px;
   8     line-height: 140%;
   9     border-bottom: 1px solid #D9D9D9;
  10     padding-bottom: 15px;
  11     padding-top: 5px;
  12     letter-spacing: -0.01em;
  13     color: #007880;
  14     margin-bottom: 23px;
  15     display: flex;
  16     justify-content: space-between;
  17     align-items: center;
  18
  19     a {
  20       display: flex;
  21       align-items: center;
  22       font-weight: bold;
  23       font-size: 16px;
  24       color: #474747;
  25
  26       &:hover {
  27         span {
  28           text-decoration: underline;
  29         }
  30       }
  31
  32       .icon {
  33         color: #007880;
  34         font-size: 10px;
  35         margin-left: 10px;
  36       }
  37     }
  38   }
  39
  40   .links {
  41
  42     display: flex;
  43     list-style: none;
  44     padding: 0;
  45     margin: 0;
  46     margin-top: 65px;
  47     li {
  48       display: flex;
  49       align-items: center;
  50
  51       &:not(:last-child) {
  52         padding-right: 12px;
  53         &:after {
  54           margin-left: 12px;
  55           content: "";
  56           height: 70%;
  57           width: 1px;
  58           background-color: #007880;
  59           display: block;
  60         }
  61       }
  62
  63       a {
  64         font-weight: normal;
  65         font-size: 15px;
  66         line-height: 160%;
  67         color: #808080;
  68
  69         &:hover {
  70           text-decoration: underline;
  71         }
  72       }
  73     }
  74   }
  75 }
  76
  77 .l-themes {
  78   margin-top: 15px;
  79
  80   ul {
  81     padding: 0;
  82     margin: 0;
  83     list-style: none;
  84     display: flex;
  85     flex-wrap: wrap;
  86
  87     li {
  88       width: 16.66666666666667%;
  89       margin-bottom: 17px;
  90       font-weight: normal;
  91       font-size: 18px;
  92       line-height: 150%;
  93       color: #474747;
  94
  95       span {
  96         color: #007880;
  97       }
  98
  99       a {
 100         &:hover {
 101           text-decoration: underline;
 102         }
 103       }
 104     }
 105   }
 106
 107   button {
 108     font-weight: $bold;
 109     @include font-size(24px);
 110     line-height: 28px;
 111     text-align: center;
 112     text-decoration-line: underline;
 113     color: $color-gray;
 114     appearance: none;
 115     background: transparent;
 116     padding: 0;
 117     border: 0;
 118     cursor: pointer;
 119     display: block;
 120     margin: 43px auto 0;
 121   }
 122 }