biobulkbende
/
biobulkbende.org
mirror of https://github.com/biobulkbende/biobulkbende.org.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fixed header, right navbar and responsive

This commit is contained in:
Tancre 2020-09-16 17:06:26 +02:00
parent 94840df1b8
commit 8a629f6015
10 changed files with 249 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

8
app/assets/scss/base/_mixins.scss
View File

@ -8,4 +8,12 @@
@mixin atLarge {
@media (min-width: 1200px) { @content };
}
@mixin clearfix {
&::after{
content: "";
clear: both;
display: table;
}
}

61
app/assets/scss/modules/_primary-nav.scss Normal file
View File

@ -0,0 +1,61 @@
.primary-nav{
padding-top: 10px;
@include atMedium(){
padding-top: 0;
}
&--pull-right{
@include atMedium(){
float: right;
}
}
ul {
margin: 0;
padding: 0;
@include clearfix();
}
li{
list-style: none;
display: inline-block;
padding-right: 7px;
@include atMedium(){
float: left;
display: block;
padding-right: 20px;
}
}
li:last-child {
padding-right: 0;
@include atMedium(){
padding-right: 20px;
}
}
a{
color: #000;
font-weight: 300;
text-decoration: none;
display: block;
padding: 5px 8px;
font-size: .8rem;
background:rgba(blue, .5);
@include atMedium(){
background:transparent;
font-size: 1rem;
padding: 12px 0;
&.is-current-link {
color: #fabb69;
}
}
}
}

50
app/assets/scss/modules/_site-header.scss Normal file
View File

@ -0,0 +1,50 @@
.site-header{
padding: 10px 0;
position: absolute;
width: 100%;
z-index: 2;
transition: background-color .3s ease-out;
@include atMedium(){
position: fixed;
background-color: #cdf691;
}
&__btn-container{
@include atMedium(){
float: right;
}
}
&__menu-content{
opacity: 0;
transform: scale(1.2);
transtion: all .3s ease-out;
position: relative;
z-index: -10;
padding-top: 90px;
text-align: center;
@include atMedium(){
opacity: 1;
z-index: 1;
padding-top: 0;
transform: scale(1);
}
}
&__logo{
position: absolute;
top: 0;
left: 50%;
transform-origin: 50% 0%;
transform: translateX(-50%) scale(.8);
transition: transform .3s ease-out;
@include atMedium(){
left: auto;
transform: translateX(0);
}
}
}

12
app/assets/scss/modules/_wrapper.scss Normal file
View File

@ -0,0 +1,12 @@
.wrapper{
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1236px;
margin-left: auto;
margin-right: auto;
&--medium{
max-width: 976px;
}
}

4
app/assets/scss/style.scss
View File

@ -2,5 +2,9 @@
@import './base/variables';
@import './base/global';
@import './base/mixins';
@import './modules/site-header';
@import './modules/primary-nav';
@import './modules/wrapper';

34
app/index.html
View File

@ -12,24 +12,26 @@
<body>
<!-- HEADER -->
<header>
<div>
<img src="#" alt="BBB logo">
</div>
<div>
<div>
<a href="#" class="btn">Join us!</a>
<header class="site-header">
<div class="wrapper">
<div class="site-header__logo">
<img src="./assets/images/logo.jpg" alt="BBB logo">
</div>
<nav>
<ul>
<li><a href="#about-us">About us</a></li>
<li><a href="#how-it-works">How it works</a></li>
<li><a href="#agenda">Agenda</a></li>
<li><a href="#members-area">Members area</a></li>
</ul>
</nav>
<div class="site-header__menu-content">
<div class="site-header__btn-container">
<a href="#" class="btn">Join us!</a>
</div>
<nav class="primary-nav primary-nav--pull-right">
<ul>
<li><a href="#about-us">About us</a></li>
<li><a href="#how-it-works">How it works</a></li>
<li><a href="#agenda">Agenda</a></li>
<li><a href="#members-area">Members area</a></li>
</ul>
</nav>
</div>
</div>
</header>

94
app/temp/styles/style.css
View File

@ -312,4 +312,98 @@ img {
max-width: 100%;
height: auto; }
.site-header {
padding: 10px 0;
position: absolute;
width: 100%;
z-index: 2;
transition: background-color .3s ease-out; }
@media (min-width: 800px) {
.site-header {
position: fixed;
background-color: #cdf691; } }
@media (min-width: 800px) {
.site-header__btn-container {
float: right; } }
.site-header__menu-content {
opacity: 0;
transform: scale(1.2);
transtion: all .3s ease-out;
position: relative;
z-index: -10;
padding-top: 90px;
text-align: center; }
@media (min-width: 800px) {
.site-header__menu-content {
opacity: 1;
z-index: 1;
padding-top: 0;
transform: scale(1); } }
.site-header__logo {
position: absolute;
top: 0;
left: 50%;
transform-origin: 50% 0%;
transform: translateX(-50%) scale(0.8);
transition: transform .3s ease-out; }
@media (min-width: 800px) {
.site-header__logo {
left: auto;
transform: translateX(0); } }
.primary-nav {
padding-top: 10px; }
@media (min-width: 800px) {
.primary-nav {
padding-top: 0; } }
@media (min-width: 800px) {
.primary-nav--pull-right {
float: right; } }
.primary-nav ul {
margin: 0;
padding: 0; }
.primary-nav ul::after {
content: "";
clear: both;
display: table; }
.primary-nav li {
list-style: none;
display: inline-block;
padding-right: 7px; }
@media (min-width: 800px) {
.primary-nav li {
float: left;
display: block;
padding-right: 20px; } }
.primary-nav li:last-child {
padding-right: 0; }
@media (min-width: 800px) {
.primary-nav li:last-child {
padding-right: 20px; } }
.primary-nav a {
color: #000;
font-weight: 300;
text-decoration: none;
display: block;
padding: 5px 8px;
font-size: .8rem;
background: rgba(0, 0, 255, 0.5); }
@media (min-width: 800px) {
.primary-nav a {
background: transparent;
font-size: 1rem;
padding: 12px 0; }
.primary-nav a.is-current-link {
color: #fabb69; } }
.wrapper {
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1236px;
margin-left: auto;
margin-right: auto; }
.wrapper--medium {
max-width: 976px; }
/*# sourceMappingURL=style.css.map */

2
app/temp/styles/style.css.map
View File

File diff suppressed because one or more lines are too long

2
gulpfile.js
View File

@ -58,7 +58,7 @@ const watch = function() {
baseDir: './app'
}
});
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask));
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload);
gulp.watch("./app/assets/js/**/*.js").on('change', browserSync.reload);
// gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
gulp.watch("./app/*.html").on('change', browserSync.reload);