mirror of
https://github.com/lenaschimmel/queerallyear
synced 2024-09-20 06:01:53 +00:00
New navigation
This commit is contained in:
Lena Schimmel
parent
c676fe6ed8
commit
5919398352
4 changed files with 118 additions and 54 deletions
|
|
@ -5,6 +5,7 @@ exports.pages = [
|
|||
"title" : 'Queer all year',
|
||||
"cardtitle" : "Gay for one Day? Queer all Year!",
|
||||
"description" : "Wir sind nicht nur gay, sondern auch lesbisch, bi, pan, asexuell, trans, polyamor, oder auch einfach: queer. Wir haben nicht immer Grund, fröhlich zu sein. Wir kämpfen nach wie vor um Sichtbarkeit, Anerkennung, Aufklärung und körperliche Selbstbestimmung.",
|
||||
"hidden" : true
|
||||
},
|
||||
{
|
||||
"name" : "statement",
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ window.queer.colorLetter = function(letter) {
|
|||
|
||||
window.queer.initArrow = function () {
|
||||
window.queer.scrollDown = function () {
|
||||
$('html,body').animate({ scrollTop: document.body.scrollHeight }, "slow");
|
||||
$('html,body').animate({ scrollTop: document.documentElement.clientHeight * 0.9}, "slow");
|
||||
$("#arrow").fadeOut(300);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,8 +33,12 @@
|
|||
<!--[if IE]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
<div id="topbar">
|
||||
<ul>
|
||||
|
||||
<header class="header">
|
||||
<a href="/" class="logo"><img id="navilogo" style="width:13em;" src="img/navi.png" alt="Queer all year - Startseite"></a>
|
||||
<input class="menu-btn" type="checkbox" id="menu-btn" />
|
||||
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||
<ul class="menu">
|
||||
$NAVI
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
159
web/css/main.css
159
web/css/main.css
|
|
@ -190,24 +190,126 @@ textarea {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #fff;
|
||||
box-shadow: 1px 1px 12px 0 rgba(0,0,0,.6);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
}
|
||||
.header ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
.header li a {
|
||||
display: block;
|
||||
padding: 20px 20px;
|
||||
border-right: 1px solid #f4f4f4;
|
||||
text-decoration: none;
|
||||
}
|
||||
.header li a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.header .logo {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.header .menu {
|
||||
clear: both;
|
||||
max-height: 0;
|
||||
transition: max-height .2s ease-out;
|
||||
}
|
||||
|
||||
.header .menu-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 6px 12px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.header .menu-icon .navicon {
|
||||
background: #333;
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
transition: background .2s ease-out;
|
||||
width: 18px;
|
||||
}
|
||||
.header .menu-icon .navicon:before,
|
||||
.header .menu-icon .navicon:after {
|
||||
background: #333;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all .2s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
.header .menu-icon .navicon:before {
|
||||
top: 5px;
|
||||
}
|
||||
.header .menu-icon .navicon:after {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.header .menu-btn {
|
||||
display: none;
|
||||
}
|
||||
.header .menu-btn:checked ~ .menu {
|
||||
max-height: 260px;
|
||||
}
|
||||
.header .menu-btn:checked ~ .menu-icon .navicon {
|
||||
background: transparent;
|
||||
}
|
||||
.header .menu-btn:checked ~ .menu-icon .navicon:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.header .menu-btn:checked ~ .menu-icon .navicon:after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
|
||||
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.header li {
|
||||
float: left;
|
||||
}
|
||||
.header li a {
|
||||
padding: 14px 30px;
|
||||
}
|
||||
.header .menu {
|
||||
clear: none;
|
||||
float: right;
|
||||
max-height: none;
|
||||
}
|
||||
.header .menu-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#mainlogo {
|
||||
width:90%;
|
||||
position: absolute;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#previewlogo {
|
||||
width:30em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#navilogo {
|
||||
width: 15em;
|
||||
margin: -20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
#shadow {
|
||||
position: absolute;
|
||||
|
|
@ -326,49 +428,6 @@ button {
|
|||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#topbar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #D2E8FF;
|
||||
}
|
||||
|
||||
#topbar li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#topbar li a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#topbar li a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#topbar li a.active {
|
||||
font-weight: 600;
|
||||
background-color: #badbff;
|
||||
background-image: url(../img/back.jpg);
|
||||
}
|
||||
|
||||
#topbar li a:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#arrow a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue