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

[SITE] new mobile menu (plain CSS) & removed animation assets of bootstrap

Browse source
This commit is contained in:
Jannik Beyerstedt 2016-10-28 23:32:29 +02:00
parent 2ecf9ea656
commit 1544f888ca
21 changed files with 173 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
assets/css/foundation.css vendored
View file

@ -1656,31 +1656,6 @@ input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%; }
.fade {
opacity: 0;
transition: opacity 0.15s linear; }
.fade.active {
opacity: 1; }
.collapse {
display: none; }
.collapse.active {
display: block; }
tr.collapse.active {
display: table-row; }
tbody.collapse.active {
display: table-row-group; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-timing-function: ease;
transition-duration: .35s;
transition-property: height; }
.align-baseline {
vertical-align: baseline !important; }

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

Binary file not shown.

75
assets/css/main.css
View file

@ -8,7 +8,11 @@
body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px; }
min-width: 300px;
overflow-x: hidden; }
div.site-wrap {
background-color: #fff; }
h1, h2, h3, h4 {
margin-bottom: 18px;
@ -85,6 +89,9 @@ header img {
margin: 4px 0;
float: left; }
.nav-trigger {
display: none; }
nav {
box-sizing: border-box; }
nav ul.nav {
@ -116,26 +123,58 @@ nav {
nav ul.nav a {
margin: 30px 9px 1px; } }
nav.mobile {
width: 200px;
height: 100%;
position: fixed;
right: -200px;
z-index: 0; }
.site-wrap {
position: relative;
left: 0;
z-index: 1; }
@media (max-width: 575px) {
nav button.navbar-toggler {
float: right;
margin-top: 24px;
font-family: inherit;
font-weight: 300; }
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: #2dac01;
font-weight: 700; }
.navbar-toggler {
label[for="nav-trigger"] {
position: absolute;
right: 15px;
top: 24px;
z-index: 2;
padding: 0.5rem 0.75rem;
font-size: 1.25rem;
line-height: 1; } }
line-height: 1;
font-family: inherit;
font-weight: 300;
color: #373a3c;
background-color: #fff; }
nav.mobile {
background-color: #424242; }
nav.mobile ul.mobileNav {
color: #fff;
padding: 1rem 1rem;
padding-top: 28px; }
nav.mobile ul.mobileNav li {
margin-bottom: 0.4em; }
nav.mobile ul.mobileNav li a {
font-size: 20px;
font-weight: 300; }
nav.mobile ul.mobileNav li a.active {
color: #2dac01;
font-weight: 700; }
nav.mobile ul.mobileNav ul > li {
margin-bottom: 0.2em; }
.nav-trigger:checked + label {
right: 215px; }
.nav-trigger:checked ~ .site-wrap {
left: -200px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5); }
.nav-trigger:checked ~ nav.mobile {
right: 0; }
.nav-trigger + label, nav.mobile {
transition: right 0.2s; }
.site-wrap {
transition: left 0.2s; } }
footer {
margin-top: 25px;

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

Binary file not shown.

2
assets/css/templates/home.css
View file

@ -27,6 +27,6 @@ main {
@media (max-width: 575px) {
main {
padding-top: 16vh; } }
padding-top: 10vh; } }
/*# sourceMappingURL=home.css.map */

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

@ -2,9 +2,11 @@
* for specific template
*/
body {
background-color: #424242;
color: #fff; }
div.site-wrap {
background-color: #424242; }
a {
color: #34c501; }
a:active, a:hover {
@ -20,8 +22,9 @@ main p a:visited {
border: none; } }
@media (max-width: 575px) {
.navbar-toggler {
color: #fff; } }
label[for="nav-trigger"] {
color: #fff;
background-color: #424242; } }
footer {
background-color: #303030;

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

Binary file not shown.

2
assets/scss/foundation.scss vendored
View file

@ -22,7 +22,7 @@
@import "buttons";
// Components
@import "animation";
//@import "animation";
//@import "dropdown";
//@import "button-group";
//@import "input-group";

107
assets/scss/main.scss
View file

@ -15,6 +15,10 @@ body {
margin: 0;
font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
min-width: 300px;
overflow-x: hidden;
}
div.site-wrap {
background-color: $color_bg;
}
h1, h2, h3, h4 {
margin-bottom: 18px;
@ -105,6 +109,9 @@ header {
}
.nav-trigger {
display: none;
}
nav {
box-sizing: border-box;
ul.nav {
@ -147,47 +154,81 @@ nav {
margin: 30px 9px 1px;
}
}
@include media-breakpoint-down(xs) {
nav {
button.navbar-toggler {
float: right;
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: 20px;
font-weight: 300;
}
a.active {
color: $color_accent;
font-weight: 700;
}
}
}
// ---- from boostrap ----
// @requires animation.scss and collapse.js, util.js
.navbar-toggler {
$mobileNav_width: 200px;
$mobileNav_button_right: 15px;
nav.mobile {
width: $mobileNav_width;
height: 100%;
position: fixed;
right: -$mobileNav_width;
z-index: 0;
}
.site-wrap {
position: relative;
left: 0;
z-index: 1;
}
@include media-breakpoint-down(xs) {
label[for="nav-trigger"] {
position: absolute;
right: $mobileNav_button_right;
top: 24px;
z-index: 2;
padding: .5rem .75rem;
font-size: $font-size-lg;
line-height: 1;
// background: none;
//border: $border-width solid grey;
//@include border-radius($btn-border-radius);
// @include hover-focus {
// text-decoration: none;
// outline: none;
// }
font-family: inherit;
font-weight: 300;
// button-color
color: #373a3c;
background-color: #fff;
}
nav.mobile {
background-color: $color_bg_inv;
ul.mobileNav {
color: $color_font_inv;
padding: 1rem 1rem;
padding-top: 28px;
li {
margin-bottom: 0.4em;
a {
font-size: 20px;
font-weight: 300;
}
a.active {
color: $color_accent;
font-weight: 700;
}
}
ul>li {
margin-bottom: 0.2em;
}
}
}
.nav-trigger:checked + label {
right: ($mobileNav_width + $mobileNav_button_right);
}
.nav-trigger:checked ~ .site-wrap {
left: -$mobileNav_width;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger:checked ~ nav.mobile {
right: 0;
}
.nav-trigger + label, nav.mobile {
transition: right 0.2s;
}
.site-wrap {
transition: left 0.2s;
}
}
$footer_logoHeight: 1.4rem;
$footer_margin: 25px;
$footer_height: 70px;

2
assets/scss/templates/home.scss
View file

@ -47,6 +47,6 @@ main {
@include media-breakpoint-down(xs) {
main {
padding-top: 16vh;
padding-top: 10vh;
}
}

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

@ -9,9 +9,11 @@
// change main.scss behavior - inverted color style
body {
background-color: $color_bg_inv;
color: $color_font_inv;
}
div.site-wrap {
background-color: $color_bg_inv;
}
a {
color: $link_color_inv;
&:active, &:hover {
@ -34,8 +36,10 @@ main p {
}
}
@include media-breakpoint-down(xs) {
.navbar-toggler {
color: $nav_fgColor;
label[for="nav-trigger"] {
// button color inverted
color: $nav_fgColor;
background-color: $color_bg_inv;
}
}
footer {

2
site/snippets/base/cont-footer.php
View file

@ -28,3 +28,5 @@
</div>
</div>
</footer>
</div><!--end div.site-wrap-->

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

@ -20,24 +20,27 @@ if ($page->depth() == 1) {
}
?>
<div class="collapse hidden-sm-up" id="exCollapsingNavbar">
<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; ?>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label class="hidden-sm-up" for="nav-trigger">Menü</label>
<nav class="mobile">
<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 class="site-wrap">
<header class="section">
<div class="container">
<?php if ($img = $site->images()->find($site->title_image())) : ?>
@ -47,10 +50,6 @@ if ($page->depth() == 1) {
<?php endif; ?>
<nav aria-hidden="true">
<button class="btn btn-lg btn-secondary navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
Menü
</button>
<ul class="nav hidden-xs-down">
<?php if(!$subnav) : ?>
<?php foreach ($site->children()->visible() as $p) : ?>

5
site/snippets/base/html-end.php
View file

@ -9,7 +9,7 @@
// -------------------------------------------
// available switches:
$switches = array("bs_util", "bs_collapse", "bs_carousel", "plg_masonry");
$switches = array("bs_util", "bs_carousel", "plg_masonry");
$jquery = false;
foreach ($switches as $switch) {
@ -31,9 +31,6 @@ foreach ($switches as $switch) {
if($bs_util) {
echo js('assets/vendors/bootstrap/js/dist/util.js');
}
if($bs_collapse) {
echo js('assets/vendors/bootstrap/js/dist/collapse.js');
}
if($bs_carousel) {
echo js('assets/vendors/bootstrap/js/dist/carousel.js');
}

3
site/templates/blog.php
View file

@ -79,5 +79,4 @@ snippet('base/cont-header');
</main>
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1]) ?>
<?php snippet('base/html-end', []) ?>

3
site/templates/blogarticle.php
View file

@ -61,5 +61,4 @@ snippet('base/cont-header');
</main>
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1]) ?>
<?php snippet('base/html-end', []) ?>

3
site/templates/default.php
View file

@ -21,5 +21,4 @@ snippet('base/cont-header');
</main>
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1]) ?>
<?php snippet('base/html-end', []) ?>

1
site/templates/photo.php
View file

@ -28,6 +28,5 @@ snippet('base/cont-header');
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1,
"bs_carousel"=>1,
"plg_masonry"=>1]) ?>

1
site/templates/project.php
View file

@ -25,6 +25,5 @@ snippet('base/cont-header');
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1,
"bs_carousel"=>0,
"plg_masonry"=>1]) ?>

3
site/templates/projects.php
View file

@ -41,5 +41,4 @@ snippet('base/cont-header');
</main>
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1]) ?>
<?php snippet('base/html-end', []) ?>

3
site/templates/webdesign.php
View file

@ -33,5 +33,4 @@ snippet('base/cont-header');
</main>
<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', ["bs_util"=>1,
"bs_collapse"=>1]) ?>
<?php snippet('base/html-end', []) ?>