From e4c6392fda51cf5a5ab775ece9aea137b24042fd Mon Sep 17 00:00:00 2001 From: Sharyn Date: Tue, 17 Jul 2018 16:23:38 +0200 Subject: [PATCH] more styling changes --- assets/styles/base/type.scss | 16 +++- assets/styles/base/variables.scss | 2 +- components/browseArchives/style.scss | 6 +- .../interviews/interviewsList/style.scss | 18 +++- .../interviews/singleInterview/style.scss | 1 + components/modal/style.scss | 2 +- components/pageHeader/index.js | 2 +- components/pageHeader/style.scss | 12 --- components/projectsList/style.scss | 2 +- components/resources/index.js | 2 +- components/resources/style.scss | 11 --- components/searchBar/index.js | 5 +- components/searchBar/style.scss | 35 +++++--- components/searchResults/index.js | 36 ++++---- components/searchResults/style.scss | 90 ++++++++++++------- components/topicsList/style.scss | 2 +- static/img/clear-search-icon.svg | 1 + static/img/search-icon.svg | 1 + 18 files changed, 150 insertions(+), 94 deletions(-) create mode 100644 static/img/clear-search-icon.svg create mode 100644 static/img/search-icon.svg diff --git a/assets/styles/base/type.scss b/assets/styles/base/type.scss index 4712cb4..c2550ae 100644 --- a/assets/styles/base/type.scss +++ b/assets/styles/base/type.scss @@ -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; + } +} diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss index 0e06cfd..4329f07 100644 --- a/assets/styles/base/variables.scss +++ b/assets/styles/base/variables.scss @@ -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; diff --git a/components/browseArchives/style.scss b/components/browseArchives/style.scss index be4e7c9..568dc5c 100644 --- a/components/browseArchives/style.scss +++ b/components/browseArchives/style.scss @@ -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; } } diff --git a/components/interviews/interviewsList/style.scss b/components/interviews/interviewsList/style.scss index b6aaed3..42d1388 100644 --- a/components/interviews/interviewsList/style.scss +++ b/components/interviews/interviewsList/style.scss @@ -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 { diff --git a/components/interviews/singleInterview/style.scss b/components/interviews/singleInterview/style.scss index da9169f..5434646 100644 --- a/components/interviews/singleInterview/style.scss +++ b/components/interviews/singleInterview/style.scss @@ -12,6 +12,7 @@ position: absolute; top: 0; left: 0; + z-index: -1; &::before { bottom: calculateRem(17); diff --git a/components/modal/style.scss b/components/modal/style.scss index f6f4042..d4c7cfc 100644 --- a/components/modal/style.scss +++ b/components/modal/style.scss @@ -11,7 +11,7 @@ width: 100vw; height: 100vh; z-index: 3; - background-color: $dark-navy; + background-color: $navy-dark; overflow: auto; } diff --git a/components/pageHeader/index.js b/components/pageHeader/index.js index ed7b0d4..b2b3dd4 100644 --- a/components/pageHeader/index.js +++ b/components/pageHeader/index.js @@ -13,7 +13,7 @@ const PageHeader = () => ( Browse Archives ETHPrize logo -

Ethereum Report

+

Eth Report 2018

We’ve interviewed 100+ developers to showcase the biggest opportunities in the Ethereum ecosystem diff --git a/components/pageHeader/style.scss b/components/pageHeader/style.scss index 56e6a19..22b55f6 100644 --- a/components/pageHeader/style.scss +++ b/components/pageHeader/style.scss @@ -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 { diff --git a/components/projectsList/style.scss b/components/projectsList/style.scss index ba8becf..a602833 100644 --- a/components/projectsList/style.scss +++ b/components/projectsList/style.scss @@ -1,7 +1,7 @@ @import './assets/styles/global.scss'; .projects-list { - margin-bottom: calculateRem(24); + margin-bottom: calculateRem(32); ul { display: flex; diff --git a/components/resources/index.js b/components/resources/index.js index 7131d0b..b939e61 100644 --- a/components/resources/index.js +++ b/components/resources/index.js @@ -55,7 +55,7 @@ class Resources extends React.Component { return (

-

Resources

+

Resources

{ Data.map((wordCloud, index) => diff --git a/components/resources/style.scss b/components/resources/style.scss index c221233..475e5dc 100644 --- a/components/resources/style.scss +++ b/components/resources/style.scss @@ -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; - } } } diff --git a/components/searchBar/index.js b/components/searchBar/index.js index 885bb09..8ef79b8 100644 --- a/components/searchBar/index.js +++ b/components/searchBar/index.js @@ -8,7 +8,7 @@ const { publicRuntimeConfig } = getConfig(); const SearchBar = props => (
-

Archives

+

Archives

( value={props.term} onChange={props.onSearchInputChange} /> + Search { props.isSearchActive && ( ) } diff --git a/components/searchBar/style.scss b/components/searchBar/style.scss index 5873573..c9fadf6 100644 --- a/components/searchBar/style.scss +++ b/components/searchBar/style.scss @@ -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); diff --git a/components/searchResults/index.js b/components/searchResults/index.js index e76ee36..e7ba0f5 100644 --- a/components/searchResults/index.js +++ b/components/searchResults/index.js @@ -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
Loading...
; @@ -55,21 +58,24 @@ const SearchResults = (props) => {
    { sortedInterviews.map(interview => ( - // eslint-disable-next-line -
  • -

    - { Parser(interview.name) } -

    -
    {interview.matchedIndex + 1})  - { findFirstQuestion(interview).question } -
    -
    - { Parser(findFirstQuestion(interview).answer) } -
    +
  • +
    • )) } diff --git a/components/searchResults/style.scss b/components/searchResults/style.scss index c112352..9188852 100644 --- a/components/searchResults/style.scss +++ b/components/searchResults/style.scss @@ -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); + } + } + } } diff --git a/components/topicsList/style.scss b/components/topicsList/style.scss index 3cbb655..0f216da 100644 --- a/components/topicsList/style.scss +++ b/components/topicsList/style.scss @@ -1,7 +1,7 @@ @import './assets/styles/global.scss'; .topics-list { - margin-bottom: calculateRem(24); + margin-bottom: calculateRem(32); ul { display: flex; diff --git a/static/img/clear-search-icon.svg b/static/img/clear-search-icon.svg new file mode 100644 index 0000000..8ce432a --- /dev/null +++ b/static/img/clear-search-icon.svg @@ -0,0 +1 @@ +Group 2 Copy 4 \ No newline at end of file diff --git a/static/img/search-icon.svg b/static/img/search-icon.svg new file mode 100644 index 0000000..dccd434 --- /dev/null +++ b/static/img/search-icon.svg @@ -0,0 +1 @@ +musica-searcher \ No newline at end of file