Merge pull request #9 from KodeStar/master

Fixes to styling

Author: j0nnymoe

ci/index.html

@@ -8,7 +8,7 @@
   <meta name="description" content="CI Results">
   <meta name="author" content="linuxserver.io">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
   <style>
     body,html {
       padding: 0;
@@ -50,62 +50,70 @@
     h1 span {
       color: #9bb0bf;
     }
-    .section, .content {
-      width: 100%;
-      max-width: 600px;
-      display: flex;
-      align-items: center;
-      background: #efefef;
-      justify-content: space-between;
-      text-decoration: none;
-      margin: 10px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.05);
-    }
 
     #results h1 {
       font-size: 25px;
       margin: 0 0 25px;
     }
     section {
       display: flex;
-      width: 30%;
+      width: 100%;
       flex-direction: column;
       margin: 10px;
       background: #efefef;
       box-shadow: 0 0 10px rgba(0,0,0,0.05);
       min-width: 320px;
+      max-width: 600px;
       padding: 0 0 30px 0;
+      flex: 1 1 0;
     }
     section > * {
-      padding: 0 20px;
+      padding: 0 30px;
     }
     section h2 {
-      font-size: 18px;
+      font-size: 17px;
       background: #f5f5f5;
-      padding: 5px 20px;
+      padding: 5px 30px;
       margin: 0;
-      height: 90px;
+      height: 70px;
       display: flex;
       align-items: center;
     }
-    section h2 + p {
+
+    /* No image */
+    section h2 + h3 {
+      border-bottom: 1px solid #dcdcdc;
+      padding-bottom: 20px;
+      background: #f5f5f5;
       margin: 0;
+      font-size: 12px;
+      word-break:break-all;
     }
+    /* Has an image */
     section h2 + p + h3 {
-      margin: 0;
-      padding: 20px;
+      border-bottom: 1px solid #dcdcdc;
+      padding: 20px 30px;
       background: #f5f5f5;
+      margin: 0;
+      font-size: 12px;
+      word-break:break-all;
+    }
+    section h2 + p {
+      margin: 0;
     }
 
+    section p:empty {
+      display: none;
+    }
     section h3 {
       font-size: 16px;
-      padding: 0 20px;
+      padding: 0 30px;
     }
     section img {
-      width: calc(100% + 40px);
+      width: calc(100% + 60px);
       height: auto;
-      margin-left: -20px;
-      margin-right: -20px;
+      margin-left: -30px;
+      margin-right: -30px;
       padding: 0;
       display: block;
     }
@@ -118,6 +126,7 @@
       justify-content: center;
       align-items: flex-start;
       flex-wrap: wrap;
+      margin-top: 25px;
     }
 
     @media only screen and (min-width: 500px) {

ci/results.template

@@ -5,6 +5,7 @@
 | Test | Result |
 | ----------------------- | --- |{% for test in report_tests %}
 | {{ test[0] }} | {{ test[1] }} |{% endfor %}
+
 <main>
 {% for container in report_containers %}
 <section markdown="1">