Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

MainNavBar: randomize space invader; add Coda font

Browse Source
This commit is contained in:
Aaron van Geffen 2023-03-11 16:38:03 +01:00
parent 02b43035f3
commit 0a8da104cc
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/css/default.css
View File

@ -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

6
templates/MainNavBar.php
View File

@ -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">