New bootstrap-based layout #30
@ -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);
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user