src/wolnelektury/static/2022/styles/pages/_homepage.scss

   1 .p-homepage__info {
   2   display: flex;
   3   flex-wrap: wrap;
   4   margin-top: 60px;
   5   width: 100%;
   6
   7   @include rwd(tablet) {
   8     flex-direction: column;
   9   }
  10
  11   &.p-homepage__info--second {
  12     margin-top: 30px;
  13     flex-wrap: initial;
  14
  15     @include rwd(tablet) {
  16       margin-top: 10px;
  17     }
  18   }
  19 }
  20
  21 .p-homepage__info__box__rows {
  22   display: flex;
  23   flex-direction: column;
  24 }
  25
  26 .p-homepage__info__box {
  27   border: 1px solid $color-light-gray;
  28   border-radius: 10px;
  29   overflow: hidden;
  30
  31   & > a {
  32     display: block;
  33     font-size: 0;
  34   }
  35
  36   figure {
  37     margin: 0;
  38     display: block;
  39     font-size: 0;
  40   }
  41
  42   img {
  43     max-width: 100%;
  44   }
  45
  46   &.p-homepage__info__box--donate {
  47     width: calc(50% - 10px);
  48     display: flex;
  49     padding: 21px;
  50     color: $color-white;
  51     margin-top: 20px;
  52     margin-right: 10px;
  53     background-color: $color-darker-primary;
  54     border-color: $color-darker-primary;
  55
  56     @include rwd(tablet) {
  57       width: 100%;
  58       margin-right: 0;
  59     }
  60   }
  61
  62   &.p-homepage__info__box--newsletter {
  63     width: calc(50% - 10px);
  64     display: flex;
  65     padding: 21px;
  66     margin-top: 20px;
  67     margin-left: 10px;
  68     color: $color-darker-primary;
  69     background-color: $color-lighter-primary;
  70     border-color: $color-lighter-primary;
  71     position: relative;
  72     overflow: visible;
  73
  74     @include rwd(tablet) {
  75       width: 100%;
  76       margin-right: 0;
  77       margin-left: 0;
  78     }
  79
  80     &:after {
  81       content: "";
  82       display: block;
  83       width: 555px;
  84       height: 233px;
  85       bottom: 0;
  86       left: 0;
  87       background: url("../images/book-donate-bg.svg") center no-repeat;
  88       position: absolute;
  89       pointer-events: none;
  90
  91
  92       @include rwd(tablet) {
  93         display: none;
  94       }
  95     }
  96   }
  97
  98   &.p-homepage__info__box--full {
  99     width: 100%;
 100     max-width: 705px;
 101     padding: 0;
 102     color: $color-white;
 103     margin-right: 20px;
 104     background: $color-darker-primary;
 105     border: 0;
 106     display: flex;
 107
 108     @include rwd(tablet) {
 109       flex-direction: column;
 110       margin-right: 0;
 111       margin-bottom: 20px;
 112     }
 113
 114     img {
 115       min-width: 270px;
 116       border-radius: 0;
 117
 118       @include rwd(tablet) {
 119         min-width: 100%;
 120         height: 250px;
 121         object-fit: cover;
 122       }
 123     }
 124
 125     .p-homepage__info__box__content {
 126       max-width: 100%;
 127       justify-content: flex-start;
 128       padding: 32px;
 129       background: url("../images/plant.png") center no-repeat;
 130       p {
 131         @include font-size(24px);
 132
 133         @include rwd(tablet) {
 134           @include font-size(18px);
 135         }
 136
 137         & + p {
 138           margin-top: 16px;
 139           @include font-size(18px);
 140           line-height: 150%;
 141
 142           @include rwd(tablet) {
 143             @include font-size(14px);
 144           }
 145         }
 146       }
 147     }
 148
 149     .l-button {
 150       margin-top: auto;
 151       margin-bottom: 0;
 152
 153       @include rwd(tablet) {
 154         margin-top: 20px;
 155       }
 156     }
 157   }
 158
 159   &.p-homepage__info__box--full--sm {
 160     border: 0;
 161     display: flex;
 162
 163     img {
 164       min-width: 125px;
 165     }
 166
 167     .p-homepage__info__box__content {
 168       max-width: 100%;
 169       justify-content: flex-start;
 170       padding: 15px;
 171       p {
 172         @include font-size(24px);
 173
 174         @include rwd(tablet) {
 175           @include font-size(18px);
 176         }
 177
 178         strong {
 179           color: inherit;
 180           font-weight: $semibold;
 181         }
 182
 183         & + p {
 184           margin-top: 16px;
 185           @include font-size(18px);
 186           line-height: 150%;
 187         }
 188       }
 189
 190       .l-button {
 191         margin-top: auto;
 192         margin-bottom: 0;
 193         @include font-size(18px);
 194         padding: 3px 10px;
 195       }
 196     }
 197
 198     &:nth-child(1) {
 199       background-color: #92BD39;
 200       margin-bottom: 20px;
 201       .p-homepage__info__box__content {
 202         background: url("../images/flower.png") center no-repeat;
 203       }
 204     }
 205
 206     &:nth-child(2) {
 207       background-color: #FFA500;
 208       .p-homepage__info__box__content {
 209         background: url("../images/flower-2.png") center no-repeat;
 210       }
 211     }
 212   }
 213 }
 214
 215 .p-homepage__info__box__content {
 216   width: 100%;
 217   max-width: 320px;
 218   position: relative;
 219   display: flex;
 220   flex-direction: column;
 221   justify-content: space-between;
 222   z-index: $middle-layer;
 223
 224   h3 {
 225     font-weight: $semibold;
 226     @include font-size(31px);
 227     line-height: 100%;
 228     letter-spacing: -0.01em;
 229
 230     @include rwd(tablet) {
 231       margin-top: 0;
 232       @include font-size(19px);
 233       line-height: 100%;
 234     }
 235
 236     strong {
 237       display: block;
 238       font-weight: $bold;
 239       margin-top: 6px;
 240       @include font-size(46px);
 241
 242       @include rwd(tablet) {
 243         @include font-size(28px);
 244         margin-top: 4px;
 245       }
 246     }
 247   }
 248
 249   p {
 250     margin-top: 0;
 251     font-style: italic;
 252     font-weight: $regular;
 253     @include font-size(21px);
 254     line-height: 140%;
 255     letter-spacing: -0.01em;
 256     @include rwd(tablet) {
 257       @include font-size(13px);
 258       line-height: 140%;
 259     }
 260     strong {
 261       color: #92BD39;
 262       font-weight: $regular;
 263     }
 264   }
 265
 266   .l-button {
 267     display: block;
 268   }
 269 }
 270
 271 .p-homepage-prapremiera {
 272   width: 100%;
 273   background-color: #F2F2F2;
 274   padding: 25px 0 40px 0;
 275   margin-top: 48px;
 276
 277   @include rwd(tablet) {
 278     width: calc(100% + 32px);
 279     margin-left: -16px;
 280   }
 281
 282   .l-container {
 283     & > h3 {
 284       margin-top: 0;
 285       font-weight: $semibold;
 286       @include font-size(31px);
 287       line-height: 140%;
 288       letter-spacing: -0.01em;
 289       color: #92BD39;
 290
 291       @include rwd(tablet) {
 292         @include font-size(25px);
 293       }
 294     }
 295   }
 296 }
 297
 298 .p-homepage-prapremiera__box {
 299   margin-top: 24px;
 300   background-color: $color-white;
 301   border: 1px solid #D9D9D9;
 302   border-radius: 10px;
 303   display: flex;
 304   justify-content: space-between;
 305   padding: 21px;
 306
 307   @include rwd(tablet) {
 308     padding: 16px;
 309     flex-direction: column;
 310   }
 311
 312   figure {
 313     margin: 0;
 314     font-size: 0;
 315
 316     @include rwd(tablet) {
 317       display: flex;
 318       align-items: center;
 319       justify-content: center;
 320     }
 321
 322     a {
 323       display: block;
 324       img {
 325         min-width: 240px;
 326         max-width: 100%;
 327       }
 328     }
 329   }
 330 }
 331
 332 .p-homepage-prapremiera__box__content {
 333   width: 385px;
 334
 335   @include rwd(tablet) {
 336     width: 100%;
 337     margin-top: 25px;
 338   }
 339
 340   h4 {
 341     margin-top: 0;
 342     font-weight: $regular;
 343     @include font-size(21px);
 344     line-height: 100%;
 345     @include rwd(tablet) {
 346       @include font-size(18px);
 347     }
 348     a {
 349       color: #007880;
 350     }
 351   }
 352
 353   h3 {
 354     margin-top: 0;
 355     font-weight: $regular;
 356     @include font-size(37px);
 357     line-height: 120%;
 358     @include rwd(tablet) {
 359       margin-top: 10px;
 360       @include font-size(24px);
 361     }
 362     a {
 363       color: #083F4D;
 364     }
 365   }
 366
 367   p {
 368     margin-top: 22px;
 369     font-weight: $regular;
 370     @include font-size(18px);
 371     line-height: 150%;
 372     color: #333333;
 373
 374     @include rwd(tablet) {
 375       margin-top: 10px;
 376     }
 377   }
 378 }
 379
 380 .p-homepage-prapremiera__box__donate {
 381   background: #083F4D;
 382   border-radius: 7px;
 383   color: $color-white;
 384   width: 390px;
 385   display: flex;
 386   padding: 34px;
 387   flex-direction: column;
 388   justify-content: space-between;
 389
 390   @include rwd(tablet) {
 391     width: 100%;
 392     padding: 18px;
 393     margin-top: 20px;
 394   }
 395
 396   p {
 397     margin-top: 0;
 398     font-style: italic;
 399     font-weight: $regular;
 400     @include font-size(24px);
 401     line-height: 150%;
 402
 403     @include rwd(tablet) {
 404       margin-bottom: 20px;
 405       @include font-size(20px);
 406     }
 407
 408     strong {
 409       color: #92BD39;
 410       font-weight: $regular;
 411     }
 412   }
 413 }
 414
 415 .p-homepage__uptodate {
 416   width: 100%;
 417   margin-top: 60px;
 418   margin-bottom: 50px;
 419
 420   @include rwd(tablet) {
 421     margin-top: 30px;
 422     width: calc(100% + 32px);
 423     margin-left: -16px;
 424   }
 425 }
 426
 427 .p-homepage__uptodate__header {
 428   display: flex;
 429   justify-content: space-between;
 430   align-items: center;
 431   padding-bottom: 16px;
 432   border-bottom: 1px solid #007880;
 433   h3 {
 434     margin-top: 0;
 435     font-weight: $semibold;
 436     @include font-size(31px);
 437     line-height: 140%;
 438     letter-spacing: -0.01em;
 439     color: #474747;
 440
 441     @include rwd(tablet) {
 442       @include font-size(25px);
 443     }
 444   }
 445   ul {
 446     margin: 0;
 447     padding: 0;
 448     list-style: none;
 449     display: flex;
 450     align-items: center;
 451     justify-content: center;
 452     li {
 453       margin-left: 35px;
 454       @include rwd(tablet) {
 455         margin-left: 15px;
 456       }
 457       a {
 458         font-size: 0;
 459         color: #083F4D;
 460         display: flex;
 461         align-items: center;
 462         justify-content: center;
 463         .icon {
 464           @include font-size(20px);
 465         }
 466       }
 467     }
 468   }
 469 }
 470
 471 .p-homepage__uptodate__logos {
 472   display: flex;
 473   justify-content: space-between;
 474   margin-top: 48px;
 475
 476   @include rwd(tablet) {
 477     flex-wrap: wrap;
 478   }
 479
 480   figure {
 481     display: flex;
 482     flex-direction: column;
 483     align-items: center;
 484     font-size: 0;
 485
 486     @include rwd(tablet) {
 487       margin: 0;
 488       width: 50%;
 489     }
 490
 491     figcaption {
 492       font-weight: $regular;
 493       @include font-size(18px);
 494       line-height: 150%;
 495       text-align: center;
 496       color: #474747;
 497     }
 498     img {
 499       margin-top: 20px;
 500     }
 501   }
 502 }