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

   1 .l-books__wrapper {
   2   margin-top: 27px;
   3   width: 100%;
   4   background-color: #F2F2F2;
   5   padding-top: 38px;
   6   position: relative;
   7   padding-bottom: 80px;
   8
   9   h2 {
  10     font-weight: 600;
  11     font-size: 31px;
  12     line-height: 140%;
  13     letter-spacing: -0.01em;
  14     color: #474747;
  15     margin-top: 0;
  16   }
  17 }
  18
  19 .l-books {
  20   display: flex;
  21   flex-wrap: wrap;
  22   margin-top: 36px;
  23 }
  24
  25 .l-books__item {
  26   background: #FFFFFF;
  27   border-radius: 9px;
  28   padding: 21px;
  29   box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
  30
  31   transition: all $ease-dynamic 350ms;
  32
  33   &:not(:last-child) {
  34     margin-right: 17px;
  35   }
  36
  37   &:hover {
  38     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  39   }
  40
  41   &.l-books__item--link {
  42     width: 212px;
  43     height: 350px;
  44
  45     background-color: #007880;
  46
  47     font-weight: 600;
  48     font-size: 21.5px;
  49     line-height: 140%;
  50     letter-spacing: -0.01em;
  51     color: #FFFFFF;
  52
  53     display: flex;
  54     flex-direction: column;
  55     justify-content: space-between;
  56
  57     .icon-link {
  58       margin-left: auto;
  59       margin-right: 0;
  60       &:hover {
  61         text-decoration: none;
  62       }
  63     }
  64
  65     a {
  66       &:hover {
  67         color: white;
  68       }
  69     }
  70   }
  71
  72   a {
  73     &:hover {
  74       text-decoration: underline;
  75     }
  76   }
  77
  78   h2 {
  79     font-weight: normal;
  80     font-size: 18px;
  81     line-height: 150%;
  82     color: #474747;
  83     margin: 0;
  84   }
  85   h3 {
  86     font-weight: normal;
  87     font-size: 15px;
  88     line-height: 160%;
  89     color: #808080;
  90     margin: 0;
  91   }
  92 }
  93
  94 .l-books__item__img {
  95   font-size: 0;
  96   margin: 0 0 11px;
  97
  98   img {
  99     max-width: 170px;
 100   }
 101 }
 102
 103 .l-books__item__actions {
 104   display: flex;
 105   align-content: center;
 106   justify-content: flex-start;
 107   margin-bottom: 5px;
 108
 109   .icon {
 110     color: #083F4D;
 111     margin-right: 10px;
 112     @include font-size(16px);
 113
 114     &.icon-like,
 115     &.icon-liked {
 116       color: #FF4C54;
 117       @include font-size(19px);
 118       margin-right: 0;
 119       margin-left: auto;
 120     }
 121
 122     &:hover {
 123       text-decoration: none;
 124     }
 125   }
 126 }
 127
 128 .l-books__header {
 129   width: 100%;
 130   display: flex;
 131   margin-top: 34px;
 132   align-items: center;
 133   justify-content: space-between;
 134 }
 135
 136 .l-books__input {
 137   position: relative;
 138   display: flex;
 139   align-content: center;
 140   width: 560px;
 141
 142   .icon {
 143     @include font-size(22px);
 144     color: #083F4D;
 145     position: absolute;
 146     margin: auto;
 147     top: 0;
 148     bottom: 0;
 149     left: 19px;
 150     display: flex;
 151     align-items: center;
 152     justify-content: center;
 153     pointer-events: none;
 154   }
 155
 156   input {
 157     font-family: $base-font;
 158     font-size: 18px;
 159     font-style: italic;
 160     padding: 10px 20px 10px 50px;
 161     border-radius: 52px;
 162     border: 1px solid #D9D9D9;
 163     width: 100%;
 164     max-width: 580px;
 165     outline: 0;
 166     transition: border $ease-out 350ms;
 167
 168     &:focus {
 169       border-color: #007880;
 170     }
 171   }
 172 }
 173
 174 .l-books__sorting {
 175   display: flex;
 176   align-content: center;
 177
 178   span {
 179     font-weight: $bold;
 180     @include font-size(18px);
 181     line-height: 150%;
 182     color: #083F4D;
 183   }
 184
 185   div {
 186     display: flex;
 187     align-content: center;
 188
 189     button {
 190       border: 0;
 191       padding: 0;
 192       margin: 0 0 0 30px;
 193       background-color: transparent;
 194       outline: 0;
 195       font-weight: $regular;
 196       @include font-size(18px);
 197       line-height: 150%;
 198       color: #808080;
 199       cursor: pointer;
 200
 201       &.is-active {
 202         color: #083F4D;
 203         font-weight: $semibold;
 204       }
 205     }
 206   }
 207 }
 208
 209 .l-books__grid {
 210   display: flex;
 211   flex-wrap: wrap;
 212   margin-top: 34px;
 213
 214   .l-books__item {
 215     border: 1px solid #D9D9D9;
 216     margin-bottom: 17px;
 217
 218     &:nth-child(5n + 5) {
 219       margin-right: 0;
 220     }
 221   }
 222 }
 223
 224 .l-books__col {
 225   display: flex;
 226   flex-direction: column;
 227   margin-top: 34px;
 228
 229   .l-books__item {
 230     width: 705px;
 231     border: 1px solid #D9D9D9;
 232     margin-bottom: 17px;
 233     display: flex;
 234
 235     .l-books__item__img {
 236       margin-bottom: 0;
 237     }
 238   }
 239 }
 240
 241 .l-books__item__content {
 242   padding-left: 40px;
 243   position: relative;
 244
 245   .l-books__item__actions {
 246     position: absolute;
 247     right: 0;
 248   }
 249
 250   h2 {
 251     font-weight: $semibold;
 252     @include font-size(21px);
 253     line-height: 140%;
 254     letter-spacing: -0.01em;
 255   }
 256
 257   p {
 258     max-width: 390px;
 259     margin-top: 20px;
 260     font-weight: $regular;
 261     @include font-size(18px);
 262     line-height: 150%;
 263     color: #474747;
 264   }
 265
 266   & > a {
 267     display: block;
 268     margin-top: 20px;
 269     font-weight: $regular;
 270     @include font-size(18px);
 271     line-height: 150%;
 272     color: #007880;
 273   }
 274 }