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

[SITE] finish nav for mobile and second level

Browse source
This commit is contained in:
Jannik Beyerstedt 2016-04-04 13:17:05 +02:00
parent 74408319b5
commit f04a4cb18c
9 changed files with 1803 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/scss/foundation.scss vendored
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";

135
assets/scss/main.scss
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;