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