Added a skin for LinkedCat+ with a visual identity

OpenKnowledgeMaps · Nov 8, 2018 · 013202c · 013202c
1 parent bd54540
commit 013202c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/examples/linkedcat/headstart.php b/examples/linkedcat/headstart.php
@@ -1,6 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
     <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+            <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> 
     </head>
 
     <body style="margin:0px; padding:0px">

diff --git a/examples/linkedcat/index.html b/examples/linkedcat/index.html
@@ -15,22 +15,24 @@
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
     <link type="text/css" rel="stylesheet" href="options.css">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
 </head>
 
-<body style="padding-left:10px; padding-right:10px;">
-    <div>
-        <h2>LinkedCat+ Visuelle Suche</h2>
+<body style="padding-left:10px; padding-right:10px; font-family: 'Lato', sans-serif;">
+    <div style="max-width:600px; margin: 0px auto; margin-top:100px;">
+        <h2 style="color: #2856a3; font-size:50px; font-weight: 700;">LinkedCat+</h2>
+        <h3 style="text-transform: uppercase;">Prototyp Visuelle Suche</h3>
         <form id="searchform" style="margin-top:20px">
-            <label for="q">Suchbegriff:</label>
-            <input type="text" name="q" size="61" required>
-            <button type="submit" class="btn">Los</button>
+            <!--<label for="q">Suchbegriff:</label>-->
+            <input style="height:26px; vertical-align: middle;" type="text" name="q" size="61" required>
+            <button type="submit" class="btn" style="background-color: #2856a3; color: white; width:10%; vertical-align: middle;">suchen</button>
             <div id="filter-container"></div>
         </form>
     </div>
-    <div id="progress">
+    <div id="progress" style="max-width:600px; margin: 0px auto;">
         <div id="progressbar"></div>
     </div>
-    <div style="margin-top:20px ">Diese Suche wurde mit <a href="http://github.com/pkraker/Headstart" target="_blank ">Headstart</a> realisiert. Alle Daten stammen aus LinkedCat+.
+    <div style="max-width:600px; margin: 0px auto; margin-top:20px; font-size: 10px;">Diese Suche wurde mit <a href="http://github.com/pkraker/Headstart" target="_blank ">Headstart</a> realisiert. Alle Daten stammen aus LinkedCat+.
     </div>
     <script type="text/javascript" src="data-config_linkedcat.js"></script>
     <script type="text/javascript" src="data-config_server.js"></script>

diff --git a/vis/stylesheets/base/_colors.scss b/vis/stylesheets/base/_colors.scss
@@ -79,4 +79,12 @@ $higher_value_tag: #DC2260;
 
     $lower_value_tag: #2C316E;
     $higher_value_tag: #DC2260;
+}
+
+@if $skin == 'linkedcat' {
+    $dark-blue: #444;
+    //$okm-blue: #2856a3;
+    $medium-blue: #2856a3;
+
+    $okm-modal-btn: #2856a3;
 }
diff --git a/vis/stylesheets/base/_default_settings.scss b/vis/stylesheets/base/_default_settings.scss
@@ -39,4 +39,8 @@ $papers_details: $black;
 $papers_holder_a: $okm-red;
 
 $iframe_modal_status: $okm-red;
-$open-access: $okm-red;
+$open-access: $okm-red;
+
+@if $skin == 'linkedcat' {
+    $open-access: #2856a3;
+}
diff --git a/vis/stylesheets/base/_typography.scss b/vis/stylesheets/base/_typography.scss
@@ -33,4 +33,11 @@ $fontweight800: 800;
     $fontweight600: 700;
     $fontweight700: 700;
     $fontweight800: 700;
+}
+
+@if $skin == 'linkedcat' {
+    $base-font-family: 'Lato', Helvetica, sans-serif;
+    $link-font-family: 'Lato', Helvetica, sans-serif;
+    $special-font-family: 'Lato', Helvetica, sans-serif;
+    $abstract-font-family: 'Lato', Helvetica Neue, Helvetica, sans-serif;
 }