new font, ui fixes

dbpedia · Feb 17, 2024 · b667d81 · b667d81
1 parent e8cef0e
commit b667d81
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 9 deletions.
diff --git a/public/css/_components.scss b/public/css/_components.scss
@@ -144,6 +144,10 @@
 
 .entity-card {
 
+  padding: 1.2em;
+  border: 1px solid #dbdbdb; 
+  border-radius: 8px;
+
   .entity-card-icon {
     width: auto;
     height: 52px;
@@ -153,13 +157,21 @@
   .entity-card-header {
     display: flex;
     align-items: center;
+    margin-bottom: -4px;
+  }
+
+  .entity-card-header .title {
+    font-size: 1.2em;
+
   }
 
   .entity-card-content {
     margin-top: 0.5em;
   }
 
   .entity-card-footer {
+    font-size: .8em;
+    color: #626568;
     margin-top: 0.5em;
   }
 }

diff --git a/public/css/_fonts.scss b/public/css/_fonts.scss
@@ -31,4 +31,17 @@
     font-family: 'Roboto';
     src: url('./../fonts/Roboto-Bold.ttf');
     font-weight: bold;
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    src: url('./../fonts/Inter-Regular.ttf');
+  }
+
+
+
+  @font-face {
+    font-family: 'Inter';
+    src: url('./../fonts/Inter-Bold.ttf');
+    font-weight: 600;
   }
diff --git a/public/css/_nav.scss b/public/css/_nav.scss
@@ -189,6 +189,7 @@
             .result-item {
                 padding: .35em .7em;
                 display: flex;
+                align-items: center;
                 cursor: pointer;
                 overflow: hidden;
 
@@ -217,7 +218,7 @@
                 }
 
                 .item-header {
-                    display: flex;
+                    display: box;
                     color: white
                 }
             }
@@ -277,12 +278,13 @@
         }
 
         .result-item type-tag {
-            margin-right: 8px;
+            margin-right: 12px;
         }
 
         .result-item .item-label {
             font-weight: 600;
             margin-right: 8px;
+            margin-bottom: -4px;
         }
 
         .result-item .item-abstract {

diff --git a/public/css/website.css b/public/css/website.css
@@ -29,6 +29,15 @@
   src: url("./../fonts/Roboto-Bold.ttf");
   font-weight: bold;
 }
+@font-face {
+  font-family: "Inter";
+  src: url("./../fonts/Inter-Regular.ttf");
+}
+@font-face {
+  font-family: "Inter";
+  src: url("./../fonts/Inter-Bold.ttf");
+  font-weight: 600;
+}
 .collection-summary.table {
   background-color: transparent;
 }
@@ -10077,6 +10086,11 @@ label.panel-block:hover {
   transition-duration: 0.5s;
 }
 
+.entity-card {
+  padding: 1.2em;
+  border: 1px solid #dbdbdb;
+  border-radius: 8px;
+}
 .entity-card .entity-card-icon {
   width: auto;
   height: 52px;
@@ -10085,11 +10099,17 @@ label.panel-block:hover {
 .entity-card .entity-card-header {
   display: flex;
   align-items: center;
+  margin-bottom: -4px;
+}
+.entity-card .entity-card-header .title {
+  font-size: 1.2em;
 }
 .entity-card .entity-card-content {
   margin-top: 0.5em;
 }
 .entity-card .entity-card-footer {
+  font-size: 0.8em;
+  color: #626568;
   margin-top: 0.5em;
 }
 
@@ -10682,6 +10702,7 @@ template {
 .databus-navbar .nav-search .results .result-item {
   padding: 0.35em 0.7em;
   display: flex;
+  align-items: center;
   cursor: pointer;
   overflow: hidden;
 }
@@ -10704,7 +10725,7 @@ template {
   color: #e7e7e7 !important;
 }
 .databus-navbar .nav-search .results .result-item .item-header {
-  display: flex;
+  display: box;
   color: white;
 }
 .databus-navbar .nav-search .results::-webkit-scrollbar {
@@ -10745,11 +10766,12 @@ template {
   fill: #a7a7a7;
 }
 .databus-navbar .nav-search .result-item type-tag {
-  margin-right: 8px;
+  margin-right: 12px;
 }
 .databus-navbar .nav-search .result-item .item-label {
   font-weight: 600;
   margin-right: 8px;
+  margin-bottom: -4px;
 }
 .databus-navbar .nav-search .result-item .item-abstract {
   color: white;
@@ -10923,9 +10945,11 @@ template {
 
 body,
 html {
-  font-family: "PT Sans", sans-serif;
+  font-family: "Inter", "PT Sans", sans-serif;
   text-rendering: optimizeLegibility;
   line-height: 1.5em;
+  font-size: 16px;
+  color: rgb(95, 99, 104);
   background: #fff;
 }
 

diff --git a/public/css/website.scss b/public/css/website.scss
@@ -32,9 +32,11 @@
 
 body,
 html {
-  font-family: 'PT Sans', sans-serif;
+  font-family: 'Inter', 'PT Sans', sans-serif;
   text-rendering: optimizeLegibility;
   line-height: 1.5em;
+  font-size: 16px;
+  color: rgb(95, 99, 104);
   background: #fff;
 }
 

diff --git a/public/fonts/Inter-Black.ttf b/public/fonts/Inter-Black.ttf
diff --git a/public/fonts/Inter-Bold.ttf b/public/fonts/Inter-Bold.ttf
diff --git a/public/fonts/Inter-ExtraBold.ttf b/public/fonts/Inter-ExtraBold.ttf
diff --git a/public/fonts/Inter-ExtraLight.ttf b/public/fonts/Inter-ExtraLight.ttf
diff --git a/public/fonts/Inter-Light.ttf b/public/fonts/Inter-Light.ttf
diff --git a/public/fonts/Inter-Medium.ttf b/public/fonts/Inter-Medium.ttf
diff --git a/public/fonts/Inter-Regular.ttf b/public/fonts/Inter-Regular.ttf
diff --git a/public/fonts/Inter-SemiBold.ttf b/public/fonts/Inter-SemiBold.ttf
diff --git a/public/fonts/Inter-Thin.ttf b/public/fonts/Inter-Thin.ttf
diff --git a/public/js/components/entity-card/entity-card.html b/public/js/components/entity-card/entity-card.html
@@ -1,10 +1,10 @@
-<div class="entity-card" style="padding: 1em; border: 1px solid #dbdbdb; border-radius: 0em;">
+<div class="entity-card">
   <div class="entity-card-header">
     <img class="entity-card-icon" ng-if="$ctrl.imageUrl" ng-src="{{ $ctrl.imageUrl }}" />
     <type-tag width="48" height="48" style="margin-right:12px" ng-if="$ctrl.type" type="$ctrl.type"></type-tag>
     <div class="dataset-name">
       <a ng-href="{{ $ctrl.uri }}">
-        <p id="const" class="title is-6 search-result" ng-bind-html="$ctrl.formatResult($ctrl.label)"></p>
+        <p id="const" class="title search-result" ng-bind-html="$ctrl.formatResult($ctrl.label)"></p>
       </a>
       <div ng-if="$ctrl.uri" class="subtitle is-6 has-text-link">
         <uri-breadcrumbs absolute="$ctrl.absolute" uri="$ctrl.uri"></uri-breadcrumbs>
@@ -17,6 +17,6 @@
     </div>
   </div>
   <div class="entity-card-footer" ng-if="$ctrl.date">
-    <div style="color: #bbb">{{ $ctrl.date }}</div>
+    <div>{{ $ctrl.date }}</div>
   </div>
 </div>