mirror of
https://github.com/oceanprotocol/datascience.git
synced 2022-09-23 03:31:37 +02:00
drop da base 🦞🍸
This commit is contained in:
commit
757ab40439
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
12
.eslintrc
Normal file
12
.eslintrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"oceanprotocol",
|
||||
"plugin:prettier/recommended",
|
||||
"prettier/standard"
|
||||
],
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": "error"
|
||||
}
|
||||
}
|
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
package-lock.json
|
||||
dist
|
1
.prettierignore
Normal file
1
.prettierignore
Normal file
@ -0,0 +1 @@
|
||||
dist
|
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
26
.travis.yml
Normal file
26
.travis.yml
Normal file
@ -0,0 +1,26 @@
|
||||
language: node_js
|
||||
node_js: node
|
||||
|
||||
# will run `npm install` automatically here
|
||||
|
||||
script:
|
||||
- npm test
|
||||
- npm run build
|
||||
|
||||
before_deploy:
|
||||
- pip install --user awscli
|
||||
- export PATH=$PATH:$HOME/.local/bin
|
||||
|
||||
deploy:
|
||||
skip_cleanup: true
|
||||
provider: script
|
||||
script: npm run deploy
|
||||
on:
|
||||
branch: master
|
||||
|
||||
notifications:
|
||||
email: false
|
||||
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
108
README.md
Normal file
108
README.md
Normal file
@ -0,0 +1,108 @@
|
||||
[![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)
|
||||
|
||||
<h1 align="center">datascience</h1>
|
||||
|
||||
> 🦞 Landing page for listing our data science tools and directing people to them
|
||||
> https://datascience.oceanprotocol.com
|
||||
|
||||
[![Build Status](https://travis-ci.com/oceanprotocol/datascience.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/datascience)
|
||||
[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
||||
|
||||
|
||||
---
|
||||
|
||||
- [Link creation](#link-creation)
|
||||
- [Editing workflow](#editing-workflow)
|
||||
- [Development](#development)
|
||||
- [Deployment](#deployment)
|
||||
- [Authors](#authors)
|
||||
- [License](#license)
|
||||
|
||||
---
|
||||
|
||||
## Link creation
|
||||
|
||||
Create a new link by editing the [`content.yml`](content.yml) file. When editing on GitHub, click the pencil icon to start editing the file:
|
||||
|
||||
<img width="293" alt="screen shot 2018-11-02 at 11 32 19" src="https://user-images.githubusercontent.com/90316/47910420-15142280-de93-11e8-8ab8-b8616abb7e60.png">
|
||||
|
||||
Only thing to remember is to keep the indentation as in this example:
|
||||
|
||||
```yaml
|
||||
- name: Dutchchain Hackathon 2018
|
||||
url: https://forms.google.com/fewfewhgvbzfbwbe
|
||||
|
||||
- name: my other link
|
||||
url: https://hello.com/fdasfrebvfbvgt
|
||||
```
|
||||
|
||||
### Editing workflow
|
||||
|
||||
The basic workflow goes like this:
|
||||
|
||||
1. edit the [`content.yml`](content.yml) file
|
||||
2. when committing changes, create a new branch and open a pull request
|
||||
3. ask for review & approval of pull request
|
||||
4. have the pull request merged
|
||||
|
||||
<img width="696" alt="screen shot 2018-11-02 at 11 50 14" src="https://user-images.githubusercontent.com/90316/47911346-7dfc9a00-de95-11e8-9414-71fe63b1577b.png">
|
||||
|
||||
The `master` branch is protected from being pushed to, enforcing the following rules:
|
||||
|
||||
- every change has to be done in another branch and go through a pull request against `master`
|
||||
- pull requests need to be reviewed and approved
|
||||
- pull requests need to pass the CI status checks
|
||||
- pull requests can be merged by a defined list of members only
|
||||
- when merged into `master`, pull request changes are deployed automatically to live
|
||||
|
||||
This will then initiate an automatic build & deployment process, and your change should be live within a minute or so.
|
||||
|
||||
## Development
|
||||
|
||||
This repo is a simple page builder utilizing [gulp](https://gulpjs.com) and [Liquid](https://shopify.github.io/liquid/) templating.
|
||||
|
||||
```bash
|
||||
npm i
|
||||
npm start
|
||||
```
|
||||
|
||||
Will start a live-reloading local server, reachable under [localhost:1337](http://localhost:1337).
|
||||
|
||||
## Deployment
|
||||
|
||||
Page lives in a S3 bucket and deployment happens automatically via Travis based on the rules described in the [editing workflow](#editing-workflow). For that to work, the following environment variables need to be setup in Travis:
|
||||
|
||||
- `AWS_DEFAULT_REGION`
|
||||
- `AWS_ACCESS_KEY_ID`
|
||||
- `AWS_SECRET_ACCESS_KEY`
|
||||
|
||||
Every `master` Travis build triggers this script which can also be used for manual emergency deployments:
|
||||
|
||||
```bash
|
||||
npm run deploy
|
||||
# executing ./deploy.sh
|
||||
```
|
||||
|
||||
DNS for `datascience.oceanprotocol.com` is setup via Cloudflare, pointing to the S3 bucket under `datascience.oceanprotocol.com.s3-website-ap-southeast-1.amazonaws.com`
|
||||
|
||||
## Authors
|
||||
|
||||
- Matthias Kretschmann ([@kremalicious](https://github.com/kremalicious)) - [Ocean Protocol](https://oceanprotocol.com)
|
||||
|
||||
## License
|
||||
|
||||
```
|
||||
Copyright 2018 Ocean Protocol Foundation Ltd.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
```
|
16
content.yml
Normal file
16
content.yml
Normal file
@ -0,0 +1,16 @@
|
||||
title: Data Science Tools
|
||||
intro: Tools for data scientists to interact with the Ocean Protocol network.
|
||||
|
||||
links:
|
||||
- name: JupyterHub Notebook
|
||||
url: https://longurl.com
|
||||
|
||||
footer:
|
||||
- name: Homepage
|
||||
url: https://oceanprotocol.com
|
||||
- name: Blog
|
||||
url: https://blog.oceanprotocol.com
|
||||
- name: Twitter
|
||||
url: https://twitter.com/oceanprotocol
|
||||
- name: GitHub
|
||||
url: https://github.com/oceanprotocol
|
5
deploy.sh
Executable file
5
deploy.sh
Executable file
@ -0,0 +1,5 @@
|
||||
aws s3 sync ./dist s3://datascience.oceanprotocol.com \
|
||||
--delete \
|
||||
--acl public-read \
|
||||
--exclude '.DS_Store' \
|
||||
--cache-control max-age=0,no-cache,no-store,must-revalidate
|
125
gulpfile.babel.js
Normal file
125
gulpfile.babel.js
Normal file
@ -0,0 +1,125 @@
|
||||
import { src, dest, watch, parallel, series } from 'gulp'
|
||||
import del from 'del'
|
||||
import fs from 'fs'
|
||||
import yaml from 'js-yaml'
|
||||
import browser from 'browser-sync'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import cssnano from 'cssnano'
|
||||
const $ = require('gulp-load-plugins')()
|
||||
|
||||
const content = yaml.safeLoad(fs.readFileSync('./content.yml'))
|
||||
const { links } = content
|
||||
|
||||
const SRC = './src'
|
||||
const DIST = './dist'
|
||||
|
||||
//
|
||||
// Delete build artifacts
|
||||
//
|
||||
export const clean = () => del(DIST + '/**/*')
|
||||
|
||||
//
|
||||
// Styles
|
||||
//
|
||||
export const css = () =>
|
||||
src(SRC + '/styles/styles.scss')
|
||||
.pipe($.sass().on('error', $.sass.logError))
|
||||
.pipe($.postcss([autoprefixer(), cssnano()]))
|
||||
.pipe(dest(DIST + '/assets/css/'))
|
||||
|
||||
//
|
||||
// Data injection with Liquid
|
||||
//
|
||||
export const template = () => {
|
||||
let locals = { links, content }
|
||||
|
||||
return src(SRC + '/index.html')
|
||||
.pipe($.liquify(locals))
|
||||
.pipe(
|
||||
$.htmlmin({
|
||||
collapseWhitespace: true,
|
||||
conservativeCollapse: true,
|
||||
removeComments: true,
|
||||
useShortDoctype: true,
|
||||
collapseBooleanAttributes: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeEmptyAttributes: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true
|
||||
})
|
||||
)
|
||||
.pipe(dest(DIST))
|
||||
}
|
||||
|
||||
//
|
||||
// Copy Fonts
|
||||
//
|
||||
export const fonts = () =>
|
||||
src(SRC + '/fonts/**/*').pipe(dest(DIST + '/assets/fonts/'))
|
||||
|
||||
//
|
||||
// Copy Logo
|
||||
//
|
||||
export const logos = () =>
|
||||
src('node_modules/@oceanprotocol/art/logo/**/*').pipe(
|
||||
dest(DIST + '/assets/img/')
|
||||
)
|
||||
|
||||
//
|
||||
// Copy Favicon
|
||||
//
|
||||
export const favicon = () => src(SRC + '/favicon.ico').pipe(dest(DIST))
|
||||
|
||||
//
|
||||
// Revision static assets
|
||||
//
|
||||
export const rev = () =>
|
||||
src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}')
|
||||
.pipe($.rev())
|
||||
.pipe(dest(DIST + '/assets/'))
|
||||
// output rev manifest for next replace task
|
||||
.pipe($.rev.manifest())
|
||||
.pipe(dest(DIST + '/assets/'))
|
||||
|
||||
//
|
||||
// Replace all links to assets in files
|
||||
// from a manifest file
|
||||
//
|
||||
export const revReplace = () => {
|
||||
let manifest = src(DIST + '/assets/rev-manifest.json')
|
||||
|
||||
return src(DIST + '/**/*.{html,css,js}')
|
||||
.pipe($.revReplace({ manifest: manifest }))
|
||||
.pipe(dest(DIST))
|
||||
}
|
||||
|
||||
//
|
||||
// Watch for file changes
|
||||
//
|
||||
export const watchSrc = () =>
|
||||
watch([SRC, 'links.yml']).on('all', series(build, browser.reload))
|
||||
|
||||
//
|
||||
// Dev Server
|
||||
//
|
||||
export const server = done => {
|
||||
browser.init({
|
||||
server: DIST,
|
||||
port: 1337
|
||||
})
|
||||
done()
|
||||
}
|
||||
|
||||
//
|
||||
// Full build
|
||||
//
|
||||
export const build = series(
|
||||
clean,
|
||||
parallel(template, css, fonts, favicon, logos),
|
||||
rev,
|
||||
revReplace
|
||||
)
|
||||
|
||||
export const dev = series(build, server, watchSrc)
|
||||
|
||||
export default dev
|
48
package.json
Normal file
48
package.json
Normal file
@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "@oceanprotocol/datascience",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "https://datascience.oceanprotocol.com",
|
||||
"scripts": {
|
||||
"start": "gulp",
|
||||
"build": "gulp build",
|
||||
"test": "npm run lint:yaml && npm run lint:scss",
|
||||
"lint:js": "eslint ./src/**/*.js",
|
||||
"lint:yaml": "prettier --list-different \"**/*.y?(a)ml\"",
|
||||
"lint:scss": "prettier --list-different \"**/*.scss\"",
|
||||
"format": "prettier ./**/*.{scss,yml,js,json} --write",
|
||||
"deploy": "./deploy.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"@oceanprotocol/art": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.2.0",
|
||||
"@babel/preset-env": "^7.2.0",
|
||||
"@babel/register": "^7.0.0",
|
||||
"autoprefixer": "^9.4.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"browser-sync": "^2.26.3",
|
||||
"cssnano": "^4.1.7",
|
||||
"del": "^3.0.0",
|
||||
"eslint": "5.9.0",
|
||||
"eslint-config-oceanprotocol": "^1.3.0",
|
||||
"eslint-config-prettier": "^3.3.0",
|
||||
"eslint-plugin-prettier": "^3.0.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-liquify": "^0.0.6",
|
||||
"gulp-load-plugins": "^1.5.0",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rev": "^9.0.0",
|
||||
"gulp-rev-replace": "^0.4.4",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"prettier": "^1.15.3"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
]
|
||||
}
|
BIN
src/favicon.ico
Normal file
BIN
src/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 31 KiB |
BIN
src/fonts/SharpSans-Bold.woff
Normal file
BIN
src/fonts/SharpSans-Bold.woff
Normal file
Binary file not shown.
BIN
src/fonts/SharpSans-Bold.woff2
Normal file
BIN
src/fonts/SharpSans-Bold.woff2
Normal file
Binary file not shown.
BIN
src/fonts/SharpSans-Extrabold.woff
Normal file
BIN
src/fonts/SharpSans-Extrabold.woff
Normal file
Binary file not shown.
BIN
src/fonts/SharpSans-Extrabold.woff2
Normal file
BIN
src/fonts/SharpSans-Extrabold.woff2
Normal file
Binary file not shown.
BIN
src/fonts/SharpSans-Medium.woff
Normal file
BIN
src/fonts/SharpSans-Medium.woff
Normal file
Binary file not shown.
BIN
src/fonts/SharpSans-Medium.woff2
Normal file
BIN
src/fonts/SharpSans-Medium.woff2
Normal file
Binary file not shown.
BIN
src/fonts/SharpSansDispNo1-Bold.woff
Executable file
BIN
src/fonts/SharpSansDispNo1-Bold.woff
Executable file
Binary file not shown.
BIN
src/fonts/SharpSansDispNo1-Bold.woff2
Executable file
BIN
src/fonts/SharpSansDispNo1-Bold.woff2
Executable file
Binary file not shown.
78
src/index.html
Normal file
78
src/index.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#141414">
|
||||
<title>Voucher — Ocean Protocol</title>
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico">
|
||||
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<article>
|
||||
<img src="assets/img/logo-white.svg" />
|
||||
|
||||
<header>
|
||||
<h1>{{ content.title }}</h1>
|
||||
<p>{{ content.intro }}</p>
|
||||
</header>
|
||||
|
||||
<div class="links">
|
||||
{% for link in links %}
|
||||
<a class="link" href="{{ link.url }}">{{ link.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
© <span id="year">{{ "now" | date: "%Y" }}</span> <a href="https://oceanprotocol.com">Ocean Protocol
|
||||
Foundation Ltd.</a> — All
|
||||
Rights Reserved
|
||||
</div>
|
||||
<div>
|
||||
{% for link in content.footer %}
|
||||
<a href="{{ link.url }}">{{ link.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const yearText = document.getElementById('year')
|
||||
const year = (new Date()).getFullYear()
|
||||
yearText.innerHTML = year
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function (window) {
|
||||
// Google Analytics async snippet
|
||||
// http://goo.gl/3FPNDx
|
||||
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }
|
||||
ga.l = +new Date
|
||||
var d = document,
|
||||
g = d.createElement('script'),
|
||||
s = d.getElementsByTagName('script')[0]
|
||||
g.async = true
|
||||
g.src = 'https://www.google-analytics.com/analytics.js'
|
||||
s.parentNode.insertBefore(g, s)
|
||||
|
||||
// Create the GA tracker
|
||||
ga('create', 'UA-60614729-11', 'auto')
|
||||
|
||||
// IP Anonymization
|
||||
ga('set', 'anonymizeIp', true)
|
||||
|
||||
// Send initial pageview
|
||||
ga('send', 'pageview')
|
||||
}(window))
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
29
src/styles/_fonts.scss
Normal file
29
src/styles/_fonts.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'Sharp Sans Display';
|
||||
src: url('/assets/fonts/SharpSansDispNo1-Bold.woff2') format('woff2'),
|
||||
url('/assets/fonts/SharpSansDispNo1-Bold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sharp Sans Medium';
|
||||
src: url('/assets/fonts/SharpSans-Medium.woff2') format('woff2'),
|
||||
url('/assets/fonts/SharpSans-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sharp Sans Bold';
|
||||
src: url('/assets/fonts/SharpSans-Bold.woff2') format('woff2'),
|
||||
url('/assets/fonts/SharpSans-Bold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-display: swap;
|
||||
}
|
91
src/styles/_global.scss
Normal file
91
src/styles/_global.scss
Normal file
@ -0,0 +1,91 @@
|
||||
@import 'variables';
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $font-size-root;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $brand-black;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-base;
|
||||
font-weight: $font-weight-base;
|
||||
line-height: $line-height;
|
||||
background: $brand-white;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
@media screen and (min-width: $break-point--small) {
|
||||
padding: $page-frame;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $brand-pink;
|
||||
transition: 0.2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken($brand-pink, 15%);
|
||||
text-decoration: none;
|
||||
transform: translate3d(0, -0.1rem, 0);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken($brand-pink, 15%);
|
||||
text-decoration: none;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
|
||||
strong,
|
||||
.strong {
|
||||
font-family: $font-family-button;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: $font-family-title;
|
||||
color: inherit;
|
||||
line-height: 1.25;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $font-size-h5;
|
||||
}
|
57
src/styles/_variables.scss
Normal file
57
src/styles/_variables.scss
Normal file
@ -0,0 +1,57 @@
|
||||
// Colors
|
||||
$brand-white: #fff;
|
||||
$brand-black: #141414;
|
||||
$brand-pink: #ff4092;
|
||||
$brand-purple: #7b1173;
|
||||
$brand-violet: #e000cf;
|
||||
|
||||
$brand-grey: #41474e;
|
||||
$brand-grey-light: #8b98a9;
|
||||
$brand-grey-dark: #303030;
|
||||
$brand-grey-lighter: #e2e2e2;
|
||||
|
||||
$green: #5fb359;
|
||||
$red: #d80606;
|
||||
$orange: #b35f36;
|
||||
$yellow: #eac146;
|
||||
|
||||
$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
|
||||
|
||||
// Fonts
|
||||
$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
$font-family-button: 'Sharp Sans Bold', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
|
||||
$font-size-root: 15px;
|
||||
$font-size-base: 1rem;
|
||||
$font-size-large: 1.25rem;
|
||||
$font-size-small: 0.85rem;
|
||||
$font-size-mini: 0.65rem;
|
||||
$font-size-text: $font-size-base;
|
||||
$font-size-label: $font-size-base;
|
||||
$font-size-title: 1.4rem;
|
||||
$font-size-h1: 3.4rem;
|
||||
$font-size-h2: 2.7rem;
|
||||
$font-size-h3: 2rem;
|
||||
$font-size-h4: 1.5rem;
|
||||
$font-size-h5: 1.125rem;
|
||||
|
||||
$font-weight-base: 500;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
$line-height: 1.5;
|
||||
|
||||
// Sizes
|
||||
$spacer: 2rem;
|
||||
$page-frame: 0.75rem;
|
||||
|
||||
$break-point--small: 640px;
|
||||
$break-point--medium: 860px;
|
||||
$break-point--large: 1140px;
|
||||
$break-point--huge: 1400px;
|
||||
$brand-border-width: 1px;
|
||||
|
||||
$border-radius: 0.2rem;
|
95
src/styles/styles.scss
Normal file
95
src/styles/styles.scss
Normal file
@ -0,0 +1,95 @@
|
||||
@import 'fonts';
|
||||
@import 'global';
|
||||
|
||||
body {
|
||||
color: $brand-white;
|
||||
}
|
||||
|
||||
main {
|
||||
background: $brand-black;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 15%;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - #{$page-frame * 2});
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
padding: $spacer;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $font-size-h3;
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: $spacer * 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
padding: $spacer / 3 $spacer;
|
||||
border: 1px solid $brand-pink;
|
||||
border-radius: $border-radius;
|
||||
margin: 0 $spacer / 2;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
margin-bottom: $spacer;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
font-size: $font-size-mini;
|
||||
padding: $spacer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: flex-end;
|
||||
|
||||
&,
|
||||
a {
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1 1 48%;
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-left: $spacer / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user