1
0
Fork 0

[SITE] finish nav for mobile and second level

This commit is contained in:
Jannik Beyerstedt 2016-04-04 13:17:05 +02:00
parent 74408319b5
commit f04a4cb18c
9 changed files with 1747 additions and 42 deletions

File diff suppressed because it is too large Load diff

Binary file not shown.

241
assets/css/main.css Normal file
View file

@ -0,0 +1,241 @@
/* STYLE for jannikbeyerstedt.de
* generic styles
*/
/* line 11, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px; }
/* line 16, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
h1, h2, h3, h4 {
margin-bottom: 18px;
font-family: 'Crimson Text', serif; }
/* line 20, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
h5 {
margin-bottom: 8px; }
/* line 23, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
h6 {
margin-bottom: 5px; }
/* line 26, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
p {
margin-top: 0;
line-height: 1.5em; }
/* line 34, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
header {
margin-bottom: 20px; }
/* line 36, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
header img {
width: 75px;
height: 75px;
float: left; }
/* line 49, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav {
box-sizing: border-box; }
/* line 51, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav {
margin: 0;
padding-left: 0; }
/* line 54, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav a {
text-decoration: none;
background-color: inherit;
color: inherit; }
/* line 59, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav li {
list-style-type: none; }
/* line 62, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav a:hover, nav ul.nav a:focus {
text-decoration: none; }
@media (min-width: 544px) {
/* line 68, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav {
float: right;
height: 75px; }
/* line 72, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav a {
float: left;
text-align: center;
font-size: 16px;
padding: 45px 0 5px;
width: 109px; }
/* line 80, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active {
color: #fff;
background-color: #0060e3; }
/* line 85, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.home {
color: #fff; }
/* line 87, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.home a {
background-color: #1779ff;
border-right: 1px solid #0055ca; }
/* line 91, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.home a:last-child {
border-right: 0; }
/* line 95, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.home a.active {
color: #fff;
border-bottom: 4px solid #2da301;
padding-bottom: 1px; }
/* line 101, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.main, nav ul.nav.second {
height: 37.5px; }
/* line 103, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.main a, nav ul.nav.second a {
padding: 8px 0 5.5px; }
/* line 107, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.main {
color: #1779ff; }
/* line 109, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.main a.active {
color: #fff;
border-bottom: 4px solid #2da301;
padding-bottom: 1.5px; }
/* line 115, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.second {
color: #fff; }
/* line 117, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.second a {
background-color: #1779ff; }
/* line 120, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.nav.second a.active {
border-bottom: 4px solid #2da301;
padding-bottom: 1.5px; } }
@media (max-width: 543px) {
/* line 129, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav button.navbar-toggler {
float: right;
margin-top: 10px;
font-family: inherit;
font-weight: 300; }
/* line 136, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.mobileNav a {
font-size: 18px;
font-weight: 300; }
/* line 140, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
nav ul.mobileNav a.active {
color: #4a96ff;
font-weight: 700; }
/* line 149, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.navbar-toggler {
padding: 0.5rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background: none;
border: 1px solid transparent;
border-radius: 0.25rem; }
/* line 21, /Users/jannik/Sites/aquila-jannik4/assets/vendors/bootstrap/scss/mixins/_hover.scss */
.navbar-toggler:focus,
.navbar-toggler:hover {
text-decoration: none; } }
/* line 165, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer {
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #bebebe; }
/* line 172, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer p {
margin-bottom: 0; }
@media (max-width: 543px) {
/* line 165, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer {
text-align: center; }
/* line 178, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer p {
margin-bottom: 10px; } }
/* line 183, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer i.fa {
color: #000;
font-size: 1.4rem;
padding-right: 0.2em; }
/* line 188, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer a > svg {
height: 1.4rem;
width: 1.4rem;
position: relative;
top: 0.18rem; }
/* line 192, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer a > svg image {
height: 1.4rem;
width: 1.4rem; }
/* make footer sticky */
/* line 203, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
html {
position: relative;
min-height: 100%; }
@media (min-width: 544px) {
/* line 208, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
body {
/* Margin bottom by footer height */
margin-bottom: 85px; }
/* line 212, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 85px; } }
@media (max-width: 543px) {
/* line 220, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
body {
/* Margin bottom by footer height */
margin-bottom: 162px; }
/* line 224, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 162px; } }
/*
* HELPERS
*/
/* line 237, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.right {
text-align: right; }
/* line 240, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.center {
text-align: center; }
@media (max-width: 543px) {
/* line 244, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.col-xxs-12.right, .col-xxs-12.center {
text-align: inherit; } }
/* to break down col-xs */
/* line 250, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.visible-xxs {
display: none !important; }
@media (max-width: 543px) {
/* line 254, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.col-xxs-12 {
float: none;
width: 100%;
position: relative;
left: 0;
right: 0;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; }
/* line 263, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.hidden-xxs {
display: none !important; }
/* line 266, /Users/jannik/Sites/aquila-jannik4/assets/scss/main.scss */
.visible-xxs {
display: block !important; } }
/*# sourceMappingURL=main.css.map */

BIN
assets/css/main.css.map Normal file

Binary file not shown.

View file

@ -19,10 +19,10 @@
@import "grid";
//@import "tables";
//@import "forms";
//@import "buttons";
@import "buttons";
// Components
//@import "animation";
@import "animation";
//@import "dropdown";
//@import "button-group";
//@import "input-group";
@ -48,4 +48,4 @@
//@import "carousel";
// Utility classes
//@import "utilities";
@import "utilities";

View file

@ -11,6 +11,7 @@ $col_xxs_bp: 543px;
body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px;
}
h1, h2, h3, h4 {
margin-bottom: 18px;
@ -28,67 +29,133 @@ p {
}
$header_logoHeight: 75px;
$header_logoSize: 75px;
header {
margin-bottom: 20px;
img {
width: $header_logoHeight;
height: $header_logoHeight;
width: $header_logoSize;
height: $header_logoSize;
float: left;
}
}
$nav_bgColor: #1779ff;
$nav_textMinWidth: 80px;
$nav_borderColor: darken($nav_bgColor, 15%);
$nav_fgColor: #fff;
$nav_textXsWidth: 80px;
$nav_textSmWidth: 109px;
nav {
height: $header_logoHeight;
box-sizing: border-box;
ul {
ul.nav {
margin: 0; // reset
padding-left: 0; // reset
background-color: $nav_bgColor;
color: #fff;
a {
li {
list-style-type: none; // reset
}
text-decoration: none;
background-color: inherit;
color: inherit;
}
li {
list-style-type: none; // reset
}
a:hover, a:focus {
text-decoration: none; // reset
}
}
}
@include media-breakpoint-up(sm) {
nav {
ul {
float: right;
nav {
float: right;
height: $header_logoSize;
ul.nav {
a {
text-align: center;
float: left;
padding-top: 45px;
text-align: center;
font-size: 16px;
height: 75px;
width: 109px;
border-right: 1px solid #124fa2;
padding: 45px 0 5px;
width: $nav_textSmWidth;
}
a:hover, a:focus, a.active {
color: $nav_fgColor;
background-color: darken($nav_bgColor, 10%);
}
}
ul.nav.home {
color: $nav_fgColor;
a {
background-color: $nav_bgColor;
border-right: 1px solid $nav_borderColor;
}
a:last-child {
border-right: 0;
}
a.active {
color: $nav_fgColor;
border-bottom: 4px solid #2da301;
padding-bottom: 1px;
}
}
ul.nav.main, ul.nav.second {
height: $header_logoSize/2;
a {
padding: 8px 0 5.5px;
}
}
ul.nav.main {
color: $nav_bgColor;
a.active {
color: $nav_fgColor;
border-bottom: 4px solid #2da301;
padding-bottom: 1.5px;
}
}
ul.nav.second {
color: $nav_fgColor;
a {
background-color: $nav_bgColor;
}
a.active {
border-bottom: 4px solid #2da301;
padding-bottom: 1.5px;
}
}
}
}
@include media-breakpoint-down(xs) {
nav {
min-width: 2*$nav_textMinWidth + $header_logoHeight + 40px;
background-color: $nav_bgColor;
ul {
button.navbar-toggler {
float: right;
margin-top: 10px;
font-family: inherit;
font-weight: 300;
}
ul.mobileNav {
a {
text-align: left;
float: left;
margin: 10px 10px 0px;
font-size: 16px;
width: $nav_textMinWidth;
font-size: 18px;
font-weight: 300;
}
a.active {
color: lighten($nav_bgColor, 10%);
font-weight: 700;
}
}
}
// from boostrap
// @requires animation.scss and collapse.js, util.js
.navbar-toggler {
padding: .5rem .75rem;
font-size: $font-size-lg;
line-height: 1;
background: none;
border: $border-width solid transparent;
@include border-radius($btn-border-radius);
@include hover-focus {
text-decoration: none;
}
}
}
@ -99,20 +166,20 @@ footer {
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #bebebe;
p {
margin-bottom: 0;
}
@media (max-width: $col_xxs_bp) {
text-align: center;
p {
margin-bottom: 10px;
}
}
i.fa {
color: $fontcolor;
font-size: $footer_logoHeight;
@ -127,7 +194,7 @@ footer {
width: $footer_logoHeight;
}
}
}
/* make footer sticky */
@ -187,7 +254,7 @@ html {
.col-xxs-12 {
float: none;
width: 100%;
position: relative; left: 0; right: 0;
min-height: 1px;
padding-right: 15px;

View file

@ -1,5 +1,5 @@
<?php
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src https://*.youtube-nocookie.com; script-src 'self' 'unsafe-inline' https://jannikb.aquila.uberspace.de/piwik/; img-src 'self' https://jannikb.aquila.uberspace.de/piwik/");
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src https://*.youtube-nocookie.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://jannikb.aquila.uberspace.de/piwik/; img-src 'self' https://jannikb.aquila.uberspace.de/piwik/");
//header("X-Content-Type-Options: nosniff"); // enabled at server-side
//header("X-Frame-Options: deny"); // enabled at server-side
//header("X-Xss-Protection: 1; mode=block"); // enabled at server-side

View file

@ -5,19 +5,64 @@
// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
// -------------------------------------------
$subnav = false;
if ($page->depth() == 1) {
$baseSec = $page;
if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
$subnav = true;
}
}else if ($page->depth() == 2) {
$baseSec = $page->parent();
if ( $page->isVisible() && $baseSec->hasVisibleChildren() ) {
$subnav = true;
}
}
?>
<div class="collapse hidden-sm-up" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<nav>
<ul class="nav mobileNav">
<?php foreach ($site->children()->visible() as $p) : ?>
<a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
<?php if ($p->hasVisibleChildren()) : ?>
<ul class="">
<?php foreach ($p->children()->visible() as $c) : ?>
<a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><li><?php echo $c->title() ?></li></a>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</nav>
</div>
</div>
<header class="section">
<div class="container">
<a class="logo" href="<?php echo url() ?>">
<img src="" alt="Logo">
</a>
<nav>
<ul>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
Menü <i class="fa fa-bars"></i>
</button>
<ul class="nav hidden-xs-down <?php echo ($subnav)?'main':'home' ?>">
<?php foreach ($site->children()->visible() as $p) : ?>
<a href="<?php echo $p->url()?>"><li><?php echo $p->title() ?></li></a>
<a href="<?php echo $p->url()?>" <?php echo ($page == $p || $page->parent() == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
<?php endforeach; ?>
</ul>
<?php if($subnav) : ?>
<ul class="nav hidden-xs-down second">
<?php foreach ($baseSec->children()->visible() as $p) : ?>
<a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><li><?php echo $p->title() ?></li></a>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</nav>
</div>
</header>

View file

@ -9,7 +9,10 @@
<!-- Bootstrap core JavaScript-->
<?php echo js('assets/vendors/jquery-2.2.2.min.js') ?>
<?php //echo js('assets/vendors/bootstrap/js/bootstrap.min.js') ?>
<?php
echo js('assets/vendors/bootstrap/js/dist/util.js');
echo js('assets/vendors/bootstrap/js/dist/collapse.js');
?>
<?php if (c::get('navbar-affix')) : ?>
<script>