implemented new top page layout

resources/less/metager/startpage-only.less

@@ -70,51 +70,71 @@
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    padding-bottom: 50px;
 }
 #plugin-btn {
     display: none;
 }
 #plugin { // creates a grid for the story-icons
-    min-width: 500px;
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-template-areas: "heading heading" "privacy-link ngo-link" "diversity-link eco-link" "plugin-link plugin-link";
+    min-width: 100%;
+    display: flex;
+    text-align: center;
+    border-top:1px solid lightgrey;
+    position: sticky;
+    top: 0;
     &>:nth-child(1) {
         grid-area: heading;
+        display:none;
     }
     &>:nth-child(2) {
         grid-area: privacy-link;
+        background-color: #EEEEEE;
     }
     &>:nth-child(3) {
         grid-area: ngo-link;
+        background-color: #ffffff;
+        color: #AD1A00
     }
     &>:nth-child(4) {
         grid-area: diversity-link;
+        background-color: #edfdff;
+        color: #1e5294
     }
     &>:nth-child(5) {
         grid-area: eco-link;
+        background-color: #e3ffe9;
+        color: #1a922e
     }
     &>:nth-child(6) {
         grid-area: plugin-link;
     }
     &>a {
-        display: block;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         color: inherit;
-        margin: 8px 0;
+        padding: 8px;
+        width: 25%;
         &#story-plugin-link {
-            border: 1px solid #5f5fe1;
-            border-radius: 5px;
-            max-width: 150px;
-            background-color: #5f5fe1;
-            color: white;
             text-align: center;
             align-self: center;
             padding: 4px;
+            max-width: 250px;
+            align-self: center;
+            &>i {
+                font-style: normal;
+                display: inline-block;
+                padding: 8px 0;
+                transform: rotate(-90deg);
+            }
         }
         &>img {
-            max-width: 20px;
-            max-height: 20px;
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+            object-fit: contain;
+        }
+        &>span {
+            display: block;
         }
     }
 }
@@ -125,6 +145,7 @@
 
 
 footer {
+    display: none;
     text-align: center;
     position: absolute;
     bottom: 0px;
@@ -299,6 +320,9 @@ html{
     #story-container > section .story-icon {
         text-align: left;
     }
+    #plugin > a {
+        flex-direction: column;
+    }
     .story-links {
         grid-area: story-links;
         display: flex;

resources/views/index.blade.php

@@ -16,11 +16,11 @@
     <div id="center-scroll-link">
       <div id="plugin" class="">
       <h2>Ist MetaGer schon Ihre Standardsuchmaschine?</h2>
-      <a href="#story-privacy" title="{{ trans('mg-story.privacy.title') }}"><img src="/img/lock.svg" alt="{{ trans('mg-story.privacy.image.alt') }}"> @lang("mg-story.privacy.title")</a>
-      <a href="#story-ngo" title="{{ trans('mg-story.ngo.title') }}"><img src="/img/heart.svg" alt="{{ trans('mg-story.ngo.image.alt') }}"> @lang("mg-story.ngo.title")</a>
-      <a href="#story-diversity" title="{{ trans('mg-story.diversity.title') }}"><img src="/img/rainbow.svg" alt="{{ trans('mg-story.diversity.image.alt') }}"> @lang("mg-story.diversity.title")</a>
-      <a href="#story-eco" title="{{ trans('mg-story.eco.title') }}"><img src="/img/leaf.svg" alt="{{ trans('mg-story.eco.image.alt') }}"> @lang("mg-story.eco.title")</a>
-      <a id="story-plugin-link" href="#story-plugin">MetaGer Installieren</a>
+      <a href="#story-privacy" title="{{ trans('mg-story.privacy.title') }}"><img src="/img/lock.svg" alt="{{ trans('mg-story.privacy.image.alt') }}"> <span>@lang("mg-story.privacy.title")</span></a>
+      <a href="#story-ngo" title="{{ trans('mg-story.ngo.title') }}"><img src="/img/heart.svg" alt="{{ trans('mg-story.ngo.image.alt') }}"> <span>@lang("mg-story.ngo.title")</span></a>
+      <a href="#story-diversity" title="{{ trans('mg-story.diversity.title') }}"><img src="/img/rainbow.svg" alt="{{ trans('mg-story.diversity.image.alt') }}"> <span>@lang("mg-story.diversity.title")</span></a>
+      <a href="#story-eco" title="{{ trans('mg-story.eco.title') }}"><img src="/img/leaf.svg" alt="{{ trans('mg-story.eco.image.alt') }}"> <span>@lang("mg-story.eco.title")</span></a>
+      <!--<a id="story-plugin-link" href="#story-plugin"><i>&#10218;</i> MetaGer Installieren <i>&#10218;<i/></a>-->
     </div>
     </div>
     </div>