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