diff options
-rw-r--r-- | assets/css/custom.scss | 34 | ||||
-rw-r--r-- | assets/css/modules/header.scss | 2 | ||||
-rw-r--r-- | assets/css/modules/hero.scss | 37 | ||||
-rw-r--r-- | assets/css/pages/features.scss | 55 | ||||
-rw-r--r-- | assets/css/pages/secure.scss | 9 | ||||
-rw-r--r-- | assets/js/main.js | 14 | ||||
-rw-r--r-- | assets/js/modules/youtubePlayer.js | 32 | ||||
-rw-r--r-- | assets/js/pages/features.js | 24 | ||||
-rw-r--r-- | assets/js/require.config.js | 3 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | page-features.php | 21 | ||||
-rw-r--r-- | page-homepage.php | 4 | ||||
-rw-r--r-- | page-secure.php | 2 | ||||
-rw-r--r-- | yarn.lock | 4 |
14 files changed, 132 insertions, 110 deletions
diff --git a/assets/css/custom.scss b/assets/css/custom.scss index 6d9e6577..37ed125a 100644 --- a/assets/css/custom.scss +++ b/assets/css/custom.scss @@ -18,12 +18,13 @@ // Importing modules @import 'variables'; @import 'modules/normalize'; +@import 'modules/typography'; @import 'modules/no-js'; @import 'modules/alerts'; @import 'modules/header'; @import 'modules/slideshow'; @import 'modules/secondmenu'; -@import 'modules/typography'; +@import 'modules/hero'; // To remove everything above and split in other files @@ -880,37 +881,6 @@ blockquote { } -/* typical background images (hero section) like enterprise, security */ -.background { - padding-bottom: 0; - padding-top: 0; - background-repeat: no-repeat; - background-size: cover; - border-radius: 0 !important; - height: 70vh; - min-height: 600px; - max-height: 800px; - position: relative; - opacity: 0; } - .background h1 { - padding-top: 0; - color: white; } - .background h2 { - color: white; - font-size: 20px; - line-height: 1.6; - text-shadow: 0px 0px 10px #333; } - .background .topheader { - position: absolute; - top: 30%; - margin: 0; - padding: 0; - max-width: 600px; - opacity: 0; } - @media (max-width: 991px) { - .background .topheader { - padding-left: 5%; } } - .btn-primary { background-color: $nextcloud-blue; font-size: 18px; diff --git a/assets/css/modules/header.scss b/assets/css/modules/header.scss index 7d8f252e..1accdf63 100644 --- a/assets/css/modules/header.scss +++ b/assets/css/modules/header.scss @@ -400,6 +400,8 @@ nav a { z-index: 8; display: block; margin-right: 0; + border: none; + float: right; &:hover { transform: scale(1.1); diff --git a/assets/css/modules/hero.scss b/assets/css/modules/hero.scss new file mode 100644 index 00000000..b2ca70dc --- /dev/null +++ b/assets/css/modules/hero.scss @@ -0,0 +1,37 @@ +.background { + padding-bottom: 0; + padding-top: 0; + background-repeat: no-repeat; + background-size: cover; + border-radius: 0 !important; + height: 70vh; + min-height: 600px; + max-height: 800px; + position: relative; + opacity: 0; + + h1 { + padding-top: 0; + color: white; + opacity: 0; + transform: translateY(50px); + } + + h2 { + color: white; + font-size: 20px; + line-height: 1.6; + text-shadow: 0px 0px 10px #333; + opacity: 0; + transform: translateY(50px); + } + + .topheader { + position: absolute; + top: 30%; + margin: 0; + padding: 0; + max-width: 600px; + opacity: 0; + } +} diff --git a/assets/css/pages/features.scss b/assets/css/pages/features.scss index 02b888ac..cd540604 100644 --- a/assets/css/pages/features.scss +++ b/assets/css/pages/features.scss @@ -1,11 +1,11 @@ -@import "../variables.scss"; -@import "../modules/secondmenu"; -@import "../transparent-navbar.scss"; +@import '../variables'; +@import '../modules/secondmenu'; +@import '../modules/transparent-navbar'; .features-background { - background: url("../img/headers/yourcloud.jpg") no-repeat; - background-position: center; - background-size: cover; + background: url('../../img/headers/yourcloud.jpg') no-repeat; + background-position: center; + background-size: cover; } @media (max-width $break-small) { @@ -14,9 +14,23 @@ } } +.img-responsive { + @media (min-width: $break-big) { + margin-bottom: 200px; + } + + @media (min-width: $very-wide) { + margin-bottom: 100px; + } +} + +.image--floated{ + float: right; +} + .acess__anywhere { width: 400px; - margin: 0 auto; + margin: 0 auto; } .section--files { @@ -43,18 +57,21 @@ section { .container-widest .row { margin-left: 5px; margin-right: 5px; + } + + .section--heading-1 { + padding-bottom: 60px; + } + + i[class*='fa-'] { + font-size: 60px; + display: block; + color: #0082c9; + text-align: center; + padding-top: 20%; + } } - .section--heading-1 { - padding-bottom: 60px; - } - i[class*='fa-'] { - font-size: 60px; - display: block; - color: #0082c9; - text-align: center; - padding-top: 20%; - } -} + .calltoaction { - padding-bottom: 100px; + padding-bottom: 100px; } diff --git a/assets/css/pages/secure.scss b/assets/css/pages/secure.scss index 630ec144..a36231d6 100644 --- a/assets/css/pages/secure.scss +++ b/assets/css/pages/secure.scss @@ -1,12 +1,9 @@ @import "../variables.scss"; -@import "../transparent-navbar.scss"; +@import "../modules/transparent-navbar.scss"; -/** -* Secure Page -*/ .security-background { - background-image: url("../img/security/security.jpg"); + background-image: url("../../img/security/security.jpg"); background-position: bottom 0 right 0; .topheader { @@ -448,7 +445,7 @@ section { align-items: center; &__logo { - background: url("../img/security/ncc_logo.png") no-repeat center/contain; + background: url("../../img/security/ncc_logo.png") no-repeat center/contain; width: 46px; height: 46px; } diff --git a/assets/js/main.js b/assets/js/main.js index f2fd9230..e7a575d3 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -8,11 +8,12 @@ define(['jquery', 'lodash', 'enquire', 'TweenMax', 'velocity'], $(window).on('scroll.fadeOnce', _.bind(this.revealOnScroll, this, event)); this.animationOnLoadPage(); this.removeRevealOnScroll(); - this.animationOnLoadPageTimeline.play(); }, variables: { topHeaderSelector: '.topheader', + heroHeading: '.topheader h1', + heroSubtitle: '.topheader h2', heroSectionBackgroundSelector: '.background', buttonDropdownSelector: $('.button--dropdown'), buttonDropdownContentSelector: $('.dropdown-content'), @@ -47,13 +48,12 @@ define(['jquery', 'lodash', 'enquire', 'TweenMax', 'velocity'], }, animationOnLoadPage: function() { - this.animationOnLoadPageTimeline = new TimelineMax ({paused: true}); - var stuff = $(this.variables.topHeaderSelector); + var animationOnLoadPageTimeline = new TimelineMax (); - - this.animationOnLoadPageTimeline.to(stuff, 1, {y: 50, autoAlpha: 1}); - // $(this.variables.topHeaderSelector).velocity('transition.slideUpBigIn'); - // $(this.variables.heroSectionBackgroundSelector).velocity('transition.fadeIn', 1000); + animationOnLoadPageTimeline.to($(this.variables.topHeaderSelector), 1, {autoAlpha: 1}); + animationOnLoadPageTimeline.to($(this.variables.heroSectionBackgroundSelector), 1, {autoAlpha: 1}); + animationOnLoadPageTimeline.to($(this.variables.heroHeading), 1, {y:0 , autoAlpha: 1}); + animationOnLoadPageTimeline.to($(this.variables.heroSubtitle), 1, {y:0 , autoAlpha: 1}, '-= 0.6'); }, smoothScroll: function() { diff --git a/assets/js/modules/youtubePlayer.js b/assets/js/modules/youtubePlayer.js new file mode 100644 index 00000000..5e3dfd42 --- /dev/null +++ b/assets/js/modules/youtubePlayer.js @@ -0,0 +1,32 @@ +// This use the plyr plugin, for more information use the link above +// https://github.com/sampotts/plyr + +define(['jquery', 'lodash', 'plyr'], + function ($, _, plyr) { + $(document).ready(function() { + 'use strict'; + var YoutubePlayer = { + init: function() { + this.startPlayer(); + this.getCss(); + }, + + getCss: function() { + $('head').append('<link>'); + var css = $('head').children(':last'); + css.attr({ + rel: 'stylesheet', + type: 'text/css', + href: 'https://cdn.plyr.io/2.0.13/plyr.css' + }); + }, + + startPlayer: function() { + plyr.setup({ + //Pass extra options here if needed + }); + } + }; + YoutubePlayer.init(); + }); + }); diff --git a/assets/js/pages/features.js b/assets/js/pages/features.js deleted file mode 100644 index 7274dcad..00000000 --- a/assets/js/pages/features.js +++ /dev/null @@ -1,24 +0,0 @@ -define(["jquery", "underscore", "enquire", "jqueryUi", "youtubeplugin", "bootstrap"], -function ($, _, enquire, jqueryui, jqyoutube) { - $(document).ready(function() { - 'use strict'; - var featuresPage = { - init: function() { - jQuery("a.youtube").YouTubePopup({ hideTitleBar: true }); - - enquire.register('screen and (max-width: 480px)', { - //match: _.bind(this.resultsBindMobile, this) - }); - - enquire.register('screen and (min-width: 481px)', { - //match: _.bind(this.enterpriseBindDesktop, this) - }); - }, - - variables : { - }, - - } - featuresPage.init(); - }); -}); diff --git a/assets/js/require.config.js b/assets/js/require.config.js index 0a0fb3c8..cdacfa35 100644 --- a/assets/js/require.config.js +++ b/assets/js/require.config.js @@ -14,7 +14,7 @@ requirejs.config({ TweenLite: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenLite.min', '../../node_modules/gsap/src/minified/TweenLite.min'], TimelineLite: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineLite.min', '../../node_modules/gsap/src/minified/TimelineLite.min'], TimelineMax: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineMax.min', '../../node_modules/gsap/src/minified/TimelineMax.min'], - TweenMax: ['../../node_modules/gsap/src/minified/TweenMax.min'], + TweenMax: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min', '../../node_modules/gsap/src/minified/TweenMax.min'], easingEase: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/easing/EasePack.min'], velocity: ['https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min', 'vendor/velocity.min'], velocityUI: ['https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min', 'vendor/velocity.ui.min'], @@ -22,6 +22,7 @@ requirejs.config({ hammer: ['https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min', 'vendor/hammer.min'], inview: ['https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min', 'vendor/jquery.inview'], bootstrap: ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min', 'vendor/bootstrap'], + plyr: ['https://cdn.plyr.io/2.0.13/plyr', '../../node_modules/plyr/dist/plyr'], youtubeplugin: 'old/vendor/jquery.youtubepopup.min', }, shim: { diff --git a/package.json b/package.json index 5f9f29f1..e58f5a94 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "jquery": "^3.2.1", "lodash": "^4.17.4", "modernizr": "^3.5.0", + "plyr": "^2.0.13", "requirejs": "^2.3.3", "scrollmagic": "^2.0.5" } diff --git a/page-features.php b/page-features.php index ea230e59..2ce5aaaf 100644 --- a/page-features.php +++ b/page-features.php @@ -1,9 +1,9 @@ <head> -<link href="<?php echo get_template_directory_uri(); ?>/assets/css/features.css" rel="stylesheet"> -<link type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/vendor/jquery-ui.css" rel="stylesheet" /> +<link href="<?php echo get_template_directory_uri(); ?>/assets/css/pages/features.css" rel="stylesheet"> +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script> require(["require.config"], function() { - require(["pages/features", "modules/submenu"]) + require(["modules/youtubePlayer"]) }); </script> <script src='https://www.google.com/recaptcha/api.js'></script> @@ -22,14 +22,10 @@ <div class="container-fluid menu" id="menuAnchor"> <div class="container buttons"> <a href="#hosting"><span class="avoidwrap"><?php echo $l->t('Your files');?></span></a> -<!-- <a href="#files"><span class="avoidwrap"><?php echo $l->t('File access');?></span></a>--> <a href="#security"><span class="avoidwrap"><?php echo $l->t('Security');?></span></a> -<!-- <a href="#workflow"><span class="avoidwrap"><?php echo $l->t('Control');?></span></a> --> <a href="#clients"><span class="avoidwrap"><?php echo $l->t('Clients');?></span></a> <a href="#storage"><span class="avoidwrap"><?php echo $l->t('External storage');?></span></a> <a href="#calendar"><span class="avoidwrap"><?php echo $l->t('Collaborate');?></span></a> -<!-- <a href="#calls"><span class="avoidwrap"><?php echo $l->t('Video calls');?></a> --> -<!-- <a href="#collabora"><span class="avoidwrap"><?php echo $l->t('Online Office');?></span></a> --> <a href="#appstore"><span class="avoidwrap"><?php echo $l->t('More apps');?></span></a> </div> </div> @@ -52,15 +48,8 @@ <section class="section--files"> <a name="files" id="files"></a> <div class="container"> - <div class="col-md-6 revealOnScroll image--floated image--feature"> - <div class="yt-img-overlay"> - <a class="youtube" href="https://www.youtube.com/watch?v=Fe1I7wYW6hA" title="Creating anonymous upload links"> - <img src="https://img.youtube.com/vi/Fe1I7wYW6hA/hqdefault.jpg" title="Creating anonymous upload links" /> - <div class="yt-play-btn"> - <i></i> - </div> - </a> - </div> + <div class="col-md-6 revealOnScroll image--floated"> + <div class="youtube" data-type="youtube" data-video-id="Fe1I7wYW6hA"></div> </div> <div class="col-md-6 revealOnScroll feature--block"> <p class="section--paragraph__tittle"><?php echo $l->t('Share with others on your terms.');?></p> diff --git a/page-homepage.php b/page-homepage.php index 1a299f98..b95e7c4a 100644 --- a/page-homepage.php +++ b/page-homepage.php @@ -165,7 +165,3 @@ <a class="button button--blue button--arrow button--large" href="https://newsletter.nextcloud.com/?p=subscribe&id=1" role="button"><?php echo $l->t('Subscribe');?></a> </div> </section> - -<!-- <script type="text/javascript"> - javascript:!function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator()},b.src="//cdn.rawgit.com/hammerjs/touchemulator/0.0.2/touch-emulator.js",a.body.appendChild(b)}(document); -</script> --> diff --git a/page-secure.php b/page-secure.php index e7ee0a06..b6770996 100644 --- a/page-secure.php +++ b/page-secure.php @@ -1,5 +1,5 @@ <head> - <link href="<?php echo get_template_directory_uri(); ?>/assets/css/secure.css" rel="stylesheet"> + <link href="<?php echo get_template_directory_uri(); ?>/assets/css/pages/secure.css" rel="stylesheet"> <script> require(["require.config"], function() { require(["pages/secure"]) @@ -1481,6 +1481,10 @@ pluralize@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762" +plyr@^2.0.13: + version "2.0.13" + resolved "https://registry.yarnpkg.com/plyr/-/plyr-2.0.13.tgz#9b726d2444fd743338c23d3c48ca3416c97712be" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" |