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