Use macro for color scheme generation and change logo for tablet and mobile

web/app/templates/main/index.html.j2

@@ -198,10 +198,12 @@
 
 <div class="section white scrollspy" id="workflow">
   <div class="row container">
-    <div class="col s12 m10">
+    <!-- <div class="col s12 m10"> -->
+    <div class="col s12">
       <h3>Workflow</h3>
-      <h4>Coming soon...</h4>
+      <img src="{{ url_for('static', filename='images/workflow.png') }}" alt="Workflow" class="responsive-img">
     </div>
+    <!--
     <div class="col s12 m2">
       <ul class="section table-of-contents">
         <li><a href="#information">Why you should use nopaque</a></li>
@@ -212,6 +214,7 @@
         <li><a href="#workflow">Workflow</a></li>
       </ul>
     </div>
+    -->
   </div>
 </div>
 

web/app/templates/nopaque.html.j2

@@ -1,3 +1,4 @@
+{% import "utils/macros.html.j2" as Macros %}
 {% import "utils/materialize.html.j2" as M %}
 
 
@@ -9,14 +10,14 @@
   {% set headline = title %}
 {% endif %}
 
-{% if main_class is not defined %}
-  {% set main_class = 'grey lighten-5' %}
-{% endif %}
-
 {% if parallax is not defined %}
   {% set parallax = False %}
 {% endif %}
 
+{% if main_class is not defined %}
+  {% set main_class = 'grey lighten-5' %}
+{% endif %}
+
 {% set primary_color = '#00426f' %}
 {% set secondary_color = '#b1b3b4' %}
 
@@ -36,7 +37,6 @@
 {% set ocr_color_darken = '#00a58b' %}
 {% set ocr_color_lighten = '#e7f4f1' %}
 
-
 {%- macro insert_content() -%}
   {% block page_content %}{% endblock %}
 {%- endmacro -%}
@@ -96,7 +96,7 @@
       .tabs .tab a:hover {color: {{ primary_color }}; /* Custom Color On Hover */}
       .tabs .tab a.active, .tabs .tab a:focus.active {
         color: {{ primary_color }}; /* Custom Text Color While Active */
-        background-color: rgba(0, 66, 111, 0.2); /* Custom Background Color While Active */
+        background-color: {{ primary_color }}28; /* Custom Background Color While Active */
       }
       .tabs .indicator {background-color: {{ primary_color }}; /* Custom Color Of Indicator */}
       {% if current_user.is_authenticated %}
@@ -140,7 +140,8 @@
       <div class="navbar-fixed">
         <nav class="nav-extended primary-color white-text">
           <div class="nav-wrapper">
-            <a href="{{ url_for('main.index') }}" class="brand-logo" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px;"></a>
+            <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px;"></a>
+            <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-large-only" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px;"></a>
             {% if current_user.is_authenticated %}
             <a href="#" data-target="sidenav-main" class="sidenav-trigger"><i class="material-icons">menu</i></a>
             {% endif %}

web/app/templates/services/corpus_analysis.html.j2

@@ -3,9 +3,7 @@
 {% set main_class = 'corpus-analysis-color lighten' %}
 
 {% block page_content %}
-<style>
-  main button, main .btn, main .btn-floating {background-color: {{ corpus_analysis_color_darken }};}
-</style>
+{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }}
 
 <div class="col s12 m3 push-m9">
   <div class="center-align">
@@ -16,6 +14,7 @@
 </div>
 
 <div class="col s12 m9 pull-m3">
+  <p>{{ rgb }}</p>
   <p>Nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags. The results can either be displayed as text or abstract visualizations.</p>
 </div>
 

web/app/templates/services/file-setup.html.j2

@@ -3,9 +3,7 @@
 {% set main_class = 'file-setup-color lighten' %}
 
 {% block page_content %}
-<style>
-  main button, main .btn, main .btn-floating {background-color: {{ file_setup_color_darken }};}
-</style>
+{{ Macros.insert_color_scheme(file_setup_color_darken) }}
 
 <div class="col s12 m3 push-m9">
   <div class="center-align">

web/app/templates/services/nlp.html.j2

@@ -3,9 +3,7 @@
 {% set main_class = 'nlp-color lighten' %}
 
 {% block page_content %}
-<style>
-  main button, main .btn, main .btn-floating {background-color: {{ nlp_color_darken }};}
-</style>
+{{ Macros.insert_color_scheme(nlp_color_darken) }}
 
 <div class="col s12 m3 push-m9">
   <div class="center-align">

web/app/templates/services/ocr.html.j2

@@ -3,9 +3,7 @@
 {% set main_class = 'ocr-color lighten' %}
 
 {% block page_content %}
-<style>
-  main button, main .btn, main .btn-floating {background-color: {{ ocr_color_darken }};}
-</style>
+{{ Macros.insert_color_scheme(ocr_color_darken) }}
 
 <div class="col s12 m3 push-m9">
   <div class="center-align">

web/app/templates/utils/macros.html.j2

@@ -21,6 +21,21 @@
 {% block page_content %}{% endblock %}
 {%- endmacro -%}
 
+{%- macro insert_color_scheme(hex_color) -%}
+<style>
+  main button, main .btn, main .btn-floating {background-color: {{ hex_color }};}
+  main .pagination li.active {background-color: {{ hex_color }};}
+  main .table-of-contents a.active {border-color: {{ hex_color }};}
+  main .tabs .tab a {color: inherit;}
+  main .tabs .tab a:hover {color: {{ hex_color }};}
+  main .tabs .tab a.active, .tabs .tab a:focus.active {
+    color: {{ hex_color }};
+    background-color: {{ hex_color }}28;
+  }
+  main .tabs .indicator {background-color: {{ hex_color }};}
+</style>
+{%- endmacro -%}
+
 {% macro show_metadata(query_metadata) %}
 
 <div class="col s12">