Add audio bulk-download
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _article.scss
1 .l-article {
2   color: $color-gray;
3
4   h2 {}
5   h3 {
6     font-weight: 600;
7     font-size: 21.5px;
8     line-height: 140%;
9     border-bottom: 1px solid #D9D9D9;
10     padding-bottom: 15px;
11     padding-top: 5px;
12     letter-spacing: -0.01em;
13     color: #007880;
14   }
15   h4 {}
16   p {
17     font-weight: normal;
18     font-size: 18px;
19     line-height: 150%;
20     color: #474747;
21   }
22   h4 {
23     font-size: 18px;
24     line-height: 150%;
25     font-weight: bolder;
26   }
27
28   .toc ol {
29     padding: 0;
30     list-style: none;
31     margin-top: 0.25rem;
32     margin-bottom: 0;
33     margin-left: 1em;
34       font-size: 18px;
35       font-weight: normal;
36     li {
37       line-height: 150%;
38
39     }
40
41     a {
42         color: #007880;
43     }
44   }
45
46   video {
47     margin-bottom: 30px;
48   }
49
50   textarea[readonly] {
51     margin-bottom: 30px;
52     background: #052A33;
53     border-radius: 10px;
54     width: 100%;
55     min-height: 119px;
56     padding: 10px;
57     resize: none;
58     color: #92BD39;
59     font-family: 'Consolas', monospace;
60     font-style: normal;
61     font-weight: 400;
62     font-size: 16px;
63     line-height: 150%;
64   }
65 }
66
67 .l-article__cols {
68     @include rwd($break-flow) {
69         display: flex;
70         gap: 22px;
71     }
72
73   .left-column,
74   .right-column {
75       padding: 0 16px;
76
77       @include rwd($break-flow) {
78           width: 50%;
79       }
80
81     p {
82       margin-top: 0;
83       margin-bottom: 30px;
84       @include font-size(18px);
85       line-height: 150%;
86
87       strong, b {
88         font-weight: $semibold;
89       }
90       
91       a {
92         color: $color-primary;
93         &:hover {
94           text-decoration: underline;
95         }
96       }
97     }
98
99     h3 {
100       margin-top: 0;
101       margin-bottom: 30px;
102       border-bottom: 0;
103       padding-bottom: 0;
104       font-weight: $semibold;
105       @include font-size(25px);
106       line-height: 140%;
107       letter-spacing: -0.01em;
108       color: #474747;
109     }
110
111     h4 {
112       display: flex;
113       align-items: center;
114       font-weight: $semibold;
115       @include font-size(21px);
116       line-height: 140%;
117       letter-spacing: -0.01em;
118       color: #474747;
119
120       img {
121         margin-right: 15px;
122       }
123
124       & + p {
125         margin-top: 15px;
126         margin-bottom: 50px;
127       }
128
129       &:first-of-type {
130         margin-top: 0;
131       }
132     }
133
134     ul, ol {
135       li {
136         font-weight: $regular;
137         @include font-size(18px);
138         line-height: 150%;
139
140         strong, b {
141           font-weight: $semibold;
142         }
143
144         a {
145           color: $color-primary;
146           &:hover {
147             text-decoration: underline;
148           }
149         }
150       }
151     }
152
153     & > img {
154       max-width: 100%;
155       margin-bottom: 30px;
156     }
157   }
158 }
159
160 .l-article__title {
161   margin-top: 28px;
162   margin-bottom: 38px;
163   padding-bottom: 20px;
164   border-bottom: 1px solid #D9D9D9;
165   margin-left: 16px;
166   margin-right: 16px;
167   * {
168     margin-top: 0;
169     font-weight: $regular;
170     @include font-size(37px);
171     line-height: 130%;
172     letter-spacing: -0.01em;
173     color: #083F4D;
174   }
175 }
176
177
178 .l-article__overlay {
179   display: flex;
180   flex-direction: column;
181   overflow: hidden;
182   position: relative;
183   color: #474747;
184
185   &.is-active {
186     &:after {
187       content: "";
188       display: block;
189       position: absolute;
190       bottom: 0; left: 0;
191       width: 100%; height: 70px;
192       background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
193     }
194   }
195
196   &.is-clicked {
197     max-height: 100% !important;
198     &:after { display: none; }
199   }
200 }
201
202 .l-article__lead {
203   margin-top: 0;
204   font-weight: $light;
205   @include font-size(24px);
206   font-family: $secondary-font;
207   line-height: 166%;
208 }
209
210 .l-article__read-more {
211   border: 0;
212   padding: 0;
213   color: #007880;
214   background-color: transparent;
215   cursor: pointer;
216   outline: 0;
217   margin-top: 25px;
218   &:hover {
219     text-decoration: underline;
220   }
221 }
222
223 .infopage-blog {
224     padding: 0;
225     list-style: none;
226     li {
227         margin-bottom: .7em;
228     }
229 }
230
231
232 .abstract {
233     h2 {
234         font-size: 1.1em;
235         margin-top: 1.5em;
236         margin-bottom: 0;
237         font-weight: bold;
238     }
239     em.author-emphasis {
240         font-weight: bold;
241         font-style: normal;
242     }
243 }