Pi-hole/pi-hole
Pi-hole/pi-hole
1
0
Fork 0
mirror of https://github.com/pi-hole/pi-hole.git synced 2024-11-15 10:43:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Aligned pihole logo to center, Fixed responsive issue (#4036)

Browse source 
* Aligned pihole logo to center, Fixed responsive issue

* removed duplicate instance of #splashpage

Signed-off-by: Dany Gauthier <danygauthier57@yahoo.ca>
This commit is contained in:
Dany 2021-03-17 14:18:50 -04:00 committed by GitHub
parent ae762574e5
commit 13cf0c1288
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
advanced/blockingpage.css
View file

@ -145,7 +145,17 @@ body {
} }
/* User is greeted with a splash page when browsing to Pi-hole IP address */ /* 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 img { margin: 5px; width: 256px; }
#splashpage b { color: inherit; } #splashpage b { color: inherit; }
@ -196,6 +206,26 @@ header #bpAlt label {
display: block; 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 */ /* Click anywhere else on screen to hide #bpAbout */
#bpAboutToggle:checked { #bpAboutToggle:checked {
display: block; display: block;
@ -382,12 +412,44 @@ footer {
/* Responsive Content */ /* Responsive Content */
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
h1 a { font-size: 1.8rem; min-width: 170px; } h1 a {
footer span::before { content: "Generated "; } font-size: 1.8rem;
footer span { display: block; } min-width: 170px;
}
footer span::before {
content: "Generated ";
}
footer span {
display: block;
}
} }
@media only screen and (min-width: 1251px) { @media only screen and (min-width: 1251px) {
#bpWrapper, footer { border-radius: 0 0 5px 5px; } #bpWrapper, footer {
#bpAbout { border-right-width: 1px; } 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;
}
} }

10
advanced/index.php
View file

@ -71,15 +71,17 @@ if ($serverName === "pi.hole"
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
$viewPort $viewPort
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>● $serverName</title> <title>● $serverName</title>
<link rel='stylesheet' href='pihole/blockingpage.css'> <link rel='stylesheet' href='pihole/blockingpage.css'>
<link rel='shortcut icon' href='admin/img/favicons/favicon.ico' type='image/x-icon'> <link rel='shortcut icon' href='admin/img/favicons/favicon.ico' type='image/x-icon'>
</head> </head>
<body id='splashpage'> <body id='splashpage'>
<img src='admin/img/logo.svg' alt='Pi-hole logo' width='256' height='377'> <div id="pihole_card">
<br> <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> <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> <a href='/admin'>Did you mean to go to the admin panel?</a>
</div>
</body> </body>
</html> </html>
"; ";