From 1544f888ca2908b8b7e7c0522880b460d4a889d9 Mon Sep 17 00:00:00 2001 From: Jannik Beyerstedt Date: Fri, 28 Oct 2016 23:32:29 +0200 Subject: [PATCH] [SITE] new mobile menu (plain CSS) & removed animation assets of bootstrap --- assets/css/foundation.css | 25 ------- assets/css/foundation.css.map | Bin 56437 -> 55886 bytes assets/css/main.css | 75 +++++++++++++++----- assets/css/main.css.map | Bin 7403 -> 8482 bytes assets/css/templates/home.css | 2 +- assets/css/templates/photo.css | 9 ++- assets/css/templates/photo.css.map | Bin 7566 -> 7651 bytes assets/scss/foundation.scss | 2 +- assets/scss/main.scss | 107 ++++++++++++++++++++--------- assets/scss/templates/home.scss | 2 +- assets/scss/templates/photo.scss | 10 ++- site/snippets/base/cont-footer.php | 2 + site/snippets/base/cont-header.php | 37 +++++----- site/snippets/base/html-end.php | 5 +- site/templates/blog.php | 3 +- site/templates/blogarticle.php | 3 +- site/templates/default.php | 3 +- site/templates/photo.php | 1 - site/templates/project.php | 1 - site/templates/projects.php | 3 +- site/templates/webdesign.php | 3 +- 21 files changed, 173 insertions(+), 120 deletions(-) diff --git a/assets/css/foundation.css b/assets/css/foundation.css index caacabe..8929323 100644 --- a/assets/css/foundation.css +++ b/assets/css/foundation.css @@ -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; } diff --git a/assets/css/foundation.css.map b/assets/css/foundation.css.map index a356a458abb21d88ca66cfba9c163f73b825c8eb..436f4514c1581c4902db347612101feebd85ca01 100644 GIT binary patch delta 6832 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 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; diff --git a/assets/css/main.css.map b/assets/css/main.css.map index b04a97b2b9e8472f3030873810aaba5ecf4a2384..cf83d526347a308fe00014f0fb2527c9531b4cf3 100644 GIT binary patch delta 1611 zcmZux&rcIU6i$IdB@_i(t%&g;iN7Wy)uLoiZ>HPr?6Pc&Eroh2AyB0vGzf;6^y?j!C`I;D zaA!B(h>h%t5(_l0yQ_YlDvz{;M;ktdJW=-W^O3CZqZ^sdm*F1+vAgOxaVa*Zz9v3i zT?JTWm|0Nf6?0LO#k3wW%;j~~_0G%DH?g5d`6gGN#;0OWJMI}3OJpSq4AW=Sud(Xj zj7t*gv>khr=}klWli+l{8pB@%NkFv&y60zrCNXNh#Rw+hlw z!Ba5B!!io8P_jBeo%YZagmo*`y2QjMk>(|bW!SKECW;EWiWa;In-8lT-vpkAlGCz>T0PPY5F)Om4sH8$8< qEZ`$@F}A1%(szeuf`*_sWninQ9;B}iwgOjw-U{$@s`EL0ZRii!t+8ML delta 702 zcma))&uY|A6vjzrq<@@_W2wT_=t5@K3p&_3Q?l{g+a$e7?sU{CQwt&tQ!`Dak)p*G zL2%<*&Q`?w03yV#&J(!s0lLtwPawGP+@w)gVphqQ`~A*2-??x3_vQEABzCLiiGghc z1S)+!`NF6?5I5Nxz#8-XZEQ~WDzON(ph$@D<@D3a6QPO|kJI|;Z)WLGjPR&-;gk#y z!~mO9^VqH)rRJGehS_xRP3@8qrQ;eJGkY@Tg*U-_v;9)b9pKoqN{M$1JGBP>oLwvj z`|hR|yVui@q(}aU{btJ|NSr~sMZ>#+lQ*XPBp9+j zKtGRz0+j@Jdz8WL;qNSk9(R~o@Wb5Yg`E|7GMF2$P{w}%RLjvLg1$Bh-{rVaf8J?CfUUfNYa4Ac?5NV8B9)_yso8`wfEs zA^wA4C;AD#ow#v|H!$zsGxt8}5B>7Fz084}tS>6^fG3v?Ct3q8B`1?0hbo{V1N60p z8PSx1DT~RbR05@#(qS}BYL$tjmV*B1rfP)!Tb7NDI3x7nR6D_0v+jjQb<)bByb!J% z3AbE?H+8Ua5x&&n?u=cN^omclhrQwOt@cB{^RRWqa}(ax-g3@<^|$1~s)W>u$vlmL zas75F9e}K6+;J1N%X#E$pB?l0f7g2+G$9vU)NP9nQz6&7?qIDB?PRuj-Ftmbep C3}n9m delta 236 zcmaEC-Dkbw8AnjMlcQt0la8yWw}+0uqocpItCv@Sla9Beqc=z}RL9fN(No9WDZVIBf;p!1BI8dFLpgLH^~F z-*Cz?=1k`1(iO>aa);TH?&N3f>FAp8G?|x6c5)_HHH(>3f%D{doHF_)PI*o`sg91R i5X(Isougou8zKy-baDo}GjDPhcRQ1%^XAXo9|Qpxy+dmN diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index a811638..df33f25 100644 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -22,7 +22,7 @@ @import "buttons"; // Components -@import "animation"; +//@import "animation"; //@import "dropdown"; //@import "button-group"; //@import "input-group"; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 95875b1..ab6d3d1 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -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; diff --git a/assets/scss/templates/home.scss b/assets/scss/templates/home.scss index 893f7b1..92db0dc 100644 --- a/assets/scss/templates/home.scss +++ b/assets/scss/templates/home.scss @@ -47,6 +47,6 @@ main { @include media-breakpoint-down(xs) { main { - padding-top: 16vh; + padding-top: 10vh; } } diff --git a/assets/scss/templates/photo.scss b/assets/scss/templates/photo.scss index ed2dbbc..9c4f1e4 100644 --- a/assets/scss/templates/photo.scss +++ b/assets/scss/templates/photo.scss @@ -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 { diff --git a/site/snippets/base/cont-footer.php b/site/snippets/base/cont-footer.php index fcddc75..a12e1eb 100644 --- a/site/snippets/base/cont-footer.php +++ b/site/snippets/base/cont-footer.php @@ -28,3 +28,5 @@ + + diff --git a/site/snippets/base/cont-header.php b/site/snippets/base/cont-header.php index 8fd2a04..fbfd151 100644 --- a/site/snippets/base/cont-header.php +++ b/site/snippets/base/cont-header.php @@ -20,24 +20,27 @@ if ($page->depth() == 1) { } ?> -
-
+ + + + + +
images()->find($site->title_image())) : ?> @@ -47,10 +50,6 @@ if ($page->depth() == 1) {