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 <danygauthier57@yahoo.ca>
3 years ago · 13cf0c1288
parent ae762574e5
commit 13cf0c1288
2 changed files with 74 additions and 10 deletions
--- 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;
+    }
 }
--- a/advanced/index.php
+++ b/advanced/index.php
@ -71,15 +71,17 @@ if ($serverName === "pi.hole"
        <head>
            <meta charset='utf-8'>
            $viewPort
+            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>● $serverName</title>
            <link rel='stylesheet' href='pihole/blockingpage.css'>
            <link rel='shortcut icon' href='admin/img/favicons/favicon.ico' type='image/x-icon'>
        </head>
        <body id='splashpage'>
-            <img src='admin/img/logo.svg' alt='Pi-hole logo' width='256' height='377'>
-            <br>
-            <p>Pi-<strong>hole</strong>: Your black hole for Internet advertisements</p>
-            <a href='/admin'>Did you mean to go to the admin panel?</a>
+            <div id="pihole_card">
+              <img src='admin/img/logo.svg' alt='Pi-hole logo id="pihole_logo_splash" />
+              <p>Pi-<strong>hole</strong>: Your black hole for Internet advertisements</p>
+              <a href='/admin'>Did you mean to go to the admin panel?</a>
+            </div>
        </body>
    </html>
    ";