Skip to content

Commit 3d586f0

Browse files
committed
fixes
1 parent e1df7ee commit 3d586f0

18 files changed

+395
-308
lines changed

.vscode/arduino.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"board": "arduino:avr:unowifi"
3+
}

css/common.css

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
22
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;400;500;600;700;800;900&display=swap");
33
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
4-
54
* {
65
margin: 0;
76
padding: 0;

css/index.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,9 @@
211211
#eventModal .modalImg{
212212
border-radius: 20px 20px 0 0;
213213
padding-top: 60%;
214-
background-size: contain;
214+
background-size: cover;
215215
background-position: center;
216+
background-repeat: no-repeat;
216217
position: relative;
217218
}
218219
#eventModal .modalImg img{

css/learn.css

+228-92
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,274 @@
1-
#title{
1+
#title {
22
background-image: url(../img/backgroundsbundle/Whangaehu.png);
33
text-align: center;
44
height: 100vh;
55
background-size: cover;
66
background-position: center;
77
background-attachment: fixed;
8-
}
9-
#title h1{
8+
}
9+
#title h1 {
1010
font-size: 25vw;
1111
line-height: 100vh;
12-
}
13-
14-
main{
12+
}
13+
14+
main {
1515
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;
1648
}
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+
}
2561
}
26-
27-
.filter button{
62+
63+
.filter button {
2864
background-color: transparent;
65+
font-family: "Ubuntu", sans-serif;
2966
font-size: 16px;
67+
font-weight: 600;
3068
padding: 5px 15px;
3169
border-radius: 10px;
3270
border: 1px solid #fff;
3371
cursor: pointer;
3472
transition: 0.3s background-color, 0.3s color;
3573
margin: 0 5px;
36-
}
37-
.filter button:first-child{
74+
}
75+
.filter button:first-child {
3876
margin-left: 0;
39-
}
40-
/* .filter button:hover, */
41-
.filter button.active{
77+
}
78+
/* .filter button:hover, */
79+
.filter button.active {
4280
background-color: #fff;
4381
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 {
6098
display: block;
6199
}
62-
#container {
100+
#container {
63101
display: flex;
64102
width: 100%;
65-
}
66-
.card_container{
103+
}
104+
.card_container {
67105
/* position: absolute; */
68106
/* justify-content: center; */
69107
min-width: 300px;
70108
padding: 0px 5px;
71-
}
72-
.card{
109+
}
110+
.card {
73111
max-width: 100%;
74112
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 {
94130
color: white;
95131
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;
98138
width: fit-content;
99-
border-radius: 10px;
100-
}
101-
.card .difficultyTag.Easy{
139+
}
140+
.card .difficultyTag.Easy {
102141
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 {
108147
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;
124153
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%;
125165
text-align: center;
126-
margin: 5px 0 0 0;
127166
padding: 10px 20px;
128167
background-color: rgb(6, 6, 61);
129168
color: white;
130-
border-radius: 10px;
131169
text-decoration: none;
132170
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 {
136178
background-color: white;
137179
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;}

img/Backgrounds/Wairau.png

529 KB
Loading

0 commit comments

Comments
 (0)