update design

public/content/content.json

@@ -25,7 +25,7 @@
   {
     "item": {
       "title": "COVID-STA",
-      "project": "",
+      "project": "iCity Project",
       "author": {
         "firstName": "Joe",
         "lastName": "T. Santhanavanich",
@@ -36,8 +36,8 @@
       "project_is_on_going": true,
       "imageLink":"imgs/thumbnails/covidSta.jpg",
       "keywords":["SensorThings API","COVID-19", "Urban Analytics"],
-      "description_en":"The OGC SensorThings API server for managing the COVID-19 case statistic data.",
-      "description_de":"Der OGC SensorThings API Server zur Verwaltung der COVID-19 Fallstatistikdaten."
+      "description_en":"The COVID-STA is the OGC SensorThings API data server which provides an open standard-based and geospatial-enabled framework to interconnect the COVID-19 statistics and applications over the web.",
+      "description_de":"Der COVID-STA ist der OGC SensorThings API-Datenserver, der ein auf offenen Standards basierendes und raumbezogenes Framework zur Verfügung stellt, um die COVID-19-Statistiken und Anwendungen über das Web miteinander zu verbinden."
     },
     "links": {
       "demo": "https://covidsta.hft-stuttgart.de/server/",

public/css/main.css

@@ -4,6 +4,7 @@
   margin-bottom: 0;
   background-color: #fff;
 }
+
 @media (min-width: 768px) {
   .jumbotron {
     padding-top: 6rem;
@@ -15,8 +16,18 @@
   font-family: 'Noto Sans JP', sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Roboto', sans-serif; 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Roboto', sans-serif;
+}
+
+.content-subtitle {
+  font-family: 'Noto Sans JP';
+  font-size: 0.85em;
 }
 
 .jumbotron p:last-child {
@@ -40,8 +51,9 @@ footer p {
   margin-bottom: 0.25rem;
 }
 
-body{
-    background-color: #cc3125;/* thistle; */
+body {
+  background-color: #cc3125;
+  /* thistle; */
 }
 
 .bd-placeholder-img {
@@ -65,56 +77,65 @@ a {
   /* text-decoration: underline; */
   background-color: transparent;
 }
-a:hover{
+
+a:hover {
   color: rgb(65, 57, 57);
 }
 
 a:visited {
-	/* color: black; */
+  /* color: black; */
 }
 
 
 .myBtn {
-    color: #fff;
-    background-color: tomato;
-    border-color: thistle; /*set the color you want here*/
-    width: 180px;
+  color: #fff;
+  background-color: tomato;
+  border-color: thistle;
+  /*set the color you want here*/
+  width: 180px;
 }
-.myBtn:hover, .myBtn:focus, .myBtn:active, .myBtn.active, .open>.dropdown-toggle.myBtn {
-    color: #fff;
-    background-color: thistle;
-    border-color: #285e8e; /*set the color you want here*/
+
+.myBtn:hover,
+.myBtn:focus,
+.myBtn:active,
+.myBtn.active,
+.open>.dropdown-toggle.myBtn {
+  color: #fff;
+  background-color: thistle;
+  border-color: #285e8e;
+  /*set the color you want here*/
 }
 
-.thumbimg{
-    width: 100%;
-    height: 225px;
+.thumbimg {
+  width: 100%;
+  height: 225px;
 }
 
 a.button {
-    -webkit-appearance: button;
-    -moz-appearance: button;
-    appearance: button;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
 
-    text-decoration: none;
-    color: blue;
-    border: solid;
-    border: 4px;
+  text-decoration: none;
+  color: blue;
+  border: solid;
+  border: 4px;
 }
 
-.windSVG{
-    margin-right : 20px;
+.windSVG {
+  margin-right: 20px;
 }
 
-.hftlogo{
+.hftlogo {
   /* margin-right : 20px; */
   /* width: 100px; */
 }
-.hftlogo:hover{
+
+.hftlogo:hover {
   cursor: pointer;
 }
 
-.extension{
+.extension {
   padding: 20px 10px;
   /* min-height: 445px; */
   /* max-height: 445px; */
@@ -122,25 +143,25 @@ a.button {
   height: 610px;
 }
 
-.py-5{
-  padding: 1rem!important; 
+.py-5 {
+  padding: 1rem !important;
 }
 
-.card-body{
+.card-body {
   min-height: 90px;
   padding: 0.5rem 0.5rem 0.2rem;
 
 }
 
-.card-text{
+.card-text {
   max-height: 85px;
   overflow: auto;
-  /* overflow-y: auto; */  
+  /* overflow-y: auto; */
   /* padding-bottom: 10px; */
 
 }
 
-.btnGroupDiv{
+.btnGroupDiv {
   /* padding: 20px 00px 00px 20px; */
   padding: 0.5rem;
 }
@@ -153,15 +174,17 @@ a.button {
   color: #9e9e9e !important;
 }
 
-.z-depth-1, .chip:active {
-  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
+.z-depth-1,
+.chip:active {
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
 }
 
 .hftBackground {
   background-image: url(../imgs/avatar/Bibliothek_HFT_f.jpg);
   background-size: cover;
 }
+
 /* .hftBackground::after {
   content: '';
     z-index: 0;
@@ -171,9 +194,9 @@ a.button {
     top: 0;
 } */
 
-main[role=main]{
-  background-color: #f8f9fa!important;
-  padding-bottom: 1rem!important;
+main[role=main] {
+  background-color: #f8f9fa !important;
+  padding-bottom: 1rem !important;
 }
 
 a {
@@ -191,30 +214,34 @@ a:hover {
   background-color: #cccccc;
   color: #0f0f0f;
 
-  margin-left:40%;
+  margin-left: 40%;
   cursor: pointer;
   border-radius: .2rem;
   border: none;
   border: 0px;
   width: 6em;
   height: 2em;
-  
+
 }
+
 .previous:disabled,
-.previous[disabled]{
+.previous[disabled] {
   cursor: not-allowed;
   background-color: #f1f1f1;
   color: #666666;
 }
+
 .next:disabled,
-.next[disabled]{
+.next[disabled] {
   background-color: #0069d970;
   color: #666666;
   cursor: not-allowed;
 }
-#papercount{
+
+#papercount {
   text-align: center;
 }
+
 .next {
   /* background-color: #2196f3 !important; */
   color: white;
@@ -228,7 +255,8 @@ a:hover {
   height: 2em;
 
 }
-.next:hover{
+
+.next:hover {
   background-color: #005bbd !important;
   border: none;
   border: 0px;
@@ -237,6 +265,7 @@ a:hover {
 .round {
   border-radius: 50%;
 }
-.publication_card{
-  overflow:hidden;
+
+.publication_card {
+  overflow: hidden;
 }
\ No newline at end of file

public/index.html

@@ -68,7 +68,7 @@
       <div class="container">
         <img src="imgs/ugl.svg" class="windSVG" width="100px" alt="wind">
         <h1 class="display-5 fw-bold" >Urban Geoinformatics Lab</h1>
-        <h3 class="text-muted"> @HFT Stuttgart </h3>
+        <h3 style="color:#cc3125"> @HFT Stuttgart </h3>
       </div>
     </section>
 
@@ -420,7 +420,9 @@
       <p class="float-right">
         <a id="rgc_backtotop" href="#">Back to top</a>
       </p>
-      <p>&copy; HFT Stuttgart, 2020 - <span id="current-year"></span>.</p>
+      <p> 
+        <img src="imgs/ugl.svg" alt="" width="32px">
+        Urban Geoinformatics Lab @HFT Stuttgart, 2020 - <span id="current-year"></span>.</p>
       <a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
       <a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
     </div>

public/js/add_content.js

@@ -52,7 +52,7 @@ function addcontent(item) {
 
     new_row.innerHTML = new_row.innerHTML + '<div class="col-lg-4">' +
       '<div class="card mb-4 shadow-sm extension overflow-auto">' +
-      '<h5>' + item.item.title + ' <span class="lead text-muted"> ' + item.item.project + '</span></h5>' +
+      '<h5>' + item.item.title + ' <span class="content-subtitle text-muted"> ' + item.item.project + '</span></h5>' +
       '<img class="thumbimg" src="' + item.item.imageLink + '" alt="">' +
       '<div class="card-body">' +
       '<p class="card-text-lg small">' +