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

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