Add text color classes

web/app/static/css/nopaque.css

@@ -106,7 +106,7 @@ indicator will show up how the column is sorted right now.; */
 .service[data-service]:before {
   content: "help";
 }
-.service[data-service="corpus_analysis"]:before {
+.service[data-service="corpus-analysis"]:before {
   content: "search";
 }
 .service[data-service="file-setup"]:before {

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

@@ -30,23 +30,23 @@
         <div class="col s12">
           <div class="row">
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">flash_on</i>
+              <i class="large material-icons secondary-color-text">flash_on</i>
-              <p>Speeds up your work</p>
+              <p class="primary-color-text"><b>Speeds up your work</b></p>
               <p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without being held up by compatibility issues.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">cloud</i>
+              <i class="large material-icons secondary-color-text">cloud</i>
-              <p>Cloud infrastructure</p>
+              <p class="primary-color-text"><b>Cloud infrastructure</b></p>
               <p class="light">All computational work is processed within nopaque’s cloud infrastructure. You don't need to install any software. Great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">group</i>
+              <i class="large material-icons secondary-color-text">group</i>
-              <p>User friendly</p>
+              <p class="primary-color-text"><b>User friendly</b></p>
               <p class="light">You can start right away without having to read mile-long manuals. All services come with default settings that make it easy for you to just get going. Also great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">settings</i>
+              <i class="large material-icons secondary-color-text">settings</i>
-              <p>Meshing processes</p>
+              <p class="primary-color-text"><b>Meshing processes</b></p>
               <p class="light">No matter where you step in, nopaque facilitates and accompanies your research. Its workflow perfectly ties in with your research process.</p>
             </div>
           </div>
@@ -85,23 +85,35 @@
           <br class="hide-on-small-only">
           <div class="row">
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">burst_mode</i>
+              <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
-              <p>File setup</p>
+                <i class="material-icons service" data-service="file-setup"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="file-setup-color-text"><b>File setup</b></p>
               <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">find_in_page</i>
+              <a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
-              <p>Optical Character Recognition</p>
+                <i class="material-icons service" data-service="ocr"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="ocr-color-text"><b>Optical Character Recognition</b></p>
               <p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">format_textdirection_l_to_r</i>
+              <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
-              <p>Natural Language Processing</p>
+                <i class="material-icons service" data-service="nlp"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="nlp-color-text"><b>Natural Language Processing</b></p>
               <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">search</i>
+              <a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);">
-              <p>Corpus analysis</p>
+                <i class="material-icons service" data-service="corpus-analysis"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="corpus-analysis-color-text"><b>Corpus analysis</b></p>
               <p class="light">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.</p>
             </div>
           </div>

web/app/templates/nopaque.html.j2

@@ -58,23 +58,37 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
     <style>
       .primary-color {background-color: {{ primary_color }} !important;}
+      .primary-color-text {color: {{ primary_color }} !important;}
       .secondary-color {background-color: {{ secondary_color }} !important;}
+      .secondary-color-text {color: {{ secondary_color }} !important;}
 
       .corpus-analysis-color {background-color: {{ corpus_analysis_color }} !important;}
+      .corpus-analysis-color-text {color: {{ corpus_analysis_color }} !important;}
       .corpus-analysis-color.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
+      .corpus-analysis-color-text.text-darken {color: {{ corpus_analysis_color_darken }} !important;}
       .corpus-analysis-color.lighten {background-color: {{ corpus_analysis_color_lighten }} !important;}
+      .corpus-analysis-color-text.text-lighten {color: {{ corpus_analysis_color_lighten }} !important;}
 
       .file-setup-color {background-color: {{ file_setup_color }} !important;}
+      .file-setup-color-text {color: {{ file_setup_color }} !important;}
       .file-setup-color.darken {background-color: {{ file_setup_color_darken }} !important;}
+      .file-setup-color-text.text-darken {color: {{ file_setup_color_darken }} !important;}
       .file-setup-color.lighten {background-color: {{ file_setup_color_lighten }} !important;}
+      .file-setup-color-text.text-lighten {color: {{ file_setup_color_lighten }} !important;}
 
       .ocr-color {background-color: {{ ocr_color }} !important;}
+      .ocr-color-text {color: {{ ocr_color }} !important;}
       .ocr-color.darken {background-color: {{ ocr_color_darken }} !important;}
+      .ocr-color-text.text-darken {color: {{ ocr_color_darken }} !important;}
       .ocr-color.lighten {background-color: {{ ocr_color_lighten }} !important;}
+      .ocr-color-text.text-lighten {color: {{ ocr_color_lighten }} !important;}
 
       .nlp-color {background-color: {{ nlp_color }} !important;}
+      .nlp-color-text {color: {{ nlp_color }} !important;}
       .nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
+      .nlp-color-text.text-darken {color: {{ nlp_color_darken }} !important;}
       .nlp-color.lighten {background-color: {{ nlp_color_lighten }} !important;}
+      .nlp-color-text.text-lighten {color: {{ nlp_color_lighten }} !important;}
       {% if current_user.is_authenticated %}
         /*
          * ### Start sidenav-fixed offset ###

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

@@ -131,7 +131,7 @@
   <div class="card">
     <div class="card-content">
       <a class="btn-floating btn-large hoverable left" style="margin-right: 15px;">
-        <i class="material-icons service" data-service="corpus_analysis"></i>
+        <i class="material-icons service" data-service="corpus-analysis"></i>
       </a>
       <span class="card-title">Corpus analysis</span>
       <i>Create 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.</i>

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

@@ -10,7 +10,7 @@
 <div class="col s12 m3 push-m9">
   <div class="center-align">
     <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-      <i class="material-icons service" data-service="corpus_analysis"></i>
+      <i class="material-icons service" data-service="corpus-analysis"></i>
     </a>
   </div>
 </div>