1
0
Fork 0

[SITE] new main menu and logo-icon

This commit is contained in:
Jannik Beyerstedt 2016-05-21 00:26:34 +02:00
parent a3c0c0fb25
commit 7e93dd0724
11 changed files with 65 additions and 137 deletions

View file

@ -2344,7 +2344,4 @@ a.text-danger:hover {
margin-left: 0;
margin-right: 0; } }
.bg-inverse {
color: #eceeef; }
/*# sourceMappingURL=foundation.css.map */

Binary file not shown.

View file

@ -76,12 +76,11 @@ main div.container {
main div.container {
max-width: 940px; } }
header {
margin-bottom: 10px; }
header img {
width: 75px;
height: 75px;
float: left; }
header img {
width: 75px;
height: 75px;
margin: 4px 0;
float: left; }
nav {
box-sizing: border-box; }
@ -90,7 +89,6 @@ nav {
padding-left: 0; }
nav ul.nav a {
text-decoration: none;
background-color: inherit;
color: inherit; }
nav ul.nav li {
list-style-type: none; }
@ -99,58 +97,34 @@ nav {
@media (min-width: 544px) {
nav {
float: right;
height: 75px; }
float: right; }
nav ul.nav a {
float: left;
text-align: center;
font-size: 16px;
padding: 45px 0 5px;
width: 109px; }
font-size: 18px;
font-weight: 300;
margin: 30px 9px 1px; }
nav ul.nav a:hover, nav ul.nav a:focus, nav ul.nav a.active {
color: #fff;
background-color: #0060e3; }
nav ul.nav.home {
color: #fff; }
nav ul.nav.home a {
background-color: #1779ff;
border-right: 1px solid #0055ca; }
nav ul.nav.home a:last-child {
border-right: 0; }
nav ul.nav.home a.active {
color: #fff;
border-bottom: 4px solid #2da301;
padding-bottom: 1px; }
nav ul.nav.main, nav ul.nav.second {
height: 37.5px; }
nav ul.nav.main a, nav ul.nav.second a {
padding: 8px 0 5.5px; }
nav ul.nav.main {
color: #1779ff; }
nav ul.nav.main a.active {
color: #fff;
border-bottom: 4px solid #2da301;
padding-bottom: 1.5px; }
nav ul.nav.second {
color: #fff; }
nav ul.nav.second a {
background-color: #1779ff; }
nav ul.nav.second a.active {
border-bottom: 4px solid #2da301;
padding-bottom: 1.5px; } }
border-bottom: 1px solid #2da301; }
nav ul.nav a.section {
font-weight: 500; } }
@media (max-width: 543px) {
nav button.navbar-toggler {
float: right;
margin-top: 10px;
margin-top: 24px;
font-family: inherit;
font-weight: 300; }
nav ul.mobileNav a {
font-size: 18px;
font-weight: 300; }
nav ul.mobileNav a.active {
color: #4a96ff;
font-weight: 700; }
nav ul.mobileNav {
color: #fff;
background-color: #424242;
padding: 1rem 1rem; }
nav ul.mobileNav a {
font-size: 20px;
font-weight: 300; }
nav ul.mobileNav a.active {
color: #2da301;
font-weight: 700; }
.navbar-toggler {
padding: 0.5rem 0.75rem;
font-size: 1.25rem;
@ -160,7 +134,8 @@ nav {
border-radius: 0.25rem; }
.navbar-toggler:focus,
.navbar-toggler:hover {
text-decoration: none; } }
text-decoration: none;
outline: none; } }
footer {
margin-top: 20px;

Binary file not shown.

View file

@ -14,8 +14,10 @@ main p a:visited {
color: #cccccc; }
@media (min-width: 544px) {
nav ul.nav.main {
color: #fff; } }
nav ul.nav {
color: #fff; }
nav ul.nav a.section:hover, nav ul.nav a.section:focus {
border: none; } }
@media (max-width: 543px) {
.navbar-toggler {

Binary file not shown.

View file

@ -9,11 +9,7 @@ $link_visited: lighten($color_font, 60%);
$col_xxs_bp: 543px;
$nav_bgColor: $color_base;
$nav_borderColor: darken($nav_bgColor, 15%);
$nav_fgColor: #fff;
$nav_textXsWidth: 80px;
$nav_textSmWidth: 109px;
$footer_color_bg: #bebebe;

View file

@ -58,8 +58,3 @@
margin-right: 0;
}
}
// fix change in bootstrap
.bg-inverse {
color: #eceeef;
}

View file

@ -92,10 +92,10 @@ main div.container {
$header_logoSize: 75px;
header {
margin-bottom: 10px;
img {
width: $header_logoSize;
height: $header_logoSize;
margin: 4px 0;
float: left;
}
@ -109,7 +109,6 @@ nav {
padding-left: 0; // reset
a {
text-decoration: none;
background-color: inherit;
color: inherit;
}
li {
@ -123,59 +122,19 @@ nav {
@include media-breakpoint-up(sm) {
nav {
float: right;
height: $header_logoSize;
ul.nav {
a {
float: left;
text-align: center;
font-size: 16px;
padding: 45px 0 5px;
width: $nav_textSmWidth;
font-size: 18px;
font-weight: 300;
margin: 30px 9px 1px;
}
a:hover, a:focus, a.active {
color: $nav_fgColor;
background-color: darken($nav_bgColor, 10%);
border-bottom: 1px solid $color_accent;
}
}
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 $color_accent;
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 $color_accent;
padding-bottom: 1.5px;
}
}
ul.nav.second {
color: $nav_fgColor;
a {
background-color: $nav_bgColor;
}
a.active {
border-bottom: 4px solid $color_accent;
padding-bottom: 1.5px;
a.section {
font-weight: 500;
}
}
}
@ -184,17 +143,20 @@ nav {
nav {
button.navbar-toggler {
float: right;
margin-top: 10px;
margin-top: 24px;
font-family: inherit;
font-weight: 300;
}
ul.mobileNav {
color: $color_font_inv;
background-color: $color_bg_inv;
padding: 1rem 1rem;
a {
font-size: 18px;
font-size: 20px;
font-weight: 300;
}
a.active {
color: lighten($nav_bgColor, 10%);
color: $color_accent;
font-weight: 700;
}
}
@ -212,6 +174,7 @@ nav {
@include hover-focus {
text-decoration: none;
outline: none;
}
}
}

View file

@ -25,8 +25,11 @@ main p {
}
@include media-breakpoint-up(sm) {
nav {
ul.nav.main {
ul.nav {
color: $nav_fgColor;
a.section:hover, a.section:focus {
border: none;
}
}
}
}

View file

@ -21,23 +21,21 @@ if ($page->depth() == 1) {
?>
<div class="collapse hidden-sm-up" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<nav>
<ul class="nav mobileNav">
<li><a href="<?php echo $site->url()?>">Home</a></li>
<?php foreach ($site->children()->visible() as $p) : ?>
<li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
<?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
<ul class="">
<?php foreach ($p->children()->visible() as $c) : ?>
<li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<nav>
<ul class="nav mobileNav">
<li><a href="<?php echo $site->url()?>">Home</a></li>
<?php foreach ($site->children()->visible() as $p) : ?>
<li><a href="<?php echo $p->url()?>" <?php echo ($page == $p)?'class="active"':'' ?>><?php echo $p->title() ?></a></li>
<?php if ($p->hasVisibleChildren() && $p->template() != 'blog') : ?>
<ul class="">
<?php foreach ($p->children()->visible() as $c) : ?>
<li><a href="<?php echo $c->url()?>" <?php echo ($page == $c)?'class="active"':'' ?>><?php echo $c->title() ?></a></li>
<?php endforeach; ?>
</ul>
</nav>
</div>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</nav>
</div>
<header class="section">
@ -53,19 +51,18 @@ if ($page->depth() == 1) {
Menü
</button>
<ul class="nav hidden-xs-down <?php echo ($subnav)?'main':'home' ?>">
<ul class="nav hidden-xs-down">
<?php if(!$subnav) : ?>
<?php foreach ($site->children()->visible() as $p) : ?>
<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 else : ?>
<a href="<?php echo $baseSec->url()?>" class="section <?php echo ($page == $baseSec)?'active':'' ?>"><li><?php echo $baseSec->title() ?>:</li></a>
<?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; ?>
</ul>
</nav>
</div>
</header>