vac.dev/assets/css/main.scss

1364 lines
30 KiB
SCSS
Raw Normal View History

---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
---
$purple: #681AB4;
$dark-grey: #121212;
$yellow: #F7B930;
@font-face {
font-family: 'PT Mono';
src: url('../fonts/PTMono-Bold.eot');
src: url('../fonts/PTMono-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTMono-Bold.woff2') format('woff2'),
url('../fonts/PTMono-Bold.woff') format('woff'),
url('../fonts/PTMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
html{
font-size: 16px;
}
body{
font-family: 'Lexend Deca', sans-serif;
}
a{
transition: all 0.3s ease-in-out;
color: $dark-grey;
&:hover{
text-decoration: none;
color: $purple;
}
}
h1, h2, h3, h4, h5, h6{
font-family: 'PT Mono';
font-weight: bold;
}
ul{
display: flex;
list-style-type: none;
}
p{
font-size: 1.25rem;
}
svg{
path{
transition: all 0.3s ease-in-out;
}
}
a{
&:hover{
svg{
path{
fill: $purple;
}
}
}
}
.btn{
width: 240px;
padding: 0;
display: flex;
color: $purple;
font-family: 'PT Mono';
font-size: 1.25rem;
border-radius: 4px;
height: 50px;
align-items: center;
justify-content: center;
svg{
margin-left: 15px;
}
}
.btn-yellow{
background-color: $yellow;
&:hover{
color: $dark-grey;
background: darken($yellow, 10%);
svg{
path{
fill: $dark-grey;
}
}
}
}
.btn-white{
background-color: #fff;
&:hover{
color: $dark-grey;
background: darken(#fff, 10%);
svg{
path{
fill: $dark-grey;
}
}
}
}
.btn-purple{
background-color: $purple;
color: #fff;
&:hover{
color: #fff;
background: darken($purple, 10%);
svg{
path{
fill: #fff;
}
}
}
}
.mt-60{
margin-top: 60px;
}
.mb-60{
margin-bottom: 60px;
}
.mt-80{
margin-top: 80px;
}
.mb-80{
margin-bottom: 80px;
}
.mt-100{
margin-top: 100px;
}
.mb-100{
margin-bottom: 100px;
}
.main-container{
padding-top: 100px;
overflow: hidden;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 990;
background: #fff;
.nav-section{
padding: 0 25px 0 10px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
.header-lists{
display: flex;
align-items: center;
.menu{
margin: 0;
padding: 0;
li{
margin-right: 80px;
a{
font-size: 1.25rem;
}
}
}
.social-media{
margin: 0;
padding: 0;
li{
margin-right: 30px;
a{
display: flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
}
}
li:last-child{
margin-right: 0;
}
}
}
}
}
.black{
background-color: $dark-grey;
p{
color: #fff;
}
h1, h2{
color: #fff;
}
}
.intro{
padding: 150px 0 80px;
h1{
margin-bottom: 30px;
font-size: 3.125rem;
}
p{
margin-bottom: 60px;
}
.links{
padding: 0;
display: block;
margin: 0;
li{
margin-bottom: 20px;
a{
img{
margin-left: 20px;
}
}
}
li:last-child{
margin-bottom: 0;
}
}
.inner-img{
display: flex;
justify-content: flex-start;
img{
margin-top: -30px;
}
}
}
.section-title{
font-size: 1.75rem;
margin-bottom: 40px;
overflow: hidden;
&.bar-center{
b{
padding: 0 80px;
&:before,
&:after{
content: '';
background: $purple;
background: linear-gradient(90deg, rgba($yellow,1) 0%, rgba($purple,1) 4%, rgba($dark-grey,1) 45%);
width: 580px;
position: absolute;
top: calc(50% - 1px);
left: 100%;
height: 1px;
}
&:after{
left: auto;
right: 100%;
transform: rotate(180deg)
}
}
}
&.bar-right{
margin-bottom: 50px;
b{
padding-right: 100px;
&:before{
content: '';
background: $purple;
background: linear-gradient(90deg, $yellow 0%, $purple 20%);
width: 1000px;
position: absolute;
top: calc(50% - 1px);
left: 100%;
opacity: .2;
height: 1px;
}
}
}
b{
position: relative;
}
}
hr{
display: flex;
position: relative;
width: 0px;
height: 1px;
margin: 0 auto;
&:before,
&:after{
content: '';
background: $purple;
background: linear-gradient(90deg, rgba($yellow,1) 0%, rgba($purple,1) 4%, rgba($dark-grey,1) 45%);
width: 580px;
position: absolute;
top: calc(50% - 1px);
left: 100%;
height: 1px;
}
&:after{
left: auto;
right: 100%;
transform: rotate(180deg)
}
}
.why-vac{
margin-top: 120px;
p{
margin-bottom: 50px;
}
}
.what-is-vac{
margin: 100px 0;
p{
margin-bottom: 0;
}
.btn-holder{
display: flex;
align-items: center;
justify-content: center;
.btn{
height: 60px;
margin: 10px 0 0 10px;
}
}
}
.features{
.swiper-wrapper{
flex-direction: column;
}
.swiper-slide{
padding: 70px 0;
border-top: 1px solid rgba($purple, 0.2);
h3{
font-size: 1.25rem;
margin-bottom: 20px;
text-transform: uppercase;
}
p{
font-size: 1rem;
}
&:last-child{
&:before{
content: '';
background: $purple;
background: linear-gradient(90deg, $yellow 0%, $purple 20%);
width: 80%;
position: absolute;
opacity: .2;
height: 1px;
left: 0;
bottom: 0;
transform: rotate(180deg);
}
}
}
}
.table-holder{
background-color: #fff;
padding: 80px;
border-radius: 4px;
.table-details{
display: flex;
border-radius: 4px;
.single-column{
border-right: none;
overflow: hidden;
flex: 1;
&:nth-child(2){
min-width: 380px;
}
&:first-child{
ul{
li{
&:first-child{
border-radius: 4px 0 0 0;
}
&:last-child{
border-radius: 0 0 0 4px;
}
}
}
}
&:last-child{
ul{
li{
border-right: 1px solid #E1D1F0;
&:first-child{
border-right: 1px solid #BD9ADE;
border-radius: 0 4px 0 0;
}
&:last-child{
border-radius: 0 0 4px 0;
}
}
}
}
ul{
display: block;
padding: 0;
margin: 0;
li{
padding: 16px 20px 9px 20px;
border-bottom: 1px solid #E1D1F0;
border-left: 1px solid #E1D1F0;
height: 50px;
&:nth-child(2n+1){
background: rgba($purple, .08);
}
&:first-child{
background: rgba($purple, .3);
border: 1px solid #BD9ADE;
border-right: none;
}
&:nth-last-child(2){
background: rgba($purple, .3);
}
&:last-child{
background: #fff;
}
}
}
}
}
}
.subscribe-btn{
border: 1px solid $dark-grey;
color: $dark-grey;
font-size: 0.875rem;
width: 200px;
height: 40px;
font-family: 'Lexend Deca', sans-serif;
font-weight: normal;
margin-top: 12px;
background: #fff;
&:hover{
color: $purple;
border: 1px solid $purple;
}
svg{
margin: 0 10px 0 0;
}
}
.log{
margin: 80px 0 100px;
ul{
display: block;
padding: 0;
li{
padding: 16px 0 9px 0;
height: 60px;
border-bottom: 1px solid rgba($purple, 0.2);
font-size: 1.25rem;
position: relative;
time{
text-align: right;
display: inline-block;
width: 230px;
margin-right: 100px;
}
.short{
display: none;
}
}
}
}
.team{
margin-top: 100px;
.section-title{
b{
text-transform: uppercase;
font-size: 1.25rem;
&:before,
&:after{
opacity: .2;
background: linear-gradient(90deg, rgba($yellow,1) 0%, rgba($purple,1) 20%, rgba($dark-grey,1) 45%);
}
}
}
.team-holder{
.name{
font-family: 'PT Mono';
font-weight: bold;
margin: 40px 0 20px 0;
}
.picture{
border-radius: 50%;
2020-02-07 16:40:01 +00:00
width: 180px;
}
ul{
padding: 0;
display: flex;
justify-content: space-around;
margin: 0;
height: 100px;
position: relative;
&:before{
content: '';
width: 100%;
left: 0;
height: 1px;
top: 0;
opacity: .2;
position: absolute;
transform: rotate(180deg);
background: linear-gradient(90deg, rgba($yellow,1) 0%, rgba($purple,1) 20%, rgba($dark-grey,1) 45%);
}
li{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid rgba($purple, 0.2);
}
li:last-child{
border-right: none;
}
}
}
.ml-auto{
ul{
&:before{
transform: none;
}
}
}
}
.get-in-touch{
margin: 180px 0 100px;
ul{
padding: 0;
margin: 0;
border-top: 1px solid rgba($purple, 0.2);
display: flex;
justify-content: space-around;
li{
text-align: center;
padding: 60px 30px;
border-right: 1px solid rgba($purple, 0.2);
flex: 1;
a{
svg{
margin-bottom: 50px;
}
}
p{
a{
font-family: 'PT Mono';
font-size: 1rem;
font-weight: bold;
}
}
p:last-child{
font-size: 1rem;
}
}
li:last-child{
border-right: none;
}
}
}
.swiper-pagination{
display: none;
position: relative;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
bottom: 0;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 5px;
opacity: 1;
}
.footer {
width: 100%;
display: flex;
justify-content: center;
background-color: $dark-grey;
position: relative;
margin: 0 0 0 0;
}
.footer-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 1200px;
padding: 32px 0;
}
.cards--community.cards--community--dark {
margin: 0;
.card-inner {
background-color: transparent;
}
a {
h4 {
color: white;
}
p {
color: #939ba1;
opacity: .7;
}
&:hover {
h4 {
opacity: 0.8;
}
}
}
}
.cards--community--dark {
.community-icon--join {
background-image: url(../img/icon-join-dark.svg);
}
.community-icon--discussion {
background-image: url(../img/icon-discussion-dark.svg);
}
.community-icon--contribute {
background-image: url(../img/icon-contribute-dark.svg);
}
}
.footer-nav {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 32px 0 0 0;
padding: 32px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
li {
a {
padding: 0 12px;
color: white;
&:hover {
opacity: .8;
}
}
}
}
.footer-logo-wrap {
width: 317px;
display: flex;
text-align: center;
}
.footer-logo-wrap__inner {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 16px 0 16px 0;
}
a.footer-logo {
display: block;
width: 52px;
height: 52px;
background-size: 52px;
background-image: url(../img/footer-logo.svg);
&:hover {
opacity: .8;
}
}
.footer-address {
padding: 20px 0 0 0;
opacity: .7;
}
.footer-table {
display: flex;
.footer-list{
flex-direction: column;
margin: 0;
padding: 0;
}
}
.footer-table__column {
box-sizing: border-box;
padding: 15px 74px 64px;
}
.margin-top-15 {
margin-top: 15px;
}
.footer-header {
color: white;
opacity: .5;
margin: 0 0 40px 0;
font-size: 16px;
}
.footer-project {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
display: block;
margin: 0;
padding: 0;
}
.footer-link {
height: 32px;
line-height: 32px;
margin: 0 0 15px 0;
a {
display: flex;
align-items: center;
color: white;
&:hover {
opacity: .8;
}
}
}
.margin-left {
margin-left: 15px;
}
.footer-icon {
display: inline-block;
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin: 0 15px 0 0;
background-repeat: no-repeat;
background-position: center;
}
.footer-link--fb {
.footer-icon {
background-image: url(../img/icon_fb.svg);
}
}
.footer-link--tw {
.footer-icon {
background-image: url(../img/icon_tw.svg);
}
}
.footer-link--gt {
.footer-icon {
background-image: url(../img/icon-gitter.svg);
}
}
.footer-link--dc {
.footer-icon {
background-image: url(../img/icon_telegram.svg);
background-size: 70%;
}
}
.footer-link--st {
.footer-icon {
background-image: url(../img/footer-logo.svg);
}
}
.footer-link--gh {
.footer-icon {
background-image: url(../img/icon_gh.svg);
}
}
.status-network {
display: inline-block;
}
.status-logo {
display: inline-block;
position: relative;
top: -3px;
left: 10px;
margin-left: 10px;
}
@media (min-width: 1200px){
.container {
max-width: 1030px;
}
}
@media (max-width: 1199px){
header{
.nav-section{
.header-lists{
.menu{
li {
margin-right: 50px;
}
}
}
}
}
.intro {
padding: 80px 0 80px;
}
.why-vac {
margin-top: 80px;
}
.table-holder{
.table-details{
.single-column{
&:nth-child(2) {
min-width: 340px;
}
}
}
}
}
@media (max-width: 991px){
.main-container{
padding-top: 60px;
}
header{
.nav-section{
height: 60px;
padding: 0 5px;
.logo{
img{
width: 80px;
}
}
.mobile-trigger{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
&:before,
&:after{
content: '';
width: 22px;
transition: all 0.3s ease-in-out;
height: 1px;
background: $dark-grey;
position: absolute;
top: calc(50% - 4px);
left: calc(50% - 11px);
border-radius: 1px;
}
&:after{
top: calc(50% + 3px);
}
}
.header-lists{
position: absolute;
top: 100%;
background: #fff;
height: 0;
left: 0;
width: 100%;
transition: all 0.3s ease-in-out;
align-items: flex-start;
padding: 0 30px 0;
overflow: auto;
flex-direction: column;
.menu{
flex-direction: column;
width: 100%;
margin-top: 20px;
li{
margin: 0;
width: 100%;
&:last-child{
a{
border-bottom: 1px solid rgba($purple, 0.1);
}
}
a{
font-size: 0.875rem;
display: flex;
line-height: 42px;
width: 100%;
border-top: 1px solid rgba($purple, 0.1);
}
}
}
.social-media{
width: 100%;
align-items: center;
justify-content: center;
margin: 20px 0;
li{
margin: 0;
border-right: 1px solid rgba($purple, 0.1);
&:last-child{
border: none;
}
a{
width: auto;
height: 40px;
padding: 0 45px;
svg{
width: 28px;
height: auto;
}
}
}
}
}
}
}
.menu-active{
header{
.nav-section{
.header-lists{
height: calc(100vh - 60px);
}
.mobile-trigger{
&:before{
transform: rotate(45deg);
top: 50%;
}
&:after{
transform: rotate(-45deg);
top: 50%
}
}
}
}
}
.table-holder{
padding: 20px;
.table-details{
.single-column{
flex: none;
&:first-child{
ul{
li{
&:first-child{
border-radius: 4px 4px 0 0;
}
&:last-child{
border-radius: 0 0 4px 4px;
}
}
}
}
ul{
text-align: center;
li{
border-right: 1px solid #E1D1F0;
&:first-child{
border-right: 1px solid #BD9ADE;
}
}
}
}
}
}
.swiper-pagination{
height: 10px;
margin: 20px 0 0 0;
display: flex;
align-items: center;
justify-content: center;
.swiper-pagination-bullet{
background: rgba($purple, .2);
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
display: block;
transition: all 0.3s ease-in-out;
&.swiper-pagination-bullet-active{
background: $yellow;
}
}
}
.log{
ul{
li{
time{
width: 200px;
margin-right: 50px;
}
&:last-child{
.btn{
&:before{
width: 65%;
}
}
}
}
}
}
.get-in-touch{
margin: 100px 0;
ul{
flex-direction: column;
li{
flex: none;
border-right: none;
border-bottom: 1px solid rgba(104,26,180,0.2);
}
}
}
}
.post-content{
margin: 100px auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
h1, h2, h3, h4, h5, h6{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
}
}
.editor-content{
overflow: hidden;
margin-top: 100px;
font-size: 1rem;
a{
color: $purple;
text-decoration: underline;
&:hover{
color: $dark-grey;
}
}
p{
margin-bottom: 15px;
font-size: 1rem;
}
li{
font-size: 1rem;
margin-bottom: 5px;
}
ul, ol{
margin: 0 0 15px 0;
padding: 0 0 0 25px;
flex-direction: column;
}
ul{
list-style-type: disc;
}
h1, h2, h3, h4{
margin: 50px 0 20px;
font-weight: normal;
}
table {
width: 100%;
margin-bottom: 1rem;
color: $dark-grey;
thead {
th{
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
}
th, td {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
}
img{
max-width: 100%;
margin-bottom: 10px;
}
code{
color: $purple;
font-size: 1rem;
background: rgba($purple, .1)
}
hr{
margin: 50px auto;
&:before,
&:after{
width: 300px;
opacity: .2;
transform: none;
background: linear-gradient(90deg, $yellow 0%, $purple 40%);
}
&:before{
transform: rotate(180deg);
}
}
}
@media (min-width: 768px){
.features{
.swiper-wrapper{
height: 100% !important;
}
}
}
@media (max-width: 767px){
.container {
max-width: calc(100% - 10px);
}
p {
font-size: 1.125rem;
}
.intro{
position: relative;
padding: 80px 20px 50px;
h1{
font-size: 2.5rem;
}
.links{
display: flex;
flex-direction: column;
align-items: center;
}
.ml-auto{
position: relative;
z-index: 1;
}
.mr-auto{
position: static;
.inner-img{
position: absolute;
top: 30px;
right: 10px;
height: 200px;
height: 150px;
img{
width: 182px;
height: auto;
}
}
}
}
.section-title{
font-size: 1.125rem;
line-height: 1.5rem;
&.bar-center{
b{
padding: 0 40px;
&:before,
&:after{
width: 240px;
}
}
}
&.bar-right{
margin-bottom: 40px;
b{
padding-right: 30px;
}
}
}
.why-vac{
p{
font-size: 0.8125rem;
line-height: 1.25rem;
}
}
.what-is-vac{
margin: 30px 0 20px;
p{
font-size: 0.8125rem;
line-height: 1.25rem;
}
.mb-60{
margin-bottom: 40px;
}
.btn-holder{
.btn{
margin: 0;
font-size: 1.125rem;
width: 200px;
height: 40px;
}
}
}
.features{
text-align: center;
margin-top: 40px;
.swiper-wrapper {
flex-direction: row;
.swiper-slide{
padding: 40px 0 10px;
&:last-child{
&:before{
display: none;
}
}
img{
max-width: 260px;
height: auto;
margin: 0 auto 40px;
display: block;
}
h3{
font-size: 1.125rem;
}
p{
font-size: 0.8125rem;
line-height: 1.25rem;
}
}
}
}
.who-is-vac{
hr{
margin: 50px auto 40px;
&:before,
&:after{
width: 200px;
}
}
p{
font-size: 0.8125rem;
line-height: 1.25rem;
}
}
.table-holder{
margin: 40px 0 60px;
ul{
li:not(:first-child){
font-size: 0.875rem;
}
}
.table-details{
.single-column{
&:nth-child(2){
min-width: 0px;
}
&:last-child{
ul{
li{
&:first-child{
border-radius: 4px 4px 0 0;
}
&:last-child{
border-radius: 0 0 4px 4px;
}
}
}
}
ul{
li{
&:first-child{
border-radius: 4px 4px 0 0;
}
&:last-child{
border-radius: 0 0 4px 4px;
}
}
}
}
}
}
.log{
margin: 30px 0 74px;
ul{
li{
display: flex;
height: auto;
&:last-child{
.btn{
margin: 34px auto 0;
&:before{
display: none;
}
}
}
time{
width: auto;
display: none;
font-size: 0.75rem;
font-family: 'PT Mono';
margin-right: 20px;
}
.short{
display: inline-block;
}
a{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
}
}
.team{
margin-top: 80px;
.team-holder{
margin: 30px 0;
.name{
margin-bottom: 10px;
}
ul{
padding: 0 40px;
}
svg{
max-width: 24px;
height: auto;
}
}
}
.get-in-touch {
margin: 30px 0 50px 0;
ul{
li{
padding-bottom: 40px;
a{
svg{
margin-bottom: 30px;
}
}
p:last-child{
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0;
}
}
}
}
.post-content{
margin: 50px auto;
}
.editor-content{
margin-top: 50px;
p,li{
font-size: 1rem;
}
}
.footer-table{
flex-direction: column;
text-align: center;
.footer-list{
align-items: center;
}
}
.footer-table__column{
padding: 16px;
}
.footer-header{
margin-bottom: 30px;
}
.footer img{
display: none;
}
.footer-icon{
display: none;
}
2020-02-07 16:40:01 +00:00
}
.faq {
font-size: 1.25rem;
h2 {
margin-top: 1em;
}
2020-02-19 14:02:07 +00:00
2020-02-19 14:05:10 +00:00
.content a{
2020-02-19 14:02:07 +00:00
color: $purple;
text-decoration: underline;
&:hover{
color: $dark-grey;
}
}
}