diff --git a/README.md b/README.md new file mode 100644 index 0000000..67eccb9 --- /dev/null +++ b/README.md @@ -0,0 +1,10 @@ +# ETHPrize +ETHPrize single page React website + +## Setting up +- `git clone git@github.com:Nona-Creative/ETHPrize.git` +- `npm install` + +`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 diff --git a/assets/styles/base/buttons.scss b/assets/styles/base/buttons.scss new file mode 100644 index 0000000..582b17e --- /dev/null +++ b/assets/styles/base/buttons.scss @@ -0,0 +1 @@ +@import './assets/styles/global.scss'; diff --git a/assets/styles/base/fonts.scss b/assets/styles/base/fonts.scss new file mode 100644 index 0000000..1cd25f3 --- /dev/null +++ b/assets/styles/base/fonts.scss @@ -0,0 +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-weight: normal; + font-style: normal; +} diff --git a/assets/styles/base/forms.scss b/assets/styles/base/forms.scss new file mode 100644 index 0000000..5c75c38 --- /dev/null +++ b/assets/styles/base/forms.scss @@ -0,0 +1,7 @@ +@import './assets/styles/global.scss'; + +input, +button { + font-family: $primary-font; +} + diff --git a/assets/styles/base/functions.scss b/assets/styles/base/functions.scss new file mode 100644 index 0000000..e315cb3 --- /dev/null +++ b/assets/styles/base/functions.scss @@ -0,0 +1,4 @@ +// px to rem +@function calculateRem($size) { + @return $size / $body-font-size * 1rem; +} diff --git a/assets/styles/base/mixins.scss b/assets/styles/base/mixins.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/styles/base/reset.scss b/assets/styles/base/reset.scss new file mode 100644 index 0000000..d9f27b5 --- /dev/null +++ b/assets/styles/base/reset.scss @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/assets/styles/base/slick-carousel.scss b/assets/styles/base/slick-carousel.scss new file mode 100644 index 0000000..cb687bd --- /dev/null +++ b/assets/styles/base/slick-carousel.scss @@ -0,0 +1,2 @@ +// Plugin calls css included in document.js. These styles below are site-specific overrides +@import './assets/styles/global.scss'; diff --git a/assets/styles/base/type.scss b/assets/styles/base/type.scss new file mode 100644 index 0000000..1349c81 --- /dev/null +++ b/assets/styles/base/type.scss @@ -0,0 +1,14 @@ +@import './assets/styles/global.scss'; + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + font-family: $primary-font; + font-size: calculateRem($body-font-size); + line-height: calculateRem($body-line-height); + color: $text-color; +} diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss new file mode 100644 index 0000000..ac62d25 --- /dev/null +++ b/assets/styles/base/variables.scss @@ -0,0 +1,15 @@ +// Media Queries +$smallMobile: 375px; +$bigMobile: 480px; +$tablet: 768px; +$desktop: 1024px; +$monitor: 1220px; +$big: 1440px; + +// colors +$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 diff --git a/assets/styles/global.scss b/assets/styles/global.scss new file mode 100644 index 0000000..d4e6985 --- /dev/null +++ b/assets/styles/global.scss @@ -0,0 +1,3 @@ +@import './base/variables.scss'; +@import './base/mixins.scss'; +@import './base/functions.scss'; diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..e313a14 --- /dev/null +++ b/next.config.js @@ -0,0 +1,9 @@ +const withSass = require('@zeit/next-sass') +module.exports = + withSass({ + exportPathMap: function(defaultPathMap) { + return { + '/': { page: '/' } + } + } + }); diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 0000000..59e4be0 --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,21 @@ +import Document, { Head, Main, NextScript } from 'next/document'; +import React from 'react'; + +export default class MyDocument extends Document { + render() { + return ( + + + + + + + + +
+ + + + ); + } +} diff --git a/pages/index.js b/pages/index.js new file mode 100644 index 0000000..943ac5d --- /dev/null +++ b/pages/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import '../styles.scss'; + +export default () => ( +
+

ETHPrize website
coming soon!

+
+); \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..369516e --- /dev/null +++ b/styles.scss @@ -0,0 +1,31 @@ +@import './assets/styles/base/reset.scss'; +@import './assets/styles/base/fonts.scss'; +@import './assets/styles/base/type.scss'; +@import './assets/styles/base/forms.scss'; +@import './assets/styles/base/buttons.scss'; +@import './assets/styles/base/slick-carousel.scss'; +@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; + } + } +}