Text overlay toggler and table of contents
[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   ul {
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
41 .l-article__overlay {
42   display: flex;
43   flex-direction: column;
44   overflow: hidden;
45   position: relative;
46   color: #474747;
47
48   &.is-active {
49     &:after {
50       content: "";
51       display: block;
52       position: absolute;
53       bottom: 0; left: 0;
54       width: 100%; height: 70px;
55       background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
56     }
57   }
58
59   &.is-clicked {
60     max-height: 100% !important;
61     &:after { display: none; }
62   }
63 }
64
65 .l-article__lead {
66   margin-top: 0;
67   font-weight: $light;
68   @include font-size(24px);
69   font-family: $secondary-font;
70   line-height: 166%;
71 }
72
73 .l-article__read-more {
74   border: 0;
75   padding: 0;
76   color: #007880;
77   background-color: transparent;
78   cursor: pointer;
79   outline: 0;
80   margin-top: 25px;
81   &:hover {
82     text-decoration: underline;
83   }
84 }