status-im
/
ETHReport
mirror of https://github.com/status-im/ETHReport.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into fix/favicon-urls

This commit is contained in:
Wisani 2018-07-19 17:26:08 +02:00 committed by GitHub
parent 4ac211eb73 39c4a4162d
commit bbc249663a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 1902 additions and 1759 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/base/type.scss
View File

@ -34,7 +34,7 @@ strong {
font-size: calculateRem(50);
color: $red;
letter-spacing: 4px;
line-height: 1.1;
line-height: 1;
transition: font-size 0.2s ease, letter-spacing 0.2s ease;
background-repeat: no-repeat;
background-position: top center;

3
assets/styles/base/variables.scss
View File

@ -17,6 +17,8 @@ $navy: #1c2449;
$navy-dark: #0c143a;
$red: #d4434a;
$dark-red: #AA2E49;
$orange: #DC6008;
$turquoise: #1FB3C9;
// text
$body-font-size: 16;
@ -26,5 +28,6 @@ $secondary-font: 'bebas_neuebold', sans-serif;
// layout
$container-width: 740;
$big-container-width: 1008;
$browse-left-width: 200;
$container-padding: 24;

40
components/pageHeader/index.js
View File

@ -1,25 +1,37 @@
import React from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import getConfig from 'next/config';
import PageHeaderNav from '../pageHeaderNav';
import './style.scss';
const { publicRuntimeConfig } = getConfig();
const PageHeader = () => (
<div className="page-header" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
<div className="container">
<nav className="page-header-nav">
<AnchorLink href="#resources">Resources</AnchorLink>
<AnchorLink href="#browse">Browse Archives</AnchorLink>
</nav>
<img className="logo" src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
<h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
Eth Report 2018
</h1>
<p>
We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
Ethereum ecosystem
</p>
<div className="sticky-header">
<div className="container">
<div className="logo">
<img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
</div>
<PageHeaderNav />
</div>
</div>
<img className="page-header-bg" src={`${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg`} alt="Header background" />
<div className="inline-header">
<div className="container">
<div className="logo">
<img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
</div>
<div className="page-header-content">
<h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
Eth Report <br />2018
</h1>
<p>
We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
Ethereum ecosystem
</p>
</div>
<PageHeaderNav />
</div>
</div>
</div>
);

100
components/pageHeader/style.scss
View File

@ -1,16 +1,22 @@
@import './assets/styles/global.scss';
.page-header {
position: relative;
background-color: $blue;
background-image: url('/static/img/header-bg.jpg');
background-position: center;
background-size: cover;
padding: calculateRem(24) 0;
text-align: center;
padding: calculateRem(48) 0 calculateRem(80);
.logo {
width: calculateRem(116);
margin-bottom: calculateRem(24);
@media (min-width: $desktop) {
// Need important to override inline style
background: none !important;
overflow: hidden;
padding-top: calculateRem(36);
}
.logo img {
width: calculateRem(80);
}
h1 {
@ -18,29 +24,79 @@
}
p {
margin-bottom: calculateRem(32);
@media (min-width: $desktop) {
width: calculateRem(336);
margin-left: calculateRem(94);
}
}
}
.inline-header {
.logo {
text-align: center;
margin-bottom: calculateRem(24);
}
}
.page-header-nav {
margin-bottom: calculateRem(32);
@media (min-width: $desktop) {
padding: calculateRem(280) 0 calculateRem(140);
a {
font-family: $secondary-font;
color: #fff;
text-decoration: none;
margin: 0 calculateRem(8);
font-size: calculateRem(20);
text-shadow: 0 0 11px #000;
padding: calculateRem(8);
letter-spacing: .08em;
@media (min-width: $tablet) {
font-size: calculateRem(24);
.logo,
.page-header-nav {
display: none;
}
&:hover {
text-decoration: underline;
.container {
display: flex;
justify-content: center;
}
}
}
.page-header-bg {
display: none;
@media (min-width: $desktop) {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: -1;
height: 100%;
}
@media (min-width: $desktop) {
min-height: calculateRem(808);
}
}
.sticky-header {
display: none;
@media (min-width: $desktop) {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
padding: calculateRem(32) 0;
background: -moz-linear-gradient(top, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
background: -webkit-linear-gradient(top, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
background: linear-gradient(to bottom, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a61c2449', endColorstr='#001c2449', GradientType=0);
.container {
max-width: calculateRem($big-container-width);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
padding-top: calculateRem(4);
}
}
}

12
components/pageHeaderNav/index.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import './style.scss';
const PageHeaderNav = () => (
<nav className="page-header-nav">
<AnchorLink href="#resources">Resources</AnchorLink>
<AnchorLink href="#browse">Browse Archives</AnchorLink>
</nav>
);
export default PageHeaderNav;

20
components/pageHeaderNav/style.scss Normal file
View File

@ -0,0 +1,20 @@
@import './assets/styles/global.scss';
.page-header-nav a {
font-family: $secondary-font;
color: #fff;
text-decoration: none;
margin-right: calculateRem(32);
font-size: calculateRem(18);
text-shadow: 0 0 11px #000;
letter-spacing: .08em;
@media (min-width: $desktop) {
margin-right: 0;
margin-left: calculateRem(48);
}
&:hover {
text-decoration: underline;
}
}

6
components/resources/style.scss
View File

@ -3,6 +3,10 @@
.resources-wrap {
padding: calculateRem(40) 0 calculateRem(60);
@media (min-width: $desktop) {
padding-top: calculateRem(80);
}
h2 {
margin-bottom: calculateRem(24);
@ -12,7 +16,7 @@
}
.container {
max-width: calculateRem(1008);
max-width: calculateRem($big-container-width);
}
}

2
components/searchBar/style.scss
View File

@ -11,7 +11,7 @@
@media (min-width: $desktop) {
height: calculateRem(240);
padding-top: calculateRem(88);
padding-top: calculateRem(80);
}
.main-heading {

46
components/wordCloud/style.scss
View File

@ -1,14 +1,27 @@
@import './assets/styles/global.scss';
.wordcloud {
padding: calculateRem(32) 0 calculateRem(40) calculateRem(40);
padding: calculateRem(32) 0 calculateRem(40);
outline: none;
background-color: $navy;
display: flex;
flex-direction: column;
@media (min-width: $smallMobile) {
padding-left: calculateRem(24);
}
@media (min-width: $tablet) {
padding-top: calculateRem(48);
padding-left: calculateRem(48);
}
.wordcloud-header {
padding-left: calculateRem(20);
@media (min-width: $smallMobile) {
padding-left: 0;
}
}
h3 {
@ -54,7 +67,10 @@
justify-content: center;
flex-grow: 1;
text-align: center;
padding-right: calculateRem(24);
@media (min-width: $smallMobile) {
padding-right: calculateRem(24);
}
@media (min-width: $tablet) {
padding-right: calculateRem(48);
@ -67,24 +83,44 @@
transform: scale(1);
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.05);
}
&.size-1 {
font-size: calculateRem(30);
> span:hover,
> a:hover {
color: $red;
}
}
&.size-2 {
font-size: calculateRem(25);
> span:hover,
> a:hover {
color: $orange;
}
}
&.size-3 {
font-size: calculateRem(20);
> span:hover,
> a:hover {
color: $turquoise;
}
}
&.size-4 {
font-size: calculateRem(15);
}
&:hover {
transform: scale(1.05);
> span:hover,
> a:hover {
color: #fff;
}
}
> span,

3430
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff