Another upgrade.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _themes.scss
1 .l-themes__wrapper {
2   width: 100%;
3
4   h2 {
5     margin: 0;
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     margin-bottom: 23px;
15     display: flex;
16     justify-content: space-between;
17     flex-direction: column;
18     align-items: stretch;
19
20     @include rwd($break-flow) {
21         flex-direction: row;
22         
23     }
24     
25     a {
26         display: flex;
27         justify-content: flex-end;
28       align-items: center;
29       font-weight: bold;
30       font-size: 16px;
31       color: #474747;
32
33       &:hover {
34         span {
35           text-decoration: underline;
36         }
37       }
38
39       .icon {
40         color: #007880;
41         font-size: 10px;
42         margin-left: 10px;
43       }
44     }
45   }
46
47   .links {
48
49     display: flex;
50     list-style: none;
51     padding: 0;
52     margin: 0;
53     margin-top: 65px;
54     li {
55       display: flex;
56       align-items: center;
57
58       &:not(:last-child) {
59         padding-right: 12px;
60         &:after {
61           margin-left: 12px;
62           content: "";
63           height: 70%;
64           width: 1px;
65           background-color: #007880;
66           display: block;
67         }
68       }
69
70       a {
71         font-weight: normal;
72         font-size: 15px;
73         line-height: 160%;
74         color: #808080;
75
76         &:hover {
77           text-decoration: underline;
78         }
79       }
80     }
81   }
82 }
83
84 .l-themes {
85   margin-top: 15px;
86
87   ul {
88     padding: 0;
89     margin: 0;
90     list-style: none;
91     display: flex;
92     flex-wrap: wrap;
93
94     li {
95         min-width: 150px;
96       margin-bottom: 17px;
97       font-weight: normal;
98       font-size: 18px;
99       line-height: 150%;
100       color: #474747;
101
102       span {
103         color: #007880;
104       }
105
106       a {
107         &:hover {
108           text-decoration: underline;
109         }
110       }
111     }
112   }
113
114   button {
115     font-weight: $bold;
116     @include font-size(24px);
117     line-height: 28px;
118     text-align: center;
119     text-decoration-line: underline;
120     color: $color-gray;
121     appearance: none;
122     background: transparent;
123     padding: 0;
124     border: 0;
125     cursor: pointer;
126     display: block;
127     margin: 43px auto 0;
128   }
129 }