From 13cf0c12881447a4fc7cab5cedee6e2cd7514e0c Mon Sep 17 00:00:00 2001 From: Dany <69208423+Cafetier@users.noreply.github.com> Date: Wed, 17 Mar 2021 14:18:50 -0400 Subject: [PATCH] Aligned pihole logo to center, Fixed responsive issue (#4036) * Aligned pihole logo to center, Fixed responsive issue * removed duplicate instance of #splashpage Signed-off-by: Dany Gauthier --- advanced/blockingpage.css | 74 +++++++++++++++++++++++++++++++++++---- advanced/index.php | 10 +++--- 2 files changed, 74 insertions(+), 10 deletions(-) diff --git a/advanced/blockingpage.css b/advanced/blockingpage.css index 9f82a27e..0cc7a65c 100644 --- a/advanced/blockingpage.css +++ b/advanced/blockingpage.css @@ -145,7 +145,17 @@ body { } /* User is greeted with a splash page when browsing to Pi-hole IP address */ -#splashpage { background: #222; color: rgba(255, 255, 255, 0.7); text-align: center; } +#splashpage { + background: #222; + color: rgba(255, 255, 255, 0.7); + text-align: center; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + #splashpage img { margin: 5px; width: 256px; } #splashpage b { color: inherit; } @@ -196,6 +206,26 @@ header #bpAlt label { display: block; } +html, body { + height: 100%; +} + +#pihole_card { + width: 400px; + height: auto; + max-width: 400px; +} + + #pihole_card p, #pihole_card a { + font-size: 13pt; + text-align: center; + } + +#pihole_logo_splash { + height: auto; + width: 100%; +} + /* Click anywhere else on screen to hide #bpAbout */ #bpAboutToggle:checked { display: block; @@ -382,12 +412,44 @@ footer { /* Responsive Content */ @media only screen and (max-width: 500px) { - h1 a { font-size: 1.8rem; min-width: 170px; } - footer span::before { content: "Generated "; } - footer span { display: block; } + h1 a { + font-size: 1.8rem; + min-width: 170px; + } + + footer span::before { + content: "Generated "; + } + + footer span { + display: block; + } } @media only screen and (min-width: 1251px) { - #bpWrapper, footer { border-radius: 0 0 5px 5px; } - #bpAbout { border-right-width: 1px; } + #bpWrapper, footer { + border-radius: 0 0 5px 5px; + } + + #bpAbout { + border-right-width: 1px; + } +} + +@media only screen and (max-width: 400px) { + #pihole_card { + width: 100%; + height: auto; + } + + #pihole_card p, #pihole_card a { + font-size: 100%; + } +} + +@media only screen and (max-width: 256px) { + #pihole_logo_splash { + width: 90% !important; + height: auto; + } } diff --git a/advanced/index.php b/advanced/index.php index ca8c35e4..eea44462 100644 --- a/advanced/index.php +++ b/advanced/index.php @@ -71,15 +71,17 @@ if ($serverName === "pi.hole" $viewPort + ● $serverName - Pi-hole logo -
-

Pi-hole: Your black hole for Internet advertisements

- Did you mean to go to the admin panel? +
+ Pi-hole logo id="pihole_logo_splash" /> + <p>Pi-<strong>hole</strong>: Your black hole for Internet advertisements</p> + <a href=Did you mean to go to the admin panel? +
";