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