biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2024-12-24 12:25:23 +00:00
Code Issues Projects Releases Wiki Activity

centered position logo

Browse Source
This commit is contained in:
Tancre 2020-09-17 17:48:05 +02:00
parent 575743cfa8
commit 7bb27cb2ed
6 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/scss/modules/_btn.scss Normal file
View File

@ -0,0 +1,17 @@
.btn{
background-color: #00ab00;;
color: #fff;
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block;
&--large {
padding: 1.1rem 1.9rem;
@include atSmall(){
font-size: 1.25rem;
}
}
}

3
app/assets/scss/modules/_site-header.scss
View File

@ -11,6 +11,7 @@
&__btn-container{ &__btn-container{
@include atMedium(){ @include atMedium(){
padding: 32px 0px 32px 0px;
float: right; float: right;
} }
} }
@ -34,7 +35,7 @@
&__logo{ &__logo{
position: absolute; position: absolute;
top: 0; top: 3px;
left: 50%; left: 50%;
transform-origin: 50% 0%; transform-origin: 50% 0%;
transform: translateX(-50%) scale(.8); transform: translateX(-50%) scale(.8);

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

@ -7,6 +7,6 @@
@import './modules/primary-nav'; @import './modules/primary-nav';
@import './modules/wrapper'; @import './modules/wrapper';
@import './modules/large-hero'; @import './modules/large-hero';
@import './modules/btn';

4
app/index.html
View File

@ -15,7 +15,7 @@
<header class="site-header"> <header class="site-header">
<div class="wrapper"> <div class="wrapper">
<div class="site-header__logo"> <div class="site-header__logo">
<a href="#"><img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo"></a> <img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
</div> </div>
<div class="site-header__menu-content"> <div class="site-header__menu-content">
@ -44,7 +44,7 @@
<h1 class="large-hero__title">bio bulke bende</h1> <h1 class="large-hero__title">bio bulke bende</h1>
<h2 class="large-hero__subtitle">Organic autonomous foodcoop.</h2> <h2 class="large-hero__subtitle">Organic autonomous foodcoop.</h2>
<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p> <p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
<p><a href="#" class="btn">Join us!</a></p> <p><a href="#" class="btn btn--large">Join us!</a></p>
</div> </div>
</div> </div>

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

@ -339,6 +339,7 @@ img {
background-color: rgba(0, 0, 0, 0.4); } } background-color: rgba(0, 0, 0, 0.4); } }
@media (min-width: 800px) { @media (min-width: 800px) {
.site-header__btn-container { .site-header__btn-container {
padding: 32px 0px 32px 0px;
float: right; } } float: right; } }
.site-header__menu-content { .site-header__menu-content {
opacity: 0; opacity: 0;
@ -356,7 +357,7 @@ img {
transform: scale(1); } } transform: scale(1); } }
.site-header__logo { .site-header__logo {
position: absolute; position: absolute;
top: 0; top: 3px;
left: 50%; left: 50%;
transform-origin: 50% 0%; transform-origin: 50% 0%;
transform: translateX(-50%) scale(0.8); transform: translateX(-50%) scale(0.8);
@ -467,4 +468,16 @@ img {
.large-hero__description { .large-hero__description {
font-size: 1.875rem; } } font-size: 1.875rem; } }
.btn {
background-color: #00ab00;
color: #fff;
text-decoration: none;
padding: .75rem 1.2rem;
display: inline-block; }
.btn--large {
padding: 1.1rem 1.9rem; }
@media (min-width: 530px) {
.btn--large {
font-size: 1.25rem; } }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

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

File diff suppressed because one or more lines are too long