New menu.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _author.scss
1 .l-author {
2   width: 100%;
3   display: flex;
4   padding: 50px 0;
5   justify-content: space-between;
6
7   h2 {
8     margin: 0;
9     font-weight: 600;
10     font-size: 21.5px;
11     line-height: 140%;
12     border-bottom: 1px solid #D9D9D9;
13     padding-bottom: 15px;
14     padding-top: 5px;
15     letter-spacing: -0.01em;
16     color: #007880;
17     margin-bottom: 23px;
18   }
19
20   .row {
21     width: 100%;
22
23     &:nth-child(1) {
24
25       div {
26         display: flex;
27       }
28
29       h2 {
30         width: 100%;
31       }
32
33       .l-author__photo {
34         width: 100%;
35         max-width: 238px;
36       }
37     }
38
39     &:nth-child(2) {
40       max-width: 415px;
41       padding-top: 48px;
42       padding-left: 32px;
43     }
44   }
45 }
46
47 .l-author__info {
48   min-width: 364px;
49
50   h3 {
51     margin: 0;
52     font-weight: 600;
53     font-size: 31px;
54     line-height: 140%;
55     letter-spacing: -0.01em;
56     color: #007880;
57   }
58   p {
59     margin-top: 20px;
60     font-weight: normal;
61     font-size: 18px;
62     line-height: 150%;
63     color: #474747;
64   }
65   h4 {
66     font-size: 18px;
67     line-height: 150%;
68     font-weight: bolder;
69     color: #474747;
70   }
71
72   ul {
73     padding: 0;
74     list-style: none;
75     margin-top: 0.25rem;
76     margin-bottom: 0;
77     li {
78       font-size: 18px;
79       line-height: 150%;
80       font-weight: normal;
81     }
82   }
83
84   dt {
85       float: left;
86       clear: left;
87       margin-right: .4em;
88       font-weight: normal;
89       font-size: 18px;
90       line-height: 150%;
91   }
92   dd {
93       margin-left: 0;
94       font-weight: normal;
95       font-size: 18px;
96       line-height: 150%;
97   }
98 }
99
100 .l-author__photo {
101   margin: 0;
102   margin-right: 50px;
103   img {
104     border-radius: 10px;
105     overflow: hidden;
106   }
107   figcaption {
108     margin-top: 5px;
109     font-weight: normal;
110     font-size: 15px;
111     line-height: 160%;
112     color: #808080;
113   }
114 }
115
116 .l-author__quotes {
117   background: #E1F1F2;
118   border-radius: 10px;
119   padding: 48px 32px 40px 32px;
120   position: relative;
121
122   &:before {
123     display: flex;
124     align-items: center;
125     justify-content: center;
126     content: $icon-quote;
127     top: 0;
128     transform: translateY(-50%);
129
130     font-family: '#{$icomoon-font-family}' !important;
131     speak: never;
132     font-style: normal;
133     font-weight: normal;
134     font-variant: normal;
135     text-transform: none;
136     line-height: 1;
137
138     /* Better Font Rendering =========== */
139     -webkit-font-smoothing: antialiased;
140     -moz-osx-font-smoothing: grayscale;
141
142     color: white;
143     background-color: #007880;
144     font-size: 33px;
145     width: 60px;
146     height: 60px;
147     border-radius: 50%;
148     position: absolute;
149   }
150 }
151
152 .l-author__quotes__slider {
153   display: flex;
154   div {
155     em {
156       font-style: italic;
157       font-weight: 300;
158       font-size: 28px;
159       line-height: 140%;
160       letter-spacing: -0.02em;
161       color: #083F4D;
162
163       p {
164           font-size: inherit;
165           line-height: inherit;
166           margin-top: 0;
167       }
168     }
169     > p {
170       font-style: normal;
171       font-weight: normal;
172       font-size: 15px;
173       line-height: 160%;
174       color: #007880;
175     }
176   }
177 }
178
179 .l-author__quotes__slider__item {
180   max-width: 336px;
181   outline: 0;
182 }
183
184
185 .l-author__header {
186   display: flex;
187   align-items: center;
188   width: 100%;
189   border-bottom: 1px solid #D9D9D9;
190   padding-bottom: 22px;
191
192   figure {
193     padding: 0;
194     font-size: 0;
195     width: 40px;
196     height: 40px;
197     overflow: hidden;
198     display: flex;
199     align-items: center;
200     justify-content: center;
201     border-radius: 50%;
202     margin: 0 12px 0 0;
203
204     img {
205       max-width: 100%;
206     }
207   }
208
209   h1 {
210     font-weight: $bold;
211     font-size: 37px;
212     line-height: 130%;
213     letter-spacing: -0.01em;
214     color: #083F4D;
215     margin: 0;
216
217     span {
218       font-weight: $regular;
219     }
220   }
221 }