status-im/ETHReport
2
0
Fork 0
mirror of https://github.com/status-im/ETHReport.git synced 2025-02-27 13:10:37 +00:00
Code Issues Projects Releases Wiki Activity

Moving page header nav above logo so long

Browse Source
This commit is contained in:
Sharyn 2018-07-11 11:17:52 +02:00
parent 46f3b0d6cd
commit fe24063fef
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/pageHeader/index.js
View File

@ -5,16 +5,17 @@ import './style.scss';
const PageHeader = () => ( const PageHeader = () => (
<div className="page-header"> <div className="page-header">
<div className="container"> <div className="container">
<nav className="page-header-nav">
<AnchorLink offset="24" href="#resources">Resources</AnchorLink>
<AnchorLink offset="24" href="#browse">Browse Archives</AnchorLink>
</nav>
<img className="logo" src="/static/img/ETHPrize-logo.png" alt="ETHPrize logo" />
<h1>Ethereum Report</h1> <h1>Ethereum Report</h1>
<p> <p>
We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
Ethereum ecosystem Ethereum ecosystem
</p> </p>
<nav className="page-header-nav">
<AnchorLink offset="24" href="#resources">Resources</AnchorLink>
<AnchorLink offset="24" href="#browse">Browse Archives</AnchorLink>
</nav>
</div> </div>
</div> </div>
); );

33
components/pageHeader/style.scss
View File

@ -1,15 +1,32 @@
@import './assets/styles/global.scss'; @import './assets/styles/global.scss';
.page-header { .page-header {
background-color: #efefef; background-color: $blue;
background-image: url('/static/img/header-bg.jpg');
background-position: center;
background-size: cover;
padding: calculateRem(24) 0; padding: calculateRem(24) 0;
text-align: center; text-align: center;
margin-bottom: calculateRem(24);
.logo {
width: calculateRem(116);
margin-bottom: calculateRem(24);
}
h1 { h1 {
color: #fff;
margin-bottom: calculateRem(24); margin-bottom: calculateRem(24);
text-transform: uppercase;
font-family: $secondary-font; font-family: $secondary-font;
font-size: calculateRem(36); font-size: calculateRem(40);
color: $red;
letter-spacing: 4px;
line-height: 1.1;
@media (min-width: $desktop) {
font-size: calculateRem(50);
letter-spacing: 10px;
}
} }
p { p {
@ -18,11 +35,17 @@
} }
.page-header-nav { .page-header-nav {
margin-bottom: calculateRem(32);
a { a {
color: $text-color; font-family: $secondary-font;
color: #fff;
text-decoration: none; text-decoration: none;
margin: 0 calculateRem(16); margin: 0 calculateRem(8);
font-size: calculateRem(17);
text-shadow: 0 0 11px #000;
padding: calculateRem(8);
letter-spacing: .08em;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;