mirror of
https://github.com/pi-hole/pi-hole
synced 2024-12-21 22:38:08 +00:00
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>
This commit is contained in:
parent
ae762574e5
commit
13cf0c1288
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
<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>
|
||||
";
|
||||
|
Loading…
Reference in New Issue
Block a user