Merge branch '994-remove-bootsrap' of...

Merge branch '994-remove-bootsrap' of https://gitlab.metager.de/open-source/MetaGer into 994-remove-bootsrap

resources/lang/de/mg-story.php

 <?php
 
 return [
-    'four-reasons' => '4 Gründe MetaGer zu nutzen',
+    'four-reasons' => 'Vier Gründe MetaGer zu nutzen',
     'privacy.image.alt' => 'Sicherheitsschloss',
     'privacy.title' => 'Garantierte Privatsphäre',
     'ngo.title' => 'Gemeinnütziger Verein',
     'ngo.image.alt' => 'Herz',
-    'diversity.title'=> 'Vielfältig & Frei',
+    'diversity.title' => 'Vielfältig & Frei',
     'diversity.image.alt' => 'Regenbogen',
     'eco.title' => '100% Ökostrom',
-    'eco.image.alt'=> 'grünes Blatt',
+    'eco.image.alt' => 'grünes Blatt',
     'btn-about-us' => 'Über uns',
-    'btn-data-protection' => 'Unsere Datenschutzerklärung',
+    'btn-data-protection' => 'Datenschutzerklärung',
     'privacy.p' => 'Mit uns behalten Sie die volle Kontrolle über Ihre Daten. Mit der Anonym-Öffnen-Funktion bleiben Sie auch beim Weitersurfen geschützt. <br> Wir tracken nicht. Wir speichern nicht.',
     'btn-SUMA-EV' => 'Der SUMA-EV',
-    'btn-donate'=> 'Spendenformular',
-    'btn-member' => 'Mitgliedsantrag',
-    'btn-member-advantage' => 'Weitere Mitgliedsvorteile',
+    'btn-donate' => 'Spendenformular',
+    'btn-member' => 'Aufnahmeantrag',
+    'btn-member-advantage' => 'Mitgliedschaft',
     'ngo.p' => 'Metager wird getragen vom gemeinnützigen SUMA-EV, Verein für freien Wissenszugang. Unterstützen Sie uns, indem Sie spenden oder Mitglied werden. Mitglieder suchen auf Metager werbefrei.',
-    'btn-mg-code'=> 'Metager-Quellcode',
+    'btn-mg-code' => 'Metager-Quellcode',
     'btn-mg-algorithm' => 'Unser Algorithmus',
-    'diversity.p' => 'Metager schützt gegen Zensur, indem es Ergebnisse vieler Suchmaschinen kombiert. Unsere Algorithmen sind transparent und für jeden einsehbar.<br>Der Quellcode ist frei und open-source.',
-  
+    'diversity.p' => 'Metager schützt gegen Zensur, indem es Ergebnisse vieler Suchmaschinen kombiert. Unsere Algorithmen sind transparent und für jeden einsehbar.<br>Der Quellcode ist frei und Open Source.',
+
     'btn-more' => 'Mehr dazu',
     'eco.p' => 'Wir achten auf die Nachhaltigkeit und den Resourcenverbrauch unserer Dienste. Wir verwenden nur Strom aus regenerativen Energiequellen.<br>Vom Server bis zur Kaffeemaschine.',
     'plugin.title' => 'Jetzt MetaGer installieren',
-    'plugin.btn-add'=> 'MetaGer-Plugin hinzufügen',
+    'plugin.btn-add' => 'MetaGer-Plugin hinzufügen',
     'plugin.btn-app' => 'MetaGer-App',
     'plugin.image.alt' => 'Metager-Apps',
-    'plugin.p'=> 'Mit unserem Plugin können Sie MetaGer als Standardsuchmaschine festlegen. Und mit der App nutzen Sie MetaGer ganz bequem auf Ihrem Smartphone.',
+    'plugin.p' => 'Mit unserem Plugin können Sie MetaGer als Standardsuchmaschine festlegen. Und mit der App nutzen Sie MetaGer ganz bequem auf Ihrem Smartphone.',
     'btn-about-us' => 'Über uns',
 
 ];

resources/lang/en/mg-story.php

 <?php
 
 return [
-    'four-reasons' => '4 reasons to use MetaGer',
+    'four-reasons' => 'Four reasons to use MetaGer',
     'privacy.image.alt' => 'lock',
     'privacy.title' => 'Guaranteed Privacy',
     'ngo.title' => 'Run by a Nonprofit Organization',
     'ngo.image.alt' => 'Heart',
-    'diversity.title'=> 'Diverse & Free',
+    'diversity.title' => 'Diverse & Free',
     'diversity.image.alt' => 'Rainbow',
     'eco.title' => '100% Renewable Energy',
-    'eco.image.alt'=> 'green leaf',
+    'eco.image.alt' => 'green leaf',
     'btn-about-us' => 'About Us',
-    'btn-data-protection' => 'Our Privacy Policy',
+    'btn-data-protection' => 'Privacy Policy',
     'privacy.p' => 'With us you have full control over your data. We don\'t track. We don\'t save. Stay protected with our anonymous proxy.',
     'btn-SUMA-EV' => 'SUMA-EV',
-    'btn-donate'=> 'Donation Form',
+    'btn-donate' => 'Donation Form',
     'btn-member' => 'Member Form',
-    'btn-member-advantage' => 'More Member Advantages',
+    'btn-member-advantage' => 'Membership',
     'ngo.p' => 'MetaGer is developed and run by our nonprofit organization, SUMA-EV–Association for Free Access to Knowledge. Strengthen us by becoming a member or by donating to SUMA-EV. Members search ad free!',
-    'btn-mg-code'=> 'Metager Source Code',
+    'btn-mg-code' => 'Metager Source Code',
     'btn-mg-algorithm' => 'Our Algorithm',
     'diversity.p' => 'MetaGer protects against censorship by combining the results of multiple search engines. Our algorithms are transparent and available for everyone to read. Our source code is free.',
     'btn-more' => 'More',
-    'eco.p' => 'Sustainability and efficent use of resources are important to us. All of our services are run using renewable energy. From the server to the coffee machine.',
+    'eco.p' => 'Sustainability and efficient use of resources are important to us. All of our services are run using renewable energy. From the server to the coffee machine.',
     'plugin.title' => 'Install MetaGer Now',
-    'plugin.btn-add'=> 'Add MetaGer Plugin',
+    'plugin.btn-add' => 'Add MetaGer Plugin',
     'plugin.btn-app' => 'MetaGer App',
     'plugin.image.alt' => 'Metager Apps',
-    'plugin.p'=> 'Use our plugin to install MetaGer as your search engine. You can comfortably use the MetaGer app on your smartphone.',
+    'plugin.p' => 'Use our plugin to install MetaGer as your search engine. You can comfortably use the MetaGer app on your smartphone.',
     'btn-about-us' => 'About Us',
 
 ];

resources/less/metager/startpage-only.less

@@ -54,6 +54,21 @@
     margin-left: 0px;
     margin-right: 0px;
     align-items: center;
+
+    a{
+        &:nth-child(2){
+            grid-area: icn-privacy;
+        }
+        &:nth-child(3){
+            grid-area: icn-ngo;
+        }
+        &:nth-child(4){
+            grid-area: icn-diversity;
+        }
+        &:nth-child(5){
+            grid-area: icn-eco;
+        }
+    }
 }
 
 .four-reasons ~ a {
@@ -74,6 +89,8 @@ a.four-reasons { // sets the '4 reasons to use MetaGer' link
     grid-area: scr-link;
     color: black;
     font-size: 18px;
+    display: block;
+    width: 100%;
 }
 
 footer {
@@ -133,6 +150,7 @@ footer {
 }
 
 #story-ngo {
+    grid-area: "icn-ngo";
     background-color: #ffffff;
 }
 
@@ -141,6 +159,7 @@ footer {
 }
 
 #story-diversity {
+    grid-area: "icn-diversity";
     background-color: #edfdff;
 }
 
@@ -149,6 +168,7 @@ footer {
 }
 
 #story-eco {
+    grid-area: "icn-eco";
     background-color: rgb(227, 255, 233);
 }
 
@@ -165,9 +185,11 @@ footer {
 .story-links {
     grid-area: story-links;
     display: flex;
+    flex-wrap: wrap;
     padding: 0px;
     list-style: none;
     gap: 2em;
+
 } 
 a.story-button { // sets the story-button for all sections
     padding: 12px;
@@ -263,6 +285,14 @@ html{
     }
 }
 @media screen and (max-width: 550px) { // changes the layout for screen sizes smaller than 550px
+    div#scroll-link {
+        grid-template-rows: 1fr 1fr 1fr;
+        grid-template-areas: 
+            "scr-link scr-link scr-link scr-link"
+            "icn-privacy icn-privacy icn-ngo icn-ngo"
+            "icn-diversity icn-diversity icn-eco icn-eco";
+        row-gap: 2rem;
+    }
     div#story-container h1{
       font-size: 25px;
     }
@@ -294,7 +324,6 @@ html{
         grid-area: story-links;
         display: flex;
         align-items: stretch;
-        flex-direction: column;
         padding: 15px;
         list-style: none;
         gap: 20px;
@@ -347,7 +376,6 @@ html{
         grid-area: story-links;
         display: flex;
         align-items: stretch;
-        flex-direction: column;
         padding: 15px;
         list-style: none;
         gap: 20px;