Report aesthetics
[SonOfLokstallBot.git] / src / report.php
index fc1faa6..83c76c8 100644 (file)
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
         <style>
-            .nav-pills {
+            h1 {
+                margin-top: 1rem;
+
+            }
+            .nav-pills, .saitama {
                 margin-bottom: 1rem;
             }
-img {
-    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
-    image-rendering: -moz-crisp-edges;          /* Firefox                        */
-    image-rendering: -o-crisp-edges;            /* Opera                          */
-    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
-    image-rendering: pixelated; /* Chrome */
-    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
-    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
-    width: 100%;
-}
+            .container {
+                padding-bottom: 1rem;
+            }
+            img {
+                image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
+                image-rendering: -moz-crisp-edges;          /* Firefox                        */
+                image-rendering: -o-crisp-edges;            /* Opera                          */
+                image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+                image-rendering: pixelated; /* Chrome */
+                image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
+                -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
+                width: 100%;
+                margin-top: 3.5rem;
+                position: sticky;
+                top: 3.5rem;
+            }
+            @media only screen and (max-width: 1200px) {
+                img {
+                    height: 500px;
+                    width: auto;
+                }
+            }
         </style>
     </head>
     <body>
-        <div class="container">
-                  <h1>The Onion Report</h1>
-                  <div class="row">
-                            <div class="col-lg-4"><img src="saitama.png" /></div>
-                            <div class="col-lg-8"><?php echo doIt(); ?></div>
-                  </div>
+        <div class="container-fluid">
+            <h1>The Onion Report</h1>
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-4 saitama"><img src="saitama.png" class="mx-auto d-block" /></div>
+                    <div class="col-xl-8"><?php echo doIt(); ?></div>
+                </div>
+            </div>
         </div>
     </body>
 </html>