diff --git a/resources/lang/de/mg-story.php b/resources/lang/de/mg-story.php
index 9a9f5ad13b75e61b63cbd2680393f1c363b9d0d5..b9a1aa3c54885c180c47dbaa361b237e556c8a93 100644
--- a/resources/lang/de/mg-story.php
+++ b/resources/lang/de/mg-story.php
@@ -1,7 +1,7 @@
<?php
return [
- 'four-reasons' => 'Vier Gründe MetaGer zu nutzen',
+ 'four-reasons' => 'Warum MetaGer?',
'privacy.image.alt' => 'Sicherheitsschloss',
'privacy.title' => 'Garantierte Privatsphäre',
'ngo.title' => 'Gemeinnütziger Verein',
diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less
index 5c3b247d2941105155e380384757f5095d3ad5d9..6815ba20aba1f632c509e75fbb2574bd73f7833e 100644
--- a/resources/less/metager/startpage-only.less
+++ b/resources/less/metager/startpage-only.less
@@ -9,13 +9,47 @@
.wrapper {
min-height: 100vh;
- margin-bottom: -50px;
+ margin: 0;
padding: 0px;
}
+
+#search-block {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ display: grid;
+ @supports (display: grid) {
+ justify-content: initial;
+ }
+ grid-template-rows: 35% auto auto auto 1fr;
+ grid-template-areas:
+ "."
+ "logo"
+ "searchbox"
+ "plugin"
+ "reasons";
+ &>h1 {
+ grid-area: logo;
+ }
+ &>fieldset {
+ grid-area: searchbox;
+ }
+ &>#plugin-btn-div {
+ grid-area: plugin;
+ margin: 0;
+ }
+ &>#center-scroll-link {
+ grid-area: reasons;
+ margin-top: 32px;
+ @supports (display: grid) {
+ margin-top: 0;
+ }
+ }
+}
+
#search-block {
min-height: 100vh;
- padding-top: 22vh;
}
#main-content {
@@ -35,40 +69,52 @@
#center-scroll-link { // centers the scroll-link grid
display: flex;
justify-content: center;
- margin-top:15vh;
+ align-items: flex-end;
+ padding-bottom: 50px;
}
-#scroll-link { // creates a grid for the story-icons
- display: grid;
- border-width: 1px;
- padding: 10px;
- border-radius: 8px;
- max-width: 300px;
- justify-items: center;
- grid-template-columns: 25% 25% 25% 25% ;
- grid-template-rows: 1fr 20px 1fr;
- grid-template-areas:
- "scr-link scr-link scr-link scr-link"
- ". . . ."
- "icn-privacy icn-ngo icn-diversity icn-eco";
-
- text-align: center;
- width: 90%;
- 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;
+#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";
+ &>:nth-child(1) {
+ grid-area: heading;
+ }
+ &>:nth-child(2) {
+ grid-area: privacy-link;
+ }
+ &>:nth-child(3) {
+ grid-area: ngo-link;
+ }
+ &>:nth-child(4) {
+ grid-area: diversity-link;
+ }
+ &>:nth-child(5) {
+ grid-area: eco-link;
+ }
+ &>:nth-child(6) {
+ grid-area: plugin-link;
+ }
+ &>a {
+ display: block;
+ color: inherit;
+ margin: 8px 0;
+ &#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;
}
- &:nth-child(5){
- grid-area: icn-eco;
+ &>img {
+ max-width: 20px;
+ max-height: 20px;
}
}
}
@@ -77,29 +123,6 @@
grid-row-start: 3;
}
-#scroll-link > a:not(.four-reasons) {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 48px;
- height: 48px;
- padding: 4px;
- border-radius: 50%;
- background-color: rgb(220, 233, 234);
- &>img {
- object-fit: contain;
- max-width: 60%;
- max-height: 60%;
- }
-}
-
-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 {
text-align: center;
@@ -107,6 +130,7 @@ footer {
bottom: 0px;
left: auto;
right: auto;
+ background-color: transparent;
}
#story-container > section { // creates the grid for the story sections
@@ -123,16 +147,17 @@ footer {
position: relative;
align-items:center;
min-height: 70vh;
- padding-bottom: @clippathHeight;
- padding-top: @clippathHeight;
- margin-top: -@clippathHeight;
+ &:not(:nth-child(1)){
+ padding-bottom: @clippathHeight;
+ padding-top: @clippathHeight;
+ margin-top: -@clippathHeight;
+ }
}
#story-container > section > h1 { //sets the heading for all sections
grid-area: heading;
font-size: 80px;
margin: 0;
- padding: 0 16px;
}
#story-container > section > p { // sets all paragraphs for all sections
@@ -157,12 +182,9 @@ footer {
object-fit: contain;
}
-footer {
- background-color: transparent;
-}
-
// following lines set the background and heading color of each section
#story-privacy {
+ margin-bottom: 0;
background-color: #EEEEEE;
}
@@ -251,6 +273,7 @@ html{
@media screen and (max-width: 1000px) { // changes the layout for screen sizes between 760-1000px
div#story-container h1{
font-size: 50px;
+ padding: 0 16px;
}
div#story-container p{
font-size: 25px;
@@ -329,12 +352,18 @@ 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-rows: 1fr auto 20px auto auto 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;
+ "icn-diversity icn-diversity icn-eco icn-eco"
+ ". . . .";
+ row-gap: 16px;
+ &>a:not(.four-reasons) {
+ width: 35px;
+ height: 35px;
+ }
}
div#story-container h1{
font-size: 25px;
@@ -384,9 +413,6 @@ html{
#story-container #story-plugin {
min-height: 70vh;
}
- #center-scroll-link{
- margin-top:10vh;
- }
}
@media screen and ( min-width: 551px) and (max-width: 760px) { // changes the layout for screen sizes between 551px and 760px
div#story-container h1{
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index f80e77a03d4f6964ffcea3d7eb4ce27cf6cbe3ec..6631ce73e04ac84c9bac8d77319ae1242f89e9a6 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -14,13 +14,14 @@
<a id="plugin-btn" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/plugin") }}" title="{{ trans('index.plugin-title') }}"><img src="/img/plug-in.svg" alt="Plus-Zeichen"> {{ trans('index.plugin') }}</a>
</div>
<div id="center-scroll-link">
- <div id="scroll-link">
- <a href="#story-privacy" class="four-reasons">{{ trans('mg-story.four-reasons') }}</a>
- <a href="#story-privacy" title="{{ trans('mg-story.privacy.title') }}"><img src="/img/lock.svg" alt="{{ trans('mg-story.privacy.image.alt') }}"></a>
- <a href="#story-ngo" title="{{ trans('mg-story.ngo.title') }}"><img src="/img/heart.svg" alt="{{ trans('mg-story.ngo.image.alt') }}"></a>
- <a href="#story-diversity" title="{{ trans('mg-story.diversity.title') }}"><img src="/img/rainbow.svg" alt="{{ trans('mg-story.diversity.image.alt') }}"></a>
- <a href="#story-eco"title="{{ trans('mg-story.eco.title') }}"><img src="/img/leaf.svg" alt="{{ trans('mg-story.eco.image.alt') }}"></a>
- </div>
+ <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>
+ </div>
</div>
</div>
<div id="story-container">
@@ -87,4 +88,5 @@
<p>{{ trans('mg-story.plugin.p') }}</p>
</section>
</div>
+
@endsection