M css/style.css => css/style.css +65 -16
@@ 31,7 31,7 @@ header h1 {
}
.wrapper {
- padding-top: 20px;
+ padding: 20px;
margin: 0 auto;
max-width: 900px;
/* display: flex;
@@ 40,19 40,21 @@ header h1 {
}
.wrapper .nowcast {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -ms-flex-line-pack: center;
- align-content: center;
+ /* display: flex;
+ justify-content: center;
+ align-content: center;
+ align-items: center; */
+ display: -ms-grid;
+ display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ justify-items: center;
+ -ms-grid-columns: 1fr 1fr 1fr 1fr;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-areas: "weatherType temp rain wind";
position: relative;
- padding: 20px;
+ padding: 30px;
max-width: 100%;
border: 1px solid #c3c3c3;
border-radius: 10px;
@@ 60,28 62,51 @@ header h1 {
margin-bottom: 20px;
}
+.wrapper .nowcast .temp {
+ -ms-grid-row: 1;
+ -ms-grid-column: 2;
+ grid-area: temp;
+}
+
+.wrapper .nowcast .rain {
+ -ms-grid-row: 1;
+ -ms-grid-column: 3;
+ grid-area: rain;
+}
+
+.wrapper .nowcast .wind {
+ -ms-grid-row: 1;
+ -ms-grid-column: 4;
+ grid-area: wind;
+}
+
.wrapper .nowcast .from-to {
position: absolute;
padding: 10px;
top: 0;
- /* left: 0; */
+ left: 0;
}
-.wrapper .nowcast .from-to,
-.wrapper .nowcast .from-to i {
+.wrapper .nowcast .from-to, .wrapper .nowcast .from-to i {
font-size: 16px;
}
-.wrapper .nowcast img {
+.wrapper .nowcast .weatherType {
+ -ms-grid-row: 1;
+ -ms-grid-column: 1;
+ grid-area: weatherType;
width: 90px;
margin-right: 20px;
}
-.wrapper .nowcast .unit,
-.wrapper .nowcast i {
+.wrapper .nowcast .unit, .wrapper .nowcast i {
font-size: 24px;
}
+.wrapper .nowcast i {
+ color: #212121;
+}
+
.wrapper .nowcast .type {
font-size: 60px;
display: -webkit-box;
@@ 96,6 121,30 @@ header h1 {
margin-right: 20px;
}
+@media screen and (max-width: 690px) {
+ .wrapper .nowcast {
+ -ms-grid-columns: 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas: "weatherType temp" "weatherType rain" "weatherType wind";
+ }
+ .wrapper .nowcast .type {
+ font-size: 32px;
+ -ms-grid-column-align: start;
+ justify-self: start;
+ }
+ .wrapper .nowcast .type:not(:last-child) {
+ margin: 0;
+ }
+ .wrapper .nowcast i {
+ text-align: center;
+ min-width: 25px;
+ font-size: 16px;
+ }
+ .wrapper .nowcast .unit {
+ font-size: 20px;
+ }
+}
+
.wrapper .forecast-table {
padding: 10px;
border: 1px solid #c3c3c3;
M css/style.scss => css/style.scss +57 -11
@@ 40,7 40,7 @@ header {
}
.wrapper {
- padding-top: 20px;
+ padding: 20px;
margin: 0 auto;
max-width: 900px;
@@ 49,13 49,21 @@ header {
align-items: center;*/
.nowcast {
- display: flex;
+ /* display: flex;
justify-content: center;
align-content: center;
+ align-items: center; */
+ display: grid;
align-items: center;
+ justify-items: center;
+
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-areas:
+ "weatherType temp rain wind";
+
position: relative;
- padding: 20px;
+ padding: 30px;
max-width: 100%;
border: 1px solid #c3c3c3;
border-radius: 10px;
@@ 63,27 71,40 @@ header {
margin-bottom: 20px;
+ .temp {
+ grid-area: temp;
+ }
+ .rain {
+ grid-area: rain;
+ }
+ .wind {
+ grid-area: wind;
+ }
+
.from-to {
position: absolute;
padding: 10px;
top: 0;
- /* left: 0; */
- &,
- i {
+ left: 0;
+ &, i {
font-size: 16px;
}
}
- img {
- width: 90px;
- margin-right: 20px;
+ .weatherType {
+ grid-area: weatherType;
+ width: 90px;
+ margin-right: 20px;
}
- .unit,
- i {
+ .unit, i {
font-size: 24px;
}
+ i {
+ color: $primary-dark-color;
+ }
+
.type {
font-size: 60px;
display: flex;
@@ 93,6 114,31 @@ header {
margin-right: 20px;
}
}
+
+ @media screen and (max-width: 690px){
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas:
+ "weatherType temp"
+ "weatherType rain"
+ "weatherType wind";
+
+ .type {
+ font-size: 32px;
+ justify-self: start;
+
+ &:not(:last-child) {
+ margin: 0;
+ }
+ }
+ i {
+ text-align: center;
+ min-width: 25px;
+ font-size: 16px;
+ }
+ .unit {
+ font-size: 20px;
+ }
+ }
}
.forecast-table {
M index.html => index.html +5 -5
@@ 21,16 21,16 @@
<div class="from-to">
<i class="far fa-clock"></i> {{ nowcast.from }}-{{ nowcast.to}}
</div>
- <img :src="nowcast.weatherImg" alt="" />
- <div class="type">
+ <img :src="nowcast.weatherImg" class="weatherType" alt="" />
+ <div class="type temp">
<i aria-hidden="true" class="fas fa-thermometer-three-quarters"></i>
- <span class="temp">{{ nowcast.temperature.toLocaleString('no-NB') }}<span class="unit">°C</span></span>
+ <span class="temp">{{ nowcast.temperature.toLocaleString('no-NB') }}°</span>
</div>
- <div class="type">
+ <div class="type rain">
<i aria-hidden="true" class="fas fa-umbrella"></i>
<span class="rain">{{ nowcast.rain.toLocaleString('no-NB') }}<span class="unit">mm</span></span>
</div>
- <div class="type">
+ <div class="type wind">
<i class="fas fa-wind"></i>
<span class="wind">{{ nowcast.wind.toLocaleString('no-NB') }}<span class="unit">m/s</span></span>
</div>