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

   1 body {
   2     //width: 100%;
   3 }
   4
   5 .l-navigation {
   6   --focus-ring: #fff;
   7
   8   max-width: 100%;
   9   margin: 0 auto;
  10   background-color: #083F4D;
  11
  12   padding: 3px 0;
  13   display: flex;
  14   align-items: center;
  15   justify-content: space-between;
  16   flex-direction: column;
  17
  18   @include rwd($break-menu) {
  19       padding: 12px 0;
  20   }
  21
  22   a:hover {
  23       text-decoration: none;
  24   }
  25
  26   .l-container {
  27       position: relative;
  28     display: flex;
  29     align-items: center;
  30     justify-content: space-between;
  31   }
  32 }
  33
  34 .l-navigation__logo {
  35     display: flex;
  36     position: relative;
  37     height: 44px;
  38     width: 153px;
  39     flex-shrink: 0;
  40     overflow: hidden;
  41     transition: .5s width;
  42
  43     @include rwd($break-menu) {
  44         width: 230px;
  45     }
  46
  47     &.search-active {
  48         width: 30px;
  49         @include rwd($break-menu) {
  50             width: 230px;
  51         }
  52     }
  53
  54     img {
  55         width: 153px;
  56         @include rwd($break-menu) {
  57             width: 230px;
  58         }
  59     }
  60 }
  61
  62 .l-navigation__button {
  63   appearance: none;
  64   border: 0;
  65   background: 0;
  66   padding: 0;
  67   margin: 0;
  68   position: relative;
  69 }
  70
  71 .l-naviagion__search {
  72     width: 60%;
  73     max-width: 580px;
  74     margin-left: 20px;
  75     margin-right: 20px;
  76     flex-grow: 1;
  77
  78     @include rwd($break-menu) {
  79         margin-left: 60px;
  80         margin-right: auto;
  81     }
  82
  83   input {
  84     font-family: $base-font;
  85
  86     font-size: 14px;
  87     font-style: italic;
  88     border: 0;
  89     padding: 10px 20px;
  90     border-radius: 52px;
  91     width: 100%;
  92     max-width: 580px;
  93
  94     @include rwd($break-menu) {
  95         font-size: 18px;
  96     }
  97   }
  98 }
  99
 100 .l-navigation__actions {
 101   display: flex;
 102   align-items: center;
 103   justify-content: center;
 104     position: relative;
 105     height: 44px;
 106
 107   .user-liked {
 108     color: #85C7CC;
 109     font-size: 30px;
 110     line-height: 30px;
 111     margin-right: 25px;
 112   }
 113
 114   .l-navigation__user-actions {
 115       display: none;
 116       align-items: center;
 117
 118       @include rwd($break-menu) {
 119           display: flex;
 120           margin-left: 20px;
 121       }
 122       .l-navigation__login {
 123           color: #74BDC2;
 124           margin-right: 20px;
 125           white-space: nowrap;
 126
 127           a {
 128               color: white;
 129           }
 130       }
 131
 132       .menubar-donate {
 133           color: #fff;
 134           background: #c92834;
 135           padding: 9px 20px 11px;
 136           font-weight: 600;
 137           margin-right: 20px;
 138           border-radius: 15px;
 139       }
 140   }
 141
 142     .user {
 143         margin-right: 25px;
 144         background: none;
 145         border: none;
 146         padding: 0;
 147     }
 148
 149 }
 150
 151 .l-change-pop {
 152   align-items: center;
 153   max-width: 1140px;
 154   border-radius: 10px;
 155   padding: 10px 50px;
 156   width: auto;
 157
 158   margin-top: 18px;
 159   margin-bottom: 18px;
 160   background-color: #FBC40F;
 161   position: relative;
 162   display: none;
 163
 164   margin-left: 16px;
 165   margin-right: 16px;
 166   flex-direction: column;
 167   column-gap: 48px;
 168
 169   @include rwd($break-flow) {
 170       flex-direction: row;
 171   }
 172
 173   &.show {
 174     display: flex;
 175   }
 176
 177   h3 {
 178     font-style: italic;
 179     font-weight: normal;
 180     font-size: 32px;
 181     line-height: 100%;
 182     letter-spacing: -0.02em;
 183     color: #333333;
 184     margin: 20px 0;
 185     min-width: 189px;
 186   }
 187
 188   p {
 189     font-weight: normal;
 190     font-size: 15px;
 191     line-height: 150%;
 192     color: #333333;
 193     margin: 0;
 194     max-width: 590px;
 195   }
 196 }
 197
 198 .l-navigation__menu {
 199     margin: 0;
 200     padding: 0;
 201     border: 0;
 202     max-width: none;
 203     max-height: none;
 204     width: 100%;
 205     height: 100%;
 206     flex-direction: column;
 207     background-color: #083F4D;
 208     opacity: 0;
 209     transition: opacity 350ms $ease-out;
 210     // Gdy
 211     // https://caniuse.com/wf-display-animation, https://caniuse.com/wf-overlay
 212     //   display 350ms allow-discrete,
 213     //   overlay 350ms allow-discrete;
 214
 215     &[open] {
 216         display: flex;
 217         opacity: 1;
 218     }
 219     &:not([open]) {
 220         pointer-events: none;
 221     }
 222     // https://caniuse.com/wf-display-animation, https://caniuse.com/wf-overlay
 223     &.is-closing {
 224         opacity: 0;
 225         pointer-events: none;
 226     }
 227
 228     .l-navigation__menu__top {
 229         padding: 3px 0;
 230         @include rwd($break-menu) {
 231             padding: 12px 0;
 232         }
 233     }
 234     .scrollable {
 235         height: 100%;
 236         overflow-y: auto;
 237         padding-bottom: 30px;
 238
 239         .l-container {
 240             display: flex;
 241             flex-direction: column;
 242         }
 243     }
 244
 245   .l-navigation__user-bar {
 246       width: 100%;
 247       height: 50px;
 248       border-width: 1px 0;
 249       border-color: #007880;
 250       border-style: solid;
 251       display: flex;
 252       flex-direction: row;
 253       justify-content: end;
 254       align-items: center;
 255
 256       @include rwd($break-menu) {
 257           display: none;
 258       }
 259
 260       .l-navigation__user-actions {
 261           display: flex;
 262           align-items: center;
 263           gap: 25px;
 264           color: #85C7CC;
 265           a {
 266               color: white;
 267               i {
 268                   color: #85C7CC;
 269                   font-size: 30px;
 270               }
 271           }
 272           .c-lang {
 273               display: block;
 274               left: 16px;
 275           }
 276
 277           .menubar-donate {
 278               display: none;
 279           }
 280       }
 281   }
 282 }
 283
 284 body:has(dialog[open]) {
 285     overflow: hidden;
 286 }
 287
 288 @starting-style {
 289     .l-navigation__menu[open] {
 290         opacity: 0;
 291     }
 292 }
 293 @media (prefers-reduced-motion: reduce) {
 294   .l-navigation__menu { transition: none; }
 295 }
 296
 297 .l-navigation__menu__blocks {
 298     position: relative;
 299     display: flex;
 300     width: 100%;
 301     justify-content: space-between;
 302     column-gap: 10%;
 303     row-gap: 30px;
 304     flex-wrap: wrap;
 305     padding-bottom: 80px;
 306
 307     @include rwd($break-menu) {
 308         display: block;
 309         padding-bottom: 0;
 310     }
 311 }
 312
 313 .l-navigation__menu__links {
 314     display: contents;
 315   width: 100%;
 316   justify-content: space-between;
 317   column-gap: 10%;
 318   row-gap: 30px;
 319   flex-wrap: wrap;
 320
 321   @include rwd($break-menu) {
 322       display: flex;
 323       flex-wrap: nowrap;
 324       gap: 3%;
 325   }
 326
 327   .l-navigation__menu__group {
 328       width: 45%;
 329
 330     @include rwd($break-menu) {
 331       width: 100%;
 332       max-width: 100%;
 333       margin-bottom: 20px;
 334     }
 335
 336     h2 {
 337         margin: 16px 0 0 0;
 338         color: #92BD39;
 339         font-weight: $semibold;
 340         @include font-size(21px);
 341         line-height: 140%;
 342         letter-spacing: -0.01em;
 343     }
 344
 345     ul {
 346         margin: 0;
 347         padding: 0;
 348         list-style: none;
 349     li {
 350       font-weight: $regular;
 351       font-size: 16px;
 352       line-height: 150%;
 353       padding-top: 16px;
 354
 355       @include rwd($break-menu) {
 356           font-size: 18px;
 357           line-height: 115%;
 358       }
 359
 360       a {
 361         color: $color-white;
 362         &:hover {
 363           text-decoration: underline;
 364         }
 365
 366         em {
 367             font-style: normal;
 368             color: #FFA500;
 369             font-weight: 600;
 370         }
 371       }
 372
 373       hr {
 374         width: 34px;
 375         height: 1px;
 376         background: #007880;
 377         margin-left: 0;
 378         border: 0;
 379       }
 380     }
 381     }
 382   }
 383 }
 384
 385 .l-navigation__menu__info {
 386   display: flex;
 387   justify-content: space-between;
 388   width: 45%;
 389   padding-top: 16px;
 390
 391   @include rwd($break-menu) {
 392       width: 100%;
 393       padding-top: 58px;
 394       align-items: flex-end;
 395   }
 396
 397 }
 398
 399 .l-navigation__menu__book {
 400     display: flex;
 401     flex-direction: column;
 402     justify-content: space-between;
 403     @include rwd($break-menu) {
 404         width: 60%;
 405     }
 406
 407   p {
 408     color: $color-white;
 409     @include font-size(21px);
 410     line-height: 140%;
 411     strong {
 412       color: #92BD39;
 413       letter-spacing: -0.01em;
 414       font-weight: $semibold;
 415     }
 416   }
 417
 418   .button {
 419         display: inline-block;
 420         font-size: 16px;
 421         font-weight: 700;
 422         padding: 0 20px;
 423         line-height: 38px;
 424         text-align: center;
 425
 426         /* green 700 */
 427         background: #92BD39;
 428         color: #083F4D;
 429         border-radius: 6px;
 430
 431         transition: background-color 150ms;
 432
 433         @include rwd($break-menu) {
 434             width: auto;
 435             min-width: 212px;
 436         }
 437
 438         &:hover {
 439             background-color: #FBC40F;
 440         }
 441     }
 442 }
 443
 444 .l-navigation__menu__book__header {
 445     display: flex;
 446     justify-content: space-between;
 447     flex-direction: column;
 448     row-gap: 18px;
 449
 450     @include rwd($break-menu) {
 451         flex-direction: row;
 452         align-items: center;
 453     }
 454
 455     p {
 456         margin: 0;
 457
 458         &.korona {
 459             &:before {
 460                 content: url('../images/korona.svg');
 461                 width: 21px;
 462                 margin-right: -21px;
 463                 position: relative;
 464                 top: -10px;
 465                 left: -3px;
 466             }
 467         }
 468     }
 469 }
 470
 471
 472 .l-navigation__menu__book__info {
 473   display: flex;
 474   margin-top: 20px;
 475   align-items: flex-start;
 476   padding: 12px;
 477   background-color: $color-white;
 478   border-radius: 6px;
 479   color: #808080;
 480
 481   flex-direction: column;
 482   @include rwd($break-menu) {
 483       flex-direction: row;
 484   }
 485
 486   img {
 487     margin-right: 10px;
 488         width: 42px;
 489         height: 60px;
 490   }
 491
 492   h3 {
 493       display: flex;
 494       margin: 0;
 495       font-weight: $regular;
 496       @include font-size(15px);
 497       line-height: 120%;
 498       @include rwd($break-menu) {
 499         width: 203px;
 500       }
 501       strong {
 502           display: block;
 503           font-weight: $semibold;
 504           @include font-size(18px);
 505           line-height: 130%;
 506       }
 507   }
 508
 509   p {
 510     margin: 0;
 511     font-weight: $regular;
 512     @include font-size(15px);
 513     line-height: 130%;
 514     color: #808080;
 515
 516       @include rwd($break-menu) {
 517           width: 427px;
 518       }
 519   }
 520 }
 521
 522 .l-navigation__menu__social {
 523     position: absolute;
 524     left: 0;
 525     right: 0;
 526     bottom: 0;
 527
 528     @include rwd($break-menu) {
 529         position: static;
 530     }
 531
 532
 533   ul {
 534       display: flex;
 535       justify-content: space-between;
 536     list-style: none;
 537     padding: 0;
 538     margin: 0;
 539     li {
 540       &:not(:last-child) {
 541         margin-right: 36px;
 542       }
 543       a {
 544         color: $color-white;
 545         &:hover {
 546           color: #92BD39;
 547         }
 548       }
 549       .icon {
 550         @include font-size(28px);
 551       }
 552     }
 553   }
 554 }