Fix some display issues on smaller screens for the landing page

app/templates/main/index.html.j2

@@ -73,9 +73,9 @@
         </div>
 
         <div class="col s12">
-          <p class="hide-on-small-only">&nbsp;</p>
           <div class="row">
             <div class="col s12 m6 l3 center-align">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.file_setup_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="file-setup-pipeline"></i>
               </a>
@@ -84,6 +84,7 @@
               <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">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.tesseract_ocr_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="tesseract-ocr-pipeline"></i>
               </a>
@@ -92,6 +93,16 @@
               <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">
+              <p>&nbsp;</p>
+              <a href="{{ url_for('services.transkribus_htr_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
+                <i class="nopaque-icons service-color darken service-icon" data-service="transkribus-htr-pipeline"></i>
+              </a>
+              <br><br>
+              <p class="service-color-text text-darken" data-service="transkribus-htr-pipeline"><b>Transkribus HTR Pipeline</b></p>
+              <p class="light">nopaque converts your image data – like photos or scans – into text data through HTR 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">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.spacy_nlp_pipeline') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="spacy-nlp-pipeline"></i>
               </a>
@@ -100,6 +111,7 @@
               <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">
+              <p>&nbsp;</p>
               <a href="{{ url_for('services.corpus_analysis') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
                 <i class="nopaque-icons service-color darken service-icon" data-service="corpus-analysis"></i>
               </a>