Missing logos.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _books.scss
1 .l-books__wrapper {
2   margin-top: 27px;
3   width: 100%;
4   background-color: #F2F2F2;
5   padding-top: 38px;
6   position: relative;
7   padding-bottom: 80px;
8
9   h2 {
10     font-weight: 600;
11     font-size: 31px;
12     line-height: 140%;
13     letter-spacing: -0.01em;
14     color: #474747;
15     margin-top: 0;
16   }
17 }
18
19 .l-books {
20   display: flex;
21   flex-wrap: wrap;
22   margin-top: 36px;
23 }
24
25 .l-books__item {
26   background: #FFFFFF;
27   border-radius: 9px;
28   padding: 21px;
29   box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
30   transition: all $ease-dynamic 350ms;
31   outline: 0;
32   margin: 5px;
33
34   &.l-books__item--placeholder {
35     opacity: 0;
36     visibility: hidden;
37   }
38
39   & * {
40     outline: 0;
41   }
42
43   &:hover {
44     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
45   }
46
47   &.l-books__item--link {
48     width: 212px;
49     height: 350px;
50
51     background-color: #007880;
52
53     font-weight: 600;
54     font-size: 21.5px;
55     line-height: 140%;
56     letter-spacing: -0.01em;
57     color: #FFFFFF;
58
59     display: flex;
60     flex-direction: column;
61     justify-content: space-between;
62
63     .icon-link {
64       margin-left: auto;
65       margin-right: 0;
66       &:hover {
67         text-decoration: none;
68       }
69     }
70
71     a {
72       &:hover {
73         color: white;
74       }
75     }
76   }
77
78   a {
79       color: currentColor;
80     &:hover {
81         text-decoration: underline;
82         color: $color-primary;
83     }
84   }
85
86   h2 {
87     font-weight: normal;
88     font-size: 18px;
89     line-height: 150%;
90     color: #474747;
91     margin: 0;
92   }
93   h3 {
94     font-weight: normal;
95     font-size: 15px;
96     line-height: 160%;
97     color: #808080;
98     margin: 0;
99   }
100   .other-info {
101       display: none;
102   }
103 }
104
105 .l-books__item__img {
106   font-size: 0;
107   margin: 0 0 11px;
108
109   img {
110       width: 100%;
111       @include rwd($break3) {
112           width: 173px;
113       }
114   }
115 }
116
117 .l-books__item__actions {
118   display: flex;
119   align-content: center;
120   justify-content: flex-start;
121   margin-bottom: 5px;
122
123   .icon {
124     color: #083F4D;
125     margin-right: 10px;
126     @include font-size(16px);
127
128     &.icon-like,
129     &.icon-liked {
130       color: #FF4C54;
131       @include font-size(19px);
132       margin-right: 0;
133       margin-left: auto;
134     }
135
136     &:hover {
137       text-decoration: none;
138     }
139   }
140 }
141
142 .l-books__header {
143   width: 100%;
144   display: flex;
145   gap: 16px;
146   flex-direction: column;
147   margin-top: 34px;
148   align-items: center;
149   justify-content: space-between;
150   align-items: stretch;
151
152   @include rwd($break-flow) {
153       flex-direction: row;
154   }
155 }
156
157 .l-books__input {
158   position: relative;
159   display: flex;
160   align-content: center;
161   @include rwd($break-flow) {
162       width: 560px;
163   }
164
165   .icon {
166     @include font-size(22px);
167     color: #083F4D;
168     position: absolute;
169     margin: auto;
170     top: 0;
171     bottom: 0;
172     left: 19px;
173     display: flex;
174     align-items: center;
175     justify-content: center;
176     pointer-events: none;
177   }
178
179   input {
180     font-family: $base-font;
181     font-size: 18px;
182     font-style: italic;
183     padding: 10px 20px 10px 50px;
184     border-radius: 52px;
185     border: 1px solid #D9D9D9;
186     width: 100%;
187     outline: 0;
188     transition: border $ease-out 350ms;
189
190     @input rwd($break-flow) {
191         max-width: 580px;
192     }
193     
194     &:focus {
195       border-color: #007880;
196     }
197   }
198 }
199
200 .l-books__sorting {
201   display: flex;
202   align-content: center;
203   align-items: center;
204   justify-content: center;
205
206   span {
207     font-weight: $bold;
208     @include font-size(18px);
209     line-height: 150%;
210     color: #083F4D;
211   }
212
213   div {
214     display: flex;
215     align-content: center;
216     flex-direction: column;
217
218     @include rwd($break-flow) {
219         flex-direction: row;
220     }
221
222     select {
223         margin-left: 30px;
224         @include rwd($break-flow) {
225             display: none;
226         }
227     }
228     
229     button {
230       display: none;
231       border: 0;
232       padding: 0;
233       margin: 0 0 0 30px;
234       background-color: transparent;
235       outline: 0;
236       font-weight: $regular;
237       @include font-size(18px);
238       line-height: 150%;
239       color: #808080;
240       cursor: pointer;
241
242       @include rwd($break-flow) {
243           display: block;
244       }
245       
246       &.is-active {
247         color: #083F4D;
248         font-weight: $semibold;
249       }
250     }
251   }
252 }
253
254 .l-books__grid {
255   display: flex;
256   flex-wrap: wrap;
257   margin-top: 34px;
258
259   .l-books__item {
260     border: 1px solid #D9D9D9;
261     margin-bottom: 17px;
262
263     &:nth-child(5n + 5) {
264       margin-right: 0;
265     }
266   }
267 }
268
269 .l-books__col {
270   display: flex;
271   flex-direction: column;
272   margin-top: 34px;
273
274   .l-books__item {
275       width: calc(100% - 10px);
276     border: 1px solid #D9D9D9;
277     margin-bottom: 17px;
278     display: flex;
279     position: relative;
280     @include rwd($break-flow) {
281         width: 705px;
282     }
283
284     .l-books__item__img {
285         margin-bottom: 0;
286     }
287
288     .l-books__item__actions {
289         margin-top: 16px;
290         @include rwd($break-flow) {
291             position: absolute;
292             top: 21px;
293             left: auto;
294             right: 11px;
295         }
296     }
297   }
298 }
299
300 .l-books__item__content {
301     padding-left: 16px;
302     @include rwd($break-flow) {
303         padding-left: 40px;
304     }
305
306   h2 {
307     font-weight: $semibold;
308     @include font-size(21px);
309     line-height: 140%;
310     letter-spacing: -0.01em;
311   }
312
313   p {
314     max-width: 390px;
315     margin-top: 20px;
316     font-weight: $regular;
317     @include font-size(18px);
318     line-height: 150%;
319     color: #474747;
320   }
321
322   & > a {
323     display: block;
324     margin-top: 20px;
325     font-weight: $regular;
326     @include font-size(18px);
327     line-height: 150%;
328     color: #007880;
329   }
330 }
331
332
333 .l-art__preview {
334     width: 100%;
335 }