add pic, new category for about page, new header

resources/lang/de/about.php

@@ -2,6 +2,12 @@
 
 return [
     'head.1' => 'Über uns',
+    'head.2' => 'Chronik',
+    'head.3' => 'Wofür wir stehen',
+    'head.4' => 'Vorteile bei der Nutzung von MetaGer',
+
+    'text.1'=>'<h3><img class= "mg-icon" src="/img/lock.svg"> Garantierte Privatsphäre:</h3>Uns ist Privatsphäre und Datenschutz wichtig. Daher tracken und speichern wir keine Personenbezogenen Daten und bieten mehrere Services zum Schutz Ihrer Privatsphäre an. <h3><img class= "mg-icon" src="/img/heart.svg"> Gemeinnütziger Verein:</h3> MetaGer ist ein Projekt des gemeinnützigen Vereins SUMA-EV, Verein für freien Wissenszugang. Der SUMA-EV setzt sich vor allem für die Förderung von digitaler Kompetenz ein. <h3> <img class= "mg-icon" src="/img/rainbow.svg"> Vielfältig und Frei: </h3> Durch die Veröffentlichung unseres Quellcodes zeigen wir, dass uns freier Wissenszugang wichtig ist. Unser Quellcode ist frei und Open Source. Zusätzlich schützen wir gegen Zensur durch vielfältige Ergebnisse. <h3> <img class= "mg-icon" src="/img/leaf.svg"> 100% Ökostrom: </h3> Nachhaltigkeit und Resourcenverbrauch ist auch für uns ein großes Thema. Daher achten wir auf den Verbrauch unserer Dienste. ',
+    'text.2'=>'Open source, Anonym öffnen funktion, tor service, Metasuchmaschine also mehrere ergebnisse vielfältig, speichern keine personenbezogenen daten, auschließlich nachhaltige energie',
 
     'timeline.1' => 'März 1996: Cebit Hannover',
     'timeline.1.1' => 'Die Idee von MetaGer entsteht während der Computermesse CeBIT beim Mittagessen auf einer Papierserviette. Die Arbeit am ersten Prototypen beginnt noch am gleichen Abend.',

resources/less/metager/general/base.less

@@ -105,6 +105,10 @@ h3 {
     .first-last-child-margin-fix;
 }
 
+.static-page-header{
+    text-align: center;
+}
+
 p {
     font-size: 1em;
     .first-last-child-margin-fix;
@@ -281,7 +285,8 @@ summary {
             display: none;
         }
     }
-    &.delayed:after {
+    &.delayed:after {  text-align: center;
+
         transition-delay: 0.5s;
     }
     &.delayed-soft:after {

resources/less/metager/pages/about.less

@@ -17,5 +17,13 @@
 
 }
 .timeline-container > *:not(:last-child) {
-    margin-bottom: 2em;
+    margin-bottom: 5em;
+  }
+
+  .timeline-container img {
+      border: 4px solid #888;
+      max-width: 80%;
+      width: 30em;
+      border-radius: 15px;
+
   }

resources/views/about.blade.php

@@ -3,9 +3,19 @@
 @section('title', $title )
 
 @section('content')
-<div>
+<div class="static-page-header">
 	<h1>{{ trans('about.head.1') }}</h1>
 </div>
+<div class="card-heavy">
+	<h1>{{ trans('about.head.3') }}</h1>
+	<p>{!! trans('about.text.1') !!}</p>
+</div>
+<div class="card-heavy">
+	<h1>{{ trans('about.head.4') }}</h1>
+	<p>{{ trans('about.text.2') }}</p>
+</div>
+<div class="card-heavy">
+	<h1>{{ trans('about.head.2') }}</h1>
 <div class="timeline-container">
 	<div>
 		<h2>{{ trans('about.timeline.1') }}</h2>
@@ -86,18 +96,18 @@
 		<h2>{{ trans('about.timeline.16') }}</h2>
 		<p>{{ trans('about.timeline.16.1') }}</p>
 		<picture>
-			<img src="/img/startpage_2019.png" alt="MetaGer 2019" style="width:auto;">
+			<source media="(max-width:465px)" srcset="/img/2019.avif" type="image/avif">
+			<img src="/img/startpage_2019.png" alt="MetaGer 2019">
 		  </picture> 
 	</div>
-	<div>
+	<div class="timeline-item-alternate">
 		<h2>{{ trans('about.timeline.17') }}</h2>
 		<p>{!! trans('about.timeline.17.1') !!}</p>
 		<picture>
-			<img src="/img/startpage_2020.png" alt="MetaGer 2020" style="width:auto;">
+			<img src="/img/startpage_2020.png" alt="MetaGer 2020">
 		  </picture> 
 	</div>
-
-
-
+	</div>
 </div>
+
 @endsection