New bootstrap-based layout #30

Merged
Roflin merged 79 commits from bootstrap into master 2023-03-14 19:11:25 +01:00
2 changed files with 24 additions and 29 deletions
Showing only changes of commit 87df775c51 - Show all commits

View File

@ -4,7 +4,6 @@
* DO NOT COPY OR RE-USE WITHOUT EXPLICIT WRITTEN PERMISSION. THANK YOU. * DO NOT COPY OR RE-USE WITHOUT EXPLICIT WRITTEN PERMISSION. THANK YOU.
*/ */
@import url(//fonts.googleapis.com/css?family=Press+Start+2P);
@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);
@font-face { @font-face {
@ -17,6 +16,7 @@
body { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
background: #aaa 0 -50% fixed; background: #aaa 0 -50% fixed;
padding: 0 0 3rem;
} }
#wrapper, header .container { #wrapper, header .container {
@ -34,40 +34,34 @@ a:hover {
color: #262626; color: #262626;
} }
/* Logo
---------*/
h1#logo {
color: #fff;
float: left;
font: 200 50px 'Press Start 2P', sans-serif;
margin: 40px 0 50px 10px;
padding: 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
h1#logo:before {
color: #fff;
content: 'B';
float: left;
font: 75px 'Invaders';
margin: -4px 20px 0 0;
padding: 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
a h1#logo {
text-decoration: none;
}
a:hover h1#logo, a:hover h1#logo:before {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
/* Navigation /* Navigation
---------------*/ ---------------*/
#mainNav {
margin-bottom: 4rem;
}
.nav-divider { .nav-divider {
height: 2.5rem; height: 2.5rem;
border-left: .1rem solid rgba(255,255,255, 0.2); border-left: .1rem solid rgba(255,255,255, 0.2);
margin: 0 0.5rem; margin: 0 0.5rem;
} }
.navbar-brand {
padding-left: 80px;
position: relative;
}
i.space-invader::before {
color: #fff;
content: 'B';
display: inline-block;
font: 85px 'Invaders';
height: 85px;
left: -25px;
position: absolute;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
top: -5px;
transform: rotate(-5deg);
width: 85px;
}
/* Content boxes /* Content boxes
@ -261,7 +255,7 @@ a:hover h1#logo, a:hover h1#logo:before {
---------------------*/ ---------------------*/
.album_button_box { .album_button_box {
float: right; float: right;
margin-bottom: 20px; margin-bottom: 3rem;
} }
.album_button_box > a { .album_button_box > a {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

View File

@ -12,7 +12,7 @@ class MainNavBar extends NavBar
protected $outerMenuId = 'mainNav'; protected $outerMenuId = 'mainNav';
protected $innerMenuId = 'mainNavigation'; protected $innerMenuId = 'mainNavigation';
protected $ariaLabel = 'Main navigation'; protected $ariaLabel = 'Main navigation';
protected $navBarClasses = 'navbar-dark bg-dark sticky-top mb-4'; protected $navBarClasses = 'navbar-dark bg-dark sticky-top';
protected $primaryBadgeClasses = 'bg-light text-dark'; protected $primaryBadgeClasses = 'bg-light text-dark';
protected $secondaryBadgeClasses = 'bg-dark text-light'; protected $secondaryBadgeClasses = 'bg-dark text-light';
@ -22,6 +22,7 @@ class MainNavBar extends NavBar
<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>
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">