Audiobook player UI updated
[wolnelektury.git] / src / wolnelektury / static / 2021 / css / layout / _header.scss
1 .l-header {
2   max-width: 1140px;
3   margin: 0 auto;
4   display: flex;
5   align-items: center;
6   justify-content: space-between;
7   padding: 40px 36px;
8   border-bottom: 4px solid $color-light-gray;
9 }
10
11 .l-header__img {
12   margin: 0;
13   font-size: 0;
14   width: 200px;
15   height: 200px;
16   overflow: hidden;
17   display: flex;
18   align-items: center;
19   justify-content: center;
20   border-radius: 50%;
21
22   img {
23     width: 200px;
24     height: auto;
25   }
26 }
27
28 .l-header__content {
29   display: flex;
30   flex-direction: column;
31   justify-content: center;
32   margin-left: 58px;
33   margin-right: auto;
34
35   p {
36     letter-spacing: -0.02em;
37     font-weight: $bold;
38     @include font-size(32px);
39     line-height: 100%;
40     color: $color-primary;
41     margin: 0;
42   }
43
44   h1 {
45     letter-spacing: -0.02em;
46     color: $color-primary;
47     font-weight: $bold;
48     @include font-size(64px);
49     line-height: 100%;
50     margin: 0;
51   }
52
53   ul {
54     letter-spacing: -0.02em;
55     color: $color-secondary;
56     font-weight: $bold;
57     @include font-size(24px);
58     list-style: none;
59     line-height: 100%;
60     display: flex;
61     padding: 0;
62     margin: 0;
63
64     li {
65       margin-right: 10px;
66       &:not(:last-child):after { content: "/";margin-left: 10px; }
67     }
68   }
69 }
70
71 .l-header__actions {
72   .l-button {
73     appearance: none;
74     border: 0;
75     padding: 0;
76     background: transparent;
77     cursor: pointer;
78   }
79 }