mobile frontent improvement

This commit is contained in:
simon 2021-07-14 21:01:10 +07:00
parent cda956da02
commit c7af9c7114
3 changed files with 26 additions and 18 deletions

View File

@ -158,15 +158,15 @@ a {
.aqi_box {
position: absolute;
top: 45%;
left: 57%;
top: 43%;
left: 55%;
text-align: right;
transform: translate(-50%, -50%);
color: #fff;
}
.aqi_box h1 {
font-size: 15em;
font-size: 16em;
margin: 0;
}
@ -200,7 +200,7 @@ a {
.weather_icon img {
width: 50px;
margin: 10px;
margin: 5px;
}
/* weather end */
/* category start */
@ -210,6 +210,12 @@ a {
justify-content: space-between;
}
.category > div {
flex: 1;
}
.cat-icon {
text-align: center;
}
.cat-icon img {
width: 100%;
max-width: 200px;
@ -223,8 +229,8 @@ a {
.cat-item.active {
transform: scale(1.2);
font-size: 1.1em;
margin: 15px;
box-shadow: darkgray 5px 5px;
margin: 17px;
box-shadow: darkgray 4px 4px;
font-weight: bold;
}
/* category end */
@ -314,15 +320,14 @@ a {
}
.title-nav li {
float: left;
padding: 10px;
padding: 5px;
margin: 5px;
}
#aqiValue {
font-size: 6em;
font-size: 8em;
}
.aqi_box {
top: 38%;
left: 50%;
width: 60%;
#aqiCategory {
font-size: 1.5em;
}
.weather {
flex-wrap: wrap;
@ -338,6 +343,9 @@ a {
display: block;
text-align: center;
}
.cat-bar {
padding: 0 20px;
}
.cat-item {
width: 70%;
margin-left: auto;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -19,27 +19,27 @@
</tr>
<tr>
<td class="good">0 to 50:</td>
<td>Good: No health concerns, enjoy activities.</td>
<td><b>Good:</b> No health concerns, enjoy activities.</td>
</tr>
<tr>
<td class="moderate">51 - 100:</td>
<td>Moderate: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.</td>
<td><b>Moderate:</b> Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.</td>
</tr>
<tr>
<td class="ufsg">101 - 150:</td>
<td>Unhealthy for Sensitive Groups: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.</td>
<td><b>Unhealthy for Sensitive Groups:</b> Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.</td>
</tr>
<tr>
<td class="unhealthy">151 - 200:</td>
<td>Unhealthy: Everyone may begin to experience health effects: Active children and adults, and people with respiratory disease, such as asthma, should avoid prolonged outdoor exertion; everyone else, especially children, should limit prolonged outdoor exertion.</td>
<td><b>Unhealthy:</b> Everyone may begin to experience health effects: Active children and adults, and people with respiratory disease, such as asthma, should avoid prolonged outdoor exertion; everyone else, especially children, should limit prolonged outdoor exertion.</td>
</tr>
<tr>
<td class="vunhealthy">201 - 300:</td>
<td>Very Unhealthy: Active children and adults, and people with respiratory disease, such as asthma, should avoid all outdoor exertion; everyone else, especially children, should limit outdoor exertion.</td>
<td><b>Very Unhealthy:</b> Active children and adults, and people with respiratory disease, such as asthma, should avoid all outdoor exertion; everyone else, especially children, should limit outdoor exertion.</td>
</tr>
<tr>
<td class="hazardous">301 - 500:</td>
<td>Hazardous: Everyone should avoid all outdoor exertion.</td>
<td><b>Hazardous:</b> Everyone should avoid all outdoor exertion.</td>
</tr>
</table>
</div>