fixing the padding on the hovering; adding the Source Sans Pro font; fixing the font size; adding the SVG icon to Menu button

invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/header.less

@@ -65,28 +65,56 @@ a {
   height: 49px;
   width: 100%;
 }
+
 .short-menu-left {
   border-right: 1px solid black;
   display: table-cell;
   text-align: right;
   width: 50%;
 }
+
 .short-menu-right {
   display: table-cell;
   width: 50%;
   color: #000000;
+  & div {
+    & svg {
+      & g {
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-width: 2;
+        fill: none;
+      }
+    }
+  }
+}
+
+.short-menu-right :hover {
+  background-color: #000000;
+  color: #ffffff;
+  & svg {
+    & g {
+      stroke: #fff;
+    }
+  }
 }
 
 .short-menu-left-lang {
-  background-color: transparent;
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 17px !important;
+  font-weight: 300;
   & a {
+    padding: 5px;
+    background-color: transparent;
     color: #000;
+    text-decoration: none;
   }
 }
 
 .short-menu-left-lang:hover {
-  background-color: #000;
   & a {
+    background-color: #000;
     color: #fff;
     text-decoration: none;
   }
@@ -94,16 +122,31 @@ a {
 
 .search-icon-header {
   display: inline-block;
-  background-color: transparent;
+  & a {
+    background-color: transparent;
+    padding: 5px;
+    text-decoration: none;
+    & svg {
+      & g {
+        stroke-linejoin: round;
+        stroke: #000;
+        stroke-miterlimit: 10;
+        stroke-width: 2;
+        fill: none;
+      }
+    }
+  }
 }
 
 .search-icon-header:hover {
-  background-color: #000;
-  & i {
-    color: #fff;
-  }
   & a {
+    background-color: #000;
     text-decoration: none;
+    & svg {
+      & g {
+        stroke: #fff;
+      }
+    }
   }
 }
 
@@ -126,6 +169,13 @@ a {
   vertical-align: top;
   width: 21px;
 }
+
+.short-menu-icon {
+  vertical-align: top;
+  width: 20px;
+  height: 19px;
+}
+
 svg:not(:root) {
   overflow: hidden;
 }
@@ -140,6 +190,7 @@ svg:not(:root) {
 }
 
 .main-menu-box {
+  font-size: 16px;
   box-sizing: border-box;
   display: table;
   margin: 0 auto;
@@ -174,11 +225,6 @@ svg:not(:root) {
   text-decoration: none;
 }
 
-.short-menu-right :hover {
-  background-color: #000000;
-  color: #ffffff;
-}
-
 .main-menu {
   border-bottom: 1px solid #000;
   box-sizing: border-box;

invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/theme.less

@@ -5,11 +5,11 @@
  * invenio-theme-tugraz  is free software; you can redistribute it and/or modify it
  * under the terms of the MIT License; see LICENSE file for more details.
  */
- 
+
 @import "header";
 @import "footer";
 @import "overrides";
-
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
 
 /***
 **TODO:
@@ -17,4 +17,4 @@
 ***/
 
 //@import "../invenio_app_rdm/theme";
-//@import "variables";
+//@import "variables";

invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html

@@ -84,28 +84,39 @@
             <div id="all-menu-top-left-item">
               <div class="short-menu-left-search">
                 {%- if config.I18N_LANGUAGES %}
-                <span class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
+                <div class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
                   {%- for l in current_i18n.get_locales() %}
                   {%- if current_i18n.language != l.language %}
                   <a
-                    href="{{ url_for('invenio_i18n.set_lang', lang_code=l.language) }}">{{ l.get_display_name() [0:2]}}</a>
+                    href="{{ url_for('invenio_i18n.set_lang', lang_code=l.language) }}">{{ l.get_display_name().upper() [0:2]}}</a>
                   {%- endif %}
                   {%- endfor %}
-                </span>
+                </div>
                 {%- endif %}
-                <span class="search-icon-header">
+                <div class="search-icon-header">
                   <a href="/search">
-                    <i class="search icon large fitted"></i>
+                    <svg class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="26.015" width="26.015" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 26.01515 26.01515">
+                      <g stroke-miterlimit="10" transform="translate(1,1)">
+                        <circle cy="8.5" cx="8.5" r="8" style="stroke-miterlimit:10;stroke-width:2"></circle>
+                        <path style="stroke-width:2;stroke-miterlimit:10;stroke-linecap:round" d="m14.156 14.156 9.344 9.344"></path>
+                      </g>
+                    </svg>
                   </a>
-                </span>
+                </div>
               </div>
             </div>
           </div>
 
           <div class="short-menu-right">
             <div class="short-menu-right-h" onclick="toggleVisibility('heading');">
-
+              <svg shape-rendering="optimizeQuality" class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="20" width="24.103" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 24.103479 20">
-              <i class="fa fa-bars fa-lg"></i><span style="margin-left:3px;">Menu</span>
+                <g transform="translate(0 -1032.4)">
+                  <path d="m2.0142 1034.4h20.972"></path>
+                  <path d="m2.0142 1042.4h20.972"></path>
+                  <path d="m2.0142 1050.4h20.972"></path>
+                </g>
+              </svg>
+              <span style="margin-left:3px; font-size:16px; font-weight:300">Main Menu</span>
 
             </div>
           </div>