mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-03-05 12:00:08 +00:00
Migrate Stylus to SCSS
This commit is contained in:
Aarni Koskela
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()));
|
||||
@@ -13,9 +13,6 @@
|
||||
"prettify": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-less": "^1.0.1",
|
||||
"@zeit/next-stylus": "^1.0.1",
|
||||
"axios": "^0.25.0",
|
||||
"classnames": "^2.3.1",
|
||||
"font-awesome": "^4.7.0",
|
||||
@@ -23,14 +20,13 @@
|
||||
"less": "^4.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "^12.0.10",
|
||||
"next-fonts": "^1.5.1",
|
||||
"parse-github-event": "^1.1.3",
|
||||
"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",
|
||||
"stylus": "^0.56.0",
|
||||
"sass": "^1.49.7",
|
||||
"twitter-text": "^3.0.0",
|
||||
"utility-types": "^3.10.0"
|
||||
},
|
||||
|
||||
@@ -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.";
|
||||
|
||||
@@ -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";
|
||||
|
||||
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
|
||||
|
||||
32
styles/_icons.scss
Normal file
32
styles/_icons.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@import "../node_modules/font-awesome/scss/_variables.scss";
|
||||
@import "../node_modules/font-awesome/scss/_core.scss";
|
||||
|
||||
@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}-linkedin:before {
|
||||
content: $fa-var-linkedin;
|
||||
}
|
||||
|
||||
.#{$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}-facebook:before {
|
||||
content: $fa-var-facebook;
|
||||
}
|
||||
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;
|
||||
}
|
||||
598
styles/style.scss
Normal file
598
styles/style.scss
Normal file
@@ -0,0 +1,598 @@
|
||||
@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 "_icons";
|
||||
@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;
|
||||
}
|
||||
}
|
||||
.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