Merge pull request #164 from dbpedia/new-dev

New dev
dbpedia · Jan 26, 2024 · 8f1c7a6 · 8f1c7a6
2 parents 360648f + 6ff7139
commit 8f1c7a6
Show file tree

Hide file tree

Showing 30 changed files with 1,689 additions and 665 deletions.
diff --git a/devenv/Makefile b/devenv/Makefile
@@ -43,6 +43,7 @@ srv-start-auth0:
 	DATABUS_RESOURCE_BASE_URL=${DATABUS_RESOURCE_BASE_URL} \
 	DATABUS_NAME=${DATABUS_NAME} \
 	DATABUS_ORG_ICON=${DATABUS_ORG_ICON} \
+	DATABUS_BANNER=${DATABUS_BANNER} \
 	DATABUS_BANNER_COLOR=${DATABUS_BANNER_COLOR} \
 	DATABUS_DATABASE_URL=${DATABUS_DATABASE_URL} \
 	DATABUS_OIDC_ISSUER_BASE_URL=https://kilt.eu.auth0.com \

diff --git a/public/css/_colors.scss b/public/css/_colors.scss
@@ -1,4 +1,23 @@
 // COLOR PALETTE
+
+// Navbar
+$nav-background-dark: #353e47;
+$nav-background-medium: #434f5c;
+$nav-search-border: #fff;
+$nav-links: #fff;
+$nav-search-background: $nav-background-medium;
+
+// Action Banner
+$banner-background: #e6e7ec;
+$banner-box-frame: #fff;
+$banner-box-background:  #366281;
+$banner-box-background-hover: rgb(255 255 255 / 13%);
+
+// Backgrounds
+$background-white: #fff;
+$background-light: #fff;
+
+
 $link: #3867d6;
 
 $highlight: #f5f5f5;
@@ -9,7 +28,6 @@ $icon-color: #b5b5b5;
 $yasqe-disabled-background: $background;
 $yasqe-disabled-border: #e6e6e6;
 
-$navbar-background: #24292e;
 
 $topic-header: #7a7a7a;
 $grey-light: #dbdbdb;
@@ -29,13 +47,13 @@ $primary: #65bdb2;
 $entity-artifact: #66a0c9;
 $entity-artifact-bg: #7BA0BB;
 
-$entity-consumer: #737381;
-$entity-consumer-bg: #7e7e8a;
+$entity-consumer: #29acbf;
+$entity-consumer-bg: #28b0c5;
 
 $entity-group: #6e7699;
 $entity-group-bg: #7B89AB;
 
-$entity-version: #76bfb6;
+$entity-version: #47b49f;
 $entity-version-bg: #89BDB7;
 
 $entity-collection: #81b180;

diff --git a/public/css/_components.scss b/public/css/_components.scss
@@ -148,7 +148,7 @@
   background-repeat: no-repeat;
   background-size: contain;
   text-align: center;
-  min-height: 200px;
+  height: 160px;
 
   .title {
     color: white;
@@ -207,9 +207,6 @@
 
 // NAVBAR
 
-.navbar-db {
-  background-color: $navbar-background;
-}
 
 // Settings and boxes
 

diff --git a/public/css/_entities.scss b/public/css/_entities.scss
@@ -69,6 +69,13 @@
 
 .is-version {
 
+    .databus-icon svg {
+        fill: $entity-version; 
+        &.is-white {
+            fill: $white;
+        }
+    }
+
     path {
         fill: $entity-version;
 
@@ -77,6 +84,12 @@
         }
     }
 
+    &.button {
+        background-color: $entity-version;
+        color: $white;
+        border: none;
+    }
+
     &.title {
         color: $entity-version;
     }
@@ -101,14 +114,14 @@
 }
 
 .is-consumer {
-    
-    path {
+
+    .databus-icon svg {
         fill: $entity-consumer; 
         &.is-white {
             fill: $white;
         }
     }
-
+    
     &.button {
         background-color: $entity-consumer;
         color: $white;

diff --git a/public/css/_fonts.scss b/public/css/_fonts.scss
@@ -0,0 +1,34 @@
+@font-face {
+    font-family: 'PT Sans';
+    src: url('./../fonts/PTSans-Regular.ttf');
+  }
+
+  @font-face {
+    font-family: "PT Sans";
+    src: url("./../fonts/PTSans-Bold.ttf");
+    font-weight: bold;
+  }
+
+  @font-face {
+    font-family: "PT Sans";
+    src: url("./../fonts/PTSans-Italic.ttf");
+    font-style: italic;
+  }
+
+  @font-face {
+    font-family: "PT Sans";
+    src: url("./../fonts/PTSans-BoldItalic.ttf");
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./../fonts/Roboto-Regular.ttf');
+  }
+
+  @font-face {
+    font-family: 'Roboto';
+    src: url('./../fonts/Roboto-Bold.ttf');
+    font-weight: bold;
+  }
diff --git a/public/css/_frontpage.scss b/public/css/_frontpage.scss
@@ -0,0 +1,90 @@
+.section.call-to-action {
+    background-color: $banner-background;
+    padding: 3em 0em;
+    position: relative;
+}
+
+.frontpage-box-frame {
+
+    background-color: $banner-box-frame;
+    border-radius: 20px;
+    padding: 0px;
+    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05);
+
+}
+
+.frontpage-box {
+    background-color: $banner-box-background;
+    border-radius: 20px;
+    display: flex;
+    color: white;
+    width: 380px;
+    padding: 1.2em;
+    position: relative;
+    align-items: center;
+    cursor: pointer;
+}
+
+.frontpage-box.left {
+    background-color: $entity-consumer-bg;
+}
+
+
+.frontpage-box.center {
+    background-color: $entity-version;
+}
+
+
+$frontpage-box-scale-time: 0.4s;
+$frontpage-box-scale-amount: -4px;
+
+.frontpage-box:hover {
+    -moz-transform: translateY($frontpage-box-scale-amount);
+    -webkit-transform: translateY($frontpage-box-scale-amount);
+    -o-transform: translateY($frontpage-box-scale-amount);
+    -ms-transform: translateY($frontpage-box-scale-amount);
+    -webkit-transform: translateY($frontpage-box-scale-amount);
+    transform: translateY($frontpage-box-scale-amount);
+
+    -webkit-transition: transform $frontpage-box-scale-time ease-out;
+    -moz-transition: transform $frontpage-box-scale-time ease-out;
+    -ms-transition: transform $frontpage-box-scale-time ease-out;
+}
+
+.frontpage-box-arrow {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+}
+
+.frontpage-box-frame:not(:last-child) {
+    margin-right: 2em;
+}
+
+.frontpage-box .content {
+    padding: 0;
+    margin-left: 1em;
+}
+
+.frontpage-box .content h1 {
+    margin-bottom: 4px;
+    color: white;
+    font-weight: 600;
+}
+
+.frontpage-box .headline databus-icon {
+    margin-right: .7em;
+}
+
+
+.frontpage-box h1 {
+    font-size: 1.2em;
+    margin-top: 0;
+}
+
+.has-background-pattern {
+    background-image: url(../img/banner-background.png);
+    background-repeat: repeat;
+    background-position: center;
+    background-size: 150px;
+}