mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-02-17 18:53:53 +00:00
Merge pull request #96 from koodiklinikka/kaikki-tuareeks
Upgrade dependencies, port Stylus to SCSS
This commit is contained in:
Aarni Koskela
GitHub
44
.eslintrc
44
.eslintrc
@@ -1,44 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:jsx-a11y/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"plugins": [
|
||||
"react",
|
||||
"jsx-a11y"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"jsx": true,
|
||||
"modules": true
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"rules": {
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/react-in-jsx-scope": 2,
|
||||
"react/jsx-no-target-blank": 1,
|
||||
"comma-dangle": [2, "always-multiline"],
|
||||
"react/prop-types": 0,
|
||||
"no-use-before-define": 0,
|
||||
"padded-blocks": 0,
|
||||
"id-length": [2, {
|
||||
"min": 3,
|
||||
"max": 30,
|
||||
"properties": "never",
|
||||
"exceptions": ["x", "y", "vx", "vy", "id", "i", "e", "fn", "_"]
|
||||
}]
|
||||
}
|
||||
}
|
||||
37
.eslintrc.js
Normal file
37
.eslintrc.js
Normal file
@@ -0,0 +1,37 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:jsx-a11y/recommended",
|
||||
"plugin:@next/next/recommended",
|
||||
"prettier",
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
},
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020,
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
"@typescript-eslint/ban-types": "warn",
|
||||
"no-use-before-define": 0,
|
||||
"padded-blocks": 0,
|
||||
"react/jsx-no-target-blank": 0,
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/prop-types": 0,
|
||||
"react/react-in-jsx-scope": 2,
|
||||
},
|
||||
};
|
||||
2
.prettierignore
Normal file
2
.prettierignore
Normal file
@@ -0,0 +1,2 @@
|
||||
.next
|
||||
out
|
||||
@@ -1,4 +1,5 @@
|
||||
# Koodiklinikka
|
||||
|
||||
|
||||
|
||||
<img align="right" src="./public/static/images/logo-new-black.svg" alt="Koodiklinikka-logo" max-width="30%">
|
||||
@@ -13,7 +14,7 @@
|
||||
- projektin hallintaan liittyviin asioihin
|
||||
- tai koko Koodiklinikkaan yleisesti.
|
||||
|
||||
-----------------------------
|
||||
---
|
||||
|
||||
## Projektin asennus
|
||||
|
||||
@@ -41,7 +42,6 @@ yarn start
|
||||
|
||||
Avaa selaimessasi: [`http://localhost:3000`](http://localhost:3000)
|
||||
|
||||
|
||||
## Komennot
|
||||
|
||||
### `yarn`
|
||||
|
||||
12
TODO.md
12
TODO.md
@@ -1,6 +1,6 @@
|
||||
* Stripe
|
||||
* Test ID `pk_test_OmNve9H1OuORlmD4rblpjgzh`
|
||||
* Prod ID `pk_live_xrnwdLNXbt20LMxpIDffJnnC`
|
||||
* API integration (test backend `https://lit-plateau-4689.herokuapp.com/`)
|
||||
* Hero video
|
||||
* Deployment
|
||||
- Stripe
|
||||
- Test ID `pk_test_OmNve9H1OuORlmD4rblpjgzh`
|
||||
- Prod ID `pk_live_xrnwdLNXbt20LMxpIDffJnnC`
|
||||
- API integration (test backend `https://lit-plateau-4689.herokuapp.com/`)
|
||||
- Hero video
|
||||
- Deployment
|
||||
|
||||
@@ -1,17 +1,32 @@
|
||||
export const ChannelReferenceRenderer = (props: { value: string }) => {
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
import React from "react";
|
||||
|
||||
function renderStringWithChannelRefs(value: string) {
|
||||
return (
|
||||
<>
|
||||
{props.value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str) => {
|
||||
{value.split(/(<#[A-Z0-9]+\|[A-Za-z0-9]+>)/).map((str, i) => {
|
||||
const matches = str.match(/<#([A-Z0-9]+)\|([A-Za-z0-9]+)>/);
|
||||
if (matches) {
|
||||
return (
|
||||
<a href={`https://app.slack.com/client/T03BQ3NU9/${matches[1]}`}>
|
||||
<a
|
||||
href={`https://app.slack.com/client/T03BQ3NU9/${matches[1]}`}
|
||||
key={i}
|
||||
>
|
||||
#{matches[2]}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return str;
|
||||
return <React.Fragment key={i}>{str}</React.Fragment>;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const ChannelReferenceRenderer = ({
|
||||
children,
|
||||
}: React.PropsWithChildren<{}>) => {
|
||||
// TODO: this should probably walk the tree
|
||||
if (typeof children[0] === "string")
|
||||
return renderStringWithChannelRefs(children[0]);
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
@@ -8,8 +8,7 @@ import ReactTimeAgo from "react-time-ago";
|
||||
import JavascriptTimeAgo from "javascript-time-ago";
|
||||
import timeagoFi from "javascript-time-ago/locale/fi";
|
||||
|
||||
// TODO: Add type definitions for javascript-time-ago
|
||||
(JavascriptTimeAgo as any).locale(timeagoFi);
|
||||
JavascriptTimeAgo.addLocale(timeagoFi);
|
||||
|
||||
export default class Feed extends React.Component {
|
||||
state = {
|
||||
|
||||
@@ -5,7 +5,7 @@ import sponsors from "../data/sponsors";
|
||||
type Props = {
|
||||
href: string;
|
||||
name: string;
|
||||
key: string;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
const SponsorLink = ({ href, name }: Props) => (
|
||||
@@ -19,6 +19,17 @@ const SponsorLink = ({ href, name }: Props) => (
|
||||
</a>
|
||||
);
|
||||
|
||||
const SocialLink = ({ href, name, title }: Props) => (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer" aria-label={title}>
|
||||
<img
|
||||
src={`/static/images/social/${name.toLowerCase()}.svg`}
|
||||
alt={title}
|
||||
className={`social social__${name.toLowerCase()}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
@@ -30,36 +41,31 @@ export function Footer() {
|
||||
</div>
|
||||
<div className="contacts">
|
||||
<div>
|
||||
<a
|
||||
<SocialLink
|
||||
href="https://koodiklinikka.slack.com"
|
||||
aria-label="Koodiklinikka Slackissä"
|
||||
>
|
||||
<i className="fa fa-slack" aria-hidden="true" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/koodiklinikka/koodiklinikka.fi"
|
||||
aria-label="Koodiklinikka Githubissa"
|
||||
>
|
||||
<i className="fa fa-github" aria-hidden="true" />
|
||||
</a>
|
||||
<a
|
||||
title="Koodiklinikka Slackissä"
|
||||
name="slack"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://github.com/koodiklinikka"
|
||||
title="Koodiklinikka Githubissa"
|
||||
name="github"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://twitter.com/koodiklinikka"
|
||||
aria-label="Koodiklinikka Twitterissä"
|
||||
>
|
||||
<i className="fa fa-twitter" aria-hidden="true" />
|
||||
</a>
|
||||
<a
|
||||
title="Koodiklinikka Twitterissä"
|
||||
name="twitter"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://www.linkedin.com/groups/12025476"
|
||||
aria-label="Koodiklinikka Linkedinissä"
|
||||
>
|
||||
<i className="fa fa-linkedin" aria-hidden="true" />
|
||||
</a>
|
||||
<a
|
||||
title="Koodiklinikka Linkedinissä"
|
||||
name="linkedin"
|
||||
/>
|
||||
<SocialLink
|
||||
href="https://www.facebook.com/koodiklinikka"
|
||||
aria-label="Koodiklinikka Facebookissa"
|
||||
>
|
||||
<i className="fa fa-facebook" aria-hidden="true" />
|
||||
</a>
|
||||
title="Koodiklinikka Facebookissa"
|
||||
name="facebook"
|
||||
/>
|
||||
<div id="email">
|
||||
<EmailComponent />
|
||||
</div>
|
||||
|
||||
@@ -32,7 +32,8 @@ const fieldNameTranslations = {
|
||||
postcode: { fi: "Postinumero" },
|
||||
};
|
||||
|
||||
const mailValidateRe = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
const mailValidateRe =
|
||||
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
||||
function validateEmail(email) {
|
||||
return mailValidateRe.test(email);
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
const sponsors = [
|
||||
{
|
||||
name: "Futurice",
|
||||
href: "https://futurice.com/",
|
||||
},
|
||||
{
|
||||
name: "Metosin",
|
||||
href: "https://www.metosin.fi/",
|
||||
},
|
||||
{
|
||||
name: "Solita",
|
||||
href: "https://www.solita.fi/",
|
||||
},
|
||||
{
|
||||
name: "Wakeone",
|
||||
href: "https://wakeone.co/",
|
||||
},
|
||||
{
|
||||
name: "Nordea",
|
||||
href: "https://www.nordea.fi/",
|
||||
},
|
||||
{
|
||||
name: "Idean",
|
||||
href: "https://www.idean.com/",
|
||||
},
|
||||
{
|
||||
name: "Rare",
|
||||
href: "https://rare.fi/",
|
||||
},
|
||||
];
|
||||
export default sponsors;
|
||||
const sponsors = [
|
||||
{
|
||||
name: "Futurice",
|
||||
href: "https://futurice.com/",
|
||||
},
|
||||
{
|
||||
name: "Metosin",
|
||||
href: "https://www.metosin.fi/",
|
||||
},
|
||||
{
|
||||
name: "Solita",
|
||||
href: "https://www.solita.fi/",
|
||||
},
|
||||
{
|
||||
name: "Wakeone",
|
||||
href: "https://wakeone.co/",
|
||||
},
|
||||
{
|
||||
name: "Nordea",
|
||||
href: "https://www.nordea.fi/",
|
||||
},
|
||||
{
|
||||
name: "Idean",
|
||||
href: "https://www.idean.com/",
|
||||
},
|
||||
{
|
||||
name: "Rare",
|
||||
href: "https://rare.fi/",
|
||||
},
|
||||
];
|
||||
export default sponsors;
|
||||
|
||||
5
next-env.d.ts
vendored
5
next-env.d.ts
vendored
@@ -1,2 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
const withStylus = require('@zeit/next-stylus');
|
||||
const withLess = require('@zeit/next-less');
|
||||
const withFonts = require('next-fonts');
|
||||
module.exports = withFonts(withLess(withStylus()));
|
||||
53
package.json
53
package.json
@@ -9,40 +9,39 @@
|
||||
"build": "next build && next export",
|
||||
"dev": "SERVER=http://localhost:9000/ NODE_ENV=development next",
|
||||
"prod": "NODE_ENV=production next build && next export",
|
||||
"lint": "eslint --ext .jsx --ext .js .",
|
||||
"prettify": "prettier --write components pages styles"
|
||||
"lint": "eslint --ext .tsx --ext .ts .",
|
||||
"prettify": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-less": "^1.0.1",
|
||||
"@zeit/next-stylus": "^1.0.1",
|
||||
"axios": "^0.20.0",
|
||||
"classnames": "^2.2.6",
|
||||
"font-awesome": "^4.7.0",
|
||||
"less": "^3.10.3",
|
||||
"lodash": "^4.17.15",
|
||||
"next": "^9.5.3",
|
||||
"next-fonts": "^1.4.0",
|
||||
"axios": "^0.25.0",
|
||||
"classnames": "^2.3.1",
|
||||
"javascript-time-ago": "^2.3.13",
|
||||
"less": "^4.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "^12.0.10",
|
||||
"parse-github-event": "^1.1.3",
|
||||
"react": "^16.11.0",
|
||||
"react-dom": "^16.11.0",
|
||||
"react-ga": "^3.1.2",
|
||||
"react-markdown": "^4.3.1",
|
||||
"react-time-ago": "^6.0.1",
|
||||
"stylus": "^0.54.7",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-ga": "^3.3.0",
|
||||
"react-markdown": "^8.0.0",
|
||||
"react-time-ago": "^7.1.9",
|
||||
"sass": "^1.49.7",
|
||||
"twitter-text": "^3.0.0",
|
||||
"utility-types": "^3.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "14.11.2",
|
||||
"@types/react": "16.9.49",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^7.9.0",
|
||||
"eslint-config-prettier": "^6.5.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.3",
|
||||
"eslint-plugin-react": "^7.16.0",
|
||||
"prettier": "^2.1.2",
|
||||
"typescript": "4.0.3"
|
||||
"@next/eslint-plugin-next": "^12.0.10",
|
||||
"@types/node": "17.0.17",
|
||||
"@types/react": "17.0.39",
|
||||
"@typescript-eslint/eslint-plugin": "^5.11.0",
|
||||
"@typescript-eslint/parser": "^5.11.0",
|
||||
"eslint": "^8.8.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-react": "^7.28.0",
|
||||
"eslint-plugin-react-hooks": "^4.3.0",
|
||||
"prettier": "^2.5.1",
|
||||
"typescript": "4.5.5"
|
||||
},
|
||||
"prettier": {
|
||||
"trailingComma": "es5"
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
|
||||
import "../styles/style.scss";
|
||||
|
||||
const metaImage = "/static/images/meta.jpg";
|
||||
const metaDescription =
|
||||
"Koodiklinikka on Suomen suurin ohjelmistoalan yhteisö, joka kokoaa työntekijät, harrastajat ja vasta-alkajat yhteen. Tarkoituksenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä, sekä tarjota apua ja uusia kontakteja ohjelmoinnista innostuneille nuorille.";
|
||||
|
||||
@@ -3,26 +3,6 @@ import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
import { Footer } from "../components/Footer";
|
||||
import Fader from "../components/Fader";
|
||||
import ReactGA from "react-ga";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
class CustomNextHead extends Head {
|
||||
// TODO: This might not be needed if Next.js implements built-in support
|
||||
// https://github.com/zeit/next-plugins/issues/364
|
||||
getCssLinks({ allFiles }) {
|
||||
return allFiles
|
||||
.filter(file => file.endsWith(".css"))
|
||||
.map(file => (
|
||||
<style
|
||||
key={file}
|
||||
nonce={this.props.nonce}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: fs.readFileSync(path.join(".next", file), "utf-8"),
|
||||
}}
|
||||
/>
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
function trackPageView() {
|
||||
if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
|
||||
@@ -49,7 +29,7 @@ class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html lang="fi">
|
||||
<CustomNextHead />
|
||||
<Head />
|
||||
<body>
|
||||
<div className="site">
|
||||
<div className="container">
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import { PromiseType } from "utility-types";
|
||||
import "../styles/style.styl";
|
||||
import "../styles/icons.less";
|
||||
import InviteForm from "../components/InviteForm";
|
||||
import Members from "../components/Members";
|
||||
import Feed from "../components/Feed";
|
||||
@@ -140,9 +138,10 @@ const IndexContent = (props: IndexProps) => (
|
||||
<span>
|
||||
<ReactMarkdown
|
||||
className="channel-topic"
|
||||
source={channel.topic}
|
||||
renderers={{ text: ChannelReferenceRenderer }}
|
||||
/>
|
||||
components={{ p: ChannelReferenceRenderer }}
|
||||
>
|
||||
{channel.topic}
|
||||
</ReactMarkdown>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -152,7 +151,7 @@ const IndexContent = (props: IndexProps) => (
|
||||
<p>
|
||||
<strong>Ja paljon muuta:</strong>{" "}
|
||||
{props.channels.slice(10, 30).map((channel, i) => (
|
||||
<>
|
||||
<React.Fragment key={channel.id}>
|
||||
<a
|
||||
href={`https://app.slack.com/client/T03BQ3NU9/${channel.id}`}
|
||||
target="_blank"
|
||||
@@ -160,7 +159,7 @@ const IndexContent = (props: IndexProps) => (
|
||||
#{channel.name}
|
||||
</a>
|
||||
{i !== 19 ? ", " : "..."}
|
||||
</>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1 +1,19 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
||||
1
public/static/images/social/facebook.svg
Normal file
1
public/static/images/social/facebook.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
|
||||
|
After Width: | Height: | Size: 524 B |
1
public/static/images/social/github.svg
Normal file
1
public/static/images/social/github.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
public/static/images/social/linkedin.svg
Normal file
1
public/static/images/social/linkedin.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
|
||||
|
After Width: | Height: | Size: 684 B |
1
public/static/images/social/slack.svg
Normal file
1
public/static/images/social/slack.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
public/static/images/social/twitter.svg
Normal file
1
public/static/images/social/twitter.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
10
styles/_button.scss
Normal file
10
styles/_button.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
.btn {
|
||||
border-radius: 3px;
|
||||
padding: 1em;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
.btn
|
||||
border-radius 3px
|
||||
padding 1em
|
||||
border 0
|
||||
font-size 14px
|
||||
cursor pointer
|
||||
&:disabled
|
||||
opacity 0.6
|
||||
|
||||
|
||||
299
styles/_header.scss
Normal file
299
styles/_header.scss
Normal file
@@ -0,0 +1,299 @@
|
||||
$headerHeight: 400px;
|
||||
.header {
|
||||
background: url("/static/images/jumbo.jpg");
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
height: $headerHeight;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
transform: translateZ(0);
|
||||
|
||||
@media screen and (max-width: 1030px) {
|
||||
height: 300px;
|
||||
|
||||
video {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__container {
|
||||
background: #3e7394;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
rgba(#085078, 0.8) 10%,
|
||||
rgba(#85d8ce, 0.7) 90%
|
||||
);
|
||||
display: table;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
.header__nav {
|
||||
position: absolute;
|
||||
left: 90px;
|
||||
top: 40px;
|
||||
|
||||
@media screen and (max-width: 810px) {
|
||||
left: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
max-width: 180px;
|
||||
|
||||
@media screen and (max-width: 810px) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__headline {
|
||||
display: table-cell;
|
||||
padding: 0 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.header__title {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 2.75em;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1.4em;
|
||||
margin: auto;
|
||||
max-width: 780px;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 0 rgba(#000, 0.1);
|
||||
vertical-align: middle;
|
||||
|
||||
@media screen and (max-width: 1030px) {
|
||||
font-size: 2em;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 810px) {
|
||||
display: block;
|
||||
font-size: 1.6em;
|
||||
max-width: 440px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.header__video-bg {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: -2;
|
||||
|
||||
@media (min-aspect-ratio: 1 / 2) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
50% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
50.0001% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
50% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
50.0001% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes spin {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
50% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
50.0001% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
50% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
50.0001% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
top: 0;
|
||||
}
|
||||
50% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
50.0001% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin2 {
|
||||
0% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
50% {
|
||||
top: 0;
|
||||
}
|
||||
99.99999% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
100% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spin2 {
|
||||
0% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
50% {
|
||||
top: 0;
|
||||
}
|
||||
99.99999% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
100% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes spin2 {
|
||||
0% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
50% {
|
||||
top: 0;
|
||||
}
|
||||
99.99999% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
100% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes spin2 {
|
||||
0% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
50% {
|
||||
top: 0;
|
||||
}
|
||||
99.99999% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
100% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin2 {
|
||||
0% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
50% {
|
||||
top: 0;
|
||||
}
|
||||
99.99999% {
|
||||
top: -($headerHeight);
|
||||
}
|
||||
100% {
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
.header__members {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.member {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
width: calc(100% / 18);
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
width: 5%;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
width: calc(100% / 15);
|
||||
}
|
||||
@media screen and (max-width: 810px) {
|
||||
width: 10%;
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.members {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $headerHeight;
|
||||
animation: spin 40s infinite linear;
|
||||
&:first-child {
|
||||
z-index: 1;
|
||||
}
|
||||
&:last-child {
|
||||
animation: spin2 40s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
headerHeight = 400px
|
||||
|
||||
.header
|
||||
background url('/static/images/jumbo.jpg')
|
||||
background-position bottom center
|
||||
background-size cover
|
||||
height headerHeight
|
||||
overflow hidden
|
||||
position relative
|
||||
width 100%
|
||||
transform translateZ(0)
|
||||
|
||||
@media screen and (max-width: 1030px)
|
||||
height 300px
|
||||
|
||||
video
|
||||
display none
|
||||
|
||||
.header__container
|
||||
background #3E7394
|
||||
background linear-gradient(120deg, rgba(#085078, 0.8) 10%, rgba(#85D8CE, 0.7) 90%)
|
||||
display table
|
||||
height 100%
|
||||
text-align center
|
||||
vertical-align middle
|
||||
width 100%
|
||||
|
||||
.header__nav
|
||||
position absolute
|
||||
left 90px
|
||||
top 40px
|
||||
|
||||
@media screen and (max-width: 810px)
|
||||
left auto
|
||||
right auto
|
||||
width: 100%
|
||||
|
||||
a
|
||||
display: block;
|
||||
max-width: 180px;
|
||||
|
||||
@media screen and (max-width: 810px)
|
||||
margin-left auto
|
||||
margin-right auto
|
||||
|
||||
img
|
||||
width: 100%;
|
||||
|
||||
.header__headline
|
||||
display table-cell
|
||||
padding 0 1em
|
||||
vertical-align middle
|
||||
|
||||
.header__title
|
||||
color #fff
|
||||
display inline-block
|
||||
font-size 2.75em
|
||||
letter-spacing -1px
|
||||
line-height 1.4em
|
||||
margin auto
|
||||
max-width 780px
|
||||
font-family 'Lato', sans-serif
|
||||
font-weight 900
|
||||
text-align center
|
||||
text-shadow 0 2px 0 rgba(#000, 0.1)
|
||||
vertical-align middle
|
||||
|
||||
@media screen and (max-width: 1030px)
|
||||
font-size 2em
|
||||
max-width 640px
|
||||
|
||||
@media screen and (max-width: 810px)
|
||||
display block
|
||||
font-size 1.6em
|
||||
max-width 440px
|
||||
text-align center
|
||||
|
||||
@media screen and (max-width: 410px)
|
||||
font-size 1.4em
|
||||
|
||||
a
|
||||
color inherit
|
||||
text-decoration underline
|
||||
|
||||
.header__video-bg
|
||||
height 100%
|
||||
position absolute
|
||||
bottom 0
|
||||
z-index -2
|
||||
|
||||
@media (min-aspect-ratio: 1/2)
|
||||
width 100%
|
||||
height auto
|
||||
|
||||
@keyframes spin
|
||||
0%
|
||||
top 0
|
||||
50%
|
||||
top -(headerHeight)
|
||||
50.0001%
|
||||
top headerHeight
|
||||
100%
|
||||
top 0
|
||||
|
||||
@keyframes spin2
|
||||
0%
|
||||
top (headerHeight)
|
||||
50%
|
||||
top 0
|
||||
99.99999%
|
||||
top -(headerHeight)
|
||||
100%
|
||||
top (headerHeight)
|
||||
|
||||
.header__members
|
||||
width 100%
|
||||
height 100%
|
||||
z-index -1
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
|
||||
.member
|
||||
margin 0
|
||||
border-radius 0
|
||||
width (100/18)%
|
||||
|
||||
@media screen and (min-width: 2000px)
|
||||
width 5%
|
||||
@media screen and (max-width: 1200px)
|
||||
width (100/15)%
|
||||
@media screen and (max-width: 810px)
|
||||
width 10%
|
||||
@media screen and (max-width: 450px)
|
||||
width 20%
|
||||
|
||||
.members
|
||||
position absolute
|
||||
overflow hidden
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
height headerHeight
|
||||
animation spin 40s infinite linear
|
||||
&:first-child
|
||||
z-index 1
|
||||
&:last-child
|
||||
animation spin2 40s infinite linear
|
||||
|
||||
39
styles/_input.scss
Normal file
39
styles/_input.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.input {
|
||||
height: 45px;
|
||||
padding: 0.5em 1em;
|
||||
box-sizing: border-box;
|
||||
font-size: inherit;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
outline: 0;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
&:focus {
|
||||
border: 2px solid #3090de;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
.input::-webkit-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.input:-moz-placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
.input::-moz-placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
.input:-ms-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.input.has-error {
|
||||
border-color: rgba(226, 33, 112, 0.6);
|
||||
color: rgb(226, 33, 112);
|
||||
}
|
||||
.input.half {
|
||||
width: 48%;
|
||||
&.left {
|
||||
margin-right: 4%;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.input
|
||||
height 45px
|
||||
padding 0.5em 1em
|
||||
box-sizing border-box
|
||||
font-size inherit
|
||||
border 1px solid rgba(0, 0, 0, 0.3)
|
||||
border-radius 5px
|
||||
background #fff
|
||||
outline 0
|
||||
color rgba(0, 0, 0, 0.5)
|
||||
&:focus
|
||||
border 2px solid #3090de
|
||||
color rgba(0, 0, 0, 0.6)
|
||||
|
||||
.input::-webkit-input-placeholder
|
||||
color rgba(0, 0, 0, 0.3)
|
||||
|
||||
.input:-moz-placeholder
|
||||
color rgba(0, 0, 0, 0.3)
|
||||
opacity 1
|
||||
|
||||
.input::-moz-placeholder
|
||||
color rgba(0, 0, 0, 0.3)
|
||||
opacity 1
|
||||
|
||||
.input:-ms-input-placeholder
|
||||
color rgba(0, 0, 0, 0.3)
|
||||
|
||||
.input.has-error
|
||||
border-color rgba(226, 33, 112, 0.6)
|
||||
color rgb(226, 33, 112)
|
||||
|
||||
.input.half
|
||||
width 48%
|
||||
&.left
|
||||
margin-right 4%
|
||||
133
styles/_loader.scss
Normal file
133
styles/_loader.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
.sk-folding-cube {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.sk-folding-cube .sk-cube:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: linkColor;
|
||||
animation: sk-foldCubeAngle 2.4s infinite linear both;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
.sk-folding-cube .sk-cube2 {
|
||||
transform: scale(1.1) rotateZ(90deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube3 {
|
||||
transform: scale(1.1) rotateZ(180deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube4 {
|
||||
transform: scale(1.1) rotateZ(270deg);
|
||||
}
|
||||
.sk-folding-cube .sk-cube2:before {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.sk-folding-cube .sk-cube3:before {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.sk-folding-cube .sk-cube4:before {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-foldCubeAngle {
|
||||
0%,
|
||||
10% {
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
transform: perspective(140px) rotateY(180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
.sk-folding-cube
|
||||
margin auto
|
||||
width 100%
|
||||
height 100%
|
||||
position relative
|
||||
transform rotateZ(45deg)
|
||||
|
||||
.sk-folding-cube .sk-cube
|
||||
float left
|
||||
width 50%
|
||||
height 50%
|
||||
position relative
|
||||
transform scale(1.1)
|
||||
|
||||
.sk-folding-cube .sk-cube:before
|
||||
content ''
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
background-color linkColor
|
||||
animation sk-foldCubeAngle 2.4s infinite linear both
|
||||
transform-origin 100% 100%
|
||||
|
||||
.sk-folding-cube .sk-cube2
|
||||
transform scale(1.1) rotateZ(90deg)
|
||||
|
||||
.sk-folding-cube .sk-cube3
|
||||
transform scale(1.1) rotateZ(180deg)
|
||||
|
||||
.sk-folding-cube .sk-cube4
|
||||
transform scale(1.1) rotateZ(270deg)
|
||||
|
||||
.sk-folding-cube .sk-cube2:before
|
||||
animation-delay 0.3s
|
||||
|
||||
.sk-folding-cube .sk-cube3:before
|
||||
animation-delay 0.6s
|
||||
|
||||
.sk-folding-cube .sk-cube4:before
|
||||
animation-delay 0.9s
|
||||
|
||||
@keyframes sk-foldCubeAngle
|
||||
0%, 10%
|
||||
transform perspective(140px) rotateX(-180deg)
|
||||
opacity 0
|
||||
25%, 75%
|
||||
transform perspective(140px) rotateX(0deg)
|
||||
opacity 1
|
||||
90%, 100%
|
||||
transform perspective(140px) rotateY(180deg)
|
||||
opacity 0
|
||||
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
@import "../node_modules/font-awesome/less/variables.less";
|
||||
@import "../node_modules/font-awesome/less/core.less";
|
||||
|
||||
@font-face {
|
||||
font-family: "FontAwesome";
|
||||
src: url("../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=@{fa-version}")
|
||||
format("woff2"),
|
||||
url("../node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=@{fa-version}")
|
||||
format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.@{fa-css-prefix}-github:before {
|
||||
content: @fa-var-github;
|
||||
}
|
||||
.@{fa-css-prefix}-slack:before {
|
||||
content: @fa-var-slack;
|
||||
}
|
||||
.@{fa-css-prefix}-twitter:before {
|
||||
content: @fa-var-twitter;
|
||||
}
|
||||
.@{fa-css-prefix}-linkedin:before {
|
||||
content: @fa-var-linkedin;
|
||||
}
|
||||
.@{fa-css-prefix}-facebook:before {
|
||||
content: @fa-var-facebook;
|
||||
}
|
||||
602
styles/style.scss
Normal file
602
styles/style.scss
Normal file
@@ -0,0 +1,602 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Source+Sans+Pro:wght@400;600;700&display=swap");
|
||||
|
||||
$linkColor: #3090de;
|
||||
$textColor: #444;
|
||||
$feedWidth: 500px;
|
||||
$footerHeight: 50px;
|
||||
|
||||
@import "_input";
|
||||
@import "_button";
|
||||
@import "_header";
|
||||
@import "_loader";
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
font: 18px "Source Sans Pro", "Helvetica Neue", helvetica, arial, sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
color: $textColor;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1em;
|
||||
line-height: 1.75em;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $linkColor;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.site {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
section {
|
||||
background: #fff;
|
||||
padding: 2em 0;
|
||||
}
|
||||
.content {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&.with-feed {
|
||||
padding-right: $feedWidth;
|
||||
}
|
||||
}
|
||||
|
||||
section:first-child {
|
||||
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
background: #fcfcfc;
|
||||
}
|
||||
.row {
|
||||
max-width: 850px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
padding: 0 2em;
|
||||
margin-top: 2em;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.column {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
padding: 0 1em;
|
||||
box-sizing: border-box;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
img:first-child {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.column3-5 {
|
||||
width: 100 * 0.2 * 3%;
|
||||
}
|
||||
.column2-5 {
|
||||
width: 100 * 0.2 * 2%;
|
||||
}
|
||||
.column1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
.column {
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin-top: 1em;
|
||||
padding: 0;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.btn {
|
||||
background: $linkColor;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
&.sending {
|
||||
.invite-form__loader {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.controls-wrapper {
|
||||
display: flex;
|
||||
@media screen and (max-width: 450px) {
|
||||
flex-direction: column;
|
||||
.btn {
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
width: 400px;
|
||||
@media screen and (max-width: 650px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.invite-form {
|
||||
margin-top: 0.5rem;
|
||||
position: relative;
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
.invite-form__input {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.label {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.6;
|
||||
display: block;
|
||||
}
|
||||
.btn {
|
||||
height: 45px;
|
||||
font: inherit;
|
||||
border-radius: 15px;
|
||||
padding: 0.5rem 3rem;
|
||||
color: #fff;
|
||||
&:active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.invite-form__loader {
|
||||
display: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
.code-of-conduct {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.membership-form {
|
||||
.input {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
.membership-form__loader {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@-webkit-keyframes drop {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes drop {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes drop {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes drop {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
.form--message {
|
||||
background: $linkColor;
|
||||
color: #fff;
|
||||
line-height: 40px;
|
||||
padding: 0 0.5em;
|
||||
margin-top: 4px;
|
||||
transform: rotateX(0deg);
|
||||
transform-origin: 100% 0;
|
||||
animation: drop 0.6s linear;
|
||||
a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.form.has-error {
|
||||
.form--message {
|
||||
background: rgb(226, 33, 112);
|
||||
}
|
||||
}
|
||||
.members {
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.member {
|
||||
width: 30px;
|
||||
vertical-align: middle;
|
||||
margin: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.project-image__codestats {
|
||||
width: 143px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 0.5em 1em;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #ececec;
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
@media screen and (max-width: 940px) {
|
||||
display: block;
|
||||
}
|
||||
i {
|
||||
margin: 0 0.3em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
.contacts {
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@media screen and (max-width: 940px) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
.sponsors {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.sponsors__label {
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
#email {
|
||||
font-size: 0.85rem;
|
||||
@media screen and (min-width: 400px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.sponsor {
|
||||
height: 60px;
|
||||
margin-right: 1em;
|
||||
vertical-align: middle;
|
||||
@media screen and (max-width: 940px) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
height: 30px;
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.feed {
|
||||
width: $feedWidth;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
background: #fff;
|
||||
border-left: 1px solid #e5e5e5;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.feed {
|
||||
width: 350px;
|
||||
}
|
||||
.content.with-feed {
|
||||
padding-right: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 980px) {
|
||||
.feed {
|
||||
width: 0;
|
||||
}
|
||||
.content.with-feed {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.message {
|
||||
padding: 1em;
|
||||
padding-right: 2em;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.message__content {
|
||||
flex: 1;
|
||||
}
|
||||
.message__body {
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.message__image {
|
||||
width: 50px;
|
||||
margin-right: 1em;
|
||||
margin-top: 0.5em;
|
||||
text-align: center;
|
||||
a {
|
||||
outline: 0;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
.message__icon {
|
||||
margin: 6px;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.fa-twitter {
|
||||
color: #55acee;
|
||||
}
|
||||
.fa-github {
|
||||
color: #333333;
|
||||
}
|
||||
.fa-slack {
|
||||
color: #dc005d;
|
||||
}
|
||||
}
|
||||
.message__details {
|
||||
font-size: 0.7em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.message__meta {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.fader {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.15) 99%,
|
||||
rgba(0, 0, 0, 0.15) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.bread {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
.column {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.bread {
|
||||
display: block;
|
||||
.column {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bread-img {
|
||||
background: url("/static/images/hp3_bw.jpg");
|
||||
background-size: cover;
|
||||
border-radius: 160px;
|
||||
opacity: 0.85;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.bread-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.organization {
|
||||
padding-top: 3em;
|
||||
}
|
||||
.membership-information.column {
|
||||
vertical-align: initial;
|
||||
p:first-child {
|
||||
margin-top: 37px;
|
||||
}
|
||||
}
|
||||
.channels {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
td {
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
td:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.channel {
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
color: #4a4a4a;
|
||||
display: inline-flex;
|
||||
font-size: 0.75rem;
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.channels tr:nth-child(1n) .channel {
|
||||
background-color: #ebfffc;
|
||||
color: #00947e;
|
||||
}
|
||||
.channels tr:nth-child(2n) .channel {
|
||||
background-color: #eef3fc;
|
||||
color: #2160c4;
|
||||
}
|
||||
.channels tr:nth-child(3n) .channel {
|
||||
background-color: #eef6fc;
|
||||
color: #1d72aa;
|
||||
}
|
||||
.channels tr:nth-child(4n) .channel {
|
||||
background-color: #effaf3;
|
||||
color: #257942;
|
||||
}
|
||||
.channels tr:nth-child(5n) .channel {
|
||||
background-color: #fffbeb;
|
||||
color: #947600;
|
||||
}
|
||||
.channels tr:nth-child(6n) .channel {
|
||||
background-color: #feecf0;
|
||||
color: #cc0f35;
|
||||
}
|
||||
.channel-members {
|
||||
font-size: 12px;
|
||||
}
|
||||
.channel-topic {
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
padding-left: 0.75rem;
|
||||
margin: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
@@ -1,458 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Source+Sans+Pro:wght@400;600;700&display=swap');
|
||||
|
||||
linkColor = #3090de
|
||||
textColor = #444
|
||||
feedWidth = 500px
|
||||
footerHeight = 50px
|
||||
|
||||
@require '_input'
|
||||
@require '_button'
|
||||
@require '_header'
|
||||
@require '_loader'
|
||||
|
||||
body, html
|
||||
margin 0
|
||||
font 18px 'Source Sans Pro', 'Helvetica Neue', helvetica, arial, sans-serif
|
||||
height 100%
|
||||
width 100%
|
||||
font-weight 400
|
||||
color textColor
|
||||
font-smoothing antialiased
|
||||
box-sizing border-box
|
||||
|
||||
h1, h2, h3
|
||||
margin 0
|
||||
margin-bottom 0.5em
|
||||
text-shadow 1px 1px 10px rgba(255,255,255,0.5)
|
||||
|
||||
h2
|
||||
margin-bottom 1em
|
||||
|
||||
h3
|
||||
font-size 1.25em
|
||||
|
||||
p
|
||||
margin-top 1em
|
||||
line-height 1.75em
|
||||
font-size 16px
|
||||
|
||||
a
|
||||
color linkColor
|
||||
text-decoration none
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
.site
|
||||
display flex
|
||||
min-height 100vh
|
||||
flex-direction column
|
||||
|
||||
.container
|
||||
flex 1
|
||||
|
||||
section
|
||||
background #fff
|
||||
padding 2em 0
|
||||
|
||||
.content
|
||||
z-index 2
|
||||
position relative
|
||||
min-height 50vh
|
||||
box-sizing border-box
|
||||
|
||||
@media screen and (max-width: 700px)
|
||||
h3
|
||||
margin-top 0
|
||||
|
||||
&.with-feed
|
||||
padding-right feedWidth
|
||||
|
||||
|
||||
section:first-child
|
||||
box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05)
|
||||
border-bottom 1px solid #EEEEEE
|
||||
background #FCFCFC
|
||||
|
||||
.row
|
||||
max-width 850px
|
||||
margin auto
|
||||
overflow auto
|
||||
padding 0 2em
|
||||
margin-top 2em
|
||||
|
||||
&:first-child
|
||||
margin-top 0
|
||||
|
||||
.column
|
||||
float left
|
||||
overflow auto
|
||||
padding 0 1em
|
||||
box-sizing border-box
|
||||
&:first-child
|
||||
padding-left 0
|
||||
&:last-child
|
||||
padding-right 0
|
||||
|
||||
img:first-child
|
||||
max-width 100%
|
||||
|
||||
.column3-5
|
||||
width (100/5*3)%
|
||||
|
||||
.column2-5
|
||||
width (100/5*2)%
|
||||
|
||||
.column1-2
|
||||
width 50%
|
||||
|
||||
.column
|
||||
@media screen and (max-width: 700px)
|
||||
width 100%
|
||||
float none
|
||||
margin-top 1em
|
||||
padding 0
|
||||
&:first-child
|
||||
margin-top 0
|
||||
|
||||
.form
|
||||
display flex
|
||||
flex-direction column
|
||||
.btn
|
||||
background linkColor
|
||||
color rgba(255, 255, 255, 0.9)
|
||||
margin-left 0.5rem
|
||||
&.sending
|
||||
.invite-form__loader
|
||||
display block
|
||||
|
||||
.controls-wrapper
|
||||
display flex
|
||||
@media screen and (max-width: 450px)
|
||||
flex-direction column
|
||||
.btn
|
||||
margin 0
|
||||
margin-top 0.5rem
|
||||
|
||||
.input-wrapper
|
||||
position relative
|
||||
flex-grow 1
|
||||
width 400px
|
||||
@media screen and (max-width: 650px)
|
||||
width auto
|
||||
|
||||
.invite-form
|
||||
margin-top 0.5rem
|
||||
position relative
|
||||
.input
|
||||
width 100%
|
||||
.invite-form__input
|
||||
padding-right 2em
|
||||
|
||||
.label
|
||||
margin-bottom 0.5rem
|
||||
font-size 0.9rem
|
||||
opacity 0.6
|
||||
display block
|
||||
|
||||
.btn
|
||||
height 45px
|
||||
font inherit
|
||||
border-radius 15px
|
||||
padding 0.5rem 3rem
|
||||
color #fff
|
||||
&:active
|
||||
border-bottom 0
|
||||
.invite-form__loader
|
||||
display none
|
||||
width 10px
|
||||
height 10px
|
||||
position absolute
|
||||
right 1rem
|
||||
top 50%
|
||||
margin-top -5px
|
||||
|
||||
.code-of-conduct
|
||||
margin-bottom 0
|
||||
|
||||
.membership-form
|
||||
.input
|
||||
margin 8px 0px
|
||||
.btn
|
||||
margin-top 12px
|
||||
|
||||
.membership-form__loader
|
||||
width 70px
|
||||
height 70px
|
||||
margin auto
|
||||
|
||||
@keyframes drop
|
||||
0%
|
||||
transform rotateX(90deg)
|
||||
30%
|
||||
transform rotateX(45deg)
|
||||
45%
|
||||
transform rotateX(0deg)
|
||||
60%
|
||||
transform rotateX(45deg)
|
||||
100%
|
||||
transform rotateX(0deg)
|
||||
|
||||
.form--message
|
||||
background linkColor
|
||||
color #fff
|
||||
line-height 40px
|
||||
padding 0 0.5em
|
||||
margin-top 4px
|
||||
transform rotateX(0deg)
|
||||
transform-origin 100% 0
|
||||
animation drop 0.6s linear
|
||||
a
|
||||
color #fff
|
||||
font-weight bold
|
||||
.form.has-error
|
||||
.form--message
|
||||
background rgb(226, 33, 112)
|
||||
|
||||
.members
|
||||
a
|
||||
display inline-block
|
||||
|
||||
.member
|
||||
width 30px
|
||||
vertical-align middle
|
||||
margin 3px
|
||||
border-radius 3px
|
||||
|
||||
.project-image__codestats
|
||||
width 143px
|
||||
|
||||
footer
|
||||
padding 0.5em 1em
|
||||
z-index 2
|
||||
border-top 1px solid #ECECEC
|
||||
font-size 1.5em
|
||||
display flex
|
||||
justify-content space-between
|
||||
flex-wrap wrap
|
||||
text-align center
|
||||
@media screen and (max-width: 940px)
|
||||
display block
|
||||
i
|
||||
margin 0 0.30em
|
||||
font-size 1.5em
|
||||
|
||||
.contacts
|
||||
line-height normal
|
||||
text-align center
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
@media screen and (max-width: 940px)
|
||||
margin-top 1em
|
||||
|
||||
.sponsors
|
||||
text-align center
|
||||
display inline-block
|
||||
|
||||
.sponsors__label
|
||||
color #ccc
|
||||
font-size 12px
|
||||
text-align left
|
||||
|
||||
#email
|
||||
font-size .85rem
|
||||
@media screen and (min-width: 400px)
|
||||
font-size 1rem
|
||||
|
||||
.sponsor
|
||||
height 60px
|
||||
margin-right 1em
|
||||
vertical-align middle
|
||||
@media screen and (max-width: 940px)
|
||||
margin-top 1em
|
||||
|
||||
.feed
|
||||
width feedWidth
|
||||
height 100%
|
||||
overflow auto
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
z-index 5
|
||||
background #fff
|
||||
border-left 1px solid #E5E5E5
|
||||
&::-webkit-scrollbar
|
||||
display none
|
||||
|
||||
@media screen and (max-width: 1200px)
|
||||
.feed
|
||||
width 350px
|
||||
.content.with-feed
|
||||
padding-right 350px
|
||||
|
||||
@media screen and (max-width: 980px)
|
||||
.feed
|
||||
width 0
|
||||
.content.with-feed
|
||||
padding-right 0
|
||||
|
||||
.message
|
||||
padding 1em
|
||||
padding-right 2em
|
||||
border-top 1px solid #E5E5E5
|
||||
position relative
|
||||
display flex
|
||||
|
||||
.message__content
|
||||
flex 1
|
||||
|
||||
.message__body
|
||||
font-weight 400
|
||||
font-size 15px
|
||||
line-height 1.4em
|
||||
|
||||
.message__image
|
||||
width 50px
|
||||
margin-right 1em
|
||||
margin-top 0.5em
|
||||
text-align center
|
||||
a
|
||||
outline 0
|
||||
img
|
||||
width 50px
|
||||
|
||||
.message__icon
|
||||
margin 6px
|
||||
font-size 20px
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
.fa-twitter
|
||||
color #55ACEE
|
||||
.fa-github
|
||||
color #333333
|
||||
.fa-slack
|
||||
color #DC005D
|
||||
|
||||
.message__details
|
||||
font-size 0.7em
|
||||
margin-top 0.5em
|
||||
|
||||
.message__meta
|
||||
margin-left 0.5em
|
||||
|
||||
.fader
|
||||
position fixed
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
height 50px
|
||||
background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 99%,rgba(0,0,0,0.15) 100%)
|
||||
pointer-events none
|
||||
z-index 2
|
||||
|
||||
.bread
|
||||
display table
|
||||
table-layout fixed
|
||||
width 100%
|
||||
.column
|
||||
float none
|
||||
display table-cell
|
||||
vertical-align middle
|
||||
|
||||
@media screen and (max-width: 700px)
|
||||
.bread
|
||||
display block
|
||||
.column
|
||||
display block
|
||||
|
||||
.bread-img
|
||||
background url('/static/images/hp3_bw.jpg')
|
||||
background-size cover
|
||||
border-radius 160px
|
||||
opacity 0.85
|
||||
width 320px
|
||||
height 320px
|
||||
margin auto
|
||||
|
||||
@media screen and (max-width: 700px)
|
||||
.bread-img
|
||||
display none
|
||||
|
||||
.organization
|
||||
padding-top 3em
|
||||
|
||||
.membership-information.column
|
||||
vertical-align initial
|
||||
p:first-child
|
||||
margin-top 37px
|
||||
|
||||
.channels
|
||||
width 100%
|
||||
list-style none
|
||||
padding 0
|
||||
td
|
||||
padding 0.4rem 0
|
||||
td:first-child
|
||||
text-align right
|
||||
|
||||
|
||||
.channel
|
||||
align-items center
|
||||
background-color #f5f5f5
|
||||
border-radius 4px
|
||||
color #4a4a4a
|
||||
display inline-flex
|
||||
font-size .75rem
|
||||
height 2em
|
||||
justify-content center
|
||||
line-height 1.5
|
||||
padding-left .75em
|
||||
padding-right .75em
|
||||
white-space nowrap
|
||||
|
||||
.channels tr:nth-child(1n) .channel
|
||||
background-color #ebfffc
|
||||
color #00947e
|
||||
|
||||
|
||||
.channels tr:nth-child(2n) .channel
|
||||
background-color #eef3fc
|
||||
color #2160c4
|
||||
|
||||
|
||||
.channels tr:nth-child(3n) .channel
|
||||
background-color #eef6fc
|
||||
color #1d72aa
|
||||
|
||||
|
||||
.channels tr:nth-child(4n) .channel
|
||||
background-color #effaf3
|
||||
color #257942
|
||||
|
||||
|
||||
.channels tr:nth-child(5n) .channel
|
||||
background-color #fffbeb
|
||||
color #947600
|
||||
|
||||
|
||||
.channels tr:nth-child(6n) .channel
|
||||
background-color #feecf0
|
||||
color #cc0f35
|
||||
|
||||
.channel-members
|
||||
font-size 12px
|
||||
|
||||
.channel-topic
|
||||
p
|
||||
font-size 0.8rem
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
-webkit-line-clamp 2
|
||||
overflow hidden
|
||||
border-left 1px solid #e6e6e6
|
||||
padding-left 0.75rem
|
||||
margin 0
|
||||
margin-left 0.5rem
|
||||
img
|
||||
width 20px
|
||||
@@ -1,7 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
@@ -12,9 +16,20 @@
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"typeRoots": ["./node_modules/@types", "./typings"],
|
||||
"exclude": ["node_modules"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./typings/*"]
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./typings"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
],
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"./typings/*"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user