Update style

src/static/style/main.scss

@@ -31,6 +31,10 @@ div#main-view {
   min-height: calc(100vh - #{$navbar-height});
 }
 
+div#ci-view {
+  padding-bottom: 20rem;
+}
+
 div#ci-menu {
   background-color: hsl(0, 0%, 15%);
   box-shadow: -3px 0 10px 2px black;
@@ -41,9 +45,15 @@ nav {
   box-shadow: 0 -3px 10px 3px black;
 }
 
+hr.content-divider {
+  background-color: hsl(0, 0%, 80%);
+  margin-top: 0.1rem;
+  height: 1px;
+}
+
 div.artifact-item {
   $artifact-item-radius: 2px;
-  margin-bottom: 1.25rem;
+  margin-bottom: 0.75rem;
 
   & > div.artifact-details {
     @extend .columns, .is-mobile;
@@ -62,7 +72,7 @@ div.artifact-item {
 
     & > div.artifact-info {
       @extend .column;
-      background-color: hsl(0, 0%, 90%);
+      background-color: hsl(0, 0%, 85%);
 
       & > div.artifact-info-content {
         @extend .columns, .is-mobile;
@@ -77,7 +87,7 @@ div.artifact-item {
 
     &:hover {
       & > div.artifact-info {
-        background-color: hsl(0, 0%, 92%);
+        background-color: hsl(0, 0%, 88%);
       }
 
       & > div.artifact-id {
@@ -91,5 +101,10 @@ div.artifact-item {
     background-color: hsl(0, 0%, 90%);
     border-bottom-left-radius: $artifact-item-radius;
     border-bottom-right-radius: $artifact-item-radius;
+    margin-bottom: 0 !important;
+
+    & > div > h2 {
+      @extend .is-size-4;
+    }
   }
 }

src/templates/base.html

@@ -30,10 +30,10 @@
     </nav>
 
     <div id="main-view" class="columns">
-        <div id="ci-menu" class="column is-one-fifth-desktop is-two-fifths-tablet">
+        <div id="ci-menu" class="column is-2-widescreen is-3-desktop is-4-tablet">
             {% include "nav.html" %}
         </div>
-        <div class="column">
+        <div id="ci-view" class="column">
             <div id="main-contents" class="container">
                 {%block content%}{%endblock%}
             </div>

src/templates/project_view.html

@@ -22,7 +22,8 @@
 </div>
 
 
-<h1 class="is-size-3">Artifacts</h1>
+<h1 class="is-size-2">Artifacts</h1>
+<hr class="content-divider" />
 {%-for artifact in artifacts %}
 <div class="artifact-item">
     <div class="artifact-details">
@@ -39,7 +40,7 @@
         </div>
     </div>
     <div class="artifact-contents" style="display: none">
-        <div class="column content is-small">
+        <div class="column content">
             <h2>Downloads</h2>
 
             <div>
@@ -60,10 +61,12 @@
                     </tbody>
                 </table>
             </div>
+            {%- if artifact.changelog %}
             <h2>Changelog</h2>
             <p>
                 {{artifact.changelog|safe}}
             </p>
+            {%- endif %}
         </div>
     </div>