diff --git a/resources/less/metager/parts/sidebar.less b/resources/less/metager/parts/sidebar.less
index d417af9b8492275bc8a3607a0fbe56d04ca36ea6..588398462fe30648f5ab2d95e05e089ebcf0e506 100644
--- a/resources/less/metager/parts/sidebar.less
+++ b/resources/less/metager/parts/sidebar.less
@@ -197,7 +197,7 @@
line-height: 23px;
border-radius: 5px;
color: grey;
- background-color: @background-color;
+ background-color: transparent;
&:after {
content: "≡";
}
diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less
index 15dbaf9125dd527e47597d43aeb47144b24e1348..68c3046485ecc4869c6cb7b419d0e18725590bfb 100644
--- a/resources/less/metager/startpage-only.less
+++ b/resources/less/metager/startpage-only.less
@@ -1,5 +1,7 @@
@clippathHeight: 30px;
-
+@scrollLinkHeight: 40px;
+@scrollLinkHeightMedium: 50px;
+@scrollLinkHeightMax: 70px;
:root { // the default is for screensizes bigger than 12000px
--screen-mobile: 550px;
--screen-extrasmall: 760px;
@@ -7,55 +9,42 @@
--screen-medium: 1200px;
}
+html {
+ display: block;
+ height: 100%;
+ &>body {
+ display: block;
+ height: 100%;
+ &>div.wrapper {
+ display: block;
+ height: 100%;
+ }
+ }
+}
+
.wrapper {
- min-height: 100vh;
+ height: 100%;
margin: 0;
padding: 0px;
}
#search-block {
+ min-height: 100%;
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;
+
}
#main-content {
justify-content: start!important;
width: 100%!important;
max-width: 100%!important;
+ overflow-y: scroll;
+ height: 100%;
+ scroll-behavior: smooth;
}
#plugin-btn-div {
@@ -71,42 +60,34 @@
justify-content: center;
align-items: flex-end;
}
-#plugin-btn {
- display: none;
-}
-#plugin { // creates a grid for the story-icons
+
+#scroll-links { // creates a grid for the story-icons
min-width: 100%;
+ min-height: @scrollLinkHeight;
+ margin-top: -@scrollLinkHeight;
display: flex;
text-align: center;
border-top:1px solid lightgrey;
position: sticky;
top: 0;
+ z-index: 19;
+
&>: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;
+ &>:nth-child(2) {
background-color: #ffffff;
color: #AD1A00
}
- &>:nth-child(4) {
- grid-area: diversity-link;
+ &>:nth-child(3) {
background-color: #edfdff;
color: #1e5294
}
- &>:nth-child(5) {
- grid-area: eco-link;
+ &>:nth-child(4) {
background-color: #e3ffe9;
color: #1a922e
}
- &>:nth-child(6) {
- grid-area: plugin-link;
- }
+
&>a {
display: flex;
justify-content: center;
@@ -130,6 +111,8 @@
&>img {
width: 20px;
height: 20px;
+ min-width: 20px;
+ min-height: 20px;
margin-right: 8px;
object-fit: contain;
}
@@ -288,10 +271,14 @@ a.story-button { // sets the story-button for all sections
background-color: #535353;
color: #ffffff;
}
-html{
- scroll-behavior: smooth;
-}
+
@media screen and (max-width: 1000px) { // changes the layout for screen sizes between 760-1000px
+
+ #scroll-links {
+ min-height: @scrollLinkHeightMedium;
+ margin-top: -@scrollLinkHeightMedium;
+ }
+
div#story-container h1{
font-size: 50px;
padding: 0 16px;
@@ -375,20 +362,23 @@ html{
}
}
@media screen and (max-width: 550px) { // changes the layout for screen sizes smaller than 550px
- div#scroll-link {
- 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: 16px;
- &>a:not(.four-reasons) {
- width: 35px;
- height: 35px;
+ #scroll-links {
+ min-height: @scrollLinkHeightMax;
+ margin-top: -@scrollLinkHeightMax;
+ &>a {
+ flex-direction: column;
+ font-size: .8em;
+ &>img {
+ margin-right: 0;
+ }
+ &>div {
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ }
}
}
+
div#story-container h1{
font-size: 25px;
}
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 8c6ef64b528be7b703d046b5b487b1903321565e..cbc732e49e6a8d081ccc44b464753527ce0cc5c4 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -3,27 +3,24 @@
@section('title', $title )
@section('content')
- <div id="search-block">
+ <div id="search-block">
<h1 id="startpage-logo">
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
- <img src="/img/metager.svg" alt="MetaGer" />
- </a>
- </h1>
- @include('parts.searchbar', ['class' => 'startpage-searchbar'])
- <div id="plugin-btn-div">
- <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="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') }}"> <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>⟪</i> MetaGer Installieren <i>⟪<i/></a>-->
- </div>
- </div>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">
+ <img src="/img/metager.svg" alt="MetaGer" />
+ </a>
+ </h1>
+ @include('parts.searchbar', ['class' => 'startpage-searchbar'])
+ <div id="plugin-btn-div">
+ <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>
+ <div id="scroll-links">
+ <a href="#story-privacy" title="{{ trans('mg-story.privacy.title') }}"><img src="/img/lock.svg" alt="{{ trans('mg-story.privacy.image.alt') }}"> <div>@lang("mg-story.privacy.title")</div></a>
+ <a href="#story-ngo" title="{{ trans('mg-story.ngo.title') }}"><img src="/img/heart.svg" alt="{{ trans('mg-story.ngo.image.alt') }}"> <div>@lang("mg-story.ngo.title")</div></a>
+ <a href="#story-diversity" title="{{ trans('mg-story.diversity.title') }}"><img src="/img/rainbow.svg" alt="{{ trans('mg-story.diversity.image.alt') }}"> <div>@lang("mg-story.diversity.title")</div></a>
+ <a href="#story-eco" title="{{ trans('mg-story.eco.title') }}"><img src="/img/leaf.svg" alt="{{ trans('mg-story.eco.image.alt') }}"> <div>@lang("mg-story.eco.title")</div></a>
+ </div>
<div id="story-container">
<section id="story-privacy">
<h1>{{ trans('mg-story.privacy.title') }}</h1>