diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less index 6815ba20aba1f632c509e75fbb2574bd73f7833e..15dbaf9125dd527e47597d43aeb47144b24e1348 100644 --- a/resources/less/metager/startpage-only.less +++ b/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; diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 6631ce73e04ac84c9bac8d77319ae1242f89e9a6..8c6ef64b528be7b703d046b5b487b1903321565e 100644 --- a/resources/views/index.blade.php +++ b/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>⟪</i> MetaGer Installieren <i>⟪<i/></a>--> </div> </div> </div>