From f5fcc8f2ad56dae55104ace369f94ebf4773e148 Mon Sep 17 00:00:00 2001 From: Dominik Pfennig <dominik@suma-ev.de> Date: Mon, 20 Mar 2017 11:52:21 +0100 Subject: [PATCH] Header neu formatiert --- public/css/style.css | 43 +++++++++++++++++++++++++---- resources/views/ProxyPage.blade.php | 24 ++++++++++------ 2 files changed, 54 insertions(+), 13 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 86ea211..c5f60ec 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,10 +1,14 @@ nav { - height: 100px; margin-top: 10px; + height: 100px; border-bottom: 10px solid #fb0; } nav #proxy-logo { + text-align: center; +} + +nav #proxy-logo img { max-width: 200px; } @@ -20,12 +24,41 @@ nav #proxy-text > ul > li + li { color: #428bca; } -nav #proxy-options > ul > li { - padding-bottom: 1px; +nav #proxy-advertisement > a { + display: block; + color: #333; + text-decoration: none; } -nav #proxy-options > ul > li > a { - display: block; +nav #proxy-advertisement { + text-align: center; + border: 1px solid lightgrey; + border-radius: 5px; + padding: 0; +} + +nav #proxy-advertisement > a > p { + margin: 0; +} + +nav #proxy-advertisement > a > p.heading { + font-weight: bold; + font-size: 16px; +} + +nav #proxy-advertisement > a > p.url { + color: #428bca; +} + +nav #proxy-advertisement > a:hover p.url { + text-decoration: underline; +} + +nav #proxy-advertisement .ad-marker { + position: absolute; + right: 15px; + color: lightgrey; + font-size: 12px; } #site-proxy-iframe { diff --git a/resources/views/ProxyPage.blade.php b/resources/views/ProxyPage.blade.php index 0381843..75189b2 100644 --- a/resources/views/ProxyPage.blade.php +++ b/resources/views/ProxyPage.blade.php @@ -8,19 +8,27 @@ <nav> <div class="container-fluid"> <div class="row"> - <div id="proxy-logo" class="col-xs-2"> - <img src="/img/mglogo_klein.png" /> + <div id="proxy-logo" class="visible-lg col-lg-2"> + <a href="https://metager.de"> + <img src="/img/mglogo_klein.png" /> + </a> </div> - <div id="proxy-text" class="col-xs-8"> + <div id="proxy-text" class="col-xs-6 col-lg-5"> <ul class="list-unstyled"> - <li>MetaGer/SUMA-EV Proxy (Beta): Anonymisiert & verschlüsselt. SUMA-EV ist weder Eigentümer noch Urheber von Inhalten.</li> + <li><nobr>MetaGer/SUMA-EV Proxy (Beta): Anonymisiert & verschlüsselt.</nobr> <nobr>SUMA-EV ist weder Eigentümer noch Urheber von Inhalten.</nobr></li> <li>Skripte sind deaktiviert. Webseiten-Darstellung kann verändert sein.</li> + <li><a href="{!!$targetUrl!!}" class="btn btn-danger btn-xs">Proxy ausschalten</a></li> </ul> </div> - <div id="proxy-options" class="col-xs-2"> - <ul class="list-unstyled"> - <li><a href="{!!$targetUrl!!}" class="btn btn-danger btn-xs">Proxy ausschalten</a></li> - </ul> + <div id="proxy-advertisement" class="col-xs-6 col-lg-5"> + <a href="http://metager.to/k25u0" target="_blank"> + <span class="ad-marker">Anzeige</span> + <p class="heading">Samsung Galaxy S7 im Preisvergleich</p> + <p class="url">www.idealo.de/preisvergleich/samsung-galaxy-s7/</p> + <p class="line">Jetzt Samsung Galaxy S7 ohne Vertrag zum günstigsten Preis finden!</p> + <p class="line">Große Shopvielfalt, Testberichte & Meinungen. Jetzt auf idealo.de</p> + </a> + </div> </div> </div> -- GitLab