mirror of
https://github.com/biobulkbende/biobulkbende.org.git
synced 2024-12-23 20:05:24 +00:00
fixed header, right navbar and responsive
This commit is contained in:
Tancre
parent
94840df1b8
commit
8a629f6015
BIN
app/assets/images/logo.jpg
Normal file
BIN
app/assets/images/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@ -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
61
app/assets/scss/modules/_primary-nav.scss
Normal 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
50
app/assets/scss/modules/_site-header.scss
Normal 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
12
app/assets/scss/modules/_wrapper.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -2,5 +2,9 @@
|
||||
@import './base/variables';
|
||||
@import './base/global';
|
||||
@import './base/mixins';
|
||||
@import './modules/site-header';
|
||||
@import './modules/primary-nav';
|
||||
@import './modules/wrapper';
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user