1
- # title {
1
+ # title {
2
2
background-image : url(../ img/backgroundsbundle/Whangaehu.png);
3
3
text-align : center;
4
4
height : 100vh ;
5
5
background-size : cover;
6
6
background-position : center;
7
7
background-attachment : fixed;
8
- }
9
- # title h1 {
8
+ }
9
+ # title h1 {
10
10
font-size : 25vw ;
11
11
line-height : 100vh ;
12
- }
13
-
14
- main {
12
+ }
13
+
14
+ main {
15
15
margin : 50px auto;
16
+ }
17
+
18
+ .filter {
19
+ margin : 20px 0 ;
20
+ }
21
+
22
+ .filter h3 {
23
+ background : rgba (255 , 255 , 255 , 0.8 );
24
+ color : # 000 ;
25
+ padding : 10px 15px ;
26
+ position : relative;
27
+ cursor : pointer;
28
+ }
29
+ .filter h3 span {
30
+ color : # 000 ;
31
+ font-size : 30px ;
32
+ position : absolute;
33
+ right : 0 ;
34
+ height : 100% ;
35
+ top : 0 ;
36
+ display : flex;
37
+ align-items : center;
38
+ padding : 0 10px ;
39
+ }
40
+ .filterButtons {
41
+ padding : 0 10px ;
42
+ border : 2px solid rgba (255 , 255 , 255 , 0.8 );
43
+ display : none;
44
+ animation : 0.3s slideDown forwards;
45
+ display : none;
46
+ overflow : hidden;
47
+ max-height : 0 ;
16
48
}
17
-
18
- .filter {
19
- margin : 20px 0 ;
20
-
21
- }
22
-
23
- .filter h3 {
24
- margin-bottom : 5px ;
49
+ @keyframes slideDown{
50
+ 0% {
51
+ max-height : 0 ;
52
+ padding : 0 10px ;
53
+ }
54
+ 50% {
55
+ padding : 10px 10px ;
56
+ }
57
+ 100% {
58
+ max-height : 1000px ;
59
+ padding : 10px 10px ;
60
+ }
25
61
}
26
-
27
- .filter button {
62
+
63
+ .filter button {
28
64
background-color : transparent;
65
+ font-family : "Ubuntu" , sans-serif;
29
66
font-size : 16px ;
67
+ font-weight : 600 ;
30
68
padding : 5px 15px ;
31
69
border-radius : 10px ;
32
70
border : 1px solid # fff ;
33
71
cursor : pointer;
34
72
transition : 0.3s background-color, 0.3s color;
35
73
margin : 0 5px ;
36
- }
37
- .filter button : first-child {
74
+ }
75
+ .filter button : first-child {
38
76
margin-left : 0 ;
39
- }
40
- /* .filter button:hover, */
41
- .filter button .active {
77
+ }
78
+ /* .filter button:hover, */
79
+ .filter button .active {
42
80
background-color : # fff ;
43
81
color : rgb (6 , 6 , 61 );
44
- }
45
- .container {
46
- overflow : hidden;
47
- }
48
-
49
- .filterDiv {
50
- float : left;
51
- background-color : # 2f7a2f ;
52
- color : # 120202 ;
53
- width : 100px ;
54
- /*line-height: 100px;*/
55
- text-align : center;
56
- margin : 2px ;
57
- display : none; /* Hidden by default */
58
- }
59
- .show {
82
+ }
83
+ .container {
84
+ overflow : hidden;
85
+ }
86
+
87
+ .filterDiv {
88
+ float : left;
89
+ background-color : # 2f7a2f ;
90
+ color : # 120202 ;
91
+ width : 100px ;
92
+ /*line-height: 100px;*/
93
+ text-align : center;
94
+ margin : 2px ;
95
+ display : none; /* Hidden by default */
96
+ }
97
+ .show {
60
98
display : block;
61
99
}
62
- # container {
100
+ # container {
63
101
display : flex;
64
102
width : 100% ;
65
- }
66
- .card_container {
103
+ }
104
+ .card_container {
67
105
/* position: absolute; */
68
106
/* justify-content: center; */
69
107
min-width : 300px ;
70
108
padding : 0px 5px ;
71
- }
72
- .card {
109
+ }
110
+ .card {
73
111
max-width : 100% ;
74
112
background-color : rgba (255 , 255 , 255 , 0.8 );
75
- padding : 10px ;
76
- margin : 5px auto;
77
- border-radius : 10px ;
78
- }
79
-
80
-
81
- /* @media only screen and (max-width: 700px){
82
- .card{
83
- display: block;
84
- width: calc(100% / 2 - 4px);
85
- min-width: min-content;
86
- margin-left: 0!important;
87
- margin-right: 0!important;
88
- }
89
- } */
90
- .card h2 {
91
- color : rgb (6 , 6 , 61 );
92
- }
93
- .card .difficultyTag {
113
+ margin : 10px auto;
114
+ }
115
+
116
+ /* @media only screen and (max-width: 700px){
117
+ .card{
118
+ display: block;
119
+ width: calc(100% / 2 - 4px);
120
+ min-width: min-content;
121
+ margin-left: 0!important;
122
+ margin-right: 0!important;
123
+ }
124
+ } */
125
+ .card h2 {
126
+ color : rgb (6 , 6 , 61 );
127
+ padding : 10px 10px 0 10px ;
128
+ }
129
+ .card .difficultyTag {
94
130
color : white;
95
131
padding : 5px 10px ;
96
- margin : 10px 5px 5px 0 ;
97
- display : inline-block;
132
+ margin : 2px 2px 2px 0 ;
133
+ display : block;
134
+ border-radius : 5px ;
135
+ text-transform : uppercase;
136
+ font-size : 15px ;
137
+ float : left;
98
138
width : fit-content;
99
- border-radius : 10px ;
100
- }
101
- .card .difficultyTag .Easy {
139
+ }
140
+ .card .difficultyTag .Easy {
102
141
background-color : # 2f7a2f ;
103
- }
104
- .card .difficultyTag .Medium {
105
- background-color : # f7b500 ;
106
- }
107
- .card .difficultyTag .Hard {
142
+ }
143
+ .card .difficultyTag .Medium {
144
+ background-color : # ff9800 ;
145
+ }
146
+ .card .difficultyTag .Hard {
108
147
background-color : # f70000 ;
109
- }
110
- .card .topicTag {
111
- background-color : black;
112
- color : white;
113
- padding : 5px 10px ;
114
- margin : 5px 5px ;
115
- display : inline-block;
116
- width : fit-content;
117
- border-radius : 10px ;
118
- margin-left : 0 ;
119
- }
120
- /* .card .topicTag span:first-child{
121
- margin-left: 0;
122
- } */
123
- .card a {
148
+ }
149
+ .card .topicTag {
150
+ color : # 000 ;
151
+ padding : 5px ;
152
+ margin : 2px ;
124
153
display : block;
154
+ border-radius : 5px ;
155
+ border : 1px solid black;
156
+ font-size : 15px ;
157
+ width : fit-content;
158
+ float : left;
159
+ }
160
+ /* .card .topicTag span:first-child{
161
+ margin-left: 0;
162
+ } */
163
+ .card a {
164
+ width : 100% ;
125
165
text-align : center;
126
- margin : 5px 0 0 0 ;
127
166
padding : 10px 20px ;
128
167
background-color : rgb (6 , 6 , 61 );
129
168
color : white;
130
- border-radius : 10px ;
131
169
text-decoration : none;
132
170
transition : 0.3s background-color, 0.3s color;
133
-
134
- }
135
- .card a : hover {
171
+ }
172
+ /* .card a.openProblemBtn {
173
+ margin-right: 5px; */
174
+ /* .card a.resourcesBtn { */
175
+ /* margin-left: 5px; */
176
+
177
+ .card a : hover {
136
178
background-color : white;
137
179
color : rgb (6 , 6 , 61 );
138
- }
180
+ }
181
+ .material-symbols-sharp .resourcesBtn {
182
+ color : blue;
183
+ }
184
+ .material-symbols-sharp .resourcesBtn : hover {
185
+ color : rgb (106 , 106 , 199 );
186
+ }
187
+
188
+ .cardButtons {
189
+ display : flex;
190
+ }
191
+
192
+ .openResourcesBtn {
193
+ width : 50px ;
194
+ background : # ffc107 ;
195
+ border : 0 ;
196
+ display : flex;
197
+ align-items : center;
198
+ justify-content : center;
199
+ transition : 0.3s all;
200
+ cursor : pointer;
201
+ }
202
+
203
+ .openResourcesBtn span {
204
+ color : # 000 ;
205
+ }
206
+ .openResourcesBtn : hover {
207
+ background : # e64a19 ;
208
+ }
209
+ .openResourcesBtn : hover span {
210
+ color : # fff ;
211
+ }
212
+
213
+ .cardTags {
214
+ padding : 10px ;
215
+ display : block;
216
+ overflow : hidden;
217
+ }
218
+ # resourcesModal {
219
+ display : none;
220
+ position : fixed;
221
+ top : 0 ;
222
+ left : 0 ;
223
+ width : 100vw ;
224
+ height : 100vh ;
225
+ background : rgba (0 , 0 , 0 , 0.8 );
226
+ z-index : 999 ;
227
+ padding-top : 50px ;
228
+ animation : fadein 0.3s ease-in-out forwards;
229
+ }
230
+ # closeResourcesModal {
231
+ position : absolute;
232
+ top : 10px ;
233
+ right : 10px ;
234
+ width : 30px ;
235
+ height : 30px ;
236
+ background-color : rgba (0 , 0 , 0 , 0.8 );
237
+ display : flex;
238
+ justify-content : center;
239
+ align-items : center;
240
+ border-radius : 100% ;
241
+ border : 0 ;
242
+ cursor : pointer;
243
+ }
244
+ # resourcesModal .modalContent {
245
+ width : 90% ;
246
+ max-width : 600px ;
247
+ margin : auto;
248
+ max-height : calc (100vh - 100px );
249
+ background-color : # fff ;
250
+ border-radius : 20px ;
251
+ overflow : auto;
252
+ animation : growin 0.3s ease-in-out forwards;
253
+ }
254
+ @keyframes growin {
255
+ 0% {
256
+ transform : scale (0.5 );
257
+ translate : 0 500px ;
258
+ }
259
+ 100% {
260
+ transform : scale (1 );
261
+ translate : 0 0 ;
262
+ }
263
+ }
264
+
265
+ # resourcesModal h1 {
266
+ color : # fff ;
267
+ padding : 50px 25px 25px 25px ;
268
+ background-image : url(../ img/Backgrounds/Wairau.png);
269
+ background-size : cover;
270
+ background-position : center;
271
+ font-family : 'Montserrat' , sans-serif;
272
+ text-transform : uppercase;
273
+ }
274
+ # resourcesModal p {padding : 25px ;color : # 000 ;}
0 commit comments