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: auto;
 152
 153   margin-top: 18px;
 154   margin-bottom: 18px;
 155   background-color: #FBC40F;
 156   position: relative;
 157   display: none;
 158
 159   margin-left: 16px;
 160   margin-right: 16px;
 161   flex-direction: column;
 162   column-gap: 48px;
 163
 164   @include rwd($break-flow) {
 165       flex-direction: row;
 166   }
 167
 168   &.show {
 169     display: flex;
 170   }
 171
 172   h3 {
 173     font-style: italic;
 174     font-weight: normal;
 175     font-size: 32px;
 176     line-height: 100%;
 177     letter-spacing: -0.02em;
 178     color: #333333;
 179     margin: 20px 0;
 180     min-width: 189px;
 181   }
 182
 183   p {
 184     font-weight: normal;
 185     font-size: 15px;
 186     line-height: 150%;
 187     color: #333333;
 188     margin: 0;
 189     max-width: 590px;
 190   }
 191 }
 192
 193 .l-change-pop__close {
 194   border: 0;
 195   background: transparent;
 196   color: #333333;
 197   outline: 0;
 198   position: absolute;
 199   right: 26px;
 200   top: 0;
 201   bottom: 0;
 202   margin: auto;
 203   cursor: pointer;
 204 }
 205
 206 .l-navigation__menu {
 207   position: fixed;
 208   top: 0; left: 0;
 209   width: 100%; height: 100%;
 210   background-color: #083F4D;
 211   z-index: $master-layer;
 212   padding-top: 50px;
 213   opacity: 0;
 214   pointer-events: none;
 215   transition: opacity 350ms $ease-out;
 216
 217   @include rwd($break-menu) {
 218       padding-top: 93px;
 219   }
 220
 221   .l-container {
 222     display: flex;
 223     flex-direction: column;
 224   }
 225
 226   .l-navigation__user-bar {
 227       width: 100%;
 228       height: 50px;
 229       border-width: 1px 0;
 230       border-color: #007880;
 231       border-style: solid;
 232       display: flex;
 233       flex-direction: row;
 234       justify-content: end;
 235       align-items: center;
 236
 237       @include rwd($break-menu) {
 238           display: none;
 239       }
 240
 241       .l-navigation__user-actions {
 242           display: flex;
 243           align-items: center;
 244           gap: 25px;
 245           color: #85C7CC;
 246           a {
 247               color: white;
 248               i {
 249                   color: #85C7CC;
 250                   font-size: 30px;
 251               }
 252           }
 253       }
 254   }
 255 }
 256
 257
 258 .l-navigation__menu__blocks {
 259     position: relative;
 260     display: flex;
 261     width: 100%;
 262     justify-content: space-between;
 263     column-gap: 10%;
 264     row-gap: 30px;
 265     flex-wrap: wrap;
 266     padding-bottom: 80px;
 267
 268     @include rwd($break-menu) {
 269         display: block;
 270         padding-bottom: 0;
 271     }
 272 }
 273
 274 .l-navigation__menu__links {
 275     display: contents;
 276   width: 100%;
 277   justify-content: space-between;
 278   column-gap: 10%;
 279   row-gap: 30px;
 280   flex-wrap: wrap;
 281
 282   @include rwd($break-menu) {
 283       display: flex;
 284       flex-wrap: nowrap;
 285       gap: 3%;
 286   }
 287
 288   ul {
 289     margin: 0;
 290     padding: 0;
 291     list-style: none;
 292     //max-width: 212px;
 293     width: 45%;
 294
 295     @include rwd($break-menu) {
 296       width: 100%;
 297       max-width: 100%;
 298       margin-bottom: 20px;
 299     }
 300
 301     li {
 302       font-weight: $regular;
 303       font-size: 16px;
 304       line-height: 150%;
 305       padding-top: 16px;
 306
 307       @include rwd($break-menu) {
 308           font-size: 18px;
 309           line-height: 115%;
 310       }
 311
 312       strong {
 313         color: #92BD39;
 314         font-weight: $semibold;
 315         @include font-size(21px);
 316         line-height: 140%;
 317         letter-spacing: -0.01em;
 318       }
 319
 320       a {
 321         color: $color-white;
 322         &:hover {
 323           text-decoration: underline;
 324         }
 325       }
 326
 327       hr {
 328         width: 34px;
 329         height: 1px;
 330         background: #007880;
 331         margin-left: 0;
 332         border: 0;
 333       }
 334     }
 335   }
 336 }
 337
 338 .l-navigation__menu__info {
 339   display: flex;
 340   justify-content: space-between;
 341   width: 45%;
 342   padding-top: 16px;
 343
 344   @include rwd($break-menu) {
 345       width: 100%;
 346       padding-top: 58px;
 347       align-items: flex-end;
 348   }
 349
 350 }
 351
 352 .l-navigation__menu__book {
 353     display: flex;
 354     flex-direction: column;
 355     justify-content: space-between;
 356
 357   p {
 358     color: $color-white;
 359     @include font-size(21px);
 360     line-height: 140%;
 361     strong {
 362       color: #92BD39;
 363       letter-spacing: -0.01em;
 364       font-weight: $semibold;
 365     }
 366   }
 367
 368   .button {
 369         display: inline-block;
 370         font-size: 16px;
 371         font-weight: 700;
 372         padding: 0 20px;
 373         line-height: 38px;
 374         text-align: center;
 375
 376         /* green 700 */
 377         background: #92BD39;
 378         color: #083F4D;
 379         border-radius: 6px;
 380
 381         transition: background-color 150ms;
 382
 383         @include rwd($break-menu) {
 384             width: auto;
 385             min-width: 212px;
 386         }
 387
 388         &:hover {
 389             background-color: #FBC40F;
 390         }
 391     }
 392 }
 393
 394 .l-navigation__menu__book__header {
 395     display: flex;
 396     justify-content: space-between;
 397     flex-direction: column;
 398     row-gap: 18px;
 399
 400     @include rwd($break-menu) {
 401         flex-direction: row;
 402         align-items: center;
 403     }
 404
 405     p {
 406         margin: 0;
 407
 408         &.korona {
 409             &:before {
 410                 content: url('../images/korona.svg');
 411                 width: 21px;
 412                 margin-right: -21px;
 413                 position: relative;
 414                 top: -10px;
 415                 left: -3px;
 416             }
 417         }
 418     }
 419 }
 420
 421
 422 .l-navigation__menu__book__info {
 423   display: flex;
 424   margin-top: 20px;
 425   align-items: flex-start;
 426   padding: 12px;
 427   background-color: $color-white;
 428   border-radius: 6px;
 429   color: #808080;
 430
 431   flex-direction: column;
 432   @include rwd($break-menu) {
 433       flex-direction: row;
 434   }
 435
 436   img {
 437     margin-right: 10px;
 438         width: 42px;
 439         height: 60px;
 440   }
 441
 442   h3 {
 443       display: flex;
 444       margin: 0;
 445       font-weight: $regular;
 446       @include font-size(15px);
 447       line-height: 120%;
 448       @include rwd($break-menu) {
 449         width: 203px;
 450       }
 451       strong {
 452           display: block;
 453           font-weight: $semibold;
 454           @include font-size(18px);
 455           line-height: 130%;
 456       }
 457   }
 458
 459   p {
 460     margin: 0;
 461     width: 427px;
 462     font-weight: $regular;
 463     @include font-size(15px);
 464     line-height: 130%;
 465     color: #808080;
 466   }
 467 }
 468
 469 .l-navigation__menu__social {
 470     position: absolute;
 471     left: 0;
 472     right: 0;
 473     bottom: 0;
 474
 475     @include rwd($break-menu) {
 476         position: static;
 477     }
 478
 479
 480   ul {
 481       display: flex;
 482       justify-content: space-between;
 483     list-style: none;
 484     padding: 0;
 485     margin: 0;
 486     li {
 487       &:not(:last-child) {
 488         margin-right: 36px;
 489       }
 490       a {
 491         color: $color-white;
 492         &:hover {
 493           color: #92BD39;
 494         }
 495       }
 496       .icon {
 497         @include font-size(28px);
 498       }
 499     }
 500   }
 501 }