fef1cf98acdf7de9af78f898b8dab46795e71bd7
[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
85 .l-author__photo {
86   margin: 0;
87   margin-right: 50px;
88   img {
89     border-radius: 10px;
90     overflow: hidden;
91   }
92   figcaption {
93     margin-top: 5px;
94     font-weight: normal;
95     font-size: 15px;
96     line-height: 160%;
97     color: #808080;
98   }
99 }
100
101 .l-author__quotes {
102   background: #E1F1F2;
103   border-radius: 10px;
104   padding: 48px 32px 40px 32px;
105   position: relative;
106
107   &:before {
108     display: flex;
109     align-items: center;
110     justify-content: center;
111     content: $icon-quote;
112     top: 0;
113     transform: translateY(-50%);
114
115     font-family: '#{$icomoon-font-family}' !important;
116     speak: never;
117     font-style: normal;
118     font-weight: normal;
119     font-variant: normal;
120     text-transform: none;
121     line-height: 1;
122
123     /* Better Font Rendering =========== */
124     -webkit-font-smoothing: antialiased;
125     -moz-osx-font-smoothing: grayscale;
126
127     color: white;
128     background-color: #007880;
129     font-size: 33px;
130     width: 60px;
131     height: 60px;
132     border-radius: 50%;
133     position: absolute;
134   }
135 }
136
137 .l-author__quotes__slider {
138   display: flex;
139   div {
140     em {
141       font-style: italic;
142       font-weight: 300;
143       font-size: 28px;
144       line-height: 140%;
145       letter-spacing: -0.02em;
146       color: #083F4D;
147     }
148     p {
149       font-style: normal;
150       font-weight: normal;
151       font-size: 15px;
152       line-height: 160%;
153       color: #007880;
154     }
155   }
156 }
157
158 .l-author__quotes__slider__item {
159   max-width: 336px;
160   outline: 0;
161 }