various mobile front end improvements

web/static/css/style.css

@@ -68,6 +68,7 @@ a {
 }
 
 .content-subtitle {
+    width: 70%;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
@@ -301,7 +302,8 @@ a {
 
 /* responsiv start */
 @media screen and (max-width: 1000px) {
-    .content {
+    .content,
+    .content-subtitle {
         width: 90%;
     }
 }
@@ -310,7 +312,8 @@ a {
     h1 {
         font-size: 2.5em;
     }
-    .content {
+    .content,
+    .content-subtitle {
         width: 100%;
     }
     .title {
@@ -327,10 +330,10 @@ a {
         font-size: 8em;
     }
     #aqi-label {
+        margin-top: -10px;
         text-align: center;
     }
     #aqiCategory {
-        margin-top: -10px;
         font-size: 1.4em;
         text-align: center;
     }
@@ -365,11 +368,14 @@ a {
         margin: 20px 0;
     }
     .graph {
-        display: block;
+        flex-wrap: wrap;
         padding: 0;
     }
+    .graph-3d {
+        flex-wrap: wrap-reverse;
+    }
     .graph-item {
-        margin: 20px 0;
+        margin: 10px 0;
     }
     .category-table td {
         min-width: 80px;

web/static/js/aqi.js

@@ -64,9 +64,11 @@ function rmPreload() {
     // scrollbar
     document.querySelector('body').style.overflow = 'unset'
     // sticky
-    // const topBar = document.querySelector('.colorbox');
-    // topBar.style.position = 'sticky';
-    // topBar.style.position = '-webkit-sticky';
+    const topBar = document.getElementById('topbar');
+    topBar.style.position = 'sticky';
+    topBar.style.position = '-webkit-sticky';
+    topBar.style.top = 0;
+    topBar.style.zIndex = 1;
 }
 
 // reload current.png from remote

web/templates/graphs.html

@@ -8,7 +8,7 @@
         <div class="content-subtitle">
             <h2>Last three days</h2>
         </div>
-        <div class="content graph">
+        <div class="content graph graph-3d">
             <div class="graph-item">
                 <p>Three days ago</p>
                 <a href="/static/dyn/day-3.png" data-lightbox="graph">

web/templates/layout.html

@@ -18,7 +18,7 @@
     <div class="preload">
         <img src="{{ url_for('static', filename='img/cloud_colors.gif') }}" alt="cloud_animation">
     </div>
-    <div class="full-width col_bg">
+    <div class="full-width col_bg" id="topbar">
         <div class="col-box">
             <!-- <ul>
                 <p>Latest updates:</p>