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     align-items: center;
 369     justify-content: center;
 370     @include rwd($break-flow) {
 371         display: block;
 372     }
 373
 374     a {
 375       display: block;
 376       img {
 377         min-width: 240px;
 378         max-width: 100%;
 379       }
 380     }
 381   }
 382 }
 383
 384 .p-homepage-prapremiera__box__content {
 385
 386     width: 100%;
 387     margin-top: 25px;
 388     @include rwd($break-flow) {
 389         //width: 385px;
 390         margin-top: 0; // ?
 391     }
 392
 393   h4 {
 394     margin-top: 0;
 395     font-weight: $regular;
 396     @include font-size(18px);
 397     line-height: 100%;
 398     @include rwd($break-flow) {
 399       @include font-size(21px);
 400     }
 401     a {
 402       color: #007880;
 403     }
 404   }
 405
 406   h3 {
 407     margin-top: 10px;
 408     font-weight: $regular;
 409     @include font-size(24px);
 410     line-height: 120%;
 411     @include rwd($break-flow) {
 412       margin-top: 0;
 413       @include font-size(37px);
 414     }
 415     a {
 416       color: #083F4D;
 417     }
 418   }
 419
 420   p {
 421     margin-top: 10px;
 422     font-weight: $regular;
 423     @include font-size(18px);
 424     line-height: 150%;
 425     color: #333333;
 426
 427     @include rwd($break-flow) {
 428       margin-top: 22px;
 429     }
 430   }
 431 }
 432
 433 .p-homepage-prapremiera__box__donate {
 434   background: #083F4D;
 435   border-radius: 7px;
 436   color: $color-white;
 437   display: flex;
 438   flex-direction: column;
 439   justify-content: space-between;
 440
 441     width: 100%;
 442     padding: 18px;
 443     margin-top: 20px;
 444     @include rwd($break-flow) {
 445         //width: 390px;
 446         padding: 34px;
 447         //margin-top: 0;
 448     }
 449
 450   p {
 451     margin-top: 0;
 452     font-style: italic;
 453     font-weight: $regular;
 454     @include font-size(20px);
 455     line-height: 150%;
 456
 457       margin-bottom: 20px;
 458       @include rwd($break-flow) {
 459           margin-bottom: 0;
 460           @include font-size(24px);
 461       }
 462
 463     strong {
 464       color: #92BD39;
 465       font-weight: $regular;
 466     }
 467   }
 468 }
 469
 470 .p-homepage__uptodate {
 471     margin-top: 30px;
 472     width: calc(100% + 32px);
 473     margin-left: -16px;
 474     @include rwd($break-flow) {
 475         width: 100%;
 476         margin-top: 60px;
 477         margin-bottom: 50px;
 478     }
 479 }
 480
 481 .p-homepage__uptodate__header {
 482   display: flex;
 483   justify-content: space-between;
 484   align-items: center;
 485   padding-bottom: 16px;
 486   border-bottom: 1px solid #007880;
 487   h3 {
 488     margin-top: 0;
 489     font-weight: $semibold;
 490     @include font-size(25px);
 491     line-height: 140%;
 492     letter-spacing: -0.01em;
 493     color: #474747;
 494
 495     @include rwd($break-flow) {
 496       @include font-size(31px);
 497     }
 498   }
 499   ul {
 500     margin: 0;
 501     padding: 0;
 502     list-style: none;
 503     display: flex;
 504     align-items: center;
 505     justify-content: center;
 506     li {
 507       margin-left: 15px;
 508       @include rwd($break-flow) {
 509         margin-left: 35px;
 510       }
 511       a {
 512         font-size: 0;
 513         color: #083F4D;
 514         display: flex;
 515         align-items: center;
 516         justify-content: center;
 517         .icon {
 518           @include font-size(40px);
 519         }
 520       }
 521     }
 522   }
 523 }
 524