Improve styling, add DCC JSON Server

index.html

@@ -23,13 +23,16 @@
         <a href="" class="link-button"><img src="img/link.png" alt="Link"></a>
       </h3>
       <a href="" class="article-image">
-          <img src="img/tableTool.png" alt="table tool icon. Es zeigt eine Datei, die einen Graphen enthält, und dass sie in einen DCC übersetzt wird.">
+        <img src="img/tableTool.png" alt="table tool icon. Es zeigt eine Datei, die einen Graphen enthält, und dass sie in einen DCC übersetzt wird.">
       </a>
       <p>Das Table Tool ist toll, benutzt mehr Table Tool!</p>
       <div class="example-files">
-          <a href="">Beispieldatei 1</a>
-          <a href="">Beispieldatei 2</a>
+        <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 1</a>
+        <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 2</a>
       </div>
+      <a href="https://gitlab1.ptb.de/Seeger/pydccanddbtools" class="git-link">
+        <img src="img/Git.png" alt="Git icon"> Dieses Projekt auf Gitlab
+      </a>
     </article>
     <article>
       <h3>
@@ -41,9 +44,29 @@
       </a>
       <p>Der DCC Displayer zeigt die Tabellen aus einem hochgeladenen DCC als Graph und als Tabelle an. Die Daten können dann als csv- oder Excel-Dateien heruntergeladen werden.</p>
       <div class="example-files">
-        <a href="">Beispieldatei 1</a>
-        <a href="">Beispieldatei 2</a>
+        <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 1</a>
+        <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 2</a>
+      </div>
+      <a href="https://gitlab1.ptb.de/digitaldynamicmeasurement/pydccdisplayer" class="git-link">
+        <img src="img/Git.png" alt="Git icon"> Dieses Projekt auf Gitlab
+      </a>
+    </article>
+    <article>
+      <h3>
+        <a href="">DCC JSON Server</a>
+        <a href="" class="link-button"><img src="img/link.png" alt="Link"></a>
+      </h3>
+      <a href="" class="article-image">
+        <img src="img/dccJsonServer.png" alt="DCC json server icon. Es zeigt zwei Dateien, eine DCC und eine JSON, die ineinander übersetzt werden.">
+      </a>
+      <p>Hier könnte Ihr Blorb stehen!</p>
+      <div class="example-files">
+        <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 1</a>
+        <a href="" class="download-link"><img src="img/download.png" alt="Download icon"> Beispieldatei 2</a>
       </div>
+      <a href="https://gitlab1.ptb.de/TBruns/dcc_rest_server" class="git-link">
+        <img src="img/Git.png" alt="Git icon"> Dieses Projekt auf Gitlab
+      </a>
     </article>
   </main>
 </body>

styles/style.css

@@ -34,7 +34,7 @@ article p {
 
 .article-image {
     grid-column: 1;
-    grid-row: 1 / 4;
+    grid-row: 1 / 5;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -60,12 +60,31 @@ article p {
     background-color: #d0d2da;
 }
 
+.git-link {
+    grid-column: 2;
+    grid-row: 4;
+}
+
+.git-link, .download-link {
+    display: flex;
+    align-items: center;
+    line-height: 1.8;
+}
+
+.git-link img, .download-link img {
+    width: 1.15rem;
+    height: 1.15rem;
+    margin: 0.1rem;
+    margin-right: 0.5em;
+}
+
 @media (max-width: 600px) {
     article { 
         grid-template-columns: 1fr; 
     }
     
     article h3 {
+        justify-self: center;
         grid-column: 1;
         grid-row: 2;
     }
@@ -85,5 +104,10 @@ article p {
         grid-column: 1;
         grid-row: 1;
     }
+
+    .git-link {
+        grid-column: 1;
+        grid-row: 5;
+    }
 }