diff options
author | Paulo Moura <itsme@paulomoura.com> | 2017-07-22 17:30:34 +0300 |
---|---|---|
committer | Morris Jobke <hey@morrisjobke.de> | 2017-08-26 15:43:20 +0300 |
commit | 0b08790f123eae829a12d92bfbdedc75ae01851d (patch) | |
tree | 4f4c480ca6ec5fdb308daafe6d3f0dfb1883a9b1 /assets/css | |
parent | 5a18ab4b21deabc85a0b5b7fa88d95bad240809b (diff) |
update scss files and make sure that homepage works in the same way
Diffstat (limited to 'assets/css')
38 files changed, 453 insertions, 438 deletions
diff --git a/assets/css/custom.scss b/assets/css/custom.scss index 0f7df5d4..6d9e6577 100644 --- a/assets/css/custom.scss +++ b/assets/css/custom.scss @@ -1,18 +1,32 @@ -@charset "UTF-8"; -@import "variables"; -@import "modules/normalize"; -@import "modules/no-js"; -@import "modules/alerts"; - -/* Please don't remove, useful for testing. */ -/* * {border:1px solid red} */ - -/*Colors*/ -/*Shadows*/ -/*Breakpoints*/ -/*Colors*/ -/*Shadows*/ -/*Breakpoints*/ +// Import file +// +// This file should be used only for importing common code + +@charset 'UTF-8'; + +// Importing bootstrap modules +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities'; +@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities'; + +// Importing modules +@import 'variables'; +@import 'modules/normalize'; +@import 'modules/no-js'; +@import 'modules/alerts'; +@import 'modules/header'; +@import 'modules/slideshow'; +@import 'modules/secondmenu'; +@import 'modules/typography'; + + +// To remove everything above and split in other files .jumbotron--heading-1 { padding-top: 0; color: white !important; @@ -973,52 +987,7 @@ blockquote { line-height: 1.5; /* text-align: center; */ color: #2a2a36; } } -.highlights { - display: -ms-flexbox; - display: flex; - -ms-flex: 0 1 auto; - flex: 0 1 auto; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: -16px 0 0 -16px; - padding: 0; - list-style: none; } -@media (max-width: 1024px) { - .highlights { - display: block; - text-align: center; - margin: 0 10px 0 10px; } } - -.highlights_align { - padding-top: 100px; - flex-basis: 33.33333%; - max-width: 33.33333%; - padding-left: 64px; } -.highlights_align:first-child { - padding-left: 0px; } -@media (max-width: 1024px) { - .highlights_align { - flex-basis: auto; - max-width: none; - padding-left: 0; - padding-top: 50px; } } -.highlights_align svg { - margin-left: -10px; } -@media (max-width: 1200px) { - .highlights_align svg { - margin-left: 0; } } -.highlights_align .section--paragraph { - font-size: 16px; } -.highlights_align h4 { - text-align: center; - margin-top: 20px; - margin-left: -20px; - margin-bottom: 0; } -@media (max-width: 1200px) { -.highlights_align h4 { - margin-left: 0; } } + /* Youtube dialog */ .yt-img-overlay { diff --git a/assets/css/modules/header.scss b/assets/css/modules/header.scss index 0bb195fe..7d8f252e 100644 --- a/assets/css/modules/header.scss +++ b/assets/css/modules/header.scss @@ -1,8 +1,11 @@ -@import "variables.scss"; @-moz-document url-prefix() { .brand { -webkit-transform: scale(0.5); top: -26px !important; } } +nav a { + text-decoration: none; +} + .mobile-bg-container{ position: fixed; -webkit-transform: translateZ(0); diff --git a/assets/css/modules/slideshow.scss b/assets/css/modules/slideshow.scss index fea63fe1..5b2aa19d 100644 --- a/assets/css/modules/slideshow.scss +++ b/assets/css/modules/slideshow.scss @@ -1,224 +1,227 @@ -@import "../variables.scss"; -@import "../helpers.scss"; +@import '../variables'; +@import '../helpers'; .slideshow { background-color: transparent; - overflow: hidden; height: 100%; - position: relative; + overflow: hidden; padding: 130px 0; + position: relative; + + @media (max-width: $break-big) { + padding: 0; + } + + .section--heading-1 { + margin: auto 0; + position: absolute; + text-align: center; + width: 100%; @media (max-width: $break-big) { - padding: 0; + padding-top: 130px; + position: relative; } + } - .section--heading-1 { - position: absolute; - margin: auto 0; - text-align: center; - width: 100%; + .container { + .col-md-6 { + // width: 45%; + // &:first-child { + // width: 49%; + // } + } - @media (max-width:$break-big) { - position: relative; - padding-top: 130px; + .container-image-center { + padding: calc((100vh - 435px) /2) 0; + + @media (max-width: 1400px) { + padding: calc((100vh - 315px) /2) 0; } - } - .container { + @media (max-width: $break-big) { + margin-left: -13px; + padding: 50px 0 203px; + } - .container-image-center { - padding-top: calc((100vh - 435px) /2); - padding-bottom: calc((100vh - 435px) /2); + @media (max-width: $break-small) { + padding-bottom: 260px; + } - @media (max-width: 1400px) { - padding-top: calc((100vh - 315px) /2); - padding-bottom: calc((100vh - 315px) /2); - } + @media (max-width: 600px) { + padding-bottom: 180px; + } - @media (max-width: $break-big) { - padding-top: 50px; - padding-bottom: 203px; - margin-left: -13px; - } + @media (max-width: 340px) { + padding-bottom: 130px; + } - @media (max-width: $break-small) { - padding-bottom: 260px; - } + .image-back { + height: 440px; + position: absolute; - @media (max-width: 600px) { - padding-bottom: 180px; + @media (max-width: $navbar-breaksize) { + height: auto; + width: 100%; } + } - @media (max-width: 340px) { - padding-bottom: 130px; - } + .image-top-container { + height: 318px; + left: 17px; + overflow: hidden; + position: relative; + top: 17px; + width: 507px; + z-index: 1; - .image-back { + .image-top { position: absolute; - height: 440px; + width: 100%; + top: 0; + transition: all ease-in 0.3s; - @media (max-width: $navbar-breaksize) { - width: 100%; - height: auto; + &.image__desktop { + left: 0 !important; + } + + &.image__mobile { + top: 0 !important; } - } - .image-top-container { - position: relative; - overflow: hidden; - z-index: 1; - width: 507px; - height: 318px; - top: 17px; - left: 17px; - - .image-top { - position: absolute; - width: 100%; - top: 0; - transition: all ease-in 0.3s; - - &.image__desktop { - left: 0 !important; - } - - &.image__mobile { - top: 0 !important; - } - - @media (max-width: $break-big) { - width: auto; - height: 100%; - max-width: none; - } + @media (max-width: $break-big) { + width: auto; + height: 100%; + max-width: none; } } } + } - .texts-wrapper { - height: 100vh; + .texts-wrapper { + height: 100vh; - @media (max-width: $break-big) { - height: auto; - padding-bottom: 80px; + @media (max-width: $break-big) { + height: auto; + padding-bottom: 80px; + } + + .right-text-grey { + margin-top: calc((100vh - 266px) /2); + padding-bottom: calc((100vh - 236px) /2); + opacity: 1; + padding-top: 0; + transition: all 0.3s ease; + + .textTrigger { + font-size: 18px; + } + + .section--paragraph { + font-size: 16px !important; + font-weight: 400 !important; + color: $medium-grey; } - .right-text-grey { - margin-top: calc((100vh - 266px) /2); - padding-bottom: calc((100vh - 236px) /2); - opacity: 1; - padding-top: 0; - transition: all 0.3s ease; - .textTrigger { - font-size: 18px; + @media (max-width: $break-big) { + margin-top: 0; + padding-bottom: 0; + text-align: left; + display: none; + opacity: 0; + + &.active { + display: block; + opacity: 1; + transform: translate3d(0px, 0px, 0px); } - .section--paragraph { - font-size: 16px !important; - font-weight: 400 !important; - color: $medium-grey; + &.swiperight { + transform: translate3d(-150px, 0px, 0px); + opacity: 0; } - - @media (max-width: $break-big) { - margin-top: 0; - padding-bottom: 0; - text-align: left; - display: none; + &.swipeleft { + transform: translate3d(150px, 0px, 0px); opacity: 0; - - &.active { - display: block; - opacity: 1; - transform: translate3d(0px, 0px, 0px); - } - - &.swiperight { - transform: translate3d(-150px, 0px, 0px); - opacity: 0; - } - - &.swipeleft { - transform: translate3d(150px, 0px, 0px); - opacity: 0; - } } } } } + } - .indicators { - -webkit-transition: all .5s; - transition: all .5s; - opacity: 0; - position: fixed; - z-index: 2; - bottom: 50vh; + .indicators { + -webkit-transition: all .5s; + transition: all .5s; + opacity: 0; + position: fixed; + z-index: 2; + bottom: 50vh; + right: 0; + + @media (max-width: $break-big) { + position: absolute; + bottom: 0; + margin-left: auto; + margin-right: auto; + left: 0; right: 0; + top: 600px; + width: 70px; + } + + .btn_carousel { + margin-top: 10px; + width: 14px; + height: 14px; + color: transparent; + border: 1px solid $nextcloud-blue; + background-color: $nextcloud-blue; + border-radius: 50%; + padding: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + -webkit-transition: all 250ms ease-in-out; + transition: all 250ms ease-in-out; @media (max-width: $break-big) { - position: absolute; - bottom: 0; - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - top: 600px; - width: 70px; + display: inline-block; } - .btn_carousel { - margin-top: 10px; - width: 14px; - height: 14px; - color: transparent; - border: 1px solid $nextcloud-blue; - background-color: $nextcloud-blue; - border-radius: 50%; - padding: 0; - -webkit-transform: scale(.5); - -ms-transform: scale(.5); - transform: scale(.5); - -webkit-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; - - @media (max-width: $break-big) { - display: inline-block; - } - - &:hover { - background-color: transparent; + &:hover { + background-color: transparent; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); - } + } - a { - text-decoration: none; - display: block; - width: 100%; - height: 100%; - position: absolute; - top: 0; - } - } + a { + text-decoration: none; + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + } + } - .btn_carousel.active{ + .btn_carousel.active{ + background-color: transparent; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + + a { background-color: transparent; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); - - a { - background-color: transparent; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } - } } + } + } .active { opacity: 1; @@ -258,7 +261,7 @@ &.active { box-shadow: none; - background-color: transparent; + background-color: transparent; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); @@ -269,7 +272,7 @@ } .slideshow-mobile { -/* hide on non-mobile */ + /* hide on non-mobile */ @media (min-width: $navbar-breaksize) { display:none; } @@ -294,27 +297,27 @@ .carousel-fade { .carousel-inner { .item { - opacity: 0; - -webkit-transition-property: opacity; - -moz-transition-property: opacity; - -o-transition-property: opacity; - transition-property: opacity; + opacity: 0; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; } .active { - opacity: 1; + opacity: 1; } .active.left, .active.right { - left: 0; - opacity: 0; - z-index: 1; + left: 0; + opacity: 0; + z-index: 1; } .next.left, .prev.right { - opacity: 1; + opacity: 1; } } @@ -336,7 +339,7 @@ opacity: .5; filter: alpha(opacity=50); .glyphicon { -/* margin-top: -15px; */ + /* margin-top: -15px; */ margin: -15px; font-size: 30px; } @@ -350,7 +353,7 @@ } html, body, .carousel, .carousel-inner, .carousel-inner .item { - height: 100%; + height: 100%; } .item:nth-child(1) { diff --git a/assets/css/modules/typography.scss b/assets/css/modules/typography.scss index fe3f2b52..23800df9 100644 --- a/assets/css/modules/typography.scss +++ b/assets/css/modules/typography.scss @@ -1,9 +1,9 @@ -@import "../variables.scss"; -@import "../helpers.scss"; -@import '../vendor/modular-scale/modular-scale.scss'; +@import '../variables'; +@import '../helpers'; +@import '../vendor/modular-scale/modular-scale'; .jumbotron { - @include modifier(heading-1) { + &--heading-1 { padding-top: 0; color: white !important; font-size: ms(3) !important; @@ -17,7 +17,7 @@ } } - @include modifier(lead) { + &--lead { font-size: ms(0); color: white; line-height: 1.6; @@ -30,12 +30,12 @@ } .section { - @include modifier(text--center) { + &--text--center { margin: 0 auto; text-align: center; } - @include modifier(heading-1) { + &--heading-1 { font-size: ms(3); font-weight: 300; line-height: 1.2; @@ -49,7 +49,7 @@ } } - @include modifier(heading-2) { + &--heading-2 { font-size: ms(2); font-weight: 300; color: $dark-grey; @@ -61,19 +61,19 @@ } } - @include modifier(intro) { + &--intro { font-size: ms(0, 22px); font-weight: 300; } - @include modifier(paragraph__tittle) { + &--paragraph__tittle { font-size: ms(0, 22px); line-height: 30px; font-weight: 600; color: $dark-blue; } - @include modifier(paragraph) { + &--paragraph { font-size: ms(0); font-weight: 400; line-height: 1.5; @@ -88,7 +88,7 @@ border-bottom: solid 1px; transition: all 0.5s ease; text-decoration: none; - + &:hover { text-decoration: none; color: $dark-blue; @@ -132,3 +132,8 @@ h5 { line-height: 1.5; color: #555; } + +.text-center { + margin: 0 auto; + text-align: center; +} diff --git a/assets/css/pages/about.scss b/assets/css/pages/about.scss index abcd4409..40b5d12a 100644 --- a/assets/css/pages/about.scss +++ b/assets/css/pages/about.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .about-background { background: url("../img/headers/team.jpg") no-repeat; @@ -29,12 +29,12 @@ footer.page-footer { text-align: left !important; } } - + .newsrow { margin-top: 70px; margin-bottom: 30px; } - + .yt-img-overlay { margin-bottom: 25px; } diff --git a/assets/css/pages/box.scss b/assets/css/pages/box.scss index e090b34f..3eac49a4 100644 --- a/assets/css/pages/box.scss +++ b/assets/css/pages/box.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .section-top-jumbotron { height: 531px; @@ -51,7 +51,7 @@ height: 100%; width: 100%; background-color: white; - + .container { border-top: 1px solid #E8E8E8; @@ -74,7 +74,7 @@ height: 100%; width: 100%; background-color: white; - + .container { border-top: 1px solid #E8E8E8; @@ -103,14 +103,14 @@ h2 { color: white; } - + p { padding-top: 10px; } .btn-primary { margin-top:20px; - + &:before { display: none; } @@ -135,20 +135,20 @@ background-color: white; .container { - + .assembly { background: url("../img/box/assembly.png") no-repeat; width: 639px; height: 541px; margin: 0 auto; } - + .button { text-align: center; margin: 0 auto; margin-top:20px; display: table !important; - + &:before { display: none; } @@ -185,7 +185,7 @@ margin-left: 20px; margin-right: 20px; } - + } } } @@ -210,7 +210,7 @@ .wrapper-images { text-align: center; margin-top: 25px; - + .logo-wd { background: url("../img/box/wd-logo.svg") no-repeat; width: 245.8px; @@ -252,14 +252,14 @@ h2 { color: white; } - + p { padding-top: 10px; } .btn-primary { margin-top:20px; padding: 20px 50px 20px 50px; - + &:before { display: none; } @@ -301,7 +301,7 @@ .section-tecnology { padding-top: 60px; padding-bottom:150px; - + .container { .box-open { @@ -337,7 +337,7 @@ h2 { color: white; } - + p { padding-top: 10px; } @@ -345,7 +345,7 @@ .btn-primary { margin-top:20px; padding: 20px 50px 20px 50px; - + &:before { display: none; } @@ -366,13 +366,13 @@ padding-top: 50px; .container { - + .assembly { width: 319px; height: 270px; background-size: contain; } - + .btn-primary { padding: 20px 50px 20px 50px; } @@ -406,7 +406,7 @@ .wrapper-images { text-align: center; margin-top: 25px; - + .logo-wd { width: 122px; height: 29px; @@ -419,9 +419,9 @@ } } } -} +} -@media (max-width: $break-big) { +@media (max-width: $break-big) { .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-xs-8 { width: 100%; } @@ -440,11 +440,3 @@ } } } - - - - - - - - diff --git a/assets/css/pages/buy.scss b/assets/css/pages/buy.scss index 81e69e23..e2b09414 100644 --- a/assets/css/pages/buy.scss +++ b/assets/css/pages/buy.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .buy-background { background-image: url("../img/enterprise/enterprise.jpg"); diff --git a/assets/css/pages/channels.scss b/assets/css/pages/channels.scss index 154ab20d..233b6f55 100644 --- a/assets/css/pages/channels.scss +++ b/assets/css/pages/channels.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .separator{ margin: 100px 0 50px 0; diff --git a/assets/css/pages/clients.scss b/assets/css/pages/clients.scss index 68e298b7..741f9533 100644 --- a/assets/css/pages/clients.scss +++ b/assets/css/pages/clients.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .clients-background { background: url("../img/headers/clients.jpg") no-repeat; diff --git a/assets/css/pages/collabora.scss b/assets/css/pages/collabora.scss index 3325c812..213354bc 100644 --- a/assets/css/pages/collabora.scss +++ b/assets/css/pages/collabora.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; /* background */ .collabora-background { @@ -105,10 +105,9 @@ pre { h1 { color: white; margin-top: 40px; - margin-bottom: 30px; + margin-bottom: 30px; } a { color: white; } } - diff --git a/assets/css/pages/compare-old.scss b/assets/css/pages/compare-old.scss index 9a807734..83840b9a 100644 --- a/assets/css/pages/compare-old.scss +++ b/assets/css/pages/compare-old.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .cd-products-comparison-table { /* overflow-x: auto; */ @@ -193,23 +193,19 @@ .cd-products-table.top-fixed .cd-products-columns > li { padding-top: 160px; } - + .cd-products-table.top-fixed .cd-top-info { height: 160px; position: fixed; top: 0; } - + .cd-products-table.top-fixed .cd-top-info h3 { transform: translateY(-116px); } - + .cd-products-table.top-fixed .cd-top-info img { transform: translateY(-62px) scale(0.4); } - -} - - - +} diff --git a/assets/css/pages/compare.scss b/assets/css/pages/compare.scss index 44e8d624..c324b3f4 100644 --- a/assets/css/pages/compare.scss +++ b/assets/css/pages/compare.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .separator{ height: 40px; diff --git a/assets/css/pages/conf.scss b/assets/css/pages/conf.scss index 3117ea34..e82f2181 100644 --- a/assets/css/pages/conf.scss +++ b/assets/css/pages/conf.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .conf-background { background: url("../img/headers/team.jpg") no-repeat; @@ -80,20 +80,20 @@ /* @media (max-width: $break-small) { */ /* background-image: url('../img/home/perfect-for-home-and-business-mobile.jpg'); */ /* } */ - + .btn-primary { width: 430px; } - + @media (min-width: $very-wide) { padding-top: 120px; padding-bottom: 180px; } - + @media (max-width: $break-small) { .btn-primary { width: 300px; - + .icon-arrow { background: url(../img/arrow_right.svg) center/contain no-repeat; position: absolute; @@ -104,17 +104,17 @@ } } } - + .section--heading-1 { width: 469px; color: white; - + @media (max-width: $break-small) { color: white; width: 100%; } } - + .section--paragraph { color: #ffffff; width: 469px; @@ -138,5 +138,5 @@ .blog-social-icons a:hover { text-decoration: none; } - + } diff --git a/assets/css/pages/contribute.scss b/assets/css/pages/contribute.scss index 7e6c70b3..bfccb76b 100644 --- a/assets/css/pages/contribute.scss +++ b/assets/css/pages/contribute.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .contribute-background { background: url("../img/headers/team.jpg") no-repeat; @@ -48,4 +48,3 @@ footer.page-footer { color: white; } } - diff --git a/assets/css/pages/contributors.scss b/assets/css/pages/contributors.scss index a12d80bf..e9643191 100644 --- a/assets/css/pages/contributors.scss +++ b/assets/css/pages/contributors.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .contributors-background { background: url("../img/headers/contributors.jpg") no-repeat; @@ -29,7 +29,7 @@ footer.page-footer { text-align: left !important; } } - + blockquote { float: right; } @@ -42,7 +42,7 @@ footer.page-footer { position: relative; } - .contribtext { + .contribtext { transition: all .5s; background-color: #0082C9; border-radius: 50%; diff --git a/assets/css/pages/devices.scss b/assets/css/pages/devices.scss index 9e8fba44..0d46cca8 100644 --- a/assets/css/pages/devices.scss +++ b/assets/css/pages/devices.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .sharing-background { background: url("../img/headers/devices.jpg") no-repeat; diff --git a/assets/css/pages/education.scss b/assets/css/pages/education.scss index 65a0a711..44fb8e8a 100644 --- a/assets/css/pages/education.scss +++ b/assets/css/pages/education.scss @@ -1,7 +1,7 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; -@import 'vendor/modular-scale/modular-scale.scss'; -@import "transparent-gradient.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; +@import '../vendor/modular-scale/modular-scale.scss'; +@import "../transparent-gradient.scss"; .separator{ margin: 100px 0 50px 0; diff --git a/assets/css/pages/enterprise.scss b/assets/css/pages/enterprise.scss index d41ef0d3..88c42b1b 100644 --- a/assets/css/pages/enterprise.scss +++ b/assets/css/pages/enterprise.scss @@ -1,7 +1,7 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; -@import 'vendor/modular-scale/modular-scale.scss'; -@import "transparent-gradient.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; +@import '../vendor/modular-scale/modular-scale.scss'; +@import "../transparent-gradient.scss"; .separator{ height: 40px; diff --git a/assets/css/pages/events.scss b/assets/css/pages/events.scss index 7ea68515..1f846419 100644 --- a/assets/css/pages/events.scss +++ b/assets/css/pages/events.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; /* gradient behind nav */ @@ -24,4 +24,3 @@ footer { margin-top: 70px; } - diff --git a/assets/css/pages/features.scss b/assets/css/pages/features.scss index aae18349..02b888ac 100644 --- a/assets/css/pages/features.scss +++ b/assets/css/pages/features.scss @@ -1,6 +1,6 @@ -@import "variables.scss"; -@import "modules/secondmenu"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../modules/secondmenu"; +@import "../transparent-navbar.scss"; .features-background { background: url("../img/headers/yourcloud.jpg") no-repeat; diff --git a/assets/css/pages/footer.scss b/assets/css/pages/footer.scss index 7f21ae4b..910b1245 100644 --- a/assets/css/pages/footer.scss +++ b/assets/css/pages/footer.scss @@ -1,4 +1,4 @@ -@import "variables.scss"; +@import "../variables.scss"; /** * Footer diff --git a/assets/css/pages/globalscale.scss b/assets/css/pages/globalscale.scss index d0e8fadb..468157e4 100644 --- a/assets/css/pages/globalscale.scss +++ b/assets/css/pages/globalscale.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .separator{ margin: 100px 0 50px 0; diff --git a/assets/css/pages/home.scss b/assets/css/pages/home.scss index 53cf3fcf..a0f5e890 100644 --- a/assets/css/pages/home.scss +++ b/assets/css/pages/home.scss @@ -1,9 +1,6 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../modules/transparent-navbar.scss"; -/** -* Home page jumbotron -*/ .jumbotron { background: -webkit-gradient(linear, left top, left bottom, from($nextcloud-blue), color-stop(100%, #3e9ed8), to(#d8d8d8)); background: linear-gradient(to bottom, $nextcloud-blue, #3e9ed8 100%, #d8d8d8); @@ -62,7 +59,7 @@ } .topbanner { - background: url(../img/home/top-banner@2x.png) bottom 0 right 0/contain no-repeat; + background: url(../../img/home/top-banner@2x.png) bottom 0 right 0/contain no-repeat; width: auto; height: auto; max-width: 55vw; @@ -78,12 +75,12 @@ transform: translateY(50px); @media (max-width: $break-small) { - background-image: url("../img/home/top-banner@2x_mobile.png"); + background-image: url("../../img/home/top-banner@2x_mobile.png"); padding-top: 100%; } @media (min-width: $break-small) and (max-width: $break-big) { - background-image: url("../img/home/top-banner@2x_mobile.png"); + background-image: url("../../img/home/top-banner@2x_mobile.png"); padding-top: 55%; } } @@ -164,32 +161,95 @@ line-height: 22px; margin: 10px 10px; } + } - &:after { - position: absolute; - display: inline-block; - content: ' '; - background-image: url('../img/next.svg'); - background-size: 12px 12px; - height: 12px; - width: 12px; - top: 10px; - margin-left: 5px; - -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; - - @media (max-width: $break-small) { - position: relative; - top: 2px; - } + svg { + display: inline-block; + height: 12px; + width: 12px; + top: 10px; + transform: translateX(-10px); + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + + g { + fill: #fff; } - &:hover { - &:after { - margin-left: 10px; - } + @media (max-width: $break-small) { + position: relative; + top: 2px; } } + + &:hover { + svg { + transform: translateX(0px); + } + } + } + } +} + +#why-nextcloud { + .highlights { + display: -ms-flexbox; + display: flex; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + margin: -16px 0 0 -16px; + padding: 0; + list-style: none; + } + + @media (max-width: 1024px) { + .highlights { + display: block; + text-align: center; + margin: 0 10px 0 10px; + } + } + + .highlights_align { + padding-top: 100px; + flex-basis: 33.33333%; + max-width: 33.33333%; + padding-left: 64px; + &:first-child { + padding-left: 0px; + } + svg { + margin-left: -10px; + } + .section--paragraph { + font-size: 16px; + } + h4 { + text-align: center; + margin-top: 20px; + margin-left: -20px; + margin-bottom: 0; + } + } + + @media (max-width: 1024px) { + .highlights_align { + flex-basis: auto; + max-width: none; + padding-left: 0; + padding-top: 50px; + } + } + + @media (max-width: 1200px) { + .highlights_align svg { + margin-left: 0; + } + } + + @media (max-width: 1200px) { + .highlights_align h4 { + margin-left: 0; } } } @@ -276,10 +336,10 @@ padding-bottom: 50px; padding-left: 0; padding-right: 0; - background-image: url('../img/home/perfect-for-home-and-business.jpg'); + background-image: url('../../img/home/perfect-for-home-and-business.jpg'); background-size: cover; @media (max-width: $break-small) { - background-image: url('../img/home/perfect-for-home-and-business-mobile.jpg'); + background-image: url('../../img/home/perfect-for-home-and-business-mobile.jpg'); } @@ -297,7 +357,7 @@ width: 300px; .icon-arrow { - background: url(../img/arrow_right.svg) center/contain no-repeat; + background: url(../../img/arrow_right.svg) center/contain no-repeat; position: absolute; width: 20px; height: 100%; @@ -448,7 +508,7 @@ padding-bottom: 120px; &:before { - background: url(../img/home/pattern.svg) bottom 0 right 0/contain no-repeat; + background: url(../../img/home/pattern.svg) bottom 0 right 0/contain no-repeat; height: 90vh; width: 2000px; position: absolute; diff --git a/assets/css/pages/jobs.scss b/assets/css/pages/jobs.scss index 7e42d369..26392d2b 100644 --- a/assets/css/pages/jobs.scss +++ b/assets/css/pages/jobs.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .jobs-background { background: url("../img/headers/team.jpg") no-repeat center; diff --git a/assets/css/pages/migration.scss b/assets/css/pages/migration.scss index 6c19fe1d..d1173971 100644 --- a/assets/css/pages/migration.scss +++ b/assets/css/pages/migration.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; /** @@ -11,7 +11,7 @@ background-size: cover; @media (max-width: $navbar-breaksize) { - min-height: 1050px !important; + min-height: 1050px !important; max-height: 1200px !important; } .topheader { @@ -19,7 +19,7 @@ top: 20% !important; } } - + .topquote { position: absolute; top: 55%; @@ -48,11 +48,11 @@ height: 100%; min-height: 300px; } - + .carousel-control.left { background-image: none; background: transparent; - + @media (max-width: $break-small) { display: none; } @@ -60,7 +60,7 @@ .carousel-control.right { background-image: none; background: transparent; - + @media (max-width: $break-small) { display: none; } diff --git a/assets/css/pages/monitoring.scss b/assets/css/pages/monitoring.scss index 30cf7a88..123a108d 100644 --- a/assets/css/pages/monitoring.scss +++ b/assets/css/pages/monitoring.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .monitoring-background { background: url("../img/headers/monitoring.jpg") no-repeat; diff --git a/assets/css/pages/order.scss b/assets/css/pages/order.scss index 0a115e4a..22dc9d64 100644 --- a/assets/css/pages/order.scss +++ b/assets/css/pages/order.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .buy-background { background-image: url("../img/enterprise/enterprise.jpg"); diff --git a/assets/css/pages/outlook.scss b/assets/css/pages/outlook.scss index 67d62ce1..84b57b06 100644 --- a/assets/css/pages/outlook.scss +++ b/assets/css/pages/outlook.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; /* gradient behind nav */ @@ -65,6 +65,3 @@ color: white; } } - - - diff --git a/assets/css/pages/partners.scss b/assets/css/pages/partners.scss index 5111ebe8..18557f5a 100644 --- a/assets/css/pages/partners.scss +++ b/assets/css/pages/partners.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .partners-background { background: url("../img/headers/partners.jpg") no-repeat; @@ -45,7 +45,7 @@ footer.page-footer { .partnertext { text-align: justify; } - + } /* .calltoaction { @@ -66,4 +66,3 @@ footer.page-footer { color: white; } }*/ - diff --git a/assets/css/pages/pricing.scss b/assets/css/pages/pricing.scss index 0b6f2383..9935d93b 100644 --- a/assets/css/pages/pricing.scss +++ b/assets/css/pages/pricing.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; /** * Background @@ -136,7 +136,7 @@ font-stretch: normal; line-height: 2.5; color: #b1b1b1; - + a { color: #b1b1b1; text-decoration: none; @@ -187,7 +187,7 @@ text-indent: -20px; } - + /* Tooltips */ /* Tooltip text */ @@ -200,7 +200,7 @@ padding: 5px 0; line-height: 1.4; border-radius: 6px; - + /* Position the tooltip text */ position: absolute; z-index: 10; @@ -241,7 +241,7 @@ .section--options { margin-top: 133px; margin-bottom: 30px; - + .container-widest { .introduction { padding-top: 50px; @@ -254,11 +254,11 @@ margin-left: 5px; margin-right: 5px; } - + .col-md-4 { padding: 20px; } - + .featureblock { margin-top: 50px; /* margin-bottom: 50px; */ @@ -270,11 +270,11 @@ border-radius: 8px; transition: all 0.5s ease; } - + .section--paragraph__tittle { text-align: center; } - + i[class*='fa-'] { font-size: 140px; display: block; @@ -282,7 +282,7 @@ text-align: center; padding-bottom: 50px; } - + .img-responsive { margin-left: auto; margin-right: auto; @@ -452,7 +452,7 @@ padding: 15px; border-radius: 6px; } - + #tooltip:after /* triangle decoration */ { width: 0; @@ -466,7 +466,7 @@ bottom: -10px; margin-left: -10px; } - + #tooltip.top:after { border-top-color: transparent; @@ -474,13 +474,13 @@ top: -20px; bottom: auto; } - + #tooltip.left:after { left: 10px; margin: 0; } - + #tooltip.right:after { right: 10px; diff --git a/assets/css/pages/secure.scss b/assets/css/pages/secure.scss index ab0d68b3..630ec144 100644 --- a/assets/css/pages/secure.scss +++ b/assets/css/pages/secure.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; /** diff --git a/assets/css/pages/securedrop.scss b/assets/css/pages/securedrop.scss index fc33f18b..0061f27f 100644 --- a/assets/css/pages/securedrop.scss +++ b/assets/css/pages/securedrop.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .securedrop-background { background: url("../img/headers/securedrop.jpg") no-repeat; diff --git a/assets/css/pages/sharing.scss b/assets/css/pages/sharing.scss index 3ddf187b..1b2f166a 100644 --- a/assets/css/pages/sharing.scss +++ b/assets/css/pages/sharing.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .sharing-background { background: url("../img/headers/sharing.jpg") no-repeat; diff --git a/assets/css/pages/storage.scss b/assets/css/pages/storage.scss index a922e1f5..becf70aa 100644 --- a/assets/css/pages/storage.scss +++ b/assets/css/pages/storage.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .storage-background { background: url("../img/headers/storage.jpg") no-repeat; @@ -39,4 +39,3 @@ footer { .section--whitepaper { } - diff --git a/assets/css/pages/support.scss b/assets/css/pages/support.scss index 8e9f88c4..8f265295 100644 --- a/assets/css/pages/support.scss +++ b/assets/css/pages/support.scss @@ -1,11 +1,8 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .support-background { background: url("../img/headers/support.jpg") no-repeat; background-position: center; background-size: cover; } - - - diff --git a/assets/css/pages/team.scss b/assets/css/pages/team.scss index 90b790dd..100d59ee 100644 --- a/assets/css/pages/team.scss +++ b/assets/css/pages/team.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .team-background { background: url("../img/headers/enterprise-team.jpg") no-repeat; @@ -29,8 +29,8 @@ footer.page-footer { text-align: left !important; } } - - + + .teamgroup { padding-top:100px; width: 95%; @@ -74,11 +74,11 @@ footer.page-footer { h4 { color: #9c9c9c; } - + .teamexpertise { margin: 2px; font-size: 14px; - + } .teamlocation { @@ -161,4 +161,3 @@ footer.page-footer { color: white; } } - diff --git a/assets/css/pages/webrtc.scss b/assets/css/pages/webrtc.scss index 2ae38e06..2101a49c 100644 --- a/assets/css/pages/webrtc.scss +++ b/assets/css/pages/webrtc.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .storage-background { background: url("../img/headers/webrtc.jpg") no-repeat; diff --git a/assets/css/pages/workflow.scss b/assets/css/pages/workflow.scss index 044b7463..ebf583e0 100644 --- a/assets/css/pages/workflow.scss +++ b/assets/css/pages/workflow.scss @@ -1,5 +1,5 @@ -@import "variables.scss"; -@import "transparent-navbar.scss"; +@import "../variables.scss"; +@import "../transparent-navbar.scss"; .workflow-background { background: url("../img/headers/workflow.jpg") no-repeat; @@ -39,4 +39,3 @@ section { footer { margin-top: 50px; } - |