diff --git a/README.md b/README.md index 67eccb9..07f29f4 100644 --- a/README.md +++ b/README.md @@ -7,4 +7,6 @@ ETHPrize single page React website `npm run dev` runs the site at `localhost:3000` -`npm run deploy` to deploy to `https://nona-creative.github.io/ETHPrize` \ No newline at end of file +`npm run deploy` to deploy to `https://nona-creative.github.io/ETHPrize` + +`yarn lint` runs the eslinter diff --git a/assets/styles/base/fonts.scss b/assets/styles/base/fonts.scss index 1cd25f3..ab7ea55 100644 --- a/assets/styles/base/fonts.scss +++ b/assets/styles/base/fonts.scss @@ -1,11 +1,11 @@ @font-face { - font-family: 'proxima_nova_regular'; - src: url('/static/fonts/proxima_nova-regular-webfont.eot'); - src: url('/static/fonts/proxima_nova-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('/static/fonts/proxima_nova-regular-webfont.woff2') format('woff2'), - url('/static/fonts/proxima_nova-regular-webfont.woff') format('woff'), - url('/static/fonts/proxima_nova-regular-webfont.ttf') format('truetype'), - url('/static/fonts/proxima_nova-regular-webfont.svg#proxima_nova_rgregular') format('svg'); + font-family: 'bebas_neuebold'; + src: url('/static/fonts/bebasneue_bold-webfont.eot'); + src: url('/static/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'), + url('/static/fonts/bebasneue_bold-webfont.woff2') format('woff2'), + url('/static/fonts/bebasneue_bold-webfont.woff') format('woff'), + url('/static/fonts/bebasneue_bold-webfont.ttf') format('truetype'), + url('/static/fonts/bebasneue_bold-webfont.svg#bebas_neuebold') format('svg'); font-weight: normal; font-style: normal; } diff --git a/assets/styles/base/type.scss b/assets/styles/base/type.scss index 1349c81..2fc625f 100644 --- a/assets/styles/base/type.scss +++ b/assets/styles/base/type.scss @@ -12,3 +12,16 @@ body { line-height: calculateRem($body-line-height); color: $text-color; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 700; +} + +strong { + font-weight: 700; +} diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss index ac62d25..aa11721 100644 --- a/assets/styles/base/variables.scss +++ b/assets/styles/base/variables.scss @@ -2,6 +2,7 @@ $smallMobile: 375px; $bigMobile: 480px; $tablet: 768px; +$toDesktop: 1023px; $desktop: 1024px; $monitor: 1220px; $big: 1440px; @@ -12,4 +13,10 @@ $text-color: #666; // text $body-font-size: 16; $body-line-height: 24; -$primary-font: 'proxima_nova_regular', sans-serif; \ No newline at end of file +$primary-font: 'Roboto Mono', monospace; +$secondary-font: 'bebas_neuebold', sans-serif; + +// layout +$container-width: 600; +$desktop-related-interviews-width: 180; +$container-padding: 24; diff --git a/components/interviewsList/index.js b/components/interviewsList/index.js new file mode 100644 index 0000000..3e0b937 --- /dev/null +++ b/components/interviewsList/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import Modal from '../../components/modal'; +import Data from '../../data/archives/interviews'; +import './style.scss'; + +class InterviewsList extends React.Component { + constructor(props) { + super(props); + + this.state = { isInterviewsListModalOpen: false }; + this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this); + } + + toggleInterviewsListModal() { + const { isInterviewsListModalOpen } = this.state; + this.setState({ isInterviewsListModalOpen: !isInterviewsListModalOpen }); + } + + render() { + const { isInterviewsListModalOpen } = this.state; + + return ( +
+
+ Interviews ({ Data.length }) {/* eslint-disable-line */} + View {/* eslint-disable-line */} +
+ + { + ( + +

Interviews

+
    + { + Data.map(interview =>
  • { `${interview.name} ${interview.surname}` }
    • ) + } +
+ + ) + } + +
+ ); + } +} + +export default InterviewsList; diff --git a/components/interviewsList/style.scss b/components/interviewsList/style.scss new file mode 100644 index 0000000..2111471 --- /dev/null +++ b/components/interviewsList/style.scss @@ -0,0 +1,37 @@ +@import './assets/styles/global.scss'; + +.mob-interviews-link { + display: flex; + justify-content: space-between; + margin-bottom: calculateRem(24); + + @media (min-width: $desktop) { + display: none; + } + + span { + cursor: pointer; + outline: none; + + &:hover { + text-decoration: underline; + } + } +} + +.interviews-list-wrap .modal { + + @media (min-width: $desktop) { + display: block; + width: calculateRem($desktop-related-interviews-width); + } + + li { + font-size: calculateRem(14); + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/components/modal/index.js b/components/modal/index.js new file mode 100644 index 0000000..76468c3 --- /dev/null +++ b/components/modal/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import './style.scss'; + +const Modal = props => ( +
+
+ { props.children } +
x
{/* eslint-disable-line */} +
+
+); + +Modal.propTypes = { + isModalOpen: PropTypes.bool.isRequired, + children: PropTypes.shape({}).isRequired, + closeModal: PropTypes.func.isRequired, + modalOnMobileOnly: PropTypes.bool, +}; + +Modal.defaultProps = { + modalOnMobileOnly: false, +}; + +export default Modal; diff --git a/components/modal/style.scss b/components/modal/style.scss new file mode 100644 index 0000000..a47b121 --- /dev/null +++ b/components/modal/style.scss @@ -0,0 +1,71 @@ +@import './assets/styles/global.scss'; + +.modal { + display: none; + + &.modal-open { + display: block; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + z-index: 3; + } + + &.modal-on-mobile-only { + + @media (min-width: $desktop) { + background-color: transparent; + height: auto; + + .modal-inner { + position: initial; + padding: 0; + width: auto; + height: auto; + top: inherit; + left: inherit; + } + + .modal-close { + display: none; + } + } + } +} + +.modal-inner { + position: relative; + z-index: 4; + background-color: #fff; + width: 90%; + height: 90%; + top: 5%; + left: 5%; + overflow: auto; + padding: calculateRem(20); + + @media (min-width: $tablet) { + padding-top: calculateRem(60); + } +} + +.modal-close { + position: absolute; + top: calculateRem(12); + right: calculateRem(12); + padding: calculateRem(4); + background-color: #cfcfcf; + text-align: center; + width: calculateRem(32); + height: calculateRem(32); + border-radius: 50%; + cursor: pointer; + outline: none; + + &:hover { + background-color: #c1c1c1; + } +} diff --git a/components/pageFooter/index.js b/components/pageFooter/index.js new file mode 100644 index 0000000..e5239a7 --- /dev/null +++ b/components/pageFooter/index.js @@ -0,0 +1,10 @@ +import React from 'react'; +import './style.scss'; + +export default () => ( +
+
+

Copyright { (new Date()).getFullYear() }

+
+
+); diff --git a/components/pageFooter/style.scss b/components/pageFooter/style.scss new file mode 100644 index 0000000..9e37380 --- /dev/null +++ b/components/pageFooter/style.scss @@ -0,0 +1,8 @@ +@import './assets/styles/global.scss'; + +.page-footer { + background-color: #efefef; + padding: calculateRem(8) 0; + text-align: center; + font-size: calculateRem(12); +} diff --git a/components/pageHeader/index.js b/components/pageHeader/index.js new file mode 100644 index 0000000..97e0d49 --- /dev/null +++ b/components/pageHeader/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import './style.scss'; + +export default () => ( +
+
+

Ethereum Report

+

+ 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 new file mode 100644 index 0000000..5616434 --- /dev/null +++ b/components/pageHeader/style.scss @@ -0,0 +1,14 @@ +@import './assets/styles/global.scss'; + +.page-header { + background-color: #efefef; + padding: calculateRem(24) 0; + text-align: center; + margin-bottom: calculateRem(24); + + h1 { + margin-bottom: calculateRem(24); + font-family: $secondary-font; + font-size: calculateRem(36); + } +} diff --git a/components/projectsList/index.js b/components/projectsList/index.js new file mode 100644 index 0000000..ec57547 --- /dev/null +++ b/components/projectsList/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Data from '../../data/archives/projects'; +import './style.scss'; + +export default () => ( +
+

Projects

+ +
+); diff --git a/components/projectsList/style.scss b/components/projectsList/style.scss new file mode 100644 index 0000000..9e4270b --- /dev/null +++ b/components/projectsList/style.scss @@ -0,0 +1,25 @@ +@import './assets/styles/global.scss'; + +.projects-list { + margin-bottom: calculateRem(24); + + ul { + display: flex; + flex-wrap: wrap; + } + + li { + font-size: calculateRem(14); + padding: 0 calculateRem(8) calculateRem(8) 0; + cursor: pointer; + + span { + background-color: rgba(0, 0, 0, 0.1); + padding: calculateRem(4) calculateRem(12); + + &:hover { + background-color: rgba(0, 0, 0, 0.3); + } + } + } +} diff --git a/components/resources/index.js b/components/resources/index.js new file mode 100644 index 0000000..a50f2eb --- /dev/null +++ b/components/resources/index.js @@ -0,0 +1,108 @@ +import React from 'react'; +import Parser from 'html-react-parser'; +import Slider from 'react-slick'; +import Modal from '../../components/modal'; +import WordCloud from '../../components/wordCloud'; +import Data from '../../data/resources/wordclouds'; +import './style.scss'; + +class Resources extends React.Component { + constructor(props) { + super(props); + + this.state = { + isWordCloudModalOpen: false, + activeSlide: 0, + }; + this.openWordCloudModal = this.openWordCloudModal.bind(this); + this.closeWordCloudModal = this.closeWordCloudModal.bind(this); + } + + openWordCloudModal(event) { + /* + /* Check if clicked element is a child and doesn't have a data-index, + /* then go get data-index from the parentNode + */ + let clickedElement = event.target; + while (clickedElement.dataset.index === undefined) { + clickedElement = clickedElement.parentNode; + } + const clickedIndex = clickedElement.dataset.index; + this.slider.slickGoTo(clickedIndex); + + this.setState({ + isWordCloudModalOpen: true, + activeSlide: clickedIndex, + }); + } + + closeWordCloudModal() { + this.setState({ isWordCloudModalOpen: false }); + } + + render() { + const { isWordCloudModalOpen, activeSlide } = this.state; + const settings = { + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + initialSlide: activeSlide, + className: 'resources-content-slider', + arrows: false, + }; + + return ( +
+
+

Resources

+
+ { + Data.map((wordCloud, index) => + ()) + } +
+ + (this.slider = slider)} {...settings}> {/* eslint-disable-line */} + { + Data.map((slide, index, array) => { + const prevItemIndex = index - 1 === -1 ? array.length - 1 : index - 1; + const nextItemIndex = index + 1 === array.length ? 0 : index + 1; + + return ( +
+
+
+
this.slider.slickGoTo(prevItemIndex)}> {/* eslint-disable-line */} + < { array[prevItemIndex].title } +
+

{ slide.title }

+
this.slider.slickGoTo(nextItemIndex)}> {/* eslint-disable-line */} + { array[nextItemIndex].title } > +
+
+
+ { Parser(slide.slideContent) } +
+
+
+ ); + }) + } + + +
+
+ ); + } +} + +export default Resources; diff --git a/components/resources/style.scss b/components/resources/style.scss new file mode 100644 index 0000000..42b1572 --- /dev/null +++ b/components/resources/style.scss @@ -0,0 +1,75 @@ +@import './assets/styles/global.scss'; + +.resources-wrap h2 { + text-transform: uppercase; + font-family: $secondary-font; + font-size: calculateRem(36); +} + +.wordclouds-wrap { + margin-bottom: calculateRem(24); + + @media (min-width: $bigMobile) { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} + +.resources-content-slider { + + @media (min-width: $tablet) { + + .slick-arrow { + top: calculateRem(8); + } + } + + .slide-inner { + text-align: center; + outline: none; + + &:focus, + &:active { + outline: none; + } + } + + .slide-header { + display: flex; + justify-content: space-between; + + @media (min-width: $tablet) { + margin-bottom: calculateRem(24); + } + + h3 { + margin: 0 calculateRem(40); + } + } + + .slide-content { + max-width: calculateRem(1024); + margin: 0 auto; + padding: 0 calculateRem(32); + } + + .slide-arrow { + cursor: pointer; + margin-top: calculateRem(32); + outline: none; + + @media (min-width: $tablet) { + margin-top: 0; + } + + span { + display: none; + + @media (min-width: $tablet) { + display: inline-block; + margin: 0 calculateRem(8); + font-size: calculateRem(12); + } + } + } +} diff --git a/components/search/index.js b/components/search/index.js new file mode 100644 index 0000000..7cc8f53 --- /dev/null +++ b/components/search/index.js @@ -0,0 +1,46 @@ +import React from 'react'; +import TopicsList from '../../components/topicsList'; +import ProjectsList from '../../components/projectsList'; +import InterviewsList from '../interviewsList'; +import './style.scss'; + +class Search extends React.Component { + constructor(props) { + super(props); + + this.state = { term: '' }; + this.onInputChange = this.onInputChange.bind(this); + } + + onInputChange(event) { + this.setState({ term: event.target.value }); + } + + render() { + return ( +
+
+
+

Browse Archives

+ +
+
+
+ +
+ + +
+
+
+ ); + } +} + +export default Search; diff --git a/components/search/style.scss b/components/search/style.scss new file mode 100644 index 0000000..64247c6 --- /dev/null +++ b/components/search/style.scss @@ -0,0 +1,50 @@ +@import './assets/styles/global.scss'; + +.search-bar { + background-color: #efefef; + margin-bottom: calculateRem(56); + + h3 { + padding: calculateRem(32) 0 0; + text-align: center; + text-transform: uppercase; + font-family: $secondary-font; + font-size: calculateRem(36); + } +} + +.search-input { + width: 100%; + height: calculateRem(48); + border: 5px solid #efefef; + padding: calculateRem(12); + font-size: calculateRem(16); + position: relative; + bottom: calculateRem(-24); + + &:focus, + &:active { + outline: none; + } +} + +.search-results-wrap.container { + margin-bottom: calculateRem(48); + + @media (min-width: $desktop) { + display: flex; + max-width: calculateRem($container-width + $desktop-related-interviews-width*2 + $container-padding*2); + } + + h4 { + margin-bottom: calculateRem(24); + } +} + +.search-results { + + @media (min-width: $desktop) { + width: calculateRem($container-width); + padding: 0 calculateRem($container-padding); + } +} diff --git a/components/topicsList/index.js b/components/topicsList/index.js new file mode 100644 index 0000000..298b322 --- /dev/null +++ b/components/topicsList/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Data from '../../data/archives/topics'; +import './style.scss'; + +export default () => ( +
+

Topics

+ +
+); diff --git a/components/topicsList/style.scss b/components/topicsList/style.scss new file mode 100644 index 0000000..df57169 --- /dev/null +++ b/components/topicsList/style.scss @@ -0,0 +1,25 @@ +@import './assets/styles/global.scss'; + +.topics-list { + margin-bottom: calculateRem(24); + + ul { + display: flex; + flex-wrap: wrap; + } + + li { + font-size: calculateRem(14); + padding: 0 calculateRem(8) calculateRem(8) 0; + cursor: pointer; + + span { + background-color: rgba(0, 0, 0, 0.1); + padding: calculateRem(4) calculateRem(12); + + &:hover { + background-color: rgba(0, 0, 0, 0.3); + } + } + } +} diff --git a/components/wordCloud/index.js b/components/wordCloud/index.js new file mode 100644 index 0000000..bc141cc --- /dev/null +++ b/components/wordCloud/index.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { PropTypes } from 'prop-types'; +import './style.scss'; + +const WordCloud = props => ( + // eslint-disable-next-line +
+

{ props.words.title }

+
+ { props.words.cloud.map(word => ( + + { word.word } + + )) + } +
+
+); + +WordCloud.propTypes = { + index: PropTypes.number.isRequired, + words: PropTypes.shape({ + title: PropTypes.string, + cloud: PropTypes.array, + }).isRequired, + openWordCloudModal: PropTypes.func.isRequired, +}; + +export default WordCloud; diff --git a/components/wordCloud/style.scss b/components/wordCloud/style.scss new file mode 100644 index 0000000..7bffd97 --- /dev/null +++ b/components/wordCloud/style.scss @@ -0,0 +1,33 @@ +@import './assets/styles/global.scss'; + +.wordcloud { + text-align: center; + padding: calculateRem(24); + cursor: pointer; + outline: none; + + h3{ + margin-bottom: calculateRem(8); + } + + span { + display: inline-block; + padding: 0 calculateRem(8); + + &.size-1 { + font-size: calculateRem(30); + } + + &.size-2 { + font-size: calculateRem(25); + } + + &.size-3 { + font-size: calculateRem(20); + } + + &.size-4 { + font-size: calculateRem(15); + } + } +} diff --git a/data/archives/interviews.js b/data/archives/interviews.js new file mode 100644 index 0000000..97c0ba1 --- /dev/null +++ b/data/archives/interviews.js @@ -0,0 +1,104 @@ +const data = [ + { + id: 1, + name: 'Name', + surname: 'Surname' + }, + { + id: 2, + name: 'Name', + surname: 'Surname' + }, + { + id: 3, + name: 'Name', + surname: 'Surname' + }, + { + id: 4, + name: 'Name', + surname: 'Surname' + }, + { + id: 5, + name: 'Name', + surname: 'Surname' + }, + { + id: 6, + name: 'Name', + surname: 'Surname' + }, + { + id: 7, + name: 'Name', + surname: 'Surname' + }, + { + id: 8, + name: 'Name', + surname: 'Surname' + }, + { + id: 9, + name: 'Name', + surname: 'Surname' + }, + { + id: 10, + name: 'Name', + surname: 'Surname' + }, + { + id: 11, + name: 'Name', + surname: 'Surname' + }, + { + id: 12, + name: 'Name', + surname: 'Surname' + }, + { + id: 13, + name: 'Name', + surname: 'Surname' + }, + { + id: 14, + name: 'Name', + surname: 'Surname' + }, + { + id: 15, + name: 'Name', + surname: 'Surname' + }, + { + id: 16, + name: 'Name', + surname: 'Surname' + }, + { + id: 17, + name: 'Name', + surname: 'Surname' + }, + { + id: 18, + name: 'Name', + surname: 'Surname' + }, + { + id: 19, + name: 'Name', + surname: 'Surname' + }, + { + id: 20, + name: 'Name', + surname: 'Surname' + } +]; + +export default data; diff --git a/data/archives/projects.js b/data/archives/projects.js new file mode 100644 index 0000000..f851c48 --- /dev/null +++ b/data/archives/projects.js @@ -0,0 +1,16 @@ +const data = [ + 'Project 1', + 'Project 2', + 'Project 3', + 'Project 4', + 'Project 5', + 'Project 6', + 'Project 7', + 'Project 8', + 'Project 9', + 'Project 10', + 'Project 11', + 'Project 12' +]; + +export default data; diff --git a/data/archives/topics.js b/data/archives/topics.js new file mode 100644 index 0000000..c8f8f8d --- /dev/null +++ b/data/archives/topics.js @@ -0,0 +1,17 @@ +const data = [ + 'Tools', + 'Solidity', + 'Truffle', + 'Deploying', + 'Concerns', + 'Scalability', + 'Evolution', + 'Workflow', + 'Linting', + 'Casper', + 'Testnet', + 'Plasma', + 'Testing' +]; + +export default data; diff --git a/data/resources/wordclouds.js b/data/resources/wordclouds.js new file mode 100644 index 0000000..41a4e77 --- /dev/null +++ b/data/resources/wordclouds.js @@ -0,0 +1,108 @@ +const data = [ + { + title: 'Resources Title 1', + cloud: [ + { + 'word': 'testing', + 'size': 3 + }, + { + 'word': 'Solidity', + 'size': 2 + }, + { + 'word': 'Gas', + 'size': 3 + }, + { + 'word': 'Ethereum', + 'size': 1 + }, + { + 'word': 'load speed', + 'size': 4, + }, + ], + slideContent: '

Slide 1 content goes here. Slide 1 content goes here. Slide 1 content goes here.

', + }, + { + title: 'Resources Title 2', + cloud: [ + { + 'word': 'load speed', + 'size': 4 + }, + { + 'word': 'Gas', + 'size': 3 + }, + { + 'word': 'Ethereum', + 'size': 2 + }, + { + 'word': 'testing', + 'size': 1 + }, + { + 'word': 'Solidity', + 'size': 2, + }, + ], + slideContent: '

Slide 2 content goes here. Slide 2 content goes here. Slide 2 content goes here.

', + }, + { + title: 'Resources Title 3', + cloud: [ + { + 'word': 'load speed', + 'size': 4 + }, + { + 'word': 'Gas', + 'size': 3 + }, + { + 'word': 'Ethereum', + 'size': 2 + }, + { + 'word': 'testing', + 'size': 1 + }, + { + 'word': 'Solidity', + 'size': 2, + }, + ], + slideContent: '

Slide 3 content goes here. Slide 3 content goes here. Slide 3 content goes here.

', + }, + { + title: 'Resources Title 4', + cloud: [ + { + 'word': 'testing', + 'size': 3 + }, + { + 'word': 'Solidity', + 'size': 2 + }, + { + 'word': 'Gas', + 'size': 3 + }, + { + 'word': 'Ethereum', + 'size': 1 + }, + { + 'word': 'load speed', + 'size': 4, + }, + ], + slideContent: '

Slide 4 content goes here. Slide 4 content goes here. Slide 4 content goes here.

', + }, +]; + +export default data; diff --git a/pages/_document.js b/pages/_document.js index d8bd00f..50993e4 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -10,6 +10,7 @@ export default class MyDocument extends Document { +
diff --git a/pages/index.js b/pages/index.js index 39a449c..72d94f7 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,22 @@ import React from 'react'; +import PageHeader from '../components/pageHeader'; +import PageFooter from '../components/pageFooter'; +import Resources from '../components/resources'; +import Search from '../components/search'; import '../styles.scss'; -export default () => ( -
-

ETHPrize website
coming soon!

-
-); +class PageWrapper extends React.Component { + + render() { + return ( +
+ + + + +
+ ); + } +} + +export default PageWrapper; diff --git a/static/fonts/bebasneue_bold-webfont.eot b/static/fonts/bebasneue_bold-webfont.eot new file mode 100755 index 0000000..9e61d3b Binary files /dev/null and b/static/fonts/bebasneue_bold-webfont.eot differ diff --git a/static/fonts/bebasneue_bold-webfont.svg b/static/fonts/bebasneue_bold-webfont.svg new file mode 100755 index 0000000..6feee37 --- /dev/null +++ b/static/fonts/bebasneue_bold-webfont.svg @@ -0,0 +1,1935 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/fonts/bebasneue_bold-webfont.ttf b/static/fonts/bebasneue_bold-webfont.ttf new file mode 100755 index 0000000..cd0cc5c Binary files /dev/null and b/static/fonts/bebasneue_bold-webfont.ttf differ diff --git a/static/fonts/bebasneue_bold-webfont.woff b/static/fonts/bebasneue_bold-webfont.woff new file mode 100755 index 0000000..aa79c25 Binary files /dev/null and b/static/fonts/bebasneue_bold-webfont.woff differ diff --git a/static/fonts/bebasneue_bold-webfont.woff2 b/static/fonts/bebasneue_bold-webfont.woff2 new file mode 100755 index 0000000..53798c2 Binary files /dev/null and b/static/fonts/bebasneue_bold-webfont.woff2 differ diff --git a/static/fonts/proxima_nova-regular-webfont.eot b/static/fonts/proxima_nova-regular-webfont.eot deleted file mode 100755 index e351a3b..0000000 Binary files a/static/fonts/proxima_nova-regular-webfont.eot and /dev/null differ diff --git a/static/fonts/proxima_nova-regular-webfont.svg b/static/fonts/proxima_nova-regular-webfont.svg deleted file mode 100755 index 2ec535c..0000000 --- a/static/fonts/proxima_nova-regular-webfont.svg +++ /dev/null @@ -1,570 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/fonts/proxima_nova-regular-webfont.ttf b/static/fonts/proxima_nova-regular-webfont.ttf deleted file mode 100755 index a05b5b9..0000000 Binary files a/static/fonts/proxima_nova-regular-webfont.ttf and /dev/null differ diff --git a/static/fonts/proxima_nova-regular-webfont.woff b/static/fonts/proxima_nova-regular-webfont.woff deleted file mode 100755 index 86506c6..0000000 Binary files a/static/fonts/proxima_nova-regular-webfont.woff and /dev/null differ diff --git a/static/fonts/proxima_nova-regular-webfont.woff2 b/static/fonts/proxima_nova-regular-webfont.woff2 deleted file mode 100755 index f8b664e..0000000 Binary files a/static/fonts/proxima_nova-regular-webfont.woff2 and /dev/null differ diff --git a/static/img/slick-carousel/ajax-loader.gif b/static/img/slick-carousel/ajax-loader.gif new file mode 100644 index 0000000..e0e6e97 Binary files /dev/null and b/static/img/slick-carousel/ajax-loader.gif differ diff --git a/styles.scss b/styles.scss index 369516e..52c2fce 100644 --- a/styles.scss +++ b/styles.scss @@ -7,25 +7,11 @@ @import './assets/styles/global.scss'; .page-wrapper { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - - h1 { - text-align: center; - font-size: calculateRem(24); - line-height: 1; - border: 1px solid; - padding: calculateRem(20); - - @media (min-width: $tablet) { - font-size: calculateRem(40); - } - - strong { - font-weight: 700; - } - } + min-width: calculateRem(320); +} + +.container { + max-width: calculateRem($container-width); + margin: 0 auto; + padding: 0 calculateRem($container-padding); }