Merge remote-tracking branch 'zawadzki/new-design'
[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 }
66
67 .l-author__photo {
68   margin: 0;
69   margin-right: 50px;
70   img {
71     border-radius: 10px;
72     overflow: hidden;
73   }
74   figcaption {
75     margin-top: 5px;
76     font-weight: normal;
77     font-size: 15px;
78     line-height: 160%;
79     color: #808080;
80   }
81 }
82
83 .l-author__quotes {
84   background: #E1F1F2;
85   border-radius: 10px;
86   padding: 48px 32px 40px 32px;
87   position: relative;
88
89   &:before {
90     display: flex;
91     align-items: center;
92     justify-content: center;
93     content: $icon-quote;
94     top: 0;
95     transform: translateY(-50%);
96
97     font-family: '#{$icomoon-font-family}' !important;
98     speak: never;
99     font-style: normal;
100     font-weight: normal;
101     font-variant: normal;
102     text-transform: none;
103     line-height: 1;
104
105     /* Better Font Rendering =========== */
106     -webkit-font-smoothing: antialiased;
107     -moz-osx-font-smoothing: grayscale;
108
109     color: white;
110     background-color: #007880;
111     font-size: 33px;
112     width: 60px;
113     height: 60px;
114     border-radius: 50%;
115     position: absolute;
116   }
117 }
118
119 .l-author__quotes__slider {
120   display: flex;
121   div {
122     em {
123       font-style: italic;
124       font-weight: 300;
125       font-size: 28px;
126       line-height: 140%;
127       letter-spacing: -0.02em;
128       color: #083F4D;
129     }
130     p {
131       font-style: normal;
132       font-weight: normal;
133       font-size: 15px;
134       line-height: 160%;
135       color: #007880;
136     }
137   }
138 }
139
140 .l-author__quotes__slider__item {
141   max-width: 336px;
142   outline: 0;
143 }