Tweak display

Adds custom CSS, update search, favicon.

_config.yml

@@ -7,8 +7,8 @@ baseurl: /IMEx-site
 permalink: pretty
 
 # Add custom CSS / JS here
-# custom_css:
-# - "{{site.baseurl}}/static/css/YOUR-CSS-COMPONENTS.css"
+custom_css:
+- "/static/site.css"
 # - "{{site.baseurl}}/static/css/ANOTHER-CSS-COMPONENTS.css"
 # custom_js:
 # - "{{site.baseurl}}/static/js/YOUR-CSS-COMPONENTS.js"

_includes/head.html

@@ -14,16 +14,13 @@
 
   <!-- If you have custom icon, replace these as appropriate.
        You can generate them at realfavicongenerator.net -->
-  <link rel="icon" type="image/x-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon.ico" />
-  <link rel="icon" type="image/png" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="192×192" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/android-chrome-192x192.png" /> <!-- Android (192px) -->
-  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-114x114.png"> <!-- For iPhone 4 Retina display (114px) -->
-  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-72x72.png"> <!-- For iPad (72px) -->
-  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-144x144.png"> <!-- For iPad retinat (144px) -->
-  <link rel="apple-touch-icon-precomposed" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/apple-icon-57x57.png"> <!-- For iPhone (57px) -->
-  <link rel="mask-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/safari-pinned-tab.svg" color="#ffffff"> <!-- Safari icon for pinned tab -->
-  <meta name="msapplication-TileColor" content="#2b5797"> <!-- MS Icons -->
-  <meta name="msapplication-TileImage" content="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/images/logos/EMBL-EBI/favicons/mstile-144x144.png">
+  <link rel="icon" type="image/x-icon" href="{{site.baseurl}}/static/favicon/sfavicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="{{site.baseurl}}/static/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{site.baseurl}}/static/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{site.baseurl}}/static/favicons/favicon-16x16.png">
+  <link rel="manifest" href="{{site.baseurl}}/static/favicons/manifest.json">
+  <link rel="mask-icon" href="{{site.baseurl}}/static/favicons/safari-pinned-tab.svg" color="#202121">
+  <meta name="theme-color" content="#ffffff">
 
   <!-- CSS: implied media=all -->
   <!-- CSS concatenated and minified via ant build script-->
@@ -32,7 +29,7 @@
   <link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all">
   {% comment %} Custom global CSS could go here: {% endcomment %}
   {% for css in site.custom_css %}
-  <link rel="stylesheet" href="{{css}}">
+  <link rel="stylesheet" href="{{site.baseurl}}{{css}}">
   {% endfor %}
 
   <!-- If you have a custom header image or colour -->

_includes/search.html

@@ -1,12 +1,13 @@
-<h3>Search the IMEx data resource</h3>
 <form id="imex_db_search" action="http://www.ebi.ac.uk/intact/imex/main.xhtml" method="GET">
-<p><input id="query" name="query" size="30" type="text" /> <input id="imexButton" name="Search" type="submit" value="Search" /></p>
-<div id="search_error_message"></div>
+  <fieldset>
+    <div class="input-group margin-bottom-none margin-top-large">
+      <input type="text" name="query" id="query" class="input-group-field" pattern=".{3,}" tabindex="1" title="At least 3 characters" placeholder="Search the IMEx data resource" required>
+      <div class="input-group-button">
+        <input id="imexButton" class="button icon icon-functional secondary-background" tabindex="2" type="submit" name="Search" value="1">
+      </div>
+    </div>
+  </fieldset>
+  <p id="example" class="small">
+    Use as input: Uniprot KB Accs, Gene names, Publication Ids
+  </p>
 </form>
-<p>Use as input:</p>
-<ul>
-<li>Uniprot KB Accs</li>
-<li>Gene names</li>
-<li>Publication Ids</li>
-</ul>
-<div class="clear"></div>

_layouts/default.html

@@ -9,8 +9,16 @@
           <div class="masthead-inner row">
             <!-- local-title -->
             <div class="columns medium-7" id="local-title">
-              <h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ site.group }}</a></h1>
-              <p>{{site.name}}</p>
+              <a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">
+                <img src="{{site.baseurl}}/static/logos/IMEx_logo_webmedium.png" />
+                <span class="sitename secondary-color">{{site.name}}</span>
+
+              </a>
+              <!-- <h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ site.group }}</a></h1> -->
+            </div>
+            <div class="columns medium-5 padding-top-xlarge margin-top-large">
+              {% include search.html %}
+
             </div>
             <!-- /local-title -->
             <!-- local-nav -->

static/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

static/favicons/manifest.json

@@ -0,0 +1,13 @@
+{
+    "name": "IMEx",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

static/site.css

@@ -0,0 +1,16 @@
+.masthead-inner {
+  padding-top: 0;
+}
+div.masthead h1 {
+  margin-bottom: 0;
+  line-height: 2.6rem;
+}
+div.masthead {
+  background-color: #C8C8C8;
+  background-image: -moz-linear-gradient(top, #C8C8C8, #909090);
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #C8C8C8),color-stop(1, #909090));
+  background-image: -webkit-linear-gradient(#C8C8C8, #909090);
+  background-image: linear-gradient(top, #C8C8C8, #909090);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#C8C8C8', EndColorStr='#909090');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#C8C8C8', EndColorStr='#909090')";
+}