status-im/ETHReport
2
0
Fork 0
mirror of https://github.com/status-im/ETHReport.git synced 2025-02-27 05:00:32 +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 = () => (
<div className="page-header">
<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>
<p>
We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
Ethereum ecosystem
</p>
<nav className="page-header-nav">
<AnchorLink offset="24" href="#resources">Resources</AnchorLink>
<AnchorLink offset="24" href="#browse">Browse Archives</AnchorLink>
</nav>
</div>
</div>
);

31
components/pageHeader/style.scss
View File

@ -1,15 +1,32 @@
@import './assets/styles/global.scss';
.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;
text-align: center;
.logo {
width: calculateRem(116);
margin-bottom: calculateRem(24);
}
h1 {
color: #fff;
margin-bottom: calculateRem(24);
text-transform: uppercase;
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 {
@ -18,11 +35,17 @@
}
.page-header-nav {
margin-bottom: calculateRem(32);
a {
color: $text-color;
font-family: $secondary-font;
color: #fff;
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 {
text-decoration: underline;