[SITE] new mobile menu (plain CSS) & removed animation assets of bootstrap
This commit is contained in:
parent
2ecf9ea656
commit
1544f888ca
21 changed files with 176 additions and 124 deletions
25
assets/css/foundation.css
vendored
25
assets/css/foundation.css
vendored
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -27,6 +27,6 @@ main {
|
|||
|
||||
@media (max-width: 575px) {
|
||||
main {
|
||||
padding-top: 16vh; } }
|
||||
padding-top: 10vh; } }
|
||||
|
||||
/*# sourceMappingURL=home.css.map */
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
assets/scss/foundation.scss
vendored
2
assets/scss/foundation.scss
vendored
|
|
@ -22,7 +22,7 @@
|
|||
@import "buttons";
|
||||
|
||||
// Components
|
||||
@import "animation";
|
||||
//@import "animation";
|
||||
//@import "dropdown";
|
||||
//@import "button-group";
|
||||
//@import "input-group";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,6 @@ main {
|
|||
|
||||
@include media-breakpoint-down(xs) {
|
||||
main {
|
||||
padding-top: 16vh;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue