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