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