biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-06-29 18:30:47 +00:00
Code Issues Projects Releases Wiki Activity

test for header and hero image

Browse Source
This commit is contained in:
Tancre
2020-09-17 17:21:49 +02:00
parent 8a629f6015
commit 575743cfa8
50 changed files with 168 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/scss/base/_fonts.scss Normal file
View File

@ -0,0 +1,19 @@
@font-face {
font-family: "CocogooseNormal";
src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype");
}
@font-face {
font-family: "CocogooseLight";
src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype");
}
@font-face {
font-family: "CocogooseBold";
src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype");
}
@font-face {
font-family: "CocogooseExtra";
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
}

61
app/assets/scss/modules/_large-hero.scss Normal file
View File

@ -0,0 +1,61 @@
.large-hero {
border-bottom: 10px solid white;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
position: relative;
&__image{
display: block;
}
&__text-content {
padding-top: 88px;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
transform: translateY(-50%);
text-align: center;
@include atMedium(){
padding-top: 60px;
}
}
&__title {
font-family: "CocogooseBold";
color: white;
font-size: 2.4rem;
margin: 0;
@include atSmall(){
font-size: 4.8rem;
}
}
&__subtitle {
font-family: "CocogooseNormal";
color: white;
font-size: 1.5rem;
margin: 0;
@include atSmall(){
font-size: 2.9rem;
}
}
&__description {
color: #FFF;
font-weight: 00;
font-size: 1.1rem;
max-width: 50rem;
margin-left: auto;
margin-right: auto;
@include atSmall(){
font-size: 1.875rem;
}
}
}

8
app/assets/scss/modules/_primary-nav.scss
View File

@ -2,7 +2,7 @@
padding-top: 10px;
@include atMedium(){
padding-top: 0;
padding: 31px 0px;
}
&--pull-right{
@ -40,8 +40,8 @@
}
a{
color: #000;
font-weight: 300;
color: #fff;
font-weight: 400;
text-decoration: none;
display: block;
padding: 5px 8px;
@ -50,7 +50,7 @@
@include atMedium(){
background:transparent;
font-size: 1rem;
font-size: 1.10rem;
padding: 12px 0;
&.is-current-link {

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

@ -1,5 +1,4 @@
.site-header{
padding: 10px 0;
position: absolute;
width: 100%;
z-index: 2;
@ -7,7 +6,7 @@
@include atMedium(){
position: fixed;
background-color: #cdf691;
background-color: rgba(#000, 0.4);
}
&__btn-container{
@ -42,6 +41,8 @@
transition: transform .3s ease-out;
@include atMedium(){
position: relative;
float: left;
left: auto;
transform: translateX(0);
}

2
app/assets/scss/modules/_wrapper.scss
View File

@ -2,7 +2,7 @@
overflow: hidden;
padding-left: 18px;
padding-right: 18px;
max-width: 1236px;
max-width: 1300px;
margin-left: auto;
margin-right: auto;

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

@ -1,10 +1,12 @@
@import './base/_normalize';
@import './base/variables';
@import './base/fonts';
@import './base/global';
@import './base/mixins';
@import './modules/site-header';
@import './modules/primary-nav';
@import './modules/wrapper';
@import './modules/large-hero';