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

more styling changes

This commit is contained in:
Sharyn 2018-07-17 16:23:38 +02:00
parent 44d151fddb
commit e4c6392fda
18 changed files with 150 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@ body {
line-height: calculateRem($body-line-height);
letter-spacing: -.03em;
color: $text-color;
background-color: $dark-navy;
background-color: $navy-dark;
}
h1,
@ -27,3 +27,17 @@ h6 {
strong {
font-weight: 700;
}
.main-heading {
text-transform: uppercase;
font-family: $secondary-font;
font-size: calculateRem(50);
color: $red;
letter-spacing: 4px;
line-height: 1.1;
@media (min-width: $desktop) {
font-size: calculateRem(68);
letter-spacing: 10px;
}
}

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

@ -13,7 +13,7 @@ $blue: #3830cf;
$blue-highlight: #0069d9; // button hover
$blue-light: #2D3657;
$navy: #1c2449;
$dark-navy: #0c143a;
$navy-dark: #0c143a;
$red: #d4434a;
$dark-red: #AA2E49;

6
components/browseArchives/style.scss
View File

@ -9,11 +9,11 @@
}
h4 {
font-size: calculateRem(20);
margin-bottom: calculateRem(24);
font-size: calculateRem(30);
margin-bottom: calculateRem(28);
color: #fff;
font-family: $secondary-font;
letter-spacing: 1px;
letter-spacing: 4px;
}
}

18
components/interviews/interviewsList/style.scss
View File

@ -43,7 +43,23 @@
left: 0;
height: 100%;
overflow: auto;
width: 96%;
width: 94%;
}
/* width */
&::-webkit-scrollbar {
width: calculateRem(16);
}
/* Track */
&::-webkit-scrollbar-track {
background: $navy-dark;
border: 2px solid $navy;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $navy;
}
.letter-block {

1
components/interviews/singleInterview/style.scss
View File

@ -12,6 +12,7 @@
position: absolute;
top: 0;
left: 0;
z-index: -1;
&::before {
bottom: calculateRem(17);

2
components/modal/style.scss
View File

@ -11,7 +11,7 @@
width: 100vw;
height: 100vh;
z-index: 3;
background-color: $dark-navy;
background-color: $navy-dark;
overflow: auto;
}

2
components/pageHeader/index.js
View File

@ -13,7 +13,7 @@ const PageHeader = () => (
<AnchorLink href="#browse">Browse Archives</AnchorLink>
</nav>
<img className="logo" src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
<h1>Ethereum Report</h1>
<h1 className="main-heading">Eth Report 2018</h1>
<p>
We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
Ethereum ecosystem

12
components/pageHeader/style.scss
View File

@ -14,19 +14,7 @@
}
h1 {
color: #fff;
margin-bottom: calculateRem(24);
text-transform: uppercase;
font-family: $secondary-font;
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 {

2
components/projectsList/style.scss
View File

@ -1,7 +1,7 @@
@import './assets/styles/global.scss';
.projects-list {
margin-bottom: calculateRem(24);
margin-bottom: calculateRem(32);
ul {
display: flex;

2
components/resources/index.js
View File

@ -55,7 +55,7 @@ class Resources extends React.Component {
return (
<div className="resources-wrap" id="resources">
<div className="container">
<h2>Resources</h2>
<h2 className="main-heading">Resources</h2>
<div className="wordclouds-wrap">
{
Data.map((wordCloud, index) =>

11
components/resources/style.scss
View File

@ -4,19 +4,8 @@
padding: calculateRem(40) 0;
h2 {
text-transform: uppercase;
font-family: $secondary-font;
font-size: calculateRem(40);
color: $red;
letter-spacing: 4px;
text-align: center;
line-height: 1.1;
margin-bottom: calculateRem(24);
@media (min-width: $desktop) {
font-size: calculateRem(50);
letter-spacing: 10px;
}
}
}

5
components/searchBar/index.js
View File

@ -8,7 +8,7 @@ const { publicRuntimeConfig } = getConfig();
const SearchBar = props => (
<div className="search-bar" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
<div className="container">
<h3>Archives</h3>
<h3 className="main-heading">Archives</h3>
<form className="search-form">
<input
className="search-input"
@ -17,12 +17,13 @@ const SearchBar = props => (
value={props.term}
onChange={props.onSearchInputChange}
/>
<img className="search-icon" src={`${publicRuntimeConfig.subDirPath}/static/img/search-icon.svg`} alt="Search" />
{ props.isSearchActive && (
<button
className="search-clear-button"
onClick={props.clearSearchInput}
>
Clear search
<img src={`${publicRuntimeConfig.subDirPath}/static/img/clear-search-icon.svg`} alt="Clear search" />
</button>
)
}

35
components/searchBar/style.scss
View File

@ -6,19 +6,19 @@
background-position: center;
background-size: cover;
margin-bottom: calculateRem(56);
height: calculateRem(164);
padding-top: calculateRem(52);
h3 {
padding: calculateRem(24) 0 0;
text-transform: uppercase;
font-family: $secondary-font;
font-size: calculateRem(40);
color: $red;
letter-spacing: 4px;
line-height: 1.1;
@media (min-width: $desktop) {
height: calculateRem(240);
padding-top: calculateRem(88);
}
.main-heading {
margin-bottom: calculateRem(12);
@media (min-width: $desktop) {
font-size: calculateRem(50);
letter-spacing: 10px;
margin-bottom: calculateRem(32);
}
}
}
@ -32,20 +32,31 @@
width: 100%;
height: calculateRem(44);
border: 0;
box-shadow: 0 0 5px 5px $dark-navy;
box-shadow: 0 0 0 8px $navy-dark;
padding: calculateRem(12);
font-size: calculateRem(16);
&:focus,
&:active {
outline: none;
.search-icon {
display: none;
}
}
}
.search-icon {
position: absolute;
top: 50%;
right: calculateRem(12);
margin-top: calculateRem(-10);
}
.search-clear-button {
position: absolute;
top: 10%;
right: calculateRem(4);
right: 0;
height: 80%;
border: 0;
padding: 0 calculateRem(16);

36
components/searchResults/index.js
View File

@ -1,8 +1,11 @@
import React from 'react';
import Parser from 'html-react-parser';
import { PropTypes } from 'prop-types';
import getConfig from 'next/config';
import './style.scss';
const { publicRuntimeConfig } = getConfig();
const SearchResults = (props) => {
if (!props.data || props.data[0] === null) {
return <div>Loading...</div>;
@ -55,21 +58,24 @@ const SearchResults = (props) => {
<div className="search-results">
<ul>
{ sortedInterviews.map(interview => (
// eslint-disable-next-line
<li
id={interview.id}
key={interview.id}
onClick={props.toggleSingleInterview}
>
<h3 className={interviewNameContainsTerm(interview.name, props.term) ? 'matched-name' : ''}>
{ Parser(interview.name) }
</h3>
<h5>{interview.matchedIndex + 1})&nbsp;
{ findFirstQuestion(interview).question }
</h5>
<div>
{ Parser(findFirstQuestion(interview).answer) }
</div>
<li key={interview.id}>
<button id={interview.id} onClick={props.toggleSingleInterview}>
<div className="li-header">
<h3 className={interviewNameContainsTerm(interview.name, props.term) ? 'matched-name' : ''}>
{ Parser(interview.name) }
</h3>
<div>
<span>View</span>
<img src={`${publicRuntimeConfig.subDirPath}/static/img/right-chevron-icon.svg`} alt="right chevron icon" />
</div>
</div>
<h5>{interview.matchedIndex + 1})&nbsp;
{ findFirstQuestion(interview).question }
</h5>
<div>
{ Parser(findFirstQuestion(interview).answer) }
</div>
</button>
</li>
))
}

90
components/searchResults/style.scss
View File

@ -4,45 +4,73 @@
li {
margin-bottom: calculateRem(32);
cursor: pointer;
h3 {
font-size: calculateRem(24);
margin-bottom: calculateRem(8);
color: #fff;
display: inline-block;
button {
text-align: left;
width: 100%;
padding: 0;
&.matched-name {
@include hasRedUnderline;
position: relative;
&:hover h3 {
text-decoration: underline;
}
}
h5 {
font-size: calculateRem(16);
margin-bottom: calculateRem(8);
color: #fff;
}
h3,
h5 {
color: #fff;
margin-bottom: calculateRem(8);
}
p {
font-size: calculateRem(14);
display: inline;
h3 {
font-size: calculateRem(24);
display: inline-block;
span {
position: relative;
&::before {
content: '';
position: absolute;
top: -10%;
left: -2%;
height: 120%;
width: 104%;
background-color: $red;
color: $navy;
z-index: -1;
&.matched-name {
@include hasRedUnderline;
position: relative;
}
}
h5 {
font-size: calculateRem(16);
}
p {
color: hsla(0, 0, 100, .6);
font-size: calculateRem(14);
line-height: 1.6;
display: inline;
span {
position: relative;
&::before {
content: '';
position: absolute;
top: -10%;
left: -2%;
height: 120%;
width: 104%;
background-color: $red;
color: $navy;
z-index: -1;
}
}
}
}
}
.li-header {
display: flex;
justify-content: space-between;
> div {
color: #fff;
display: flex;
align-items: center;
span {
margin: 0 calculateRem(12);
}
}
}
}

2
components/topicsList/style.scss
View File

@ -1,7 +1,7 @@
@import './assets/styles/global.scss';
.topics-list {
margin-bottom: calculateRem(24);
margin-bottom: calculateRem(32);
ul {
display: flex;

1
static/img/clear-search-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"><title>Group 2 Copy 4</title><g fill="none" fill-rule="evenodd"><path d="M-1051-2745H389V798h-1440z"/><g stroke="#969696" stroke-linecap="round" stroke-width="2"><path d="M1 1l11 11M12 1L1 12"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 291 B

1
static/img/search-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg width="20" height="20" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg"><title>musica-searcher</title><g fill="none" fill-rule="evenodd"><path d="M-1049-2742H391v5891h-1440z"/><path d="M18.535 16.29l-4.128-4.128c-.022-.022-.047-.037-.07-.058a7.812 7.812 0 1 0-2.233 2.232c.02.024.036.05.058.071l4.127 4.128a1.588 1.588 0 0 0 2.246-2.245zM7.811 12.915a5.103 5.103 0 1 1 0-10.207 5.103 5.103 0 0 1 0 10.207z" fill="#B8BAC6" fill-rule="nonzero"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 464 B