mobile styling and functionality
This commit is contained in:
Lance Cummings
Родитель
ac76cc2752
Коммит
f3a168105b
|
|
@ -5,6 +5,7 @@
|
|||
{%- seo -%}
|
||||
<link rel="apple-touch-icon" href="{{ "/assets/img/favicon.png" }}">
|
||||
<link rel="shortcut icon" href="{{ "/favicon.ico" | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ "/assets/slick/slick.css?ver=2018.10.26" | relative_url }}">
|
||||
<link rel="stylesheet" href="{{ "/assets/main.css?ver=2018.10.26" | relative_url }}">
|
||||
<link rel="stylesheet" href="https://i.icomoon.io/public/8a635fdcf6/FirefoxExtensionWorkshop/style.css">
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ Build on the web’s most customizable browser. Get your great idea into the han
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiles-container">
|
||||
<div class="tiles-container mobile-slider">
|
||||
<div class="grid-container grid-x grid-padding-x align-center">
|
||||
|
||||
<!-- Tile 1 -->
|
||||
|
|
|
|||
|
|
@ -10,10 +10,14 @@ Firefox extensions are made with the same technologies used to build the web. Th
|
|||
</div>
|
||||
<div class="cell small-12 large-10">
|
||||
<!-- Video Box -->
|
||||
<div id="how-to-build-an-extension-video" class="img video-box" style="background-image: url(assets/img/rawpixel-771301-unsplash.jpg);">
|
||||
<div class="video-box">
|
||||
<div class="video-cta">
|
||||
<h2 class="h1">Build an Extension in Less Than 5 Minutes</h2>
|
||||
<button class="video-play" data-youtube_id="DAl0tOYDHxg" data-target="how-to-build-an-extension-video"></button>
|
||||
<button class="show-for-medium video-play video-link" data-youtube_id="DAl0tOYDHxg" data-youtube_target="how-to-build-an-extension-video"></button>
|
||||
</div>
|
||||
<div id="how-to-build-an-extension-video" class="img" style="background-image: url(assets/img/rawpixel-771301-unsplash.jpg);">
|
||||
<span class="video-play"></span>
|
||||
<button class="show-for-small-only video-link" data-youtube_id="DAl0tOYDHxg" data-youtube_target="how-to-build-an-extension-video"></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Video Box -->
|
||||
|
|
@ -99,7 +103,7 @@ Already have an extension that works in Chrome? Bring your app to Firefox in a f
|
|||
<div class="secondary-actions" markdown="1">
|
||||
|
||||
Top Resources
|
||||
[Differences between Chrome and Firefox](https://www.google.com)
|
||||
[Differences between Chrome and Firefox](https://www.google.com)
|
||||
[Port a Google Chrome extension](https://www.google.com)
|
||||
|
||||
</div>
|
||||
|
|
@ -122,7 +126,7 @@ Starting from scratch? It’s easy and fast to create your cross-browser extensi
|
|||
<div class="secondary-actions" markdown="1">
|
||||
|
||||
Top Resources
|
||||
[Best practices for cross-browser extensions](https://www.google.com)
|
||||
[Best practices for cross-browser extensions](https://www.google.com)
|
||||
[Introduction to developing in Firefox](https://www.google.com)
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,12 +42,24 @@ Discuss extension development and get support.
|
|||
Connect with thousands of developers and contribute to the extension ecosystem.
|
||||
|
||||
[Learn about enhancing the API](https://www.google.com)
|
||||
[Learn more about the community](https://www.google.com)
|
||||
|
||||
</div>
|
||||
<!-- END: Tile 2 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-container grid-x grid-padding-x align-center tiles-outside">
|
||||
<div class="cell small-12 medium-8 large-6 text-center" markdown="1">
|
||||
|
||||
[Learn more about the community](https://www.google.com)
|
||||
|
||||
</div>
|
||||
<!-- END: Section Tiles -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Section Tiles -->
|
||||
|
||||
<!-- Events iframe -->
|
||||
<div id="events">
|
||||
<iframe style="width: 100%; height: 600px; border: 0;" border="0" class="hub-mgmt-preview-iframe splash-page-iframe is-splash-resize-active" src="//splashthat.com/sites/view/addonscommunityevent.splashthat.com?partial=101626845,534610062&screenshotHash=494156500dffa3d9" id="iFrameResizer0" scrolling="no"></iframe>
|
||||
</div>
|
||||
<!-- END: Events iframe -->
|
||||
|
|
@ -10,58 +10,58 @@
|
|||
<div class="grid-container grid-x grid-padding-x tiles-container">
|
||||
|
||||
<!-- Tile 1 -->
|
||||
<div class="cell small-12 medium-6 tile-compact tile-block-link">
|
||||
<div class="block-link" markdown="1">
|
||||
<div class="cell small-12 medium-6 tile-compact" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Web-Ext
|
||||
|
||||
Accelerate development with this Firefox command line tool. See real-time code changes and easily package your extension.<https://www.google.com>
|
||||
Accelerate development with this Firefox command line tool. See real-time code changes and easily package your extension.
|
||||
|
||||
[Web-Ext Tool](https://www.google.com)
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Tile 1 -->
|
||||
|
||||
<!-- Tile 2 -->
|
||||
<div class="cell small-12 medium-6 tile-compact tile-block-link">
|
||||
<div class="block-link" markdown="1">
|
||||
<div class="cell small-12 medium-6 tile-compact" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Web-Ext Webpack Plugin
|
||||
|
||||
This plug-in makes webpack aware of extensions so you can easily bundle your JavaScript.<https://www.google.com>
|
||||
This plug-in makes webpack aware of extensions so you can easily bundle your JavaScript.
|
||||
|
||||
[Web-Ext Webpack Plugin](https://www.google.com)
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Tile 2 -->
|
||||
|
||||
<!-- Tile 3 -->
|
||||
<div class="cell small-12 medium-6 tile-compact tile-block-link">
|
||||
<div class="block-link" markdown="1">
|
||||
<div class="cell small-12 medium-6 tile-compact" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Browser API Polyfill
|
||||
|
||||
Create your extension using the Firefox promise-based API, and the polyfill library will get your extension running on multiple browsers in no time.<https://www.google.com>
|
||||
Create your extension using the Firefox promise-based API, and the polyfill library will get your extension running on multiple browsers in no time.
|
||||
|
||||
[Browser API Polyfill Library](https://www.google.com)
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Tile 3 -->
|
||||
|
||||
<!-- Tile 4 -->
|
||||
<div class="cell small-12 medium-6 tile-compact tile-block-link">
|
||||
<div class="block-link" markdown="1">
|
||||
<div class="cell small-12 medium-6 tile-compact" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Debug Your Extension
|
||||
|
||||
Check your extension for errors, and modify the code as needed.<https://www.google.com>
|
||||
Check your extension for errors, and modify the code as needed.
|
||||
|
||||
[Debug Tool](https://www.google.com)
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Tile 4 -->
|
||||
|
||||
|
|
@ -92,30 +92,26 @@ Check your extension for errors, and modify the code as needed.<https://www.goog
|
|||
<div class="grid-container grid-x grid-padding-x align-center">
|
||||
|
||||
<!-- Tile 1 -->
|
||||
<div class="cell small-12 medium-6 tile-compact tile-block-link">
|
||||
<div class="block-link" markdown="1">
|
||||
<div class="cell small-12 medium-6 tile-compact no-link" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Publish on Firefox
|
||||
|
||||
With millions of monthly users and Firefox integration, publishing your extension on addons.mozilla.org is the easiest way to get maximum exposure.<https://www.google.com>
|
||||
With millions of monthly users and Firefox integration, publishing your extension on addons.mozilla.org is the easiest way to get maximum exposure.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Tile 1 -->
|
||||
|
||||
<!-- Tile 2 -->
|
||||
<div class="cell small-12 medium-6 tile-compact tile-block-link">
|
||||
<div class="block-link" markdown="1">
|
||||
<div class="cell small-12 medium-6 tile-compact no-link" markdown="1">
|
||||
|
||||
|
||||
|
||||
#### Publish on Your Own
|
||||
|
||||
Publish your signed extension on your own, and explore alternate installation methods in Firefox.<https://www.google.com>
|
||||
Publish your signed extension on your own, and explore alternate installation methods in Firefox.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Tile 2 -->
|
||||
|
||||
|
|
@ -148,7 +144,7 @@ You’ll want users! The shortest route to getting, and keeping them, is creatin
|
|||
|
||||
Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.
|
||||
|
||||
[Watch the video](https://www.google.com)
|
||||
[Watch the video](DAl0tOYDHxg "Open Popup Video")
|
||||
|
||||
</div>
|
||||
<!-- END: Tile 1 -->
|
||||
|
|
|
|||
|
|
@ -15,6 +15,14 @@
|
|||
|
||||
{%- include footer.html -%}
|
||||
|
||||
<aside id="video-popup">
|
||||
<div class="bg"></div>
|
||||
<div class="grid-container grid-x grid-padding-x align-center align-middle">
|
||||
<div class="cell small-12 large-10"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script type="text/javascript" src="{{ "/assets/slick/slick.min.js?ver=2018.10.26" | relative_url }}"></script>
|
||||
<script type="text/javascript" src="{{ "/assets/scripts/scripts.min.js?ver=2018.10.26" | relative_url }}"></script>
|
||||
<script src="{{ "/assets/scripts/basket-client.js" | relative_url }}"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -18,12 +18,13 @@ layout: default
|
|||
<div class="grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12">
|
||||
<nav>
|
||||
<div class="group-a">
|
||||
<a class="" href="#about">About Extensions</a>
|
||||
<a class="" href="#build">Build Extensions</a>
|
||||
<a class="" href="#tips">Tips for Better Extensions</a>
|
||||
<a class="" href="#connect">Connect</a>
|
||||
<a class="" href="#news">Developer News</a>
|
||||
<h6 class="jump-link">Jump to...</h6>
|
||||
<div class="group-a" id="page-nav-links">
|
||||
<a href="#about">About Extensions</a>
|
||||
<a href="#build">Build Extensions</a>
|
||||
<a href="#tips">Tips for Better Extensions</a>
|
||||
<a href="#connect">Connect</a>
|
||||
<a href="#news">Developer News</a>
|
||||
</div>
|
||||
<div class="group-b">
|
||||
<a class="button" href="register">Register or Log in</a>
|
||||
|
|
@ -44,26 +45,21 @@ layout: default
|
|||
|
||||
{% endfor %}
|
||||
|
||||
<section id="community" class="panel bg-grey">
|
||||
<iframe style="width: 100%; height: 600px; border: 0;" border="0" class="hub-mgmt-preview-iframe splash-page-iframe is-splash-resize-active" src="//splashthat.com/sites/view/addonscommunityevent.splashthat.com?partial=101626845,534610062&screenshotHash=494156500dffa3d9" id="iFrameResizer0" scrolling="no"></iframe>
|
||||
</section>
|
||||
|
||||
<section id="news" class="panel bg-grey">
|
||||
<div class="grid-container grid-x grid-padding-x align-center">
|
||||
<div class="cell small-12 text-center">
|
||||
<div class="grid-container grid-x grid-padding-x align-center tiles-outside">
|
||||
<div class="cell small-12 medium-8 large-6 text-center">
|
||||
<h2>Latest Developer News</h2>
|
||||
</div>
|
||||
<script src="//rss.bloople.net/?url=https%3A%2F%2Fblog.mozilla.org%2Faddons%2Ffeed%2F&detail=140&limit=3&showtitle=false&type=js"></script>
|
||||
<!-- <div id="rssincl-box-container-1196929"></div> -->
|
||||
<!-- <script type="text/javascript">
|
||||
// Tool: https://www.rssinclude.com/my_rssboxes
|
||||
// (function() {
|
||||
// var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
|
||||
// s.src = 'http://output87.rssinclude.com/output?type=asyncjs&id=1196929&hash=0f86aff93a142b0157ab984bce858bee';
|
||||
// document.getElementsByTagName('head')[0].appendChild(s);
|
||||
// })();
|
||||
</script> -->
|
||||
<div class="cell small-12 text-center">
|
||||
</div>
|
||||
|
||||
<div id="rss-feed-source"><script src="//rss.bloople.net/?url=https%3A%2F%2Fblog.mozilla.org%2Faddons%2Ffeed%2F&detail=140&limit=3&showtitle=false&type=js"></script></div>
|
||||
|
||||
<div class="tiles-container mobile-slider">
|
||||
<div id="rss-feed" class="grid-container grid-x grid-padding-x align-center"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid-container grid-x grid-padding-x align-center tiles-outside">
|
||||
<div class="cell small-12 medium-8 large-6 text-center">
|
||||
<p><a href="https://blog.mozilla.org/addons/">Visit add-ons blog</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +90,7 @@ layout: default
|
|||
<div class="newsletter" id="newsletter_wrap">
|
||||
<form id="newsletter_form" name="newsletter_form" action="https://www.mozilla.org/en-US/newsletter/" method="post">
|
||||
<input type="hidden" id="fmt" name="fmt" value="H">
|
||||
<input type="hidden" id="newsletters" name="newsletters" value="mozilla-and-you">
|
||||
<input type="hidden" id="newsletters" name="newsletters" value="about-addons">
|
||||
|
||||
<div id="newsletter_errors" class="newsletter_errors"></div>
|
||||
|
||||
|
|
@ -111,7 +107,7 @@ layout: default
|
|||
</div>
|
||||
</form>
|
||||
<div id="newsletter_thanks" class="newsletter_thanks">
|
||||
<h2>Thanks!</h2>
|
||||
<h2>Thanks! Please check your inbox to confirm your subscription.</h2>
|
||||
<p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
300
_sass/_main.scss
300
_sass/_main.scss
|
|
@ -145,9 +145,15 @@ html {height: 100%;}
|
|||
// Logo
|
||||
// ------
|
||||
|
||||
.logo {position: relative; margin: 0; font-size: rem-calc(20); line-height: 1;
|
||||
a {position: relative; display: block; padding: rem-calc(15 0 14 58); color: $body-font-color;
|
||||
&:before {content: ""; position: absolute; left:0; top:0; display: block; width: rem-calc(48); height: rem-calc(49); background: transparent url(img/firefox-logo.png) no-repeat center/contain;}
|
||||
.logo {position: relative; margin: 0; font-size: rem-calc(15); line-height: 1;
|
||||
a {position: relative; display: block; padding: rem-calc(15 0 14 41); color: $body-font-color;
|
||||
&:before {content: ""; position: absolute; left: 0; top: rem-calc(7); display: block; width: rem-calc(31); height: rem-calc(32); background: transparent url(img/firefox-logo.png) no-repeat center/contain;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {font-size: rem-calc(20);
|
||||
a {padding: rem-calc(15 0 14 58);
|
||||
&:before {top: 0; width: rem-calc(48); height: rem-calc(49);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,33 +162,97 @@ html {height: 100%;}
|
|||
// Top Navigation
|
||||
// ------
|
||||
|
||||
.site-nav {padding: rem-calc(9 0 8);}
|
||||
.site-nav {padding: rem-calc(9 0 8);
|
||||
@include breakpoint(small down) {display: none;}
|
||||
}
|
||||
|
||||
.page-nav-container {position: absolute; z-index: 10; top: calc(100% - #{rem-calc(50)}); left: 0; width: 100%;
|
||||
.page-nav {position: absolute; left: 0; top: 0; width: 100%;}
|
||||
|
||||
nav {display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; background-color: $white; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); border-radius: $global-radius; padding: rem-calc(10); margin: rem-calc(24 0); overflow: hidden;
|
||||
nav {position: relative; width: 100%; height: rem-calc(52); background-color: $white; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); border-radius: $global-radius; margin: rem-calc(24 0); overflow: hidden;
|
||||
|
||||
> div {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;
|
||||
&.group-a {flex: 1 1 auto;
|
||||
a {padding: rem-calc(5 20); color: $body-font-color; margin: 0; transition: font-size .3s ease-in-out;}
|
||||
}
|
||||
&.group-b {flex: 0 0 #{rem-calc(165)}; width: rem-calc(165); display: flex; flex-flow: row nowrap; justify-content: flex-end; overflow: hidden; opacity: 0; margin-right: rem-calc(-165); transition: opacity .3s ease-in-out, margin .3s ease-in-out;
|
||||
a.button {margin: rem-calc(0 0 0 24);}
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-a, .group-b {position: absolute; left: 0; top: 0; height: 100%; padding: rem-calc(0 10); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch;}
|
||||
|
||||
&.sticky .page-nav {position: fixed; top: 0;
|
||||
nav {
|
||||
> div {
|
||||
&.group-a {
|
||||
a {font-size: rem-calc(13);}
|
||||
.group-a {width: 100%; transition: width .3s ease-in-out;
|
||||
a {position: relative; padding: rem-calc(15 20); color: $body-font-color; margin: 0; line-height: rem-calc(22); white-space: nowrap; transition: font-size .3s ease-in-out;
|
||||
&:hover {color: $primary-color;}
|
||||
&.active {color: $primary-color;
|
||||
&:after {content: ""; display: block; position: absolute; left: rem-calc(20); bottom: rem-calc(14); width: calc(100% - #{rem-calc(40)}); height: rem-calc(2); background-color: $primary-color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-b {width: rem-calc(155); left: auto; right: 0; display: flex; flex-flow: row nowrap; justify-content: flex-end; overflow: hidden; opacity: 0; margin-right: rem-calc(-155); padding: rem-calc(10 10 10 0); background-color: $white; transition: opacity .3s ease-in-out, margin .3s ease-in-out;
|
||||
a.button {margin: rem-calc(0); margin-left: auto;}
|
||||
}
|
||||
|
||||
.fwd, .bak {display: none;}
|
||||
|
||||
}
|
||||
|
||||
&.sticky .page-nav {position: fixed; top: 0;}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
|
||||
nav {
|
||||
.jump-link {display: none;}
|
||||
|
||||
.group-a {overflow-x: scroll;}
|
||||
|
||||
.fwd, .bak {visibility: hidden; pointer-events: none; position: absolute; z-index: 2; top: 0; height: 100%; width: rem-calc(64); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; cursor: pointer; font-size: rem-calc(16); text-align: center; color: $body-font-color; transition: left .3s ease-in-out, right .3s ease-in-out;
|
||||
&:after {display: block; flex: 0 0 auto; padding: rem-calc(0 16);}
|
||||
&:hover {color: $primary-color;}
|
||||
}
|
||||
.fwd {right: 0; background-image: linear-gradient(to right, rgba($white, 0) 0, rgba($white, 1) 50%); align-items: flex-end;
|
||||
&:after {@include icon_font($char: $icon-arrow-right);}
|
||||
}
|
||||
.bak {left: 0; background-image: linear-gradient(to right, rgba($white, 1) 50%, rgba($white, 0) 100%); align-items: flex-start;
|
||||
&:after {@include icon_font($char: $icon-arrow-left);}
|
||||
}
|
||||
|
||||
&.scrollable {
|
||||
.fwd, .bak {visibility: visible; pointer-events: auto;}
|
||||
&.start .bak {visibility: hidden; pointer-events: none;}
|
||||
&.end .fwd {visibility: hidden; pointer-events: none;}
|
||||
}
|
||||
}
|
||||
|
||||
&.sticky nav {
|
||||
.group-a {width: calc(100% - #{rem-calc(155)});
|
||||
a {font-size: rem-calc(13);
|
||||
&.active:after {bottom: rem-calc(15);}
|
||||
}
|
||||
}
|
||||
.group-b {opacity: 1; margin-right: 0;}
|
||||
|
||||
.fwd {right: rem-calc(150);}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {
|
||||
nav {height: auto; min-height: rem-calc(52);
|
||||
.jump-link {position: absolute; z-index: 2; left: 0; top: 0; height: rem-calc(52); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: rem-calc(10); width: calc(100% - #{rem-calc(155)}); font-weight: $global-weight-normal; background-color: $white; margin: 0; cursor: pointer;
|
||||
&:after {@include icon_font($char: $icon-arrow-down); display: block; flex: 0 1 #{rem-calc(22)}; width: rem-calc(22); padding: rem-calc(3 0 3 6); font-size: rem-calc(16);}
|
||||
}
|
||||
|
||||
.group-a {display: none; z-index: 1; height: auto; position: relative; margin-top: rem-calc(54); padding: rem-calc(12 10); border-top: 1px solid $medium-gray;
|
||||
a {display: block; padding: rem-calc(8 0 8 25); font-size: rem-calc(15);
|
||||
&.active {color: $body-font-color;
|
||||
&:after {content: ""; display: block; position: absolute; left: rem-calc(4); top: rem-calc(16); bottom: auto; width: rem-calc(6); height: rem-calc(6); border-radius: 50%; background-color: $primary-color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-b {z-index: 2; opacity: 1; margin-right: 0; height: rem-calc(52);}
|
||||
|
||||
&.open {
|
||||
.jump-link {
|
||||
&:after {@include icon_font($char: $icon-arrow-up);}
|
||||
}
|
||||
&.group-b {opacity: 1; margin-right: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -226,8 +296,10 @@ html {height: 100%;}
|
|||
// Into Banner
|
||||
// ------
|
||||
|
||||
.banner.intro {position: relative; background: $lighter-gray no-repeat center/cover; height: calc(100vh - #{rem-calc(50)}); max-height: 75vw; min-height: rem-calc(300);
|
||||
.banner.intro {position: relative; background: $lighter-gray no-repeat center/cover; height: calc(100vh - #{rem-calc(120)}); min-height: rem-calc(300);
|
||||
|
||||
@include breakpoint(medium) {height: calc(100vh - #{rem-calc(50)}); max-height: 75vw;}
|
||||
|
||||
.banner-content {height: 100%;
|
||||
.cell {
|
||||
> * {max-width: rem-calc(400); margin-left: auto; margin-right: auto;}
|
||||
|
|
@ -247,9 +319,13 @@ html {height: 100%;}
|
|||
// Section Intro
|
||||
// ------
|
||||
|
||||
.section-intro {padding-top: rem-calc(30); padding-bottom: rem-calc(20); background-color: #f8e71c;
|
||||
.section-intro {padding-top: rem-calc(45); padding-bottom: rem-calc(20); background-color: #f8e71c;
|
||||
@include breakpoint (medium) {padding-top: rem-calc(60); padding-bottom: rem-calc(30);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(100); padding-bottom: rem-calc(40);}
|
||||
@include breakpoint(small down) {
|
||||
> .tiles-outside:first-child {padding-top: rem-calc(0);}
|
||||
> .tiles-outside:last-child {padding-bottom: rem-calc(0);}
|
||||
}
|
||||
|
||||
&.extra-space {padding-bottom: rem-calc(30);
|
||||
@include breakpoint (medium) {padding-bottom: rem-calc(45);}
|
||||
|
|
@ -266,13 +342,13 @@ html {height: 100%;}
|
|||
}
|
||||
|
||||
&.bg-dark {background-color: $primary-color; color: $white;
|
||||
> .grid-container > .cell > p > a,
|
||||
> .grid-container > .cell:not(.tile):not(.tile-compact) > p > a,
|
||||
.tiles-outside a {color: $white;
|
||||
&:last-child {
|
||||
&:after {display: inline-block; margin-left: .3em; font-size: .8em; transition: margin .2s ease-in-out;
|
||||
@include icon_font($char: $icon-arrow-right);
|
||||
}
|
||||
&:hover:after {margin-left: .4em; margin-right: -.1em;}
|
||||
&:hover:after {margin-left: .5em; margin-right: -.2em;}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -325,9 +401,10 @@ html {height: 100%;}
|
|||
// Tiles
|
||||
// ------
|
||||
|
||||
.cell.tile {position: relative; z-index: 3; padding: rem-calc(20 30) !important; margin: rem-calc(10 0); color: $body-font-color;
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(10); width: calc(100% - #{rem-calc(20)}); top: 0; height: 100%; background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1);}
|
||||
|
||||
.cell.tile {position: relative; z-index: 3; padding: rem-calc(20 26) !important; margin: rem-calc(8 0); color: $body-font-color;
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(6); width: calc(100% - #{rem-calc(12)}); top: 0; height: 100%; background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); transition: box-shadow .2s ease-in-out;}
|
||||
&:hover:not(.no-link):before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.2);}
|
||||
|
||||
> * {position: relative; z-index: 2;}
|
||||
|
||||
img {display: block; max-height: rem-calc(108); margin: 0 auto;}
|
||||
|
|
@ -347,41 +424,52 @@ html {height: 100%;}
|
|||
}
|
||||
}
|
||||
|
||||
.tile-compact {position: relative; z-index: 3; padding: rem-calc(20 30) !important; margin: rem-calc(10 0); color: $body-font-color;
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(10); width: calc(100% - #{rem-calc(20)}); top: 0; height: 100%; background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); transition: box-shadow .2s ease-in-out;}
|
||||
|
||||
.tile-compact {position: relative; z-index: 3; padding: rem-calc(20 26) !important; margin: rem-calc(8 0); color: $body-font-color;
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(6); width: calc(100% - #{rem-calc(12)}); top: 0; height: 100%; background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); transition: box-shadow .2s ease-in-out;}
|
||||
&:hover:not(.no-link):before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.2);}
|
||||
|
||||
> * {position: relative; z-index: 2;
|
||||
&:last-child {margin-bottom: 0;}
|
||||
}
|
||||
|
||||
&:not(.tile-block-link) > * {max-width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {position: absolute; top: rem-calc(24); left: rem-calc(34); width: rem-calc(32);
|
||||
&:not(.tile-block-link) > * {
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(24); width: rem-calc(32);
|
||||
img {width: rem-calc(32);}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {padding: rem-calc(24 34 30) !important; margin: rem-calc(12 0);
|
||||
&:before {left: rem-calc(12); width: calc(100% - #{rem-calc(24)});}
|
||||
}
|
||||
|
||||
&.tile-block-link {padding: 0 !important;
|
||||
.block-link {padding: rem-calc(20 30);
|
||||
> * {max-width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {position: absolute; top: rem-calc(24); left: rem-calc(34); width: rem-calc(32);
|
||||
> * {
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(24); width: rem-calc(32);
|
||||
img {width: rem-calc(32);}
|
||||
}
|
||||
&:last-child {margin-bottom: 0;}
|
||||
}
|
||||
a {position: absolute; z-index: 9; display: block; left: 0; top: 0; bottom: 0; right: 0; max-width: 100%; font-size: 0; opacity: 0;}
|
||||
}
|
||||
@include breakpoint(medium) {padding: 0 !important;
|
||||
.block-link {padding: rem-calc(24 34 30);}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {padding: rem-calc(24 34 30) !important; margin: rem-calc(12 0);
|
||||
&:before {left: rem-calc(12); width: calc(100% - #{rem-calc(24)});}
|
||||
|
||||
&:not(.tile-block-link) {display: flex; flex-flow: column nowrap; justify-content: stretch;
|
||||
> * {flex: 0 0 auto; width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {width: rem-calc(32); top: rem-calc(24); left: rem-calc(34); right: auto;}
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.2);}
|
||||
&.tile-block-link {
|
||||
.block-link {padding: rem-calc(24 34 30);
|
||||
> * {max-width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {top: rem-calc(24); left: rem-calc(34); right: auto;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {}
|
||||
}
|
||||
|
||||
.tile-borderless {position: relative; z-index: 3; padding: rem-calc(20 30) !important; margin: rem-calc(10 0); color: $body-font-color; text-align: center;
|
||||
|
|
@ -402,20 +490,60 @@ html {height: 100%;}
|
|||
|
||||
.tile-extended {
|
||||
> p a {@include button(); font-size: 0.733333333333333rem; padding: rem-calc(6 8);}
|
||||
.secondary-actions {font-size: $small-font-size;}
|
||||
.secondary-actions {font-size: $small-font-size;
|
||||
a {display: block; padding-top: rem-calc(6);}
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-outside {padding-top: rem-calc(20); padding-bottom: rem-calc(20);
|
||||
.tiles-outside {padding-top: rem-calc(10); padding-bottom: rem-calc(20);
|
||||
&:first-child {
|
||||
@include breakpoint(small down) {padding-top: rem-calc(24); padding-bottom: rem-calc(6);}
|
||||
}
|
||||
@include breakpoint(medium) {padding-top: rem-calc(24); padding-bottom: rem-calc(24);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mobile slideshow tiles
|
||||
// ------
|
||||
|
||||
.slick-dots {position: relative; z-index: 3; list-style: none; display: flex; flex-flow: row nowrap; justify-content: center; margin: rem-calc(10 0); height: rem-calc(8);
|
||||
> * {flex: 0 0 #{rem-calc(20)}; width: rem-calc(20); height: rem-calc(8); margin: 0; display: flex; flex-flow: row nowrap; justify-content: center;
|
||||
button {flex: 0 0 #{rem-calc(8)}; width: rem-calc(8); height: rem-calc(8); font-size: 0; border-radius: 50%; text-align: center; background-color: #99b8dc; cursor: pointer; transition: transform .2s ease-in-out;
|
||||
&:hover {transform: scale(1.3);}
|
||||
}
|
||||
&.slick-active button {background-color: $primary-color; pointer-events: none;}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-slider {
|
||||
@include breakpoint(small down) {padding: rem-calc(0 0 1); margin-bottom: calc(#{5.6652083333333vw * 5} + #{rem-calc(96)}) !important;
|
||||
|
||||
.grid-container {padding: rem-calc(0 0 1); margin-bottom: calc(#{-5.6652083333333vw * 5} + #{rem-calc(-96)}) !important;
|
||||
|
||||
.slick-list {position: relative; z-index: 2;}
|
||||
|
||||
.slick-track {display: flex; align-items: stretch;
|
||||
.slick-slide {display: flex; flex-flow: column nowrap; justify-content: stretch; height: auto; padding: rem-calc(20 28) !important; margin: rem-calc(16 0 20 0);
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(8); width: calc(100% - #{rem-calc(16)}); }
|
||||
|
||||
> * {flex: 0 0 auto; width: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Section cta
|
||||
// ------
|
||||
|
||||
.section-cta {padding-top: rem-calc(30); padding-bottom: rem-calc(30);
|
||||
@include breakpoint(medium) {padding-top: rem-calc(45); padding-bottom: rem-calc(45);}
|
||||
.section-cta {padding-top: rem-calc(45); padding-bottom: rem-calc(45);
|
||||
// @include breakpoint(medium) {padding-top: rem-calc(45); padding-bottom: rem-calc(45);}
|
||||
|
||||
.cell > *:last-child {margin-bottom: 0;}
|
||||
|
||||
|
|
@ -423,7 +551,7 @@ html {height: 100%;}
|
|||
&:after {display: inline-block; margin-left: .3em; font-size: .8em; transition: margin .2s ease-in-out;
|
||||
@include icon_font($char: $icon-arrow-right);
|
||||
}
|
||||
&:hover:after {margin-left: .4em; margin-right: -.1em;}
|
||||
&:hover:after {margin-left: .5em; margin-right: -.2em;}
|
||||
}
|
||||
|
||||
&.bg-dark {color: $white;
|
||||
|
|
@ -436,14 +564,66 @@ html {height: 100%;}
|
|||
// Video Box
|
||||
// ------
|
||||
|
||||
.video-box {position: relative; height: 0; padding-bottom: 56.25%; margin: rem-calc(20 0 10); box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); border-radius: $global-radius; overflow: hidden;
|
||||
.video-cta {position: absolute; z-index: 2; left: 0; top: 0; width: 70%; height: 100%; padding: 10%; display: flex; flex-flow: column nowrap; justify-content: center;}
|
||||
.video-play {display: block; width: rem-calc(48); height: rem-calc(48); margin: 1em 0; text-align: center; line-height: rem-calc(48); font-size: rem-calc(26); color: $primary-color; background-color: $white; border-radius: 50%; box-shadow: #{rem-calc(0 2 8)} rgba(12,12,13,0.1); cursor: pointer; transition: transform .2s ease-in-out;
|
||||
&:before {@include icon_font($char: $icon-play);}
|
||||
#stdVideo {opacity: 0; pointer-events: none; position: absolute; z-index: 11; overflow: hidden; left: 0; top: calc(100% + 1px); width: 100%; height: 1px; background: rgba(0,0,0,.85); transition: left .3s ease-in-out, top .3s ease-in-out, width .3s ease-in-out, height .3s ease-in-out, opacity .3s ease-in-out;
|
||||
iframe, object, embed, video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
|
||||
.flex-video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
|
||||
|
||||
#stdVideo-close {z-index: 3; position: absolute; top: rem-calc(15); right: rem-calc(15); font-size: rem-calc(22); color: $white; background-color: $secondary-color; width: rem-calc(32); height: rem-calc(32); border-radius: 50%; box-shadow: #{rem-calc(0 1 3)} rgba($black,.3); cursor: pointer; text-align: center; transition: transform .15s ease-in-out;
|
||||
&:before {@include icon_font($char: $icon-close); display: block; line-height: rem-calc(32);}
|
||||
&:hover {transform: scale(1.1);}
|
||||
@include breakpoint(large) {top: rem-calc(30); right: rem-calc(30); font-size: rem-calc(36); width: rem-calc(48); height: rem-calc(48);
|
||||
&:before {line-height: rem-calc(48);}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0 12);}
|
||||
&.playing {opacity: 1; left: 0; top: 0; width: 100%; height: 100%; pointer-events: auto;}
|
||||
}
|
||||
|
||||
.video-box {position: relative;
|
||||
|
||||
.h1 {
|
||||
@include breakpoint(small down) {font-size: rem-calc(17); margin-top: rem-calc(24);}
|
||||
}
|
||||
|
||||
.video-play {display: block; position: relative; overflow: hidden; display: block; width: rem-calc(48); height: rem-calc(48); margin: 1em 0; text-align: center; line-height: rem-calc(48); font-size: rem-calc(26); color: $primary-color; background-color: $white; border-radius: 50%; box-shadow: #{rem-calc(0 2 8)} rgba(12,12,13,0.1); cursor: pointer; transition: transform .2s ease-in-out;
|
||||
&:before {@include icon_font($char: $icon-play);}
|
||||
&:hover {transform: scale(1.1);}
|
||||
|
||||
&.loading {background-color: $primary-color; color: $white;
|
||||
&:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent url(img/ajax-loader.svg) no-repeat center/86%;}
|
||||
}
|
||||
}
|
||||
|
||||
.img {position: relative; z-index: 1; height: 0; padding-bottom: 56.25%; margin: rem-calc(20 0 10); box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); border-radius: $global-radius; overflow: hidden;
|
||||
|
||||
.video-play {position: absolute; top: calc(50% - #{rem-calc(16)}); left: calc(50% - #{rem-calc(16)}); width: rem-calc(32); height: rem-calc(32); line-height: rem-calc(32); font-size: rem-calc(16); margin: 0;
|
||||
@include breakpoint(medium) {display: none;}
|
||||
}
|
||||
.video-link {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
|
||||
|
||||
&.loading {
|
||||
@include breakpoint(small down) {
|
||||
.video-play {background-color: $primary-color; color: $white;
|
||||
&:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent url(img/ajax-loader.svg) no-repeat center/86%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0 12);
|
||||
.video-cta {position: absolute; z-index: 2; left: 0; top: 0; width: 70%; height: 100%; padding: 10%; display: flex; flex-flow: column nowrap; justify-content: center;}
|
||||
}
|
||||
}
|
||||
|
||||
#video-popup {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; background: rgba(0,0,0,.8);
|
||||
.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
|
||||
.grid-container {height: 100%; position: relative; z-index: 3;}
|
||||
#stdVideo {position: relative; height: 0; padding: 0; background: $white; transition: left .3s ease-in-out, top .3s ease-in-out, width .3s ease-in-out, height .3s ease-in-out, padding .3s ease-in-out, opacity .3s ease-in-out;
|
||||
&.playing {opacity: 1; height: auto; padding-bottom: 56.25%;}
|
||||
}
|
||||
&.loading {
|
||||
&:before {content: ""; position: absolute; z-index: 2; left: calc(50% - #{rem-calc(32)}); top: calc(50% - #{rem-calc(32)}); width: rem-calc(64); height: rem-calc(64); background: transparent url(img/ajax-loader.svg) no-repeat center/100%;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -452,13 +632,24 @@ html {height: 100%;}
|
|||
// ------
|
||||
|
||||
.resources-inline-list {
|
||||
p {display: flex; flex-flow: row wrap; justify-content: space-between;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
p {display: flex; flex-flow: row wrap; justify-content: space-between;}
|
||||
}
|
||||
@include breakpoint(small down) {
|
||||
p a {display: block; padding-top: rem-calc(6);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// RSS Feed
|
||||
// ------
|
||||
|
||||
#rss-feed-source {display: none;}
|
||||
#rss-feed {}
|
||||
|
||||
|
||||
|
||||
// Social Panel
|
||||
// ------
|
||||
|
||||
|
|
@ -478,4 +669,3 @@ html {height: 100%;}
|
|||
&:hover {color: $primary-color-hover;}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,9 +68,12 @@ $print-transparent-backgrounds: true;
|
|||
@mixin icon_font($char:"") {font-family:'icomoon'; content: $char; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
|
||||
|
||||
$icon-play: "\e900";
|
||||
$icon-close: "\e909";
|
||||
$icon-download: "\e901";
|
||||
$icon-arrow-down: "\e902";
|
||||
$icon-arrow-right: "\e903";
|
||||
$icon-arrow-up: "\e902";
|
||||
$icon-arrow-down: "\e90b";
|
||||
$icon-arrow-left: "\e903";
|
||||
$icon-arrow-right: "\e90a";
|
||||
$icon-irc: "\e904";
|
||||
$icon-mail: "\e905";
|
||||
$icon-telegram: "\e906";
|
||||
|
|
@ -98,7 +101,7 @@ $xy-grid: true;
|
|||
$grid-container: $global-width;
|
||||
$grid-columns: 12;
|
||||
$grid-margin-gutters: (
|
||||
small: 20px,
|
||||
small: 12px,
|
||||
medium: 24px
|
||||
);
|
||||
$grid-padding-gutters: $grid-margin-gutters;
|
||||
|
|
@ -118,11 +121,11 @@ $header-lineheight: 1;
|
|||
$header-margin-bottom: .6em;
|
||||
$header-styles: (
|
||||
'small': (
|
||||
'h1': ('font-size': 36, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h2': ('font-size': 28, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h3': ('font-size': 22, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h4': ('font-size': 17, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h5': ('font-size': 15, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h1': ('font-size': 28, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h2': ('font-size': 24, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h3': ('font-size': 17, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h4': ('font-size': 15, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h5': ('font-size': 13, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
|
||||
'h6': ('font-size': 13, 'line-height': $header-lineheight * 1.1, 'margin-top': 0, 'margin-bottom': $header-margin-bottom)
|
||||
),
|
||||
'medium': (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<svg class="lds-spinner" width="32px" height="32px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background-image: none; background-position: initial initial; background-repeat: initial initial;"><g transform="rotate(0 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(30 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(60 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(90 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(120 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(150 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(180 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(210 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(240 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(270 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(300 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(330 50 50)">
|
||||
<rect x="47" y="24" rx="0" ry="0" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g></svg>
|
||||
|
После Ширина: | Высота: | Размер: 3.3 KiB |
|
|
@ -6,8 +6,8 @@
|
|||
<mask id="publish-on-firefox-b" fill="#fff">
|
||||
<use xlink:href="#publish-on-firefox-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#publish-on-firefox-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#publish-on-firefox-b)">
|
||||
<use fill="#0a0a0a" fill-rule="nonzero" xlink:href="#publish-on-firefox-a"/>
|
||||
<g fill="#0a0a0a" fill-rule="nonzero" mask="url(#publish-on-firefox-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 1.4 KiB После Ширина: | Высота: | Размер: 1.4 KiB |
|
|
@ -6,8 +6,8 @@
|
|||
<mask id="publish-on-own-b" fill="#fff">
|
||||
<use xlink:href="#publish-on-own-a"/>
|
||||
</mask>
|
||||
<use fill="#0060DF" fill-rule="nonzero" xlink:href="#publish-on-own-a"/>
|
||||
<g fill="#0060DF" fill-rule="nonzero" mask="url(#publish-on-own-b)">
|
||||
<use fill="#0a0a0a" fill-rule="nonzero" xlink:href="#publish-on-own-a"/>
|
||||
<g fill="#0a0a0a" fill-rule="nonzero" mask="url(#publish-on-own-b)">
|
||||
<rect width="24" height="24"/>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 2.2 KiB После Ширина: | Высота: | Размер: 2.2 KiB |
|
|
@ -95,7 +95,7 @@
|
|||
"mi": 1,
|
||||
"oA": 0,
|
||||
"oAP": "/scripts.min.js",
|
||||
"oF": 2,
|
||||
"oF": 3,
|
||||
"sC": 3,
|
||||
"tS": 0
|
||||
},
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
},
|
||||
"projectSettings": {
|
||||
"abortBuildOnError": 1,
|
||||
"alwaysUseExternalServer": 0,
|
||||
"alwaysUseExternalServer": 1,
|
||||
"animateCSSInjections": 1,
|
||||
"autoBuildNewItems": 1,
|
||||
"autoprefixerEnableIEGrid": 0,
|
||||
|
|
@ -1531,7 +1531,7 @@
|
|||
}
|
||||
},
|
||||
"esLintSourceType": 0,
|
||||
"externalServerAddress": "http://127.0.0.1:4000/extension-workshop/",
|
||||
"externalServerAddress": "http://127.0.0.1:4000/",
|
||||
"gitIgnoreBuildFolder": 1,
|
||||
"hideConfigFile": 0,
|
||||
"jsCheckerReservedNamesString": "",
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@
|
|||
// whenever youtube callback was called = deferred resolved your custom function will be executed with YT as an argument
|
||||
YTdeferred.done(function(YT) {
|
||||
|
||||
$(document).video_cta({yt_object: YT, cta: '.video-cta'});
|
||||
$(document).video_cta({yt_object: YT, cta: '.video-button'});
|
||||
$(document).video_cta({yt_object: YT, cta: '.video-link'});
|
||||
|
||||
$(document).video_cta({yt_object: YT, cta: 'a[title|="Open Popup Video"]', youtube_id_data: 'href', target: $('#video-popup')});
|
||||
|
||||
if ($('.video-banner').length) {
|
||||
$('.video-banner').each(function() {
|
||||
$(this).video_banner({yt_object: YT});
|
||||
|
|
@ -52,10 +52,14 @@
|
|||
container : '<div id="stdVideo"><div id="stdVideo-player"></div></div>',
|
||||
close : '<div id="stdVideo-close"></div>',
|
||||
cta : '.video-cta',
|
||||
youtube_id_data : 'youtube_id',
|
||||
target_data : 'youtube_target',
|
||||
target : null,
|
||||
}, options);
|
||||
|
||||
var yt_player;
|
||||
var $container;
|
||||
var $target = settings.target;
|
||||
var $close;
|
||||
var done = false;
|
||||
var playing = false;
|
||||
|
|
@ -63,12 +67,18 @@
|
|||
var is_android = /(android)/i.test(navigator.userAgent);
|
||||
var mobileOS = is_ios || is_android;
|
||||
|
||||
if (settings.target) {
|
||||
settings.target.find('.bg').on('click', closeVideo);
|
||||
}
|
||||
|
||||
this.on('click', settings.cta, function(e) {
|
||||
e.preventDefault();
|
||||
var $link = $(this);
|
||||
$target = settings.target == null ? $('#' + $link.data(settings.target_data)) : settings.target;
|
||||
$link.addClass('loading');
|
||||
loadVideo($link.data('id'));
|
||||
$target.addClass('loading');
|
||||
var id = settings.youtube_id_data == 'href' ? $link.attr('href') : $link.data(settings.youtube_id_data);
|
||||
loadVideo(id);
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -81,7 +91,7 @@
|
|||
CUED
|
||||
*/
|
||||
function onPlayerStateChange(event) {
|
||||
|
||||
console.log(event.data);
|
||||
// Open video player when playing
|
||||
if (event.data == settings.yt_object.PlayerState.PLAYING && !playing) {
|
||||
openVideo();
|
||||
|
|
@ -107,9 +117,15 @@
|
|||
if (!done) {
|
||||
$container = $(settings.container);
|
||||
$close = $(settings.close);
|
||||
$container.appendTo($('body'));
|
||||
$close.appendTo($container);
|
||||
|
||||
if (settings.target) {
|
||||
$container.appendTo($target.find('.cell'));
|
||||
$target.velocity('fadeIn');
|
||||
} else {
|
||||
$container.appendTo($target);
|
||||
}
|
||||
|
||||
// creating a player: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
|
||||
yt_player = new settings.yt_object.Player('stdVideo-player', {
|
||||
height: '390',
|
||||
|
|
@ -133,9 +149,7 @@
|
|||
$close.on('click', closeVideo);
|
||||
|
||||
} else {
|
||||
|
||||
yt_player.loadVideoById({'videoId': id});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -144,6 +158,7 @@
|
|||
playing = true;
|
||||
$container.addClass('playing');
|
||||
$(settings.cta).removeClass('loading');
|
||||
$target.removeClass('loading');
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -151,6 +166,12 @@
|
|||
yt_player.stopVideo();
|
||||
playing = false;
|
||||
$container.removeClass('playing');
|
||||
if (settings.target) {$target.velocity('fadeOut');}
|
||||
setTimeout(function() {
|
||||
done = false;
|
||||
yt_player = null;
|
||||
$container.remove();
|
||||
},1000);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,17 +70,17 @@ jQuery(document).ready(function($) {
|
|||
// ** the plugin code is found in /assets/slick/ **
|
||||
// ***** ******
|
||||
|
||||
if ($('.slider.mobile').length) {
|
||||
$('.slider.mobile').slick({
|
||||
if ($('.mobile-slider .grid-container').length) {
|
||||
$('.mobile-slider .grid-container').slick({
|
||||
mobileFirst: true,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '40px',
|
||||
centerPadding: '0',
|
||||
slidesToShow: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 760,
|
||||
breakpoint: 640,
|
||||
settings: 'unslick'
|
||||
}
|
||||
]
|
||||
|
|
@ -88,6 +88,15 @@ jQuery(document).ready(function($) {
|
|||
}
|
||||
|
||||
|
||||
|
||||
// 7. RSS Feed
|
||||
if ($('#rss-feed').length && $('#rss-feed-source').length) {
|
||||
$('#rss-feed').rss_feed({source: $('#rss-feed-source')});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Init Breakpoint Listeners
|
||||
// ------------------
|
||||
|
||||
|
|
@ -149,9 +158,48 @@ jQuery(document).ready(function($) {
|
|||
|
||||
$.fn.mobileMenu = function() {
|
||||
var $container = this;
|
||||
var $nav = $container.find('nav');
|
||||
var $jump = $container.find('.jump-link');
|
||||
var $links = $container.find('#page-nav-links');
|
||||
var open = $nav.hasClass('open');
|
||||
var $window = $(window);
|
||||
|
||||
if (!open) {
|
||||
$links.velocity('slideUp', {duration: 0});
|
||||
}
|
||||
|
||||
$jump.on('click', function() {
|
||||
if (open) {
|
||||
$nav.removeClass('open');
|
||||
$links.velocity('slideUp');
|
||||
} else {
|
||||
$nav.addClass('open');
|
||||
$links.velocity('slideDown', {complete: function() {
|
||||
|
||||
if ($nav.outerHeight() + $nav.offset().top > $window.height() + $window.scrollTop()) {
|
||||
$nav.velocity('scroll', {duration: 900, offset: -($nav.outerHeight() - 16)});
|
||||
}
|
||||
}});
|
||||
}
|
||||
open = !open;
|
||||
});
|
||||
|
||||
$.subscribe("scrollto", function(obj, anchor) {
|
||||
|
||||
if (anchor.parent().attr('id') == 'page-nav-links') {
|
||||
$nav.removeClass('open');
|
||||
$links.velocity('slideUp');
|
||||
open = false;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
kill: function() {}
|
||||
kill: function() {
|
||||
$jump.off('click');
|
||||
$nav.removeClass('open');
|
||||
$links.velocity('slideDown', {duration: 0});
|
||||
$window.off('resize.mobileMenu');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -160,9 +208,14 @@ jQuery(document).ready(function($) {
|
|||
|
||||
$.fn.desktopMenu = function() {
|
||||
var $container = this;
|
||||
var $anchors = $container.find("a[href^='#']");
|
||||
|
||||
var overflow_scroll = $anchors.overflow_x_scroll();
|
||||
|
||||
return {
|
||||
kill: function() { }
|
||||
kill: function() {
|
||||
overflow_scroll.kill();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -172,6 +225,7 @@ jQuery(document).ready(function($) {
|
|||
$.fn.allMenu = function() {
|
||||
var $window = $(window);
|
||||
var $container = this;
|
||||
var $anchors = $container.find("a[href^='#']");
|
||||
|
||||
$window.on('scroll.persistant', function() {
|
||||
if ($window.scrollTop() >= $container.offset().top ) {
|
||||
|
|
@ -179,7 +233,130 @@ jQuery(document).ready(function($) {
|
|||
} else {
|
||||
$container.removeClass('sticky');
|
||||
}
|
||||
|
||||
updateAnchorActive();
|
||||
});
|
||||
|
||||
function updateAnchorActive() {
|
||||
var len = 0;
|
||||
$anchors.each(function() {
|
||||
var $self = $(this);
|
||||
var $el = $($self.attr('href'));
|
||||
if ($el.length && isInFocus($el, .75)) {
|
||||
$anchors.removeClass('active');
|
||||
$self.addClass('active');
|
||||
len++;
|
||||
}
|
||||
});
|
||||
if (!len) {$anchors.removeClass('active');}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 1.d Overflow X scroll
|
||||
// ------
|
||||
|
||||
$.fn.overflow_x_scroll = function(options) {
|
||||
var $links = this;
|
||||
var $container = $links.parent();
|
||||
var $container_parent = $container.parent();
|
||||
$container.after('<div class="fwd"></div>');
|
||||
$container.before('<div class="bak"></div>');
|
||||
var track_w = w();
|
||||
var container_w = $container.outerWidth();
|
||||
var padding = 32;
|
||||
var btn_lock = false;
|
||||
|
||||
function w() {
|
||||
var len = 0;
|
||||
$links.each(function() {
|
||||
len += $(this).outerWidth(true);
|
||||
});
|
||||
return len;
|
||||
}
|
||||
|
||||
function update() {
|
||||
var position = $links.first().position();
|
||||
container_w = $container.outerWidth();
|
||||
track_w = w();
|
||||
|
||||
if (track_w > container_w) {
|
||||
$container_parent.addClass('scrollable').removeClass('end start');
|
||||
if (position.left >= 0) {
|
||||
$container_parent.addClass('start');
|
||||
} else if (track_w + position.left <= container_w) {
|
||||
$container_parent.addClass('end');
|
||||
}
|
||||
|
||||
} else {
|
||||
$container.attr('style','');
|
||||
$container_parent.removeClass('scrollable end start');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function scroll(dir) {
|
||||
if (!btn_lock) {
|
||||
btn_lock = true;
|
||||
var offset = 0;
|
||||
var $scroll_to = dir < 0 ? $links.first() : $links.last(); // default if loop below doesn't work out
|
||||
|
||||
$links.each(function() {
|
||||
var $this = $(this);
|
||||
if (dir < 0 && $this.position().left < 0) {
|
||||
$scroll_to = $this;
|
||||
// } else if (dir < 0 && $this.position().left >= 0) {
|
||||
return false;
|
||||
} else if (dir > 0 && $this.position().left + $this.outerWidth() > container_w - $links.first().position().left) {
|
||||
$scroll_to = $this;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (dir > 0 && $scroll_to != $links.last()) {
|
||||
offset -= padding;
|
||||
} else if (dir < 0 && $scroll_to != $links.first()) {
|
||||
offset -= padding;
|
||||
}
|
||||
|
||||
if ($scroll_to) {
|
||||
$scroll_to.velocity('scroll', {
|
||||
container: $container,
|
||||
duration: 600,
|
||||
offset: offset,
|
||||
axis: 'x',
|
||||
easing: 'easeInOutSine',
|
||||
complete: function() {
|
||||
btn_lock = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
btn_lock = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$container_parent.find('.fwd').on('click', function() {
|
||||
scroll(1);
|
||||
});
|
||||
|
||||
$container_parent.find('.bak').on('click', function() {
|
||||
scroll(-1);
|
||||
});
|
||||
|
||||
$container.on('scroll.xscroll', update);
|
||||
$(window).on('resize.xscroll', update).on('scroll.xscroll', update);
|
||||
setTimeout(update, 500);
|
||||
|
||||
return {
|
||||
kill: function() {
|
||||
$container_parent.find('.fwd').off('click').remove();
|
||||
$container_parent.find('.bak').off('click').remove();
|
||||
$container.off('scroll.xscroll');
|
||||
$(window).off('resize.xscroll').off('scroll.xscroll');
|
||||
$container_parent.removeClass('scrollable end start');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -201,10 +378,12 @@ jQuery(document).ready(function($) {
|
|||
});
|
||||
|
||||
this.on('click.scrollto', function(event) {
|
||||
var id = $(this).attr('href').split('#')[1];
|
||||
var $anchor = $(this);
|
||||
var id = $anchor.attr('href').split('#')[1];
|
||||
|
||||
if ($('#'+id).length && !$(this).hasClass(settings.exclude)) {
|
||||
if ($('#'+id).length && !$anchor.hasClass(settings.exclude)) {
|
||||
event.preventDefault();
|
||||
$.publish("scrollto", [ $anchor ]);
|
||||
var $el = $('#'+id);
|
||||
var top = id == 'top' ? $el.offset().top : $el.offset().top - offset;
|
||||
$('html').velocity('scroll', {duration: 900, offset: top});
|
||||
|
|
@ -300,6 +479,43 @@ jQuery(document).ready(function($) {
|
|||
|
||||
|
||||
|
||||
// 7. RSS Feed
|
||||
// ------
|
||||
|
||||
$.fn.rss_feed = function(options) {
|
||||
var settings = $.extend( {
|
||||
source : null,
|
||||
container : '<div class="cell small-12 medium-4 tile"></div>',
|
||||
}, options);
|
||||
|
||||
var $container = this;
|
||||
|
||||
// console.log(settings.source.html()); // <h4 class="feed-item-title"><a href="https://blog.mozilla.org/addons/2018/10/26/firefox-chrome-and-the-future-of-trustworthy-extensions/" target="_blank">Firefox, Chrome and the Future of Trustworthy Extensions</a></h4><p class="feed-item-desc"></p><p>Browser extensions are wonderful. Nearly every day I come across a new Firefox extension that customizes my browser in some creative way I’d never even considered. Some provide amusement for a short time, while others have become indispensable to my … <a class="go" href="https://blog.mozilla.org/addons/2018/10/26/firefox-chrome-and-the-future-of-trustworthy-extensions/">Continue reading</a></p><p>The post <a rel="nofollow" href="https://blog.mozilla.org/addons/2018/10/26/firefox-chrome-and-the-future-of-trustworthy-extensions/">Firefox, Chrome and the Future of Trustworthy Extensions</a> appeared first on <a rel="nofollow" href="https://blog.mozilla.org/addons">Mozilla Add-ons Blog</a>.</p><p></p><h4 class="feed-item-title"><a href="https://blog.mozilla.org/addons/2018/10/15/apply-to-join-the-featured-extensions-advisory-board-2/" target="_blank">Apply to Join the Featured Extensions Advisory Board</a></h4><p class="feed-item-desc"></p><p>Do you love extensions? Do you have a keen sense of what makes a great extension? Want to help users discover extensions that will improve how they experience the web? If so, please consider applying to join our Featured Extensions … <a class="go" href="https://blog.mozilla.org/addons/2018/10/15/apply-to-join-the-featured-extensions-advisory-board-2/">Continue reading</a></p><p>The post <a rel="nofollow" href="https://blog.mozilla.org/addons/2018/10/15/apply-to-join-the-featured-extensions-advisory-board-2/">Apply to Join the Featured Extensions Advisory Board</a> appeared first on <a rel="nofollow" href="https://blog.mozilla.org/addons">Mozilla Add-ons Blog</a>.</p><p></p><h4 class="feed-item-title"><a href="https://blog.mozilla.org/addons/2018/10/01/octobers-featured-extensions-2/" target="_blank">October’s Featured Extensions</a></h4><p class="feed-item-desc"></p><p>Pick of the Month: Default Bookmark Folder by Teddy Gustiaux Do you keep multiple bookmark folders? This extension makes it simple to add new bookmarks to specific folders. “So useful and powerful. I no longer have to change bookmark locations … <a class="go" href="https://blog.mozilla.org/addons/2018/10/01/octobers-featured-extensions-2/">Continue reading</a></p><p>The post <a rel="nofollow" href="https://blog.mozilla.org/addons/2018/10/01/octobers-featured-extensions-2/">October’s Featured Extensions</a> appeared first on <a rel="nofollow" href="https://blog.mozilla.org/addons">Mozilla Add-ons Blog</a>.</p><p></p><div class="rss2html-note" style="float: right;"><a href="https://rss.bloople.net/" style="color: #000000;">Powered by rss2html</a></div><div class="rss2html-note-clear" style="clear: right; height: 0;"></div>
|
||||
var items = settings.source.html().split('<p></p>');
|
||||
$.each(items, function(i, item) {
|
||||
if (item.indexOf('rss2html-note') !== -1) {
|
||||
return true;
|
||||
}
|
||||
var elements = item.split('<p class="feed-item-desc"></p>');
|
||||
var title = elements[0];
|
||||
var description = elements[1];
|
||||
var title_elements = $($.parseHTML(title)).text();
|
||||
var $description_elements = $(description);
|
||||
var $cell = $(settings.container);
|
||||
|
||||
$cell.append($('<h4>'+title_elements+'</h4>')).append($description_elements);
|
||||
$description_elements.last().remove();
|
||||
|
||||
$cell.append($('<p class="continue"></p>'));
|
||||
$cell.find('p a:last-child').appendTo($cell.find('.continue'));
|
||||
$container.append($cell);
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Utilities
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Загрузка…
Ссылка в новой задаче