jannik/web-jbeyerstedt
1
0
Fork 0
Code Releases Activity

[SITE] new main menu and logo-icon

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/css/foundation.css vendored
View file

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

BIN
assets/css/foundation.css.map
View file

Binary file not shown.

75
assets/css/main.css
View file

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

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

Binary file not shown.

6
assets/css/templates/photo.css
View file

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

BIN
assets/css/templates/photo.css.map
View file

Binary file not shown.

4
assets/scss/_mainvariables.scss
View file

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

5
assets/scss/foundation.scss vendored
View file

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

65
assets/scss/main.scss
View file

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

5
assets/scss/templates/photo.scss
View file

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

39
site/snippets/base/cont-header.php
View file

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