mobile frontent improvement
This commit is contained in:
parent
cda956da02
commit
c7af9c7114
|
@ -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 |
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue