Merge pull request #21 from codeplaysoftware/add-deliverables-page

Add Deliverables Page

Author: scottstraughan

_includes/nav-bar.html

@@ -18,6 +18,8 @@
            {% if page.url contains "about.html" %} class="selected" {% endif %}> About</a>
         <a href="{{'consortium' | absolute_url}}"
            {% if page.url contains "consortium.html" %} class="selected" {% endif %}> Consortium</a>
+        <a href="{{'deliverables' | absolute_url}}"
+           {% if page.url contains "deliverables.html" %} class="selected" {% endif %}> Deliverables</a>
         <a href="{{'contact' | absolute_url}}"
            {% if page.url contains "contact.html" %} class="selected" {% endif %}> Contact</a>
     </div>

_layouts/update.html

@@ -23,7 +23,7 @@
     <div class="wrapper content-and-side-content">
         <div>
             <a class="button back" href="{{'updates' | absolute_url}}" title="Back to All Updates">
-                <span class="material-icons">arrow_back</span> Back</a>
+                <span class="material-icons">arrow_back</span>Back</a>
             <header>
                 <div>
                     <h1>{{page.title}}</h1>

deliverables.html

@@ -0,0 +1,62 @@
+---
+layout: page
+---
+
+<!-- Section: Consortium -->
+<section id="deliverables">
+    <div class="wrapper">
+        <h1><span class="material-icons">sports_score</span>Deliverables</h1>
+
+        <p>This page is designed to give an overview of the deliverables and target of the SYCLOPS project.</p>
+
+        <br />
+        <br />
+
+        <!-- Consortium -->
+        <table class="table">
+            <thead>
+            <tr>
+                <th>Deliverable</th>
+                <td>Overview</td>
+                <td>Download</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>D1.1</td>
+                <td>Describes mechanisms to be used during the project implementation, in order to ensure high
+                    quality of activities and deliverables</td>
+                <td><a class="button"
+                       href="/static/files/deliverables/SYCLOPS-D1.1_ProjectManagementQualityAndRiskPlan_20230331.pdf"
+                       target="_blank"><span class="material-icons">cloud_download</span>Download Report</a>
+                </td>
+            </tr>
+            <tr>
+                <td>D1.2</td>
+                <td>Describes mechanisms to handle data created or generated during the project.</td>
+                <td><a class="button"
+                       href="/static/files/deliverables/SYCLOPS-D1.2_v0.1_DataManagementPlan_20230805.pdf"
+                       target="_blank"><span class="material-icons">cloud_download</span>Download Report</a>
+                </td>
+            </tr>
+            <tr>
+                <td>D2.1</td>
+                <td>Provides the overall architectural blueprint of SYCLOPS together with inter and intra-layer
+                    interface definitions</td>
+                <td><a class="button"
+                       href="/static/files/deliverables/SYCLOPS-D2.1_ArchitectureInterfaceBenchmarkSpec_20230805.pdf"
+                       target="_blank"><span class="material-icons">cloud_download</span>Download Report</a>
+                </td>
+            </tr>
+            <tr>
+                <td>D6.1</td>
+                <td> Communication, Networking and Dissemination Plan and Activities</td>
+                <td><a class="button"
+                       href="/static/files/deliverables/SYCLOPS_D6.1_Dissemination_and_communication_20230331.pdf"
+                       target="_blank"><span class="material-icons">cloud_download</span>Download Report</a>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</section>

static/css/styled.scss

@@ -61,22 +61,27 @@ body {
         max-width: 1300px;
     }
 
-    button {
+    button, .button {
         padding: 1rem;
         font-size: 1rem;
-        border: 0;
         background-color: var(--hint-color);
         color: white;
         border-radius: 6px;
         cursor: pointer;
         opacity: .8;
         transition: .1s all;
-        display: block;
+        display: inline-flex;
+        align-items: center;
 
         &:hover {
             opacity: 1;
             transform: scale(1.05);
         }
+
+        span {
+            vertical-align: middle;
+            margin-right: .4rem;
+        }
     }
 
     section {
@@ -484,7 +489,7 @@ body {
                 }
             }
 
-            @media screen and (max-width: 940px) {
+            @media screen and (max-width: 1090px) {
                 .burger {
                     display: block;
                 }
@@ -745,6 +750,28 @@ body {
         }
     }
 
+    /**
+     * Section: Deliverables
+     */
+    section#deliverables {
+        table {
+            width: 100%;
+
+            td, th {
+                padding: 1rem;
+
+            }
+
+            td:nth-of-type(1) {
+                text-align: center;
+            }
+
+            tbody tr:nth-of-type(odd) td {
+                background-color: #dcdcdc;
+            }
+        }
+    }
+
     /**
      * Section: Update
      */
@@ -789,10 +816,6 @@ body {
     .update-elements {
         .button.back {
             display: inline-flex;
-            align-items: center;
-            padding: 1rem;
-            border: #ccc 1px solid;
-            border-radius: 6px;
         }
     }