changed the style of the mobile startpage

resources/lang/de/index.php

@@ -28,7 +28,7 @@ return [
     'focus-creator.focusname' => 'Suchname: ',
 
     'slogan.title' => 'Besser suchen, schneller finden',
-    'slogan.1'                          => 'Datenschutz & Privatsphäre: Bei uns einfach und selbstverständlich.<br>Wir arbeiten nicht gewinnorientiert, wir sind ein gemeinnütziger Verein: <a href="/beitritt">Werden Sie Mitglied</a> oder <a href="/spende">spenden Sie</a>!',
+    'slogan.1' => 'Datenschutz & Privatsphäre: Bei uns einfach und selbstverständlich. Wir arbeiten nicht gewinnorientiert, wir sind ein gemeinnütziger Verein: <a href="/beitritt">Werden Sie Mitglied</a> oder <a href="/spende">spenden Sie</a>!',
     'slogan.2' => 'Mit MetaGer bewahren Sie einen neutralen Blick auf’s Web!',
 
     'sponsors.head' => 'Sponsoren',

resources/less/metager/general/general.less

@@ -176,6 +176,9 @@ i.fa {
     margin: 0px 0px 45px 0px;
     white-space: nowrap;
     text-align: center;
+    @media(max-width: @screen-mobile){
+        margin-bottom: 25px;
+    }
     &>a {
         .logo;
         display: block;
@@ -361,8 +364,7 @@ li.nodot {
 .disabled,
 :disabled,
 .disabled *,
-:disabled *,
-    {
+:disabled * {
     color: #aaa !important;
     cursor: not-allowed !important;
 }

resources/less/metager/pages/start-page.less

@@ -13,14 +13,44 @@
     @media(min-width: @main-content-width) {
         width: @main-content-width;
     }
+    
     #plugin-btn-div {
         display: flex;
         justify-content: center;
-        margin-top: 5px;
+        margin-top: 16px;
     }
     #plugin-btn {
         color: @text-color;
     }
+    #scroll-helper {
+        .card-light;
+        position: absolute;
+        bottom: 0px;
+        right: 8px;
+        padding: 16px;
+        color: #777;
+        border: 0;
+        width: 30px;
+        height: 30px;
+        align-items: center;
+        justify-content: center;
+        display: none;
+        &:hover{
+            color: red;
+            background-color: #ccc;
+        }
+        @media(max-width: @screen-mobile) {
+            display: flex;
+        }
+    }
+
+}
+
+.startpage #main-content {
+    @media(max-width: @screen-mobile){
+        justify-content: start;
+        margin-top: 20vh;
+    }
 }
 
 #additional-content {
@@ -29,12 +59,19 @@
     display: flex;
     @media(max-width: @screen-mobile) {
         flex-direction: column;
+        position: absolute;
+        top: 100vh;
     }
     #about-us {
         max-width: 500px;
         margin-right: 50px;
         @media(max-width: @screen-mobile) {
-            margin: 0px 8px;
+            margin: 0px;
+            max-width: 100%;
+            .card-medium;
+            p {
+                text-align: justify;
+            }
         }
         h2 {
             font-size: 21px;
@@ -45,7 +82,8 @@
     }
     #sponsors {
         @media(max-width: @screen-mobile) {
-            margin: 20px 5px;
+            margin: 8px 0px;
+            .card-medium;
         }
         h2 {
             font-size: 21px;

resources/views/index.blade.php

@@ -8,18 +8,23 @@
 	</h1>
 	@include('parts.searchbar', ['class' => 'startpage-searchbar'])
 	<div id="plugin-btn-div">
-		<a id="plugin-btn" class="btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/plugin") }}" title="{{ trans('index.plugin-title') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a>
+		<a id="plugin-btn" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/plugin") }}" title="{{ trans('index.plugin-title') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a>
 	</div>
+	<a id="scroll-helper" href="#about-us">
+		<i class="fas fa-angle-double-down"></i>
+	</a>
 	<script src="{{ mix('js/scriptStartPage.js') }}" defer></script>
 	<script src="{{ mix('js/searchbar.js') }}" defer></script>
 @endsection
 
 @section('additional-content')
 	<div id="about-us">
+		<div>
 			<h2>{!! trans('index.slogan.title') !!}</h2>
 			<p>{!! trans('index.slogan.1') !!}</p>
 			<p>{!! trans('index.slogan.2') !!}</p>
 		</div>
+	</div>
 	<div id="sponsors">
 		<h2>{{ trans('index.sponsors.head') }}</h2>
 		<ul class="startpage">