New bootstrap-based layout #30
@ -5,6 +5,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
|
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
|
||||||
|
@import url('//fonts.googleapis.com/css2?family=Coda&display=swap');
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Invaders';
|
font-family: 'Invaders';
|
||||||
@ -21,7 +22,6 @@ body {
|
|||||||
|
|
||||||
#wrapper, header .container {
|
#wrapper, header .container {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
min-width: 900px;
|
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@ -38,6 +38,7 @@ a:hover {
|
|||||||
/* Navigation
|
/* Navigation
|
||||||
---------------*/
|
---------------*/
|
||||||
#mainNav {
|
#mainNav {
|
||||||
|
font-family: 'Coda', sans-serif;
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
}
|
}
|
||||||
.nav-divider {
|
.nav-divider {
|
||||||
@ -57,10 +58,43 @@ i.space-invader::before {
|
|||||||
height: 85px;
|
height: 85px;
|
||||||
left: -25px;
|
left: -25px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
|
||||||
top: -5px;
|
top: -5px;
|
||||||
transform: rotate(-5deg);
|
transform: rotate(-5deg);
|
||||||
width: 85px;
|
width: 110px;
|
||||||
|
}
|
||||||
|
i.space-invader.alt-1::before {
|
||||||
|
content: 'C';
|
||||||
|
}
|
||||||
|
i.space-invader.alt-2::before {
|
||||||
|
content: 'D';
|
||||||
|
}
|
||||||
|
i.space-invader.alt-3::before {
|
||||||
|
content: 'E';
|
||||||
|
}
|
||||||
|
i.space-invader.alt-4::before {
|
||||||
|
content: 'H';
|
||||||
|
}
|
||||||
|
i.space-invader.alt-5::before {
|
||||||
|
content: 'I';
|
||||||
|
}
|
||||||
|
i.space-invader.alt-6::before {
|
||||||
|
content: 'N';
|
||||||
|
}
|
||||||
|
i.space-invader.alt-7::before {
|
||||||
|
content: 'O';
|
||||||
|
}
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.navbar-brand {
|
||||||
|
padding-left: 60px;
|
||||||
|
}
|
||||||
|
i.space-invader::before {
|
||||||
|
font-size: 50px;
|
||||||
|
left: -10px;
|
||||||
|
top: -7px;
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -73,6 +107,9 @@ i.space-invader::before {
|
|||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
|
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
.content-box h1 {
|
||||||
|
font-family: 'Coda', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tiled grid
|
/* Tiled grid
|
||||||
|
@ -18,11 +18,15 @@ class MainNavBar extends NavBar
|
|||||||
|
|
||||||
public function html_main()
|
public function html_main()
|
||||||
{
|
{
|
||||||
|
// Select a random space invader, with a bias towards the mascot
|
||||||
|
$rnd = rand(0, 100);
|
||||||
|
$alt = $rnd > 50 ? ' alt-' . ($rnd % 6 + 1) : '';
|
||||||
|
|
||||||
echo '
|
echo '
|
||||||
<nav id="', $this->outerMenuId, '" class="navbar navbar-expand-lg ', $this->navBarClasses, '" aria-label="', $this->ariaLabel, '">
|
<nav id="', $this->outerMenuId, '" class="navbar navbar-expand-lg ', $this->navBarClasses, '" aria-label="', $this->ariaLabel, '">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="navbar-brand flex-grow-1" href="', BASEURL, '/">
|
<a class="navbar-brand flex-grow-1" href="', BASEURL, '/">
|
||||||
<i class="space-invader"></i>
|
<i class="space-invader', $alt, '"></i>
|
||||||
HashRU Pics
|
HashRU Pics
|
||||||
</a>
|
</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#', $this->innerMenuId, '" aria-controls="', $this->innerMenuId, '" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#', $this->innerMenuId, '" aria-controls="', $this->innerMenuId, '" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
Loading…
Reference in New Issue
Block a user