Skip to content

Commit 8249692

Browse files
DrMintDrMint
committed
First commit
1 parent 4ee91e0 commit 8249692

File tree

10 files changed

+416
-0
lines changed

10 files changed

+416
-0
lines changed

Diff for: ‎css/data.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
#cityInfo > #cityTitle > p {
2+
margin-bottom: 0;
3+
4+
}
5+
6+
#cityInfo > #cityTitle > h2 {
7+
margin-top: 0;
8+
font-size: 200%;
9+
}
10+
11+
#cityInfo > #currentCondition > img {
12+
width: 10em;
13+
}
14+
15+
#cityInfo .temp {
16+
font-size: 300%;
17+
font-weight: 300;
18+
}
19+
20+
#forecasts {
21+
display: grid;
22+
grid-auto-flow: column;
23+
width: 100%;
24+
place-items: center;
25+
margin-bottom: 3rem;
26+
grid-auto-columns: 1fr;
27+
grid-gap: 3rem;
28+
padding-left: 3rem;
29+
padding-right: 3rem;
30+
box-sizing: border-box;
31+
}
32+
33+
#cityInfo {
34+
display: grid;
35+
grid-template-columns: 1fr 1fr;
36+
grid-gap: 5rem;
37+
align-items: start;
38+
text-align: center;
39+
}
40+
41+
@media screen and (orientation: portrait) {
42+
#forecasts {
43+
grid-auto-flow: row;
44+
grid-gap: 5rem;
45+
padding-left: 5vw;
46+
padding-right: 5vw;
47+
}
48+
49+
#cityInfo {
50+
grid-template-columns: 1fr;
51+
}
52+
}
53+
54+
#forecasts > div {
55+
width: 100%;
56+
display: grid;
57+
place-items: center;
58+
text-align: center;
59+
background-color: var(--color-main-base);
60+
box-shadow: 0 0 2rem #00000022;
61+
}
62+
63+
#cityInfo, #forecasts > div > h3 {
64+
margin-bottom: 0;
65+
}
66+

Diff for: ‎css/master.css

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@900&display=swap');*/
2+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;800&display=swap');
3+
4+
:root {
5+
--color-main-light: #FFFAF0;
6+
--color-main-base: #fffbf4;
7+
--color-main-dark: #954535;
8+
--color-main-black: #1B1811;
9+
}
10+
11+
body {
12+
font-family: 'Open Sans', sans-serif;
13+
background: var(--color-main-light);
14+
background-image: url('/img/bg.png');
15+
background-blend-mode: multiply;
16+
background-size: 50rem;
17+
margin: 0;
18+
padding: 0;
19+
color: var(--color-main-black);
20+
display: grid;
21+
place-items: center;
22+
grid-gap: 3rem;
23+
font-weight: 600;
24+
}
25+
26+
h1, h2 {
27+
font-weight: 800;
28+
}
29+
30+
@media screen and (orientation: portrait) {
31+
body {
32+
font-size: 140%;
33+
}
34+
}
35+
36+
.button {
37+
background-color: var(--color-main-light);
38+
border: .15em solid var(--color-main-dark);
39+
border-radius: 100vmax;
40+
padding: 0.3em 1.1em;
41+
cursor: pointer;
42+
color: var(--color-main-dark);
43+
display: grid;
44+
place-content: center;
45+
text-decoration-line: none;
46+
transition: .05s background-color, .05s color, .05s border;
47+
}
48+
49+
.button:hover {
50+
background: var(--color-main-dark);
51+
color: var(--color-main-light);
52+
border-color: var(--color-main-dark);
53+
}
54+
55+
.button.invert {
56+
color: var(--color-main-light);
57+
background-color: var(--color-main-dark);
58+
}
59+
60+
.button.invert:hover {
61+
background-color: var(--color-main-light);
62+
color: var(--color-main-dark);
63+
}
64+
65+
hr {
66+
width: 90%;
67+
border: none;
68+
border-bottom: 0.2rem dotted var(--color-main-dark);
69+
}
70+
71+
input:focus-visible {
72+
outline: 0px;
73+
}

Diff for: ‎css/osm.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#osmContainer {
2+
width: 100%;
3+
height: 30vh;
4+
border: 0;
5+
outline: 0.2rem dotted var(--color-main-dark);
6+
outline-offset: -2px;
7+
}
8+
9+
@media screen and (orientation: portrait) {
10+
#osmContainer {
11+
height: 40vh;
12+
}
13+
}
14+
15+
#OpenLayers_Control_Zoom_5 {
16+
display: none;
17+
}
18+
19+
#OpenLayers_Control_Attribution_7 {
20+
bottom: 0.2em;
21+
right: 0.5em;
22+
color: black;
23+
}

Diff for: ‎css/popup.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.popupContainer {
2+
display: none;
3+
z-index: 11;
4+
}
5+
6+
.popupContainer.enabled {
7+
display: grid;
8+
position: absolute;
9+
top: 0;
10+
bottom: 0;
11+
left: 0;
12+
right: 0;
13+
background-color: #00000077;
14+
box-sizing: border-box;
15+
padding: 2rem;
16+
place-items: center;
17+
}
18+
19+
.popupContainer > div {
20+
background-color: var(--color-main-base);
21+
padding: 1rem 2rem;
22+
width: 50vw;
23+
box-sizing: border-box;
24+
border-radius: 1rem;
25+
display: grid;
26+
place-items: center;
27+
text-align: center;
28+
box-shadow: 0 0 5em #00000055;
29+
}
30+
31+
@media screen and (orientation: portrait) {
32+
.popupContainer > div {
33+
background-color: var(--color-main-base);
34+
width: 100%;
35+
padding: 1rem 2rem;
36+
box-sizing: border-box;
37+
}
38+
}
39+
40+
.popupContainer > div > .closePopup {
41+
margin: 1em;
42+
}
43+

Diff for: ‎css/search.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
#searchForm {
2+
display: grid;
3+
grid-auto-flow: column;
4+
z-index: 10;
5+
}
6+
7+
@media screen and (orientation: landscape) {
8+
#searchForm {
9+
font-size: 130%;
10+
}
11+
}
12+
13+
#searchForm > #cityInput {
14+
border-radius: 100vmax 0 0 100vmax;
15+
padding: 0.3em 1.1em;
16+
border: .15em solid var(--color-main-dark);
17+
border-right: none;
18+
color: var(--color-main-dark);
19+
font-size: 100%;
20+
}
21+
22+
#searchForm > #showWeatherButton {
23+
border-radius: 0 100vmax 100vmax 0;
24+
font-size: 100%;
25+
}

Diff for: ‎img/bg.png

5.6 KB
Loading

Diff for: ‎img/favicon.png

13.6 KB
Loading

Diff for: ‎img/marker.png

4.01 KB
Loading

Diff for: ‎index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Weather App</title>
7+
<link rel="shortcut icon" type="img/png" href="img/favicon.png"/>
8+
<script src="js/weather.js" defer></script>
9+
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">
11+
<link rel="stylesheet" href="css/master.css">
12+
<link rel="stylesheet" href="css/popup.css">
13+
<link rel="stylesheet" href="css/search.css">
14+
<link rel="stylesheet" href="css/data.css">
15+
<link rel="stylesheet" href="css/osm.css">
16+
17+
</head>
18+
<body>
19+
20+
<div class="popupContainer">
21+
<div id="errorPopup">
22+
<h2 id="errorTitle"></h2>
23+
<p id="errorDescription"></p>
24+
<div class="closePopup button">Close</div>
25+
</div>
26+
</div>
27+
28+
<div id="osmContainer"></div>
29+
30+
<div id="searchForm">
31+
<input id="cityInput" placeholder="Enter the name of a city" type="text">
32+
<button class="button invert" id="showWeatherButton" type="button">Show Weather</button>
33+
</div>
34+
35+
36+
<div id="cityInfo"></div>
37+
<hr>
38+
<div id="forecasts"></div>
39+
40+
<div id="footer">Powered by <a href="https://prevision-meteo.ch">https://prevision-meteo.ch</a></div>
41+
42+
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)