Master template progress
This commit is contained in:
Lance Cummings
Родитель
59c60b2611
Коммит
c81bd4c235
|
|
@ -244,8 +244,7 @@ PLATFORMS
|
|||
DEPENDENCIES
|
||||
github-pages
|
||||
jekyll-feed (~> 0.6)
|
||||
minima (~> 2.0)
|
||||
tzinfo-data
|
||||
|
||||
BUNDLED WITH
|
||||
1.16.6
|
||||
1.17.2
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
- title: "Master Template"
|
||||
url: "/content-guidelines/master-template/"
|
||||
target: "_self"
|
||||
|
||||
- title: "Example"
|
||||
url: "/content-guidelines/example/"
|
||||
target: "_self"
|
||||
|
||||
- title: "More Tips"
|
||||
url: "http://firefox.com"
|
||||
target: "_blank"
|
||||
|
|
@ -1,10 +1,32 @@
|
|||
<header class="site-header" role="banner">
|
||||
<div class="grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12">
|
||||
<h3 class="logo"><a href="{{ "/" | relative_url }}">Extension Workshop</a></h3>
|
||||
<nav class="site-nav">
|
||||
<a href="https://addons.mozilla.org/en-US/firefox/#login" class="button">Register or Log in</a>
|
||||
</nav>
|
||||
<h3 class="logo">
|
||||
<a href="{{ "/" | relative_url }}">Content
|
||||
<br>Guidelines</a>
|
||||
<small class="tagline">Optimize Your Project Page</small>
|
||||
</h3>
|
||||
|
||||
<div class="site-nav-container">
|
||||
<nav class="site-nav" tabindex="1">
|
||||
<ul class="pages">
|
||||
{% for item in site.data.content-guidelines-pages %}
|
||||
{% if page.url == item.url %}
|
||||
<li class="current"><a href="{{ item.url }}" target="{{ item.target }}">{{ item.title }}</a></li>
|
||||
{% else %}
|
||||
<li><a href="{{ item.url }}" target="{{ item.target }}">{{ item.title }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<p><a href="http://firefox.com" class="button">Edit Product Page</a></p>
|
||||
<p><a href="{{ "/" | relative_url }}" class="back">Extension Workshop</a></p>
|
||||
<p class="site-metadata"><a href="">Site Feedback</a>
|
||||
<br><a href="">Changelog</a> v0.6.8
|
||||
<br><a href="">Privacy Policy</a>
|
||||
</p>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<header class="site-header landing" role="banner">
|
||||
<div class="grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12">
|
||||
<h3 class="logo"><a href="{{ "/" | relative_url }}">Extension Workshop</a></h3>
|
||||
<nav class="site-nav">
|
||||
<a href="https://addons.mozilla.org/en-US/firefox/#login" class="button">Register or Log in</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -4,14 +4,15 @@
|
|||
{%- include head.html -%}
|
||||
|
||||
<body class="site">
|
||||
<div class="site-wrapper">
|
||||
{%- include header.html -%}
|
||||
|
||||
{%- include header.html -%}
|
||||
<main class="site-content" aria-label="Content">
|
||||
|
||||
<main class="site-content" aria-label="Content">
|
||||
{{ content }}
|
||||
|
||||
{{ content }}
|
||||
|
||||
</main>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{%- include footer.html -%}
|
||||
|
||||
|
|
@ -22,10 +23,7 @@
|
|||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- <script type="text/javascript" src="{{ "/assets/scripts/rssfeed.pkg.js?ver=2018.11.23" | relative_url }}"></script> -->
|
||||
<script type="text/javascript" src="{{ "/assets/slick/slick.min.js?ver=2018.11.23" | relative_url }}"></script>
|
||||
<script type="text/javascript" src="{{ "/assets/scripts/scripts.min.js?ver=2018.11.23" | relative_url }}"></script>
|
||||
<script src="{{ "/assets/scripts/basket-client.js" | relative_url }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
layout: landing
|
||||
---
|
||||
|
||||
<div class="home">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
|
||||
|
||||
{%- include head.html -%}
|
||||
|
||||
<body class="site">
|
||||
|
||||
{%- include landing-header.html -%}
|
||||
|
||||
<main class="site-content landing" aria-label="Content">
|
||||
|
||||
{{ content }}
|
||||
|
||||
</main>
|
||||
|
||||
{%- 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/scripts/rssfeed.pkg.js?ver=2018.11.23" | relative_url }}"></script> -->
|
||||
<script type="text/javascript" src="{{ "/assets/slick/slick.min.js?ver=2018.11.23" | relative_url }}"></script>
|
||||
<script type="text/javascript" src="{{ "/assets/scripts/scripts.min.js?ver=2018.11.23" | relative_url }}"></script>
|
||||
<script src="{{ "/assets/scripts/basket-client.js" | relative_url }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
layout: default
|
||||
---
|
||||
<article class="post">
|
||||
<div class="grid-container grid-x grid-padding-x panel">
|
||||
<div class="grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12">
|
||||
|
||||
<header class="post-header">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,245 @@
|
|||
/************************************************
|
||||
|
||||
Stylesheet: Conteng Guidelines Stylesheet
|
||||
|
||||
*************************************************/
|
||||
|
||||
.site-wrapper {
|
||||
|
||||
|
||||
// Header
|
||||
// ------
|
||||
|
||||
@include breakpoint(medium) {display: flex; flex-flow: row nowrap;
|
||||
.site-header {flex: 0 0 #{rem-calc(200)}; width: rem-calc(200);}
|
||||
.site-content {flex: 1 1 auto;}
|
||||
}
|
||||
@include breakpoint(xlarge) {
|
||||
.site-header {flex: 0 0 #{rem-calc(230)}; width: rem-calc(230);}
|
||||
}
|
||||
|
||||
.site-header {font-size: rem-calc(11); padding-bottom: rem-calc(50); position: relative; z-index: 2;
|
||||
@include breakpoint(medium) {box-shadow: #{rem-calc(0 0 16)} rgba(12,12,13,0.1); padding-top: rem-calc(30); padding-bottom: rem-calc(30);}
|
||||
@include breakpoint(xlarge) {padding-top: rem-calc(45); padding-bottom: rem-calc(45); font-size: rem-calc(13);}
|
||||
}
|
||||
|
||||
.logo {font-size: rem-calc(13); line-height: 1.1; margin: rem-calc(8 0 24);
|
||||
a {padding: rem-calc(15 0 3 50);
|
||||
&:before {content: ""; position: absolute; left: 0; top: rem-calc(8); display: block; width: rem-calc(41); height: rem-calc(42); background: transparent url(img/firefox-logo.png) no-repeat center/contain;}
|
||||
}
|
||||
|
||||
small.tagline {font-size: rem-calc(11); font-weight: $global-weight-normal; color: inherit; padding: rem-calc(0 0 14 50);}
|
||||
|
||||
@include breakpoint(medium) {font-size: rem-calc(13);
|
||||
a {padding: rem-calc(15 0 14 43); display: block;
|
||||
&:before {top: rem-calc(8); width: rem-calc(37); height: rem-calc(38);}
|
||||
}
|
||||
small.tagline {display: block; padding: rem-calc(5 0 14 0);}
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge) {font-size: rem-calc(15);
|
||||
a {padding: rem-calc(15 0 17 50);
|
||||
&:before {width: rem-calc(43); height: rem-calc(44);}
|
||||
}
|
||||
small.tagline {font-size: rem-calc(13);}
|
||||
}
|
||||
@include breakpoint(small down) {
|
||||
br {display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav-container {
|
||||
.site-nav:focus {outline: none;}
|
||||
|
||||
ul.pages {list-style: none; margin: 0; font-size: rem-calc(13);
|
||||
li {margin: 0;}
|
||||
a {color: $body-font-color; display: inline-block; padding: .25rem 0;}
|
||||
a[target=_blank]:after {color: $primary-color; padding-left: .3em;
|
||||
@include icon_font($char:$icon-newtab);
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0 30);
|
||||
.current a {color: $primary-color;}
|
||||
}
|
||||
@include breakpoint(xlarge) {font-size: rem-calc(15);}
|
||||
@include breakpoint(small down) {
|
||||
li.current {display: block; pointer-events: none;}
|
||||
}
|
||||
}
|
||||
|
||||
.button {display: block;
|
||||
@include breakpoint(large down) {font-size: 0.733333333333333rem; padding: rem-calc(6 8);}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {position: absolute; z-index: 10; top: rem-calc(66); left: rem-calc(12); width: calc(100% - #{rem-calc(24)}); min-height: rem-calc(75);
|
||||
&:before {content: ""; display: block; position: fixed; left: 0; top: rem-calc(-75); width: 100%; height: rem-calc(75); pointer-events: none; opacity: 0; background-image: linear-gradient(rgba($black, .333) 0, rgba($black, 0) 100%); transition: top 0 ease-in-out;}
|
||||
|
||||
.site-nav {padding: rem-calc(12 15); background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); position: absolute; left: 0; top: rem-calc(12); width: 100%; max-height: calc(100vh - #{rem-calc(24)});
|
||||
|
||||
&:after {@include icon_font($char: $icon-arrow-down); position: absolute; font-size: rem-calc(18); line-height: 1; top: rem-calc(17); right: rem-calc(15);}
|
||||
p, li {display: none;}
|
||||
|
||||
p {margin: 0; padding: rem-calc(15 0 0);
|
||||
&:first-of-type,
|
||||
&:last-of-type {padding: rem-calc(24 0 0);}
|
||||
|
||||
}
|
||||
|
||||
.button {margin: 0;}
|
||||
|
||||
&.open {
|
||||
&:after {@include icon_font($char: $icon-arrow-up);}
|
||||
&:focus {overflow-y: scroll;}
|
||||
.current a {color: $primary-color;}
|
||||
}
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
&:before {top: rem-calc(-20); opacity: 1; transition: top .2s ease-in-out, opacity .2s ease-in-out;}
|
||||
|
||||
.site-nav {position: fixed; top: rem-calc(12); left: rem-calc(12); width: calc(100% - #{rem-calc(24)});}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
&:before {@include icon_font($char:$icon-back); padding-right: .3em;}
|
||||
}
|
||||
|
||||
.site-metadata {color: $dark-gray; margin: 0;
|
||||
@include breakpoint(medium) {margin: rem-calc(30 0);}
|
||||
}
|
||||
|
||||
|
||||
// Page Content
|
||||
// ------
|
||||
|
||||
.site-content {
|
||||
|
||||
.post {padding: rem-calc(24 0);
|
||||
@include breakpoint(medium) {padding: rem-calc(45 0);}
|
||||
@include breakpoint(large) {padding: #{rem-calc(45)} 4.166666666666667%;}
|
||||
@include breakpoint(xlarge) {padding: #{rem-calc(60)} 8.333333333333333%;}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
.grid-container {padding: 0; margin-left: rem-calc(-6); margin-right: rem-calc(-6);
|
||||
@include breakpoint(medium) {margin-left: rem-calc(-12); margin-right: rem-calc(-12);}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Full Width Image & Half Width Images
|
||||
// ------
|
||||
|
||||
.image-with-caption {font-size: $small-font-size; color: $dark-gray; margin: rem-calc(12 0);
|
||||
img {display: block; width: 100%; margin-bottom: rem-calc(6);}
|
||||
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0);
|
||||
img {margin-bottom: rem-calc(8);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Video Popup Thumbnail
|
||||
// ------
|
||||
|
||||
.video-popup {margin: rem-calc(12 0); text-align: center;
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0);}
|
||||
|
||||
a {display: block; position: relative; font-size: rem-calc(22);
|
||||
&:before, &:after {display: block; position: absolute; left: calc(50% - #{rem-calc(20)}); top: calc(50% - #{rem-calc(20)}); width: rem-calc(40); height: rem-calc(40);}
|
||||
&:before {content: ""; background-color: $white; border-radius: 50%; box-shadow: #{rem-calc(0 2 8)} rgba(12,12,13,0.1); cursor: pointer; transition: box-shadow .2s ease-in-out;}
|
||||
&:after {@include icon_font($char: $icon-play); text-align: center; line-height: rem-calc(38); color: $primary-color; transition: color .2s ease-in-out;}
|
||||
&:hover:before {box-shadow: #{rem-calc(0 2 8)} rgba(12,12,13,0.33);}
|
||||
&:hover:after {color: $primary-color-hover;}
|
||||
}
|
||||
img {display: block; width: 100%; margin-bottom: rem-calc(6);}
|
||||
|
||||
.medium-6 {
|
||||
|
||||
@include breakpoint(medium) {margin-bottom: rem-calc(40);
|
||||
a {margin-top: rem-calc(40); max-width: rem-calc(180); margin-right: auto; margin-left: auto; font-size: rem-calc(13);
|
||||
&:before, &:after {left: calc(50% - #{rem-calc(12)}); top: calc(50% - #{rem-calc(12)}); width: rem-calc(24); height: rem-calc(24);}
|
||||
&:after {line-height: rem-calc(23);}
|
||||
}
|
||||
img {border-radius: $global-radius;}
|
||||
h1, h2, h3, h4, h5, h6, p {max-width: rem-calc(360); margin-right: auto; margin-left: auto;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Image Grid
|
||||
// ------
|
||||
|
||||
.img-grid {margin: rem-calc(12 0 6);
|
||||
p {margin-bottom: rem-calc(12);}
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0 12);
|
||||
p {margin-bottom: rem-calc(24);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Do this, not this
|
||||
// ------
|
||||
|
||||
.example {background-color: $light-gray; padding: rem-calc(7); margin: rem-calc(0 -7 15); border-radius: $global-radius;
|
||||
p, ul, ol {margin-bottom: .5rem;}
|
||||
> *:last-child {margin-bottom: 0;}
|
||||
}
|
||||
span.example {display: inline-block; padding: rem-calc(0 7); margin: 0;}
|
||||
|
||||
.do-this, .not-this {background-color: $lighter-gray; margin: rem-calc(12 0); padding: rem-calc(12); border: 1px solid darken($light-gray,5%);
|
||||
> *:last-child {margin-bottom: 0;}
|
||||
|
||||
header {padding: rem-calc(8 0 6);
|
||||
> *:first-child:before {display: inline; margin-right: .5rem;}
|
||||
}
|
||||
|
||||
.example {background-color: darken($light-gray,5%);}
|
||||
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0); padding: rem-calc(24);
|
||||
header {padding: rem-calc(0 0 12);}
|
||||
}
|
||||
|
||||
& + p, & + h1, & + h2, & + h3, & + h4, & + h5, & + h6, & + ol, & + ul {margin-top: 1.5em;}
|
||||
}
|
||||
|
||||
.do-this {border-top: #{rem-calc(5)} solid #31C430;
|
||||
header {
|
||||
* {color: #31C430;}
|
||||
> *:first-child:before {@include icon_font($char: $icon-do); color: #31C430;}
|
||||
}
|
||||
}
|
||||
.not-this {border-top: #{rem-calc(5)} solid #D70022;
|
||||
header {
|
||||
* {color: #D70022;}
|
||||
> *:first-child:before {@include icon_font($char: $icon-dont); color: #D70022;}
|
||||
}
|
||||
}
|
||||
|
||||
.do-this-not-this {
|
||||
.do-this, .not-this {margin: rem-calc(6 0);}
|
||||
|
||||
@include breakpoint(medium) {margin: rem-calc(24 0);
|
||||
.do-this, .not-this {margin: 0;}
|
||||
}
|
||||
|
||||
& + p, & + h1, & + h2, & + h3, & + h4, & + h5, & + h6, & + ol, & + ul {margin-top: 1.5em;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Moz Footer
|
||||
// ------
|
||||
|
||||
.site-wrapper + .site-footer {
|
||||
.mzp-l-content {
|
||||
@include breakpoint(xxlarge) {margin-left: rem-calc(230); padding: 0 8.333333333333333%;}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,641 @@
|
|||
/************************************************
|
||||
|
||||
Stylesheet: Landing Page Stylesheet
|
||||
|
||||
*************************************************/
|
||||
|
||||
|
||||
// Header
|
||||
// ------
|
||||
|
||||
.site-header.landing {position: absolute; z-index: 10; left: 0; top: 0; width: 100%; padding: rem-calc(12 0);
|
||||
.cell {display: flex; flex-flow: row nowrap; justify-content: space-between;}
|
||||
|
||||
.site-nav {padding: rem-calc(9 0 8);
|
||||
@include breakpoint(small down) {display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Page Navigation
|
||||
// ------
|
||||
|
||||
.page-nav-container {position: absolute; z-index: 10; top: calc(100% - #{rem-calc(38)}); left: 0; width: 100%;
|
||||
* {transform: translate3d(0,0,0);}
|
||||
.page-nav {position: absolute; left: 0; top: 0; width: 100%;
|
||||
&:before {content: ""; display: block; position: absolute; left: 0; top: rem-calc(-75); width: 100%; height: rem-calc(75); pointer-events: none; opacity: 0; background-image: linear-gradient(rgba($black, .333) 0, rgba($black, 0) 100%); transition: top 0 ease-in-out;}
|
||||
}
|
||||
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(12 0); overflow: hidden;
|
||||
|
||||
.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;}
|
||||
|
||||
.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; text-decoration: none;}
|
||||
&.active {color: $primary-color;
|
||||
&:after {content: ""; display: block; position: absolute; left: rem-calc(20); top: rem-calc(40); width: calc(100% - #{rem-calc(40)}); height: rem-calc(1); background-color: $primary-color;}
|
||||
}
|
||||
}
|
||||
@include breakpoint(large) {padding-left: rem-calc(20); padding-right: rem-calc(20);}
|
||||
}
|
||||
|
||||
.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;
|
||||
&:before {top: rem-calc(-20); opacity: 1; transition: top .2s ease-in-out, opacity .2s ease-in-out;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
|
||||
.page-nav .grid-container {padding-left: 0; padding-right: 0;}
|
||||
|
||||
nav {margin: rem-calc(12 0);
|
||||
.jump-link {display: none;}
|
||||
|
||||
.group-a {overflow-x: hidden; overflow-y: hidden;
|
||||
@include breakpoint(medium only) {
|
||||
&:hover {overflow-x: auto;} // -ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {top: rem-calc(38);}
|
||||
}
|
||||
}
|
||||
.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: flex-start; align-items: center; padding: rem-calc(10 10 10 35); 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(12); top: rem-calc(11); bottom: auto; width: rem-calc(1); height: rem-calc(16); 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);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Into Banner
|
||||
// ------
|
||||
|
||||
.banner.intro {position: relative; background: $white no-repeat center/cover; height: calc(100vh - #{rem-calc(120)}); min-height: 100vw; max-height: 200vw;
|
||||
@include breakpoint(medium) {height: calc(100vh - #{rem-calc(50)}); min-height: rem-calc(300); max-height: 60vw;}
|
||||
|
||||
.graphic-bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden;
|
||||
> * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent no-repeat center/contain;
|
||||
&.left {background: transparent no-repeat -15% 100%/45%;}
|
||||
&.right {background: transparent no-repeat 110% 100%/65%;}
|
||||
}
|
||||
@include breakpoint(medium only) {
|
||||
> .left {background: transparent no-repeat -20% 100%/40%;}
|
||||
> .right {background: transparent no-repeat 115% 100%/60%;}
|
||||
}
|
||||
@include breakpoint(small down) {
|
||||
> .left {background: transparent no-repeat -25% 100%/60%;}
|
||||
> .right {background: transparent no-repeat 115% 100%/80%;}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-content {height: 80%; position: relative; z-index: 2;
|
||||
.cell {
|
||||
> * {max-width: rem-calc(400); margin-left: auto; margin-right: auto;}
|
||||
> h1 {max-width: rem-calc(280);}
|
||||
}
|
||||
}
|
||||
|
||||
+ section .section-intro {padding-top: rem-calc(64);
|
||||
@include breakpoint (medium) {padding-top: rem-calc(96);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(124);}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Section Intro
|
||||
// ------
|
||||
|
||||
.section-intro {padding-top: rem-calc(32); padding-bottom: rem-calc(20); background-color: #f8e71c;
|
||||
|
||||
> .tiles-outside:first-child {padding-top: rem-calc(0);}
|
||||
> .tiles-outside:last-child {padding-bottom: rem-calc(0);}
|
||||
|
||||
@include breakpoint (medium) {padding-top: rem-calc(48); padding-bottom: rem-calc(30);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(64); padding-bottom: rem-calc(40);}
|
||||
|
||||
&.extra-space {padding-bottom: rem-calc(24);
|
||||
@include breakpoint (medium) {padding-bottom: rem-calc(32);}
|
||||
@include breakpoint (large) {padding-bottom: rem-calc(64);}
|
||||
}
|
||||
|
||||
+ .section-tiles {padding-bottom: 1px;
|
||||
.tiles-outside:first-child {background-color: #f8e71c;}
|
||||
.tiles-container {position: relative; padding-bottom: 1px; margin-bottom: calc(5.6652083333333vw * 2); background-color: #f8e71c;
|
||||
.grid-container {margin-bottom: calc(-5.6652083333333vw * 2);}
|
||||
|
||||
&:after {content: ""; display: block; position: absolute; left: 0; bottom: -5.6652083333333vw; height: 6.081875vw; width: 100vw; background: transparent no-repeat center/cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%23f8e71c;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
+ * {position: relative;}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-dark {background-color: $primary-color; color: $white;
|
||||
> .grid-container > .cell:not(.tile):not(.tile-compact) > p > a,
|
||||
.over-dark 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: .5em; margin-right: -.2em;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .section-tiles {
|
||||
.tiles-outside:first-child {background-color: $primary-color; color: $white;}
|
||||
.tiles-container {background-color: $primary-color; color: $white;
|
||||
&:after {background: transparent no-repeat center/cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%230060df;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-alt1 {background-color: #6200a4;
|
||||
|
||||
+ .section-tiles {
|
||||
.tiles-outside:first-child {background-color: #6200a4;}
|
||||
.tiles-container {background-color: #6200a4;
|
||||
&:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%236200a4;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-alt2 {background-color: #ff9400;
|
||||
|
||||
+ .section-tiles {
|
||||
.tiles-outside:first-child {background-color: #ff9400;}
|
||||
.tiles-container {background-color: #ff9400;
|
||||
&:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%23ff9400;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Section More
|
||||
// ------
|
||||
|
||||
.section-more {padding-top: rem-calc(32); padding-bottom: rem-calc(20);
|
||||
@include breakpoint (medium) {padding-top: rem-calc(48); padding-bottom: rem-calc(30);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(64); padding-bottom: rem-calc(40);}
|
||||
|
||||
&.extra-space {padding-bottom: rem-calc(24);
|
||||
@include breakpoint (medium) {padding-bottom: rem-calc(32);}
|
||||
@include breakpoint (large) {padding-bottom: rem-calc(64);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Tiles
|
||||
// ------
|
||||
|
||||
.cell.tile {z-index: 3; padding: rem-calc(20 26) !important; margin: rem-calc(8 0); color: $body-font-color;
|
||||
&:before {left: rem-calc(6); width: calc(100% - #{rem-calc(12)});}
|
||||
|
||||
img {display: block; max-height: rem-calc(120); margin: 0 auto;}
|
||||
|
||||
&:not(.tile-block-link) {
|
||||
a img {border-radius: $global-radius; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;}
|
||||
a:hover img {box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); transform: scale(1.01);}
|
||||
}
|
||||
|
||||
&.tile-block-link {cursor: pointer;
|
||||
|
||||
.block-link-inline {color: $primary-color;}
|
||||
|
||||
&:hover {color: $body-font-color; text-decoration: none;
|
||||
.block-link-inline {text-decoration: underline;}
|
||||
}
|
||||
}
|
||||
|
||||
@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: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {
|
||||
.block-link {height: 100%; display: flex; flex-flow: column nowrap; justify-content: stretch;
|
||||
> * {flex: 0 0 auto; width: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium only) {
|
||||
|
||||
&:not(.tile-block-link) {
|
||||
&:not(.medium-6):not(.no-img) {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {
|
||||
&:not(.medium-6):not(.no-img) .block-link {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(large) {
|
||||
&:not(.tile-block-link) {
|
||||
&.medium-6:not(.no-img) {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {
|
||||
&:before {will-change: transform; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;}
|
||||
&:hover:before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.33); transform: scale(1.01);}
|
||||
|
||||
&.medium-6:not(.no-img) .block-link {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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);}
|
||||
|
||||
> * {position: relative; z-index: 2;
|
||||
&:last-child {margin-bottom: 0;}
|
||||
}
|
||||
|
||||
&: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);}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {padding: 0 !important;
|
||||
|
||||
.block-link {padding: rem-calc(20 26) !important;
|
||||
> * {
|
||||
&: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;}
|
||||
}
|
||||
}
|
||||
|
||||
.block-link-inline {color: $primary-color;}
|
||||
|
||||
&:hover {color: $body-font-color; text-decoration: none;
|
||||
.block-link-inline {text-decoration: underline;}
|
||||
}
|
||||
}
|
||||
|
||||
@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; align-items: flex-end; 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;}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {padding: 0 !important;
|
||||
.block-link {height: 100%; display: flex; flex-flow: column nowrap; justify-content: stretch; padding: rem-calc(24 34 30) !important;
|
||||
> * {flex: 0 0 auto; align-items: flex-end; width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {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; align-items: flex-start; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(large) {
|
||||
&.tile-block-link {
|
||||
&:before {will-change: transform; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;}
|
||||
&:hover:before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.33); transform: scale(1.01);}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
img {display: block; max-height: rem-calc(108); margin: 0 auto;}
|
||||
a img {border-radius: $global-radius; transition: box-shadow .2s ease-in-out;}
|
||||
a:hover img {box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.33);}
|
||||
|
||||
@include breakpoint(medium) {padding: rem-calc(24 34 30) !important; margin: rem-calc(12 0); display: flex; flex-flow: column nowrap; justify-content: stretch;
|
||||
> * {flex: 0 0 auto; width: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
|
||||
&.medium-6 {
|
||||
img {max-height: rem-calc(134);}
|
||||
}
|
||||
}
|
||||
> * {position: relative; z-index: 2;}
|
||||
}
|
||||
|
||||
.tile-extended {
|
||||
> p a {@include button(); font-size: 0.733333333333333rem; padding: rem-calc(6 8);
|
||||
&:hover {text-decoration: none;}
|
||||
}
|
||||
.secondary-actions {font-size: $small-font-size;
|
||||
a {display: block; padding-top: rem-calc(6);}
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-outside {padding-top: rem-calc(10); padding-bottom: rem-calc(20);
|
||||
&:first-child {
|
||||
*:last-child {margin-bottom: 0;}
|
||||
@include breakpoint(small down) {padding-top: rem-calc(24); padding-bottom: rem-calc(6);}
|
||||
}
|
||||
&:last-child p:not(:last-child) {margin-bottom: .5rem;}
|
||||
@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,
|
||||
.news-slider {
|
||||
@include breakpoint(medium 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 {position: relative;
|
||||
|
||||
.img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;
|
||||
@include breakpoint(small down) {background-position: left bottom; background-size: 100%;}
|
||||
}
|
||||
|
||||
.grid-container {position: relative; min-height: 48vw; padding-top: rem-calc(45); padding-bottom: 24vw;
|
||||
@include breakpoint(medium) {min-height: 24vw; padding-bottom: rem-calc(45);}
|
||||
}
|
||||
|
||||
.cell {
|
||||
> *:last-child {margin-bottom: 0;}
|
||||
@include breakpoint(medium) {max-width: rem-calc(360);}
|
||||
}
|
||||
|
||||
a: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: .5em; margin-right: -.2em;}
|
||||
}
|
||||
|
||||
&.bg-dark {color: $white;
|
||||
a {color: $white;}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Inline resource list
|
||||
// ------
|
||||
|
||||
.resources-inline-list {
|
||||
@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);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Interative Anatomy Illustration
|
||||
// ------
|
||||
|
||||
.anatomy-container {
|
||||
.anatomy-illustration {text-align: center;
|
||||
#anatomy-of-an-extension-graphic {display: none;}
|
||||
}
|
||||
.anatomy-description {position: relative; display: flex; flex-flow: column nowrap; justify-content: center;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: none;}
|
||||
|
||||
button {position: relative; display: block; padding: rem-calc(16 24); text-align: left; color: $primary-color; cursor: pointer;
|
||||
|
||||
&:after {display: inline-block; margin-left: .3em; font-size: .8em; transition: margin .2s ease-in-out;
|
||||
@include icon_font($char: $icon-arrow-right);
|
||||
}
|
||||
&:hover {text-decoration: underline;
|
||||
&:after {margin-left: .5em; margin-right: -.2em;}
|
||||
}
|
||||
|
||||
img {margin-right: rem-calc(16);}
|
||||
}
|
||||
}
|
||||
|
||||
.manifest {text-align: center;
|
||||
img {display: inline-block; margin-right: .3em;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {display: flex; flex-flow: row nowrap; justify-content: stretch;
|
||||
.anatomy-illustration {flex: 0 0 70%;
|
||||
#anatomy-of-an-extension-graphic {display: block; margin: #{rem-calc(32)} auto 0; max-width: 100%;
|
||||
.tile {cursor: pointer; transition: transform .3s ease-in-out, opacity .3s ease-in-out;
|
||||
&.hover {transform: translate(#{rem-calc(8)},0);}
|
||||
}
|
||||
|
||||
+ .manifest {transition: opacity .3s ease-in-out;}
|
||||
|
||||
#box_bottom_back {transition: transform .3s ease-in-out, opacity .3s .15s ease-in-out;}
|
||||
#box_bottom_front {transition: transform .3s ease-in-out;}
|
||||
#box_top_back {transition: transform .3s ease-in-out;}
|
||||
#box_top_front_transparent {transition: transform .3s ease-in-out;}
|
||||
#box_top_front_solid {transition: transform .3s ease-in-out, opacity .3s ease-in-out; opacity: 0;}
|
||||
#box_sides {transition: transform .3s ease-in-out;}
|
||||
|
||||
&:not(.step-one) {
|
||||
#box_bottom_back {transform: translateY(calc(50% - #{rem-calc(115)})) scale(1, 0.294871794871795); opacity: 0;}
|
||||
#box_bottom_front {transform: translateY(#{rem-calc(-110)});}
|
||||
#box_top_back {transform: translateY(#{rem-calc(110)});}
|
||||
#box_top_front_transparent {transform: translateY(#{rem-calc(110)});}
|
||||
#box_top_front_solid {transform: translateY(#{rem-calc(110)}); opacity: 1;}
|
||||
#box_sides {transform: translateY(calc(50% - #{rem-calc(74)})) scale(1, 0.294871794871795);}
|
||||
}
|
||||
&:not(.step-two) {
|
||||
#background {transform: translateY(#{rem-calc(-30)}); opacity: 0;}
|
||||
#content {opacity: 0;}
|
||||
#interface {transform: translateY(#{rem-calc(30)}); opacity: 0;}
|
||||
+ .manifest {opacity: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.anatomy-description {flex: 0 0 30%;
|
||||
button {margin: rem-calc(15 0);}
|
||||
}
|
||||
#anatomy-control {
|
||||
button {transition: opacity .3s .15s ease-in-out, transform .3s ease-in-out;}
|
||||
&:not(.step-two) {
|
||||
button {opacity: 0;
|
||||
&:first-of-type {transform: translateY(#{rem-calc(30)});}
|
||||
&:last-of-type {transform: translateY(#{rem-calc(-30)});}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {
|
||||
.anatomy-description {height: calc(157.037037037037vw - 24px); padding: 36.5% 0; margin: rem-calc(16 0 8); align-items: center; justify-content: space-between;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
|
||||
#mobile-box_bottom_back {opacity: .2;}
|
||||
#mobile-box_top_front_solid {opacity: .2;}
|
||||
}
|
||||
|
||||
button {margin: rem-calc(0 0 -20);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Events
|
||||
// ------
|
||||
|
||||
#events {margin-bottom: -1px; overflow: hidden;}
|
||||
|
||||
|
||||
|
||||
// RSS Feed
|
||||
// ------
|
||||
|
||||
#rss-feed-source {display: none;}
|
||||
#rss-feed {}
|
||||
|
||||
|
||||
|
||||
// Social Panel
|
||||
// ------
|
||||
|
||||
.social {background-color: #363959; color: $white; font-size: $small-font-size;
|
||||
h4 {margin-top: rem-calc(10);}
|
||||
p {color: #b1b1b3;}
|
||||
a {color: $white;
|
||||
&:before {display: inline-block;}
|
||||
&:hover {color: $white;
|
||||
&:before {text-decoration: none;}
|
||||
}
|
||||
&.twitter:before {@include icon_font($char: $icon-twitter); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
&.telegram:before {@include icon_font($char: $icon-telegram); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
&.irc:before {@include icon_font($char: $icon-irc); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
&.mailinglist:before {@include icon_font($char: $icon-mail); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
}
|
||||
input[type=text], input[type=email] {background-color: rgba(#b1b1b3,.2); border: 0; color: $white;
|
||||
&::placeholder {color: #b1b1b3;}
|
||||
}
|
||||
.button {background-color: $white; color: $primary-color; margin-top: rem-calc(16);
|
||||
&:hover {background-color: $light-gray;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
.cell {padding-top: rem-calc(8); padding-bottom: rem-calc(8);}
|
||||
}
|
||||
}
|
||||
647
_sass/_main.scss
647
_sass/_main.scss
|
|
@ -14,14 +14,20 @@ Stylesheet: Main Stylesheet
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {margin-bottom: $header-margin-bottom;}
|
||||
|
||||
p, ul, ol {
|
||||
+ h1, + h2, + h3, + h4, + h5, + h6 {margin-top: 1.5em;}
|
||||
}
|
||||
|
||||
h2 {font-weight: 500;}
|
||||
|
||||
li {margin-bottom: $list-margin-bottom;}
|
||||
li {margin-bottom: $list-margin-bottom / 2;}
|
||||
|
||||
a:not(.button) {
|
||||
&:hover {text-decoration: underline; color: $primary-color;}
|
||||
}
|
||||
|
||||
small {color: $dark-gray;}
|
||||
|
||||
|
||||
// Button
|
||||
// ------
|
||||
|
|
@ -141,23 +147,21 @@ a[title="View on Github"] {
|
|||
|
||||
|
||||
// Sticky Footer
|
||||
// -- Landing Page has .landing class on .site-header and .site-content
|
||||
// -- Conteng Guidelines pages have .site-wrapper element containing .site-header and .site-content
|
||||
// ------
|
||||
|
||||
html {height: 100%;}
|
||||
.site {display: flex; flex-direction: column; height: 100%;}
|
||||
.site-header,
|
||||
|
||||
.site-header.landing,
|
||||
.site-footer {flex: none;}
|
||||
.site-content {flex: 1 0 auto; width: 100%;}
|
||||
|
||||
.site-wrapper,
|
||||
.site-content.landing {flex: 1 0 auto; width: 100%;}
|
||||
|
||||
|
||||
|
||||
// Header
|
||||
// ------
|
||||
|
||||
.site-header {position: absolute; z-index: 10; left: 0; top: 0; width: 100%; padding: rem-calc(12 0);
|
||||
.cell {display: flex; flex-flow: row nowrap; justify-content: space-between;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Logo
|
||||
|
|
@ -178,113 +182,6 @@ html {height: 100%;}
|
|||
|
||||
|
||||
|
||||
// Top Navigation
|
||||
// ------
|
||||
|
||||
.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(38)}); left: 0; width: 100%;
|
||||
* {transform: translate3d(0,0,0);}
|
||||
.page-nav {position: absolute; left: 0; top: 0; width: 100%;
|
||||
&:before {content: ""; display: block; position: absolute; left: 0; top: rem-calc(-75); width: 100%; height: rem-calc(75); pointer-events: none; opacity: 0; background-image: linear-gradient(rgba($black, .333) 0, rgba($black, 0) 100%); transition: top 0 ease-in-out;}
|
||||
}
|
||||
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(12 0); overflow: hidden;
|
||||
|
||||
.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;}
|
||||
|
||||
.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; text-decoration: none;}
|
||||
&.active {color: $primary-color;
|
||||
&:after {content: ""; display: block; position: absolute; left: rem-calc(20); top: rem-calc(40); width: calc(100% - #{rem-calc(40)}); height: rem-calc(1); background-color: $primary-color;}
|
||||
}
|
||||
}
|
||||
@include breakpoint(large) {padding-left: rem-calc(20); padding-right: rem-calc(20);}
|
||||
}
|
||||
|
||||
.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;
|
||||
&:before {top: rem-calc(-20); opacity: 1; transition: top .2s ease-in-out, opacity .2s ease-in-out;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
|
||||
.page-nav .grid-container {padding-left: 0; padding-right: 0;}
|
||||
|
||||
nav {margin: rem-calc(12 0);
|
||||
.jump-link {display: none;}
|
||||
|
||||
.group-a {overflow-x: hidden; overflow-y: hidden;
|
||||
@include breakpoint(medium only) {
|
||||
&:hover {overflow-x: auto;} // -ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {top: rem-calc(38);}
|
||||
}
|
||||
}
|
||||
.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: flex-start; align-items: center; padding: rem-calc(10 10 10 35); 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(12); top: rem-calc(11); bottom: auto; width: rem-calc(1); height: rem-calc(16); 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);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -308,311 +205,6 @@ html {height: 100%;}
|
|||
|
||||
|
||||
|
||||
// Into Banner
|
||||
// ------
|
||||
|
||||
.banner.intro {position: relative; background: $white no-repeat center/cover; height: calc(100vh - #{rem-calc(120)}); min-height: 100vw; max-height: 200vw;
|
||||
@include breakpoint(medium) {height: calc(100vh - #{rem-calc(50)}); min-height: rem-calc(300); max-height: 60vw;}
|
||||
|
||||
.graphic-bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden;
|
||||
> * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent no-repeat center/contain;
|
||||
&.left {background: transparent no-repeat -15% 100%/45%;}
|
||||
&.right {background: transparent no-repeat 110% 100%/65%;}
|
||||
}
|
||||
@include breakpoint(medium only) {
|
||||
> .left {background: transparent no-repeat -20% 100%/40%;}
|
||||
> .right {background: transparent no-repeat 115% 100%/60%;}
|
||||
}
|
||||
@include breakpoint(small down) {
|
||||
> .left {background: transparent no-repeat -25% 100%/60%;}
|
||||
> .right {background: transparent no-repeat 115% 100%/80%;}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-content {height: 80%; position: relative; z-index: 2;
|
||||
.cell {
|
||||
> * {max-width: rem-calc(400); margin-left: auto; margin-right: auto;}
|
||||
> h1 {max-width: rem-calc(280);}
|
||||
}
|
||||
}
|
||||
|
||||
+ section .section-intro {padding-top: rem-calc(64);
|
||||
@include breakpoint (medium) {padding-top: rem-calc(96);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(124);}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Section Intro
|
||||
// ------
|
||||
|
||||
.section-intro {padding-top: rem-calc(32); padding-bottom: rem-calc(20); background-color: #f8e71c;
|
||||
|
||||
> .tiles-outside:first-child {padding-top: rem-calc(0);}
|
||||
> .tiles-outside:last-child {padding-bottom: rem-calc(0);}
|
||||
|
||||
@include breakpoint (medium) {padding-top: rem-calc(48); padding-bottom: rem-calc(30);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(64); padding-bottom: rem-calc(40);}
|
||||
|
||||
&.extra-space {padding-bottom: rem-calc(24);
|
||||
@include breakpoint (medium) {padding-bottom: rem-calc(32);}
|
||||
@include breakpoint (large) {padding-bottom: rem-calc(64);}
|
||||
}
|
||||
|
||||
+ .section-tiles {padding-bottom: 1px;
|
||||
.tiles-outside:first-child {background-color: #f8e71c;}
|
||||
.tiles-container {position: relative; padding-bottom: 1px; margin-bottom: calc(5.6652083333333vw * 2); background-color: #f8e71c;
|
||||
.grid-container {margin-bottom: calc(-5.6652083333333vw * 2);}
|
||||
|
||||
&:after {content: ""; display: block; position: absolute; left: 0; bottom: -5.6652083333333vw; height: 6.081875vw; width: 100vw; background: transparent no-repeat center/cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%23f8e71c;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
+ * {position: relative;}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-dark {background-color: $primary-color; color: $white;
|
||||
> .grid-container > .cell:not(.tile):not(.tile-compact) > p > a,
|
||||
.over-dark 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: .5em; margin-right: -.2em;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .section-tiles {
|
||||
.tiles-outside:first-child {background-color: $primary-color; color: $white;}
|
||||
.tiles-container {background-color: $primary-color; color: $white;
|
||||
&:after {background: transparent no-repeat center/cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%230060df;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-alt1 {background-color: #6200a4;
|
||||
|
||||
+ .section-tiles {
|
||||
.tiles-outside:first-child {background-color: #6200a4;}
|
||||
.tiles-container {background-color: #6200a4;
|
||||
&:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%236200a4;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-alt2 {background-color: #ff9400;
|
||||
|
||||
+ .section-tiles {
|
||||
.tiles-outside:first-child {background-color: #ff9400;}
|
||||
.tiles-container {background-color: #ff9400;
|
||||
&:after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 58.39'%3E%3Cdefs%3E%3Cstyle%3E.bg-1%7Bfill:%23ff9400;%7D%3C/style%3E%3C/defs%3E%3Cpath class='bg-1' d='M0,494.21c108.92,32.92,283.14,54.24,479.5,54.24,197,0,371.65-21.45,480.5-54.55v-3.84H0Z' transform='translate(0 -490.06)'/%3E%3C/svg%3E");}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Section More
|
||||
// ------
|
||||
|
||||
.section-more {padding-top: rem-calc(32); padding-bottom: rem-calc(20);
|
||||
@include breakpoint (medium) {padding-top: rem-calc(48); padding-bottom: rem-calc(30);}
|
||||
@include breakpoint (large) {padding-top: rem-calc(64); padding-bottom: rem-calc(40);}
|
||||
|
||||
&.extra-space {padding-bottom: rem-calc(24);
|
||||
@include breakpoint (medium) {padding-bottom: rem-calc(32);}
|
||||
@include breakpoint (large) {padding-bottom: rem-calc(64);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Tiles
|
||||
// ------
|
||||
|
||||
.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);}
|
||||
|
||||
> * {position: relative; z-index: 2;}
|
||||
|
||||
img {display: block; max-height: rem-calc(120); margin: 0 auto;}
|
||||
|
||||
&:not(.tile-block-link) {
|
||||
a img {border-radius: $global-radius; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;}
|
||||
a:hover img {box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1); transform: scale(1.01);}
|
||||
}
|
||||
|
||||
&.tile-block-link {cursor: pointer;
|
||||
|
||||
.block-link-inline {color: $primary-color;}
|
||||
|
||||
&:hover {color: $body-font-color; text-decoration: none;
|
||||
.block-link-inline {text-decoration: underline;}
|
||||
}
|
||||
}
|
||||
|
||||
@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: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {
|
||||
.block-link {height: 100%; display: flex; flex-flow: column nowrap; justify-content: stretch;
|
||||
> * {flex: 0 0 auto; width: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium only) {
|
||||
|
||||
&:not(.tile-block-link) {
|
||||
&:not(.medium-6):not(.no-img) {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {
|
||||
&:not(.medium-6):not(.no-img) .block-link {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(large) {
|
||||
&:not(.tile-block-link) {
|
||||
&.medium-6:not(.no-img) {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {
|
||||
&:before {will-change: transform; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;}
|
||||
&:hover:before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.33); transform: scale(1.01);}
|
||||
|
||||
&.medium-6:not(.no-img) .block-link {
|
||||
> * {max-width: 70%;
|
||||
&:first-child {position: absolute; top: rem-calc(12); right: rem-calc(12); max-width: 24%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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);}
|
||||
|
||||
> * {position: relative; z-index: 2;
|
||||
&:last-child {margin-bottom: 0;}
|
||||
}
|
||||
|
||||
&: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);}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {padding: 0 !important;
|
||||
|
||||
.block-link {padding: rem-calc(20 26) !important;
|
||||
> * {
|
||||
&: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;}
|
||||
}
|
||||
}
|
||||
|
||||
.block-link-inline {color: $primary-color;}
|
||||
|
||||
&:hover {color: $body-font-color; text-decoration: none;
|
||||
.block-link-inline {text-decoration: underline;}
|
||||
}
|
||||
}
|
||||
|
||||
@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; align-items: flex-end; 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;}
|
||||
}
|
||||
}
|
||||
|
||||
&.tile-block-link {padding: 0 !important;
|
||||
.block-link {height: 100%; display: flex; flex-flow: column nowrap; justify-content: stretch; padding: rem-calc(24 34 30) !important;
|
||||
> * {flex: 0 0 auto; align-items: flex-end; width: calc(100% - #{rem-calc(50)}); margin-right: 0; margin-left: auto;
|
||||
&:first-child {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; align-items: flex-start; margin-bottom: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(large) {
|
||||
&.tile-block-link {
|
||||
&:before {will-change: transform; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;}
|
||||
&:hover:before {box-shadow: #{rem-calc(0 4 20)} rgba(12,12,13,0.33); transform: scale(1.01);}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
img {display: block; max-height: rem-calc(108); margin: 0 auto;}
|
||||
a img {border-radius: $global-radius; transition: box-shadow .2s ease-in-out;}
|
||||
a:hover img {box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.33);}
|
||||
|
||||
@include breakpoint(medium) {padding: rem-calc(24 34 30) !important; margin: rem-calc(12 0); display: flex; flex-flow: column nowrap; justify-content: stretch;
|
||||
> * {flex: 0 0 auto; width: 100%;
|
||||
&:last-child {flex: 1 1 auto; display: flex; flex-flow: column; justify-content: flex-end; margin-bottom: 0;}
|
||||
}
|
||||
|
||||
&.medium-6 {
|
||||
img {max-height: rem-calc(134);}
|
||||
}
|
||||
}
|
||||
> * {position: relative; z-index: 2;}
|
||||
}
|
||||
|
||||
.tile-extended {
|
||||
> p a {@include button(); font-size: 0.733333333333333rem; padding: rem-calc(6 8);
|
||||
&:hover {text-decoration: none;}
|
||||
}
|
||||
.secondary-actions {font-size: $small-font-size;
|
||||
a {display: block; padding-top: rem-calc(6);}
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-outside {padding-top: rem-calc(10); padding-bottom: rem-calc(20);
|
||||
&:first-child {
|
||||
*:last-child {margin-bottom: 0;}
|
||||
@include breakpoint(small down) {padding-top: rem-calc(24); padding-bottom: rem-calc(6);}
|
||||
}
|
||||
&:last-child p:not(:last-child) {margin-bottom: .5rem;}
|
||||
@include breakpoint(medium) {padding-top: rem-calc(24); padding-bottom: rem-calc(24);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Popup Panel
|
||||
// ------
|
||||
|
||||
|
|
@ -643,72 +235,23 @@ html {height: 100%;}
|
|||
|
||||
|
||||
|
||||
// Mobile slideshow tiles
|
||||
// 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;}
|
||||
}
|
||||
}
|
||||
.tile {position: relative; padding: rem-calc(12) !important; margin: rem-calc(8 0);
|
||||
@include breakpoint(medium) {padding: rem-calc(24) !important; margin: rem-calc(12 0);}
|
||||
|
||||
.mobile-slider,
|
||||
.news-slider {
|
||||
@include breakpoint(medium down) {padding: rem-calc(0 0 1); margin-bottom: calc(#{5.6652083333333vw * 5} + #{rem-calc(96)}) !important;
|
||||
&:before {content:""; display: block; position: absolute; left: rem-calc(0); width: 100%; top: 0; height: 100%; background-color: $white; border-radius: $global-radius; box-shadow: #{rem-calc(0 4 16)} rgba(12,12,13,0.1);}
|
||||
|
||||
.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 {position: relative;
|
||||
|
||||
.img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;
|
||||
@include breakpoint(small down) {background-position: left bottom; background-size: 100%;}
|
||||
> * {position: relative; z-index: 2;
|
||||
&:last-child {margin-bottom: 0;}
|
||||
}
|
||||
|
||||
.grid-container {position: relative; min-height: 48vw; padding-top: rem-calc(45); padding-bottom: 24vw;
|
||||
@include breakpoint(medium) {min-height: 24vw; padding-bottom: rem-calc(45);}
|
||||
& + p, & + h1, & + h2, & + h3, & + h4, & + h5, & + h6, & + ol, & + ul {margin-top: 1.5em;
|
||||
// @include breakpoint(medium) {margin-top: rem-calc(24);}
|
||||
}
|
||||
|
||||
.cell {
|
||||
> *:last-child {margin-bottom: 0;}
|
||||
@include breakpoint(medium) {max-width: rem-calc(360);}
|
||||
}
|
||||
|
||||
a: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: .5em; margin-right: -.2em;}
|
||||
}
|
||||
|
||||
&.bg-dark {color: $white;
|
||||
a {color: $white;}
|
||||
}
|
||||
|
||||
|
||||
&.vote {}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -784,149 +327,6 @@ html {height: 100%;}
|
|||
|
||||
|
||||
|
||||
// Inline resource list
|
||||
// ------
|
||||
|
||||
.resources-inline-list {
|
||||
@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);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Interative Anatomy Illustration
|
||||
// ------
|
||||
|
||||
.anatomy-container {
|
||||
.anatomy-illustration {text-align: center;
|
||||
#anatomy-of-an-extension-graphic {display: none;}
|
||||
}
|
||||
.anatomy-description {position: relative; display: flex; flex-flow: column nowrap; justify-content: center;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: none;}
|
||||
|
||||
button {position: relative; display: block; padding: rem-calc(16 24); text-align: left; color: $primary-color; cursor: pointer;
|
||||
|
||||
&:after {display: inline-block; margin-left: .3em; font-size: .8em; transition: margin .2s ease-in-out;
|
||||
@include icon_font($char: $icon-arrow-right);
|
||||
}
|
||||
&:hover {text-decoration: underline;
|
||||
&:after {margin-left: .5em; margin-right: -.2em;}
|
||||
}
|
||||
|
||||
img {margin-right: rem-calc(16);}
|
||||
}
|
||||
}
|
||||
|
||||
.manifest {text-align: center;
|
||||
img {display: inline-block; margin-right: .3em;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {display: flex; flex-flow: row nowrap; justify-content: stretch;
|
||||
.anatomy-illustration {flex: 0 0 70%;
|
||||
#anatomy-of-an-extension-graphic {display: block; margin: #{rem-calc(32)} auto 0; max-width: 100%;
|
||||
.tile {cursor: pointer; transition: transform .3s ease-in-out, opacity .3s ease-in-out;
|
||||
&.hover {transform: translate(#{rem-calc(8)},0);}
|
||||
}
|
||||
|
||||
+ .manifest {transition: opacity .3s ease-in-out;}
|
||||
|
||||
#box_bottom_back {transition: transform .3s ease-in-out, opacity .3s .15s ease-in-out;}
|
||||
#box_bottom_front {transition: transform .3s ease-in-out;}
|
||||
#box_top_back {transition: transform .3s ease-in-out;}
|
||||
#box_top_front_transparent {transition: transform .3s ease-in-out;}
|
||||
#box_top_front_solid {transition: transform .3s ease-in-out, opacity .3s ease-in-out; opacity: 0;}
|
||||
#box_sides {transition: transform .3s ease-in-out;}
|
||||
|
||||
&:not(.step-one) {
|
||||
#box_bottom_back {transform: translateY(calc(50% - #{rem-calc(115)})) scale(1, 0.294871794871795); opacity: 0;}
|
||||
#box_bottom_front {transform: translateY(#{rem-calc(-110)});}
|
||||
#box_top_back {transform: translateY(#{rem-calc(110)});}
|
||||
#box_top_front_transparent {transform: translateY(#{rem-calc(110)});}
|
||||
#box_top_front_solid {transform: translateY(#{rem-calc(110)}); opacity: 1;}
|
||||
#box_sides {transform: translateY(calc(50% - #{rem-calc(74)})) scale(1, 0.294871794871795);}
|
||||
}
|
||||
&:not(.step-two) {
|
||||
#background {transform: translateY(#{rem-calc(-30)}); opacity: 0;}
|
||||
#content {opacity: 0;}
|
||||
#interface {transform: translateY(#{rem-calc(30)}); opacity: 0;}
|
||||
+ .manifest {opacity: 0;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.anatomy-description {flex: 0 0 30%;
|
||||
button {margin: rem-calc(15 0);}
|
||||
}
|
||||
#anatomy-control {
|
||||
button {transition: opacity .3s .15s ease-in-out, transform .3s ease-in-out;}
|
||||
&:not(.step-two) {
|
||||
button {opacity: 0;
|
||||
&:first-of-type {transform: translateY(#{rem-calc(30)});}
|
||||
&:last-of-type {transform: translateY(#{rem-calc(-30)});}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small down) {
|
||||
.anatomy-description {height: calc(157.037037037037vw - 24px); padding: 36.5% 0; margin: rem-calc(16 0 8); align-items: center; justify-content: space-between;
|
||||
#anatomy-of-an-extension-graphic-mobile {display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
|
||||
#mobile-box_bottom_back {opacity: .2;}
|
||||
#mobile-box_top_front_solid {opacity: .2;}
|
||||
}
|
||||
|
||||
button {margin: rem-calc(0 0 -20);}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Events
|
||||
// ------
|
||||
|
||||
#events {margin-bottom: -1px; overflow: hidden;}
|
||||
|
||||
|
||||
|
||||
// RSS Feed
|
||||
// ------
|
||||
|
||||
#rss-feed-source {display: none;}
|
||||
#rss-feed {}
|
||||
|
||||
|
||||
|
||||
// Social Panel
|
||||
// ------
|
||||
|
||||
.social {background-color: #363959; color: $white; font-size: $small-font-size;
|
||||
h4 {margin-top: rem-calc(10);}
|
||||
p {color: #b1b1b3;}
|
||||
a {color: $white;
|
||||
&:before {display: inline-block;}
|
||||
&:hover {color: $white;
|
||||
&:before {text-decoration: none;}
|
||||
}
|
||||
&.twitter:before {@include icon_font($char: $icon-twitter); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
&.telegram:before {@include icon_font($char: $icon-telegram); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
&.irc:before {@include icon_font($char: $icon-irc); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
&.mailinglist:before {@include icon_font($char: $icon-mail); font-size: rem-calc(24); vertical-align: middle; margin-right: .3em;}
|
||||
}
|
||||
input[type=text], input[type=email] {background-color: rgba(#b1b1b3,.2); border: 0; color: $white;
|
||||
&::placeholder {color: #b1b1b3;}
|
||||
}
|
||||
.button {background-color: $white; color: $primary-color; margin-top: rem-calc(16);
|
||||
&:hover {background-color: $light-gray;}
|
||||
}
|
||||
|
||||
@include breakpoint(medium down) {
|
||||
.cell {padding-top: rem-calc(8); padding-bottom: rem-calc(8);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Moz Footer
|
||||
|
|
@ -976,7 +376,6 @@ html {height: 100%;}
|
|||
select {flex: 0 0 auto; width: auto; margin-bottom: 0;}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,10 @@ $icon-twitter: "\e907";
|
|||
$icon-github: "\e908";
|
||||
$icon-youtube: "\e90c";
|
||||
$icon-instagram: "\e90d";
|
||||
$icon-back: "\e90e";
|
||||
$icon-newtab: "\e90f";
|
||||
$icon-dont: "\e910";
|
||||
$icon-do: "\e911";
|
||||
|
||||
|
||||
// 3. Breakpoints
|
||||
|
|
@ -183,7 +187,7 @@ $hr-width: $global-width;
|
|||
$hr-border: 1px solid $light-gray;
|
||||
$hr-margin: rem-calc(40) auto;
|
||||
$list-lineheight: $paragraph-lineheight;
|
||||
$list-margin-bottom: $paragraph-margin-bottom / 2;
|
||||
$list-margin-bottom: $paragraph-margin-bottom;
|
||||
$list-style-type: disc;
|
||||
$list-style-position: outside;
|
||||
$list-side-margin: 1.25rem;
|
||||
|
|
|
|||
|
|
@ -26,4 +26,7 @@ CSS file.
|
|||
@include foundation-visibility-classes;
|
||||
|
||||
// Import your custom styles
|
||||
|
||||
@import "main";
|
||||
@import "landing";
|
||||
@import "contentguidelines";
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="style.css"></head>
|
||||
<body>
|
||||
<div class="bgc1 clearfix">
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 14)</small></h1>
|
||||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 18)</small></h1>
|
||||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
|
||||
|
|
@ -32,6 +32,70 @@
|
|||
</div>
|
||||
<div class="clearfix mhl ptl">
|
||||
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-dont">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-dont</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e910" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-do">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-do</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e911" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-back">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-back</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90e" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-new-tab">
|
||||
|
||||
</span>
|
||||
<span class="mls"> icon-new-tab</span>
|
||||
</div>
|
||||
<fieldset class="fs0 size1of1 clearfix hidden-false">
|
||||
<input type="text" readonly value="e90f" class="unit size1of2" />
|
||||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" />
|
||||
</fieldset>
|
||||
<div class="fs0 bshadow0 clearfix hidden-true">
|
||||
<span class="unit pvs fgc1">liga: </span>
|
||||
<input type="text" readonly value="" class="liga unitRight" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="glyph fs2">
|
||||
<div class="clearfix bshadow0 pbs">
|
||||
<span class="icon-play">
|
||||
|
|
|
|||
Двоичные данные
assets/icomoon/fonts/icomoon.eot
Двоичные данные
assets/icomoon/fonts/icomoon.eot
Двоичный файл не отображается.
|
|
@ -21,4 +21,8 @@
|
|||
<glyph unicode="" glyph-name="arrow-down" d="M944.213 667.733c9.692-9.33 15.713-22.415 15.713-36.907s-6.020-27.577-15.697-36.891l-0.016-0.016-373.333-365.227c-9.832-9.287-23.129-14.995-37.76-14.995s-27.928 5.709-37.786 15.020l0.026-0.025-373.333 365.227c-9.431 9.292-15.274 22.204-15.274 36.48s5.843 27.188 15.268 36.474l0.006 0.006c9.698 9.233 22.853 14.913 37.333 14.913s27.635-5.68 37.356-14.934l-0.022 0.021 335.787-328.107 335.787 328.107c9.815 9.861 23.399 15.963 38.408 15.963 14.581 0 27.817-5.759 37.557-15.126l-0.018 0.017z" />
|
||||
<glyph unicode="" glyph-name="youtube-play" d="M406.286 306.286l276.571 142.857-276.571 144.571v-287.429zM512 798.857c215.429 0 358.286-10.286 358.286-10.286 20-2.286 64-2.286 102.857-43.429 0 0 31.429-30.857 40.571-101.714 10.857-82.857 10.286-165.714 10.286-165.714v-77.714s0.571-82.857-10.286-165.714c-9.143-70.286-40.571-101.714-40.571-101.714-38.857-40.571-82.857-40.571-102.857-42.857 0 0-142.857-10.857-358.286-10.857v0c-266.286 2.286-348 10.286-348 10.286-22.857 4-74.286 2.857-113.143 43.429 0 0-31.429 31.429-40.571 101.714-10.857 82.857-10.286 165.714-10.286 165.714v77.714s-0.571 82.857 10.286 165.714c9.143 70.857 40.571 101.714 40.571 101.714 38.857 41.143 82.857 41.143 102.857 43.429 0 0 142.857 10.286 358.286 10.286v0z" />
|
||||
<glyph unicode="" glyph-name="instagram" horiz-adv-x="878" d="M585.143 438.857c0 80.571-65.714 146.286-146.286 146.286s-146.286-65.714-146.286-146.286 65.714-146.286 146.286-146.286 146.286 65.714 146.286 146.286zM664 438.857c0-124.571-100.571-225.143-225.143-225.143s-225.143 100.571-225.143 225.143 100.571 225.143 225.143 225.143 225.143-100.571 225.143-225.143zM725.714 673.143c0-29.143-23.429-52.571-52.571-52.571s-52.571 23.429-52.571 52.571 23.429 52.571 52.571 52.571 52.571-23.429 52.571-52.571zM438.857 798.857c-64 0-201.143 5.143-258.857-17.714-20-8-34.857-17.714-50.286-33.143s-25.143-30.286-33.143-50.286c-22.857-57.714-17.714-194.857-17.714-258.857s-5.143-201.143 17.714-258.857c8-20 17.714-34.857 33.143-50.286s30.286-25.143 50.286-33.143c57.714-22.857 194.857-17.714 258.857-17.714s201.143-5.143 258.857 17.714c20 8 34.857 17.714 50.286 33.143s25.143 30.286 33.143 50.286c22.857 57.714 17.714 194.857 17.714 258.857s5.143 201.143-17.714 258.857c-8 20-17.714 34.857-33.143 50.286s-30.286 25.143-50.286 33.143c-57.714 22.857-194.857 17.714-258.857 17.714zM877.714 438.857c0-60.571 0.571-120.571-2.857-181.143-3.429-70.286-19.429-132.571-70.857-184s-113.714-67.429-184-70.857c-60.571-3.429-120.571-2.857-181.143-2.857s-120.571-0.571-181.143 2.857c-70.286 3.429-132.571 19.429-184 70.857s-67.429 113.714-70.857 184c-3.429 60.571-2.857 120.571-2.857 181.143s-0.571 120.571 2.857 181.143c3.429 70.286 19.429 132.571 70.857 184s113.714 67.429 184 70.857c60.571 3.429 120.571 2.857 181.143 2.857s120.571 0.571 181.143-2.857c70.286-3.429 132.571-19.429 184-70.857s67.429-113.714 70.857-184c3.429-60.571 2.857-120.571 2.857-181.143z" />
|
||||
<glyph unicode="" glyph-name="back" horiz-adv-x="1081" d="M528.011 774.775c16.634-16.824 16.634-44.090 0-60.901l-268.163-271.054h664.167c23.536 0 42.613-19.288 42.613-43.073s-19.079-43.073-42.613-43.073h-664.167l268.163-271.054c16.149-16.902 15.914-43.764-0.515-60.379s-43.020-16.847-59.731-0.522l-340.907 344.585c-16.634 16.824-16.634 44.090 0 60.901l340.907 344.585c16.635 16.819 43.611 16.819 60.259 0z" />
|
||||
<glyph unicode="" glyph-name="new-tab" d="M294.223 704.892c-48.108 0-87.108-39-87.108-87.108v-435.553c0-48.108 39-87.108 87.108-87.108h435.553c48.108 0 87.108 39 87.108 87.108v43.554c0 24.054 19.5 43.554 43.554 43.554s43.554-19.5 43.554-43.554v-43.554c0-96.216-78-174.216-174.216-174.216h-435.553c-96.216 0-174.216 78-174.216 174.216v435.553c0 96.216 78 174.216 174.216 174.216h43.554c24.054 0 43.554-19.5 43.554-43.554s-19.5-43.554-43.554-43.554h-43.554zM590.017 713.504c-21.682 0-39.247 17.567-39.247 39.247s17.567 39.247 39.247 39.247h274.736c21.682 0 39.247-17.567 39.247-39.247v-274.736c0-21.682-17.567-39.247-39.247-39.247s-39.247 17.567-39.247 39.247v179.998l-246.983-246.983c-15.405-14.871-39.878-14.665-55.016 0.475s-15.357 39.616-0.475 55.016l246.983 246.983h-179.998z" />
|
||||
<glyph unicode="" glyph-name="dont" d="M63.085 896.257c20.118 20.126 52.733 20.126 72.851 0l375.744-375.992 375.744 375.992c12.936 13.403 32.093 18.776 50.104 14.061s32.081-18.795 36.798-36.819c4.717-18.024-0.658-37.195-14.051-50.141l-375.744-375.992 375.744-375.992c19.523-20.228 19.245-52.386-0.627-72.272s-52.005-20.164-72.224-0.627l-375.744 375.992-375.744-375.992c-20.213-19.537-52.347-19.259-72.224 0.627s-20.155 52.044-0.627 72.272l375.744 375.992-375.744 375.992c-20.111 20.133-20.111 52.766 0 72.899z" />
|
||||
<glyph unicode="" glyph-name="do" d="M357.341-15.976c-20.506 0.005-40.173 8.152-54.673 22.657l-231.988 231.988c-29.303 30.344-28.888 78.571 0.943 108.402s78.057 30.246 108.402 0.943l166.796-166.796 488.409 697.741c24.638 34.53 72.494 42.768 107.263 18.462s43.456-72.082 19.482-107.082l-541.301-773.287c-13.041-18.854-33.773-30.946-56.602-33.017-2.239-0.113-4.489-0.113-6.728 0z" />
|
||||
</font></defs></svg>
|
||||
|
До Ширина: | Высота: | Размер: 11 KiB После Ширина: | Высота: | Размер: 13 KiB |
Двоичные данные
assets/icomoon/fonts/icomoon.ttf
Двоичные данные
assets/icomoon/fonts/icomoon.ttf
Двоичный файл не отображается.
Двоичные данные
assets/icomoon/fonts/icomoon.woff
Двоичные данные
assets/icomoon/fonts/icomoon.woff
Двоичный файл не отображается.
Двоичные данные
assets/icomoon/fonts/icomoon.woff2
Двоичные данные
assets/icomoon/fonts/icomoon.woff2
Двоичный файл не отображается.
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,11 +1,11 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?pv3fbv');
|
||||
src: url('fonts/icomoon.eot?pv3fbv#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.woff2?pv3fbv') format('woff2'),
|
||||
url('fonts/icomoon.ttf?pv3fbv') format('truetype'),
|
||||
url('fonts/icomoon.woff?pv3fbv') format('woff'),
|
||||
url('fonts/icomoon.svg?pv3fbv#icomoon') format('svg');
|
||||
src: url('fonts/icomoon.eot?xpkwb6');
|
||||
src: url('fonts/icomoon.eot?xpkwb6#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.woff2?xpkwb6') format('woff2'),
|
||||
url('fonts/icomoon.ttf?xpkwb6') format('truetype'),
|
||||
url('fonts/icomoon.woff?xpkwb6') format('woff'),
|
||||
url('fonts/icomoon.svg?xpkwb6#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -28,6 +28,18 @@
|
|||
.icon-close:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-dont:before {
|
||||
content: "\e910";
|
||||
}
|
||||
.icon-do:before {
|
||||
content: "\e911";
|
||||
}
|
||||
.icon-back:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.icon-new-tab:before {
|
||||
content: "\e90f";
|
||||
}
|
||||
.icon-play:before {
|
||||
content: "\e900";
|
||||
}
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 73 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 62 KiB |
|
|
@ -31,7 +31,7 @@
|
|||
// $(document).video_cta({yt_object: YT, cta: '.video-link', close: null});
|
||||
// $(document).video_cta({yt_object: YT, cta: 'a[title|="Open Popup Video"]', close: null, youtube_id_data: 'href', target: $('#video-popup')});
|
||||
|
||||
$(document).video_cta({yt_object: YT, cta: '.video-link, a[title|="Open Popup Video"]', close: null, default_target: $('#video-popup')});
|
||||
$(document).video_cta({yt_object: YT, cta: '.video-link, a[title|="Open Popup Video"], .video-popup a', close: null, default_target: $('#video-popup')});
|
||||
|
||||
if ($('.video-banner').length) {
|
||||
$('.video-banner').each(function() {
|
||||
|
|
@ -77,8 +77,6 @@
|
|||
this.on('click', settings.cta, function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
console.log('clicked to play video!');
|
||||
|
||||
if($('#'+settings.container_id).length && playing) {
|
||||
closeVideo({fast:true});
|
||||
}
|
||||
|
|
@ -103,8 +101,6 @@ console.log('clicked to play video!');
|
|||
*/
|
||||
function onPlayerStateChange(event) {
|
||||
|
||||
console.log('video state change: ' + event.data);
|
||||
|
||||
// Open video player when playing
|
||||
if (event.data == settings.yt_object.PlayerState.PLAYING && !playing) {
|
||||
openVideo();
|
||||
|
|
@ -118,8 +114,6 @@ console.log('video state change: ' + event.data);
|
|||
// The API calls this function when the player is ready.
|
||||
function onPlayerReady(event) {
|
||||
|
||||
console.log('video ready');
|
||||
|
||||
if (playing) {
|
||||
closeVideo();
|
||||
}
|
||||
|
|
@ -134,8 +128,6 @@ console.log('video ready');
|
|||
|
||||
function loadVideo(id) {
|
||||
|
||||
console.log('load video');
|
||||
|
||||
$container = $(settings.container);
|
||||
|
||||
if (settings.close) {
|
||||
|
|
@ -175,8 +167,6 @@ console.log('load video');
|
|||
|
||||
function openVideo() {
|
||||
|
||||
console.log('open video');
|
||||
|
||||
playing = true;
|
||||
$container.addClass('playing');
|
||||
$link_container.addClass('playing');
|
||||
|
|
@ -190,8 +180,6 @@ console.log('open video');
|
|||
fast : false
|
||||
}, options);
|
||||
|
||||
console.log('close video');
|
||||
|
||||
yt_player.stopVideo();
|
||||
playing = false;
|
||||
$container.removeClass('playing');
|
||||
|
|
|
|||
|
|
@ -30,9 +30,14 @@ jQuery(document).ready(function($) {
|
|||
// ------------------
|
||||
|
||||
|
||||
// 1. Top Header Nav
|
||||
// 1. Page Nav
|
||||
if ($('.page-nav-container').length) {
|
||||
$('.page-nav-container').switchNav();
|
||||
$('.page-nav-container').switchPageNav();
|
||||
}
|
||||
|
||||
// 10. Site (Content Guidelines) Nav
|
||||
if ($('.site-wrapper .site-nav-container').length) {
|
||||
$('.site-wrapper .site-nav-container').switchSiteNav();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -143,17 +148,17 @@ jQuery(document).ready(function($) {
|
|||
// 1. Top Navigation : toggle mobile and desktop
|
||||
// ------
|
||||
|
||||
$.fn.switchNav = function(options) {
|
||||
$.fn.switchPageNav = function(options) {
|
||||
var settings = $.extend( {
|
||||
breakpoint : 'atleast_medium'
|
||||
}, options);
|
||||
|
||||
var $container = this;
|
||||
var nav_all = $container.allMenu();
|
||||
var nav_all = $container.pageMenu();
|
||||
var nav_desk = null;
|
||||
var nav_mobile = null;
|
||||
|
||||
function switchNav(obj, media) {
|
||||
function switchPageNav(obj, media) {
|
||||
|
||||
// Set Desktop Nav
|
||||
if (media[settings.breakpoint] || media.fallback) {
|
||||
|
|
@ -163,7 +168,7 @@ jQuery(document).ready(function($) {
|
|||
nav_mobile = null;
|
||||
}
|
||||
if (nav_desk == null) {
|
||||
nav_desk = $container.desktopMenu();
|
||||
nav_desk = $container.desktopPageMenu();
|
||||
}
|
||||
|
||||
// Set Mobile Nav
|
||||
|
|
@ -174,17 +179,17 @@ jQuery(document).ready(function($) {
|
|||
nav_desk = null;
|
||||
}
|
||||
if (nav_mobile == null) {
|
||||
nav_mobile = $container.mobileMenu();
|
||||
nav_mobile = $container.mobilePageMenu();
|
||||
}
|
||||
}
|
||||
}
|
||||
$.subscribe("breakpoints", switchNav);
|
||||
$.subscribe("breakpoints", switchPageNav);
|
||||
}
|
||||
|
||||
|
||||
// 1.a Mobile Menu
|
||||
|
||||
$.fn.mobileMenu = function() {
|
||||
$.fn.mobilePageMenu = function() {
|
||||
var $container = this;
|
||||
var $nav = $container.find('nav');
|
||||
var $jump = $container.find('.jump-link');
|
||||
|
|
@ -226,7 +231,6 @@ jQuery(document).ready(function($) {
|
|||
$jump.off('click');
|
||||
$nav.removeClass('open');
|
||||
$links.attr('style', '');
|
||||
$window.off('resize.mobileMenu');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -234,7 +238,7 @@ jQuery(document).ready(function($) {
|
|||
|
||||
// 1.b Desktop Menu
|
||||
|
||||
$.fn.desktopMenu = function() {
|
||||
$.fn.desktopPageMenu = function() {
|
||||
var $container = this;
|
||||
var $anchors = $container.find("a[href^='#']");
|
||||
|
||||
|
|
@ -250,7 +254,7 @@ jQuery(document).ready(function($) {
|
|||
|
||||
// 1.c Persistant Menu
|
||||
|
||||
$.fn.allMenu = function() {
|
||||
$.fn.pageMenu = function() {
|
||||
var $window = $(window);
|
||||
var $container = this;
|
||||
var $anchors = $container.find("a[href^='#']");
|
||||
|
|
@ -389,6 +393,112 @@ jQuery(document).ready(function($) {
|
|||
|
||||
|
||||
|
||||
|
||||
// 10. Top Navigation : toggle mobile and desktop
|
||||
// ------
|
||||
|
||||
$.fn.switchSiteNav = function(options) {
|
||||
var settings = $.extend( {
|
||||
breakpoint : 'atleast_medium'
|
||||
}, options);
|
||||
|
||||
var $container = this;
|
||||
var nav_all = $container.siteMenu();
|
||||
var nav_desk = null;
|
||||
var nav_mobile = null;
|
||||
|
||||
function switchSiteNav(obj, media) {
|
||||
|
||||
// Set Desktop Nav
|
||||
if (media[settings.breakpoint] || media.fallback) {
|
||||
|
||||
if (nav_mobile != null) {
|
||||
nav_mobile.kill();
|
||||
nav_mobile = null;
|
||||
}
|
||||
if (nav_desk == null) {
|
||||
nav_desk = $container.desktopSiteMenu();
|
||||
}
|
||||
|
||||
// Set Mobile Nav
|
||||
} else {
|
||||
|
||||
if (nav_desk != null) {
|
||||
nav_desk.kill();
|
||||
nav_desk = null;
|
||||
}
|
||||
if (nav_mobile == null) {
|
||||
nav_mobile = $container.mobileSiteMenu();
|
||||
}
|
||||
}
|
||||
}
|
||||
$.subscribe("breakpoints", switchSiteNav);
|
||||
}
|
||||
|
||||
|
||||
// 10.a Mobile Menu
|
||||
|
||||
$.fn.mobileSiteMenu = function() {
|
||||
var $container = this;
|
||||
var $nav = $container.find('nav');
|
||||
var $links = $container.find('p, li:not(.current)');
|
||||
var open = $nav.hasClass('open');
|
||||
var $window = $(window);
|
||||
|
||||
$window.on('scroll.mobile', function() {
|
||||
if ($window.scrollTop() >= $container.offset().top ) {
|
||||
$container.addClass('sticky');
|
||||
} else {
|
||||
$container.removeClass('sticky');
|
||||
}
|
||||
});
|
||||
|
||||
if (!open) {
|
||||
$links.velocity('slideUp', {duration: 0});
|
||||
}
|
||||
|
||||
$nav.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;
|
||||
});
|
||||
|
||||
return {
|
||||
kill: function() {
|
||||
$nav.off('click');
|
||||
$nav.removeClass('open');
|
||||
$links.attr('style', '');
|
||||
$window.off('scroll.mobile');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// 10.b Desktop Menu
|
||||
|
||||
$.fn.desktopSiteMenu = function() {
|
||||
return {
|
||||
kill: function() {}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// 10.c Persistant Menu
|
||||
|
||||
$.fn.siteMenu = function() {}
|
||||
|
||||
|
||||
|
||||
// 2. Anchor scroll
|
||||
// ------
|
||||
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
layout: page
|
||||
title: Example
|
||||
permalink: /content-guidelines/example/
|
||||
---
|
||||
|
||||
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
|
||||
|
||||
You can find the source code for Minima at GitHub:
|
||||
[jekyll][jekyll-organization] /
|
||||
[minima](https://github.com/jekyll/minima)
|
||||
|
||||
You can find the source code for Jekyll at GitHub:
|
||||
[jekyll][jekyll-organization] /
|
||||
[jekyll](https://github.com/jekyll/jekyll)
|
||||
|
||||
|
||||
[jekyll-organization]: https://github.com/jekyll
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="layout" content="page"/>
|
||||
<title>Master Template</title>
|
||||
<meta name="permalink" content="/content-guidelines/master-template/"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Full Width Image -->
|
||||
|
||||
<section class="image-with-caption" markdown="1">
|
||||
|
||||
Full width image (above)
|
||||
</section>
|
||||
<!-- END: Full Width Image -->
|
||||
|
||||
<!-- Half Width Images -->
|
||||
|
||||
<section class="image-with-caption grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
<p><img src="/assets/img/content-guidelines/example-remembear.png" alt="Screenshot Remembear" title="Screenshot Remembear" />
|
||||
Half width image (above)</p>
|
||||
|
||||
</div>
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
<p><img src="/assets/img/content-guidelines/example-remembear.png" alt="Screenshot Remembear" title="Screenshot Remembear" />
|
||||
Half width image (above)</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Half Width Images -->
|
||||
|
||||
<h2 id="movietitleloremipsum">Movie Title Lorem Ipsum</h2>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
|
||||
|
||||
<!-- Video Popup Thumbnail -->
|
||||
|
||||
<section class="video-popup" markdown="1">
|
||||
|
||||
<p><a href="a0_OsLGI0k4" title="What’s Great Content and Design?"><img src="/assets/img/content-guidelines/example-thumbnail.jpg" alt="What’s Great Content and Design?" /></a></p>
|
||||
|
||||
</section>
|
||||
<!-- END: Video Popup Thumbnail -->
|
||||
|
||||
<!-- Half Width Video Popup Thumbnails -->
|
||||
|
||||
<section class="video-popup grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
<p><a href="a0_OsLGI0k4" title="What’s Great Content and Design?"><img src="/assets/img/content-guidelines/example-thumbnail.jpg" alt="What’s Great Content and Design?" /></a></p>
|
||||
|
||||
<h4 id="what’sgreatcontentanddesign">What’s Great Content and Design?</h4>
|
||||
|
||||
<p>Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.</p>
|
||||
|
||||
</div>
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
<p><a href="a0_OsLGI0k4" title="What’s Great Content and Design?"><img src="/assets/img/content-guidelines/example-thumbnail.jpg" alt="What’s Great Content and Design?" /></a></p>
|
||||
|
||||
<h4 id="what’sgreatcontentanddesign">What’s Great Content and Design?</h4>
|
||||
|
||||
<p>Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Half Width Video Popup Thumbnails -->
|
||||
|
||||
<h2 id="icons">Icons</h2>
|
||||
|
||||
<p>Examples of goood icons</p>
|
||||
|
||||
<!-- Image Grid : use "shrink" class instead of "auto" to fit grid to image size -->
|
||||
|
||||
<section class="img-grid grid-container grid-x grid-padding-x">
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Image Grid -->
|
||||
|
||||
<p>Your extension’s name is critical. It shows up everywhere—in search results, on <a href="http://firefox.com" title="addons.mozilla.org">addons.mozilla.org</a>, and in the browser itself. It’s sometimes one of the few pieces of information that a user has to determine whether or not they are interested in what you built.</p>
|
||||
|
||||
<p>Research shows that people really do take an extension’s name into account when making installation decisions. And, what you put into the extension name field becomes your URL on <a href="http://firefox.com" title="addons.mozilla.org">addons.mozilla.org</a>.</p>
|
||||
|
||||
<p>Between your extension name and subtitle, you have up to 70 characters to use—that’s because 70 is the max character limit for your headline in external search results. It’s best to keep your extension name shorter so you have more characters left over for your subtitle.</p>
|
||||
|
||||
<ul>
|
||||
<li>Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Enim facilisis gravida neque convallis a cras. </li>
|
||||
<li>Id diam vel quam elementum pulvinar etiam non. Quam id leo in vitae turpis.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="extensionnamedo’sanddon’ts">Extension Name Do’s and Don’ts</h2>
|
||||
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||||
|
||||
<!-- Do this -->
|
||||
|
||||
<section class="do-this" markdown="1">
|
||||
<header><h5>Do This</h5></header>
|
||||
|
||||
<ol>
|
||||
<li><strong>Make it memorable</strong></li>
|
||||
<li><strong>Make it unique</strong></li>
|
||||
<li><strong>Keep it short for better display on smaller screens</strong></li>
|
||||
<li><strong>Make it easy to read and say</strong></li>
|
||||
<li><strong>Give an idea or hint about what your extension does with an illustrative word or metaphor</strong></li>
|
||||
</ol>
|
||||
|
||||
<!-- Example -->
|
||||
|
||||
<div class="example" markdown="1">
|
||||
|
||||
<p>Examples:<br />
|
||||
An extension that saves passwords is called <strong>Remembear</strong></p>
|
||||
|
||||
<p>An extension that puts a cat on new tabs is called <strong>Tabbycat</strong></p>
|
||||
|
||||
<p>An extension that improves YouTube is called <strong>Enhancer for YouTube</strong></p>
|
||||
|
||||
</div>
|
||||
<!-- END: Example -->
|
||||
|
||||
</section>
|
||||
<!-- END: Do this -->
|
||||
|
||||
<!-- Not this -->
|
||||
|
||||
<section class="not-this" markdown="1">
|
||||
<header><h5>Not This</h5></header>
|
||||
|
||||
<ol>
|
||||
<li><strong>Don’t include a description.</strong></li>
|
||||
</ol>
|
||||
|
||||
<p>
Save these details for your subtitle and description.</p>
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: Videomix, a fast video downloader</span>
|
||||
<!-- END: Inline Example -->
|
||||
|
||||
<ol>
|
||||
<li><strong>Don’t stuff it with keywords.</strong></li>
|
||||
</ol>
|
||||
|
||||
<p>
Google is smarter than this and it just makes your extension look untrustworthy.</p>
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: Youtube Download Videos, Convert, Media, MP3, MP4, Free.</span>
|
||||
<!-- END: Inline Example -->
|
||||
|
||||
<ol>
|
||||
<li><strong>Don’t use random words to differentiate, like “Barbara Notetaker.”</strong></li>
|
||||
</ol>
|
||||
|
||||
<p>
Instead, create a descriptive name that is not already in use, like “Instant Notetaker.”</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Don’t call it something with no meaning, like “hoyv.”</strong></li>
|
||||
</ol>
|
||||
|
||||
<p>
While the name “hoyv” doesn’t work, the name “uBlock Origin” for an ad-blocking extension does because it contains the word “block”.</p>
|
||||
|
||||
<ol>
|
||||
<li><p><strong>Don’t include “WebExtension,” “Firefox” or “Mozilla."</strong></p></li>
|
||||
<li><p><strong>Don’t include version number or a previous name.</strong></p></li>
|
||||
</ol>
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: Weatherchanger (fix version)</span>
|
||||
<!-- END: Example -->
|
||||
|
||||
<ol>
|
||||
<li><strong>Don’t make it hard to read or say.</strong></li>
|
||||
</ol>
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: TrLrs! Tab Changer.</span>
|
||||
<!-- END: Inline Example -->
|
||||
|
||||
<p><strong>Remembear Example:</strong></p>
|
||||
|
||||
<!-- Full Width Image -->
|
||||
|
||||
<section class="image-with-caption" markdown="1">
|
||||
|
||||
</section>
|
||||
<!-- END: Full Width Image -->
|
||||
|
||||
<p><strong>List Example:</strong></p>
|
||||
|
||||
<p><a href="http://firefox.com" title="Honey
">Honey
</a><br />
|
||||
<a href="http://firefox.com" title="Ghoastery">Ghoastery</a><br />
|
||||
<a href="http://firefox.com" title="Disconnect">Disconnect</a><br />
|
||||
<a href="http://firefox.com" title="Ecoesia">Ecoesia</a><br />
|
||||
<a href="http://firefox.com" title="Mate Translate">Mate Translate</a></p>
|
||||
|
||||
</section>
|
||||
<!-- END: Not this -->
|
||||
|
||||
<!-- Do this, not this, side-by-side -->
|
||||
|
||||
<section class="do-this-not-this grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12 medium-6">
|
||||
<div class="do-this" markdown="1">
|
||||
<header><h5>Do This</h5></header>
|
||||
|
||||
<ol>
|
||||
<li><strong>Make it memorable</strong></li>
|
||||
<li><strong>Make it unique</strong></li>
|
||||
<li><strong>Keep it short for better display on smaller screens</strong></li>
|
||||
</ol>
|
||||
|
||||
<!-- Example -->
|
||||
|
||||
<div class="example" markdown="1">
|
||||
|
||||
<p>Examples:<br />
|
||||
An extension that saves passwords is called <strong>Remembear</strong></p>
|
||||
|
||||
<p>An extension that puts a cat on new tabs is called <strong>Tabbycat</strong></p>
|
||||
|
||||
<p>An extension that improves YouTube is called <strong>Enhancer for YouTube</strong></p>
|
||||
|
||||
</div>
|
||||
<!-- END: Example -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell small-12 medium-6">
|
||||
<div class="not-this" markdown="1">
|
||||
<header><h5>Not This</h5></header>
|
||||
|
||||
<ol>
|
||||
<li><strong>Make it memorable</strong></li>
|
||||
<li><strong>Make it unique</strong></li>
|
||||
<li><strong>Keep it short for better display on smaller screens</strong></li>
|
||||
</ol>
|
||||
|
||||
<!-- Example -->
|
||||
|
||||
<div class="example" markdown="1">
|
||||
|
||||
<p>Examples:<br />
|
||||
An extension that saves passwords is called <strong>Remembear</strong></p>
|
||||
|
||||
<p>An extension that puts a cat on new tabs is called <strong>Tabbycat</strong></p>
|
||||
|
||||
<p>An extension that improves YouTube is called <strong>Enhancer for YouTube</strong></p>
|
||||
|
||||
</div>
|
||||
<!-- END: Example -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Do this, not this, side-by-side -->
|
||||
|
||||
<!-- Card -->
|
||||
|
||||
<div class="tile" markdown="1">
|
||||
|
||||
<h4 id="requirements">Requirements</h4>
|
||||
|
||||
<ul>
|
||||
<li>Minimum length: 2 characters</li>
|
||||
<li>Maximum length: 70 characters between extension name and subtitle</li>
|
||||
<li>Lorem ipsum: dolor sit amet, consectetur adipiscing elit</li>
|
||||
<li>Sed do eiusmod: tempor incididunt ut labore et dolore magna aliqua</li>
|
||||
<li>Ut enim ad: minim veniam, quis nostrud exercitation ullamco laboris</li>
|
||||
<li>Nisi ut aliquip: ex ea commodo consequat</li>
|
||||
<li>Duis aute: irure dolor in reprehenderit in voluptate velit esse cillum</li>
|
||||
<li>Excepteur sint: occaecat cupidatat non proident</li>
|
||||
<li>Bunt in culpa: qui officia deserunt mollit anim id est laborum</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<!-- END: Card -->
|
||||
|
||||
<h2 id="stucktrythis.">Stuck? Try this.</h2>
|
||||
|
||||
<h4 id="1.identifytheproblem">1. Identify the problem</h4>
|
||||
|
||||
<p>What problem does your extension solve? You had a reason for creating that extension…what was it? Write that down.</p>
|
||||
|
||||
<p>Take the popular extension, Remembear, as an example. You can imagine the creator of this extension writing, "I am tired of having to remember all of my passwords for the web. And I worry that these passwords will get stolen. I want a simple way to save and secure my passwords so they are always at my fingertips. And I don’t want the experience to be an unpleasant, security-laden process. Let’s make it friendly and easy.</p>
|
||||
|
||||
<h4 id="2.identifykeywords">2. Identify key words</h4>
|
||||
|
||||
<p>Pull out the key words (nouns, adjectives, verbs) and phrases from your description
and create a word list. Add other words that come to mind based on those words, including synonyms.</p>
|
||||
|
||||
<p>Remembear Example:</p>
|
||||
|
||||
<ul>
|
||||
<li>Tired</li>
|
||||
<li>Remember</li>
|
||||
<li>Passwords</li>
|
||||
<li>Worry</li>
|
||||
<li>Stolen</li>
|
||||
<li>Simple</li>
|
||||
<li>Save</li>
|
||||
<li>Secure</li>
|
||||
<li>At your fingertips</li>
|
||||
<li>Friendly</li>
|
||||
<li>Easy</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>Example Lorum Ipsum</li>
|
||||
</ol>
|
||||
|
||||
<p>Pull out the key words (nouns, adjectives, verbs) and phrases from your description
and create a word list. Add other words that come to mind based on those words, including synonyms.</p>
|
||||
|
||||
<p>Remembear: dolore eu fugiat nulla pariatur lemera dosada peel.</p>
|
||||
|
||||
<p><a href="http://firefox.com" title="Extension Link
">Extension Link
</a><br />
|
||||
<a href="http://firefox.com" title="Extension Link
">Extension Link
</a><br />
|
||||
<a href="http://firefox.com" title="Extension Link
">Extension Link
</a></p>
|
||||
|
||||
<!-- Helpful vote card -->
|
||||
|
||||
<div class="tile vote" markdown="1">
|
||||
|
||||
<p>Tell us, is the content of this page helpful?</p>
|
||||
|
||||
</div>
|
||||
<!-- END: Helpful vote card -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
---
|
||||
layout: page
|
||||
title: Master Template
|
||||
permalink: /content-guidelines/master-template/
|
||||
---
|
||||
|
||||
<!-- Full Width Image -->
|
||||
<section class="image-with-caption" markdown="1">
|
||||
|
||||
Full width image (above)
|
||||
</section>
|
||||
<!-- END: Full Width Image -->
|
||||
|
||||
<!-- Half Width Images -->
|
||||
<section class="image-with-caption grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
|
||||
Half width image (above)
|
||||
|
||||
</div>
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
|
||||
Half width image (above)
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Half Width Images -->
|
||||
|
||||
## Movie Title Lorem Ipsum
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
|
||||
|
||||
<!-- Video Popup Thumbnail -->
|
||||
<section class="video-popup" markdown="1">
|
||||
|
||||
[](a0_OsLGI0k4 "What’s Great Content and Design?")
|
||||
|
||||
</section>
|
||||
<!-- END: Video Popup Thumbnail -->
|
||||
|
||||
<!-- Half Width Video Popup Thumbnails -->
|
||||
<section class="video-popup grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
[](a0_OsLGI0k4 "What’s Great Content and Design?")
|
||||
|
||||
#### What’s Great Content and Design?
|
||||
|
||||
Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.
|
||||
|
||||
</div>
|
||||
<div class="cell small-12 medium-6" markdown="1">
|
||||
|
||||
[](a0_OsLGI0k4 "What’s Great Content and Design?")
|
||||
|
||||
#### What’s Great Content and Design?
|
||||
|
||||
Featuring Madhava Enros, Senior Director of Firefox User Experience, and Dietrich Ayala, extension developer.
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Half Width Video Popup Thumbnails -->
|
||||
|
||||
## Icons
|
||||
Examples of goood icons
|
||||
|
||||
<!-- Image Grid : use "shrink" class instead of "auto" to fit grid to image size -->
|
||||
<section class="img-grid grid-container grid-x grid-padding-x">
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
<div class="cell auto" markdown="1">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Image Grid -->
|
||||
|
||||
Your extension’s name is critical. It shows up everywhere—in search results, on [addons.mozilla.org](http://firefox.com "addons.mozilla.org"), and in the browser itself. It’s sometimes one of the few pieces of information that a user has to determine whether or not they are interested in what you built.
|
||||
|
||||
Research shows that people really do take an extension’s name into account when making installation decisions. And, what you put into the extension name field becomes your URL on [addons.mozilla.org](http://firefox.com "addons.mozilla.org").
|
||||
|
||||
Between your extension name and subtitle, you have up to 70 characters to use—that’s because 70 is the max character limit for your headline in external search results. It’s best to keep your extension name shorter so you have more characters left over for your subtitle.
|
||||
|
||||
* Tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Enim facilisis gravida neque convallis a cras.
|
||||
* Id diam vel quam elementum pulvinar etiam non. Quam id leo in vitae turpis.
|
||||
|
||||
## Extension Name Do’s and Don’ts
|
||||
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
|
||||
<!-- Do this -->
|
||||
<section class="do-this" markdown="1">
|
||||
<header><h5>Do This</h5></header>
|
||||
|
||||
1. __Make it memorable__
|
||||
2. __Make it unique__
|
||||
3. __Keep it short for better display on smaller screens__
|
||||
4. __Make it easy to read and say__
|
||||
5. __Give an idea or hint about what your extension does with an illustrative word or metaphor__
|
||||
|
||||
<!-- Example -->
|
||||
<div class="example" markdown="1">
|
||||
|
||||
Examples:
|
||||
An extension that saves passwords is called __Remembear__
|
||||
|
||||
An extension that puts a cat on new tabs is called __Tabbycat__
|
||||
|
||||
An extension that improves YouTube is called __Enhancer for YouTube__
|
||||
|
||||
</div>
|
||||
<!-- END: Example -->
|
||||
|
||||
</section>
|
||||
<!-- END: Do this -->
|
||||
|
||||
<!-- Not this -->
|
||||
<section class="not-this" markdown="1">
|
||||
<header><h5>Not This</h5></header>
|
||||
|
||||
1. __Don't include a description.__
|
||||
|
||||
Save these details for your subtitle and description.
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: Videomix, a fast video downloader</span>
|
||||
<!-- END: Inline Example -->
|
||||
|
||||
2. __Don't stuff it with keywords.__
|
||||
|
||||
Google is smarter than this and it just makes your extension look untrustworthy.
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: Youtube Download Videos, Convert, Media, MP3, MP4, Free.</span>
|
||||
<!-- END: Inline Example -->
|
||||
|
||||
3. __Don't use random words to differentiate, like “Barbara Notetaker.”__
|
||||
|
||||
Instead, create a descriptive name that is not already in use, like “Instant Notetaker.”
|
||||
|
||||
4. __Don't call it something with no meaning, like “hoyv.”__
|
||||
|
||||
While the name “hoyv” doesn’t work, the name “uBlock Origin” for an ad-blocking extension does because it contains the word “block”.
|
||||
|
||||
5. __Don't include "WebExtension," “Firefox” or “Mozilla."__
|
||||
|
||||
6. __Don't include version number or a previous name.__
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: Weatherchanger (fix version)</span>
|
||||
<!-- END: Example -->
|
||||
|
||||
7. __Don't make it hard to read or say.__
|
||||
|
||||
<!-- Inline Example -->
|
||||
<span class="example" markdown="1">Example: TrLrs! Tab Changer.</span>
|
||||
<!-- END: Inline Example -->
|
||||
|
||||
__Remembear Example:__
|
||||
|
||||
<!-- Full Width Image -->
|
||||
<section class="image-with-caption" markdown="1">
|
||||
|
||||
</section>
|
||||
<!-- END: Full Width Image -->
|
||||
|
||||
__List Example:__
|
||||
|
||||
[Honey
](http://firefox.com "Honey
")
|
||||
[Ghoastery](http://firefox.com "Ghoastery")
|
||||
[Disconnect](http://firefox.com "Disconnect")
|
||||
[Ecoesia](http://firefox.com "Ecoesia")
|
||||
[Mate Translate](http://firefox.com "Mate Translate")
|
||||
|
||||
</section>
|
||||
<!-- END: Not this -->
|
||||
|
||||
<!-- Do this, not this, side-by-side -->
|
||||
<section class="do-this-not-this grid-container grid-x grid-padding-x">
|
||||
<div class="cell small-12 medium-6">
|
||||
<div class="do-this" markdown="1">
|
||||
<header><h5>Do This</h5></header>
|
||||
|
||||
1. __Make it memorable__
|
||||
2. __Make it unique__
|
||||
3. __Keep it short for better display on smaller screens__
|
||||
|
||||
<!-- Example -->
|
||||
<div class="example" markdown="1">
|
||||
|
||||
Examples:
|
||||
An extension that saves passwords is called __Remembear__
|
||||
|
||||
An extension that puts a cat on new tabs is called __Tabbycat__
|
||||
|
||||
An extension that improves YouTube is called __Enhancer for YouTube__
|
||||
|
||||
</div>
|
||||
<!-- END: Example -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell small-12 medium-6">
|
||||
<div class="not-this" markdown="1">
|
||||
<header><h5>Not This</h5></header>
|
||||
|
||||
1. __Make it memorable__
|
||||
2. __Make it unique__
|
||||
3. __Keep it short for better display on smaller screens__
|
||||
|
||||
<!-- Example -->
|
||||
<div class="example" markdown="1">
|
||||
|
||||
Examples:
|
||||
An extension that saves passwords is called __Remembear__
|
||||
|
||||
An extension that puts a cat on new tabs is called __Tabbycat__
|
||||
|
||||
An extension that improves YouTube is called __Enhancer for YouTube__
|
||||
|
||||
</div>
|
||||
<!-- END: Example -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Do this, not this, side-by-side -->
|
||||
|
||||
<!-- Card -->
|
||||
<div class="tile" markdown="1">
|
||||
|
||||
#### Requirements
|
||||
|
||||
* Minimum length: 2 characters
|
||||
* Maximum length: 70 characters between extension name and subtitle
|
||||
* Lorem ipsum: dolor sit amet, consectetur adipiscing elit
|
||||
* Sed do eiusmod: tempor incididunt ut labore et dolore magna aliqua
|
||||
* Ut enim ad: minim veniam, quis nostrud exercitation ullamco laboris
|
||||
* Nisi ut aliquip: ex ea commodo consequat
|
||||
* Duis aute: irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
* Excepteur sint: occaecat cupidatat non proident
|
||||
* Bunt in culpa: qui officia deserunt mollit anim id est laborum
|
||||
|
||||
</div>
|
||||
<!-- END: Card -->
|
||||
|
||||
|
||||
## Stuck? Try this.
|
||||
|
||||
#### 1. Identify the problem
|
||||
|
||||
What problem does your extension solve? You had a reason for creating that extension...what was it? Write that down.
|
||||
|
||||
Take the popular extension, Remembear, as an example. You can imagine the creator of this extension writing, "I am tired of having to remember all of my passwords for the web. And I worry that these passwords will get stolen. I want a simple way to save and secure my passwords so they are always at my fingertips. And I don’t want the experience to be an unpleasant, security-laden process. Let’s make it friendly and easy.
|
||||
|
||||
#### 2. Identify key words
|
||||
|
||||
Pull out the key words (nouns, adjectives, verbs) and phrases from your description
and create a word list. Add other words that come to mind based on those words, including synonyms.
|
||||
|
||||
Remembear Example:
|
||||
|
||||
* Tired
|
||||
* Remember
|
||||
* Passwords
|
||||
* Worry
|
||||
* Stolen
|
||||
* Simple
|
||||
* Save
|
||||
* Secure
|
||||
* At your fingertips
|
||||
* Friendly
|
||||
* Easy
|
||||
|
||||
3. Example Lorum Ipsum
|
||||
|
||||
Pull out the key words (nouns, adjectives, verbs) and phrases from your description
and create a word list. Add other words that come to mind based on those words, including synonyms.
|
||||
|
||||
Remembear: dolore eu fugiat nulla pariatur lemera dosada peel.
|
||||
|
||||
[Extension Link
](http://firefox.com "Extension Link
")
|
||||
[Extension Link
](http://firefox.com "Extension Link
")
|
||||
[Extension Link
](http://firefox.com "Extension Link
")
|
||||
|
||||
<!-- Helpful vote card -->
|
||||
<div class="tile vote" markdown="1">
|
||||
|
||||
Tell us, is the content of this page helpful?
|
||||
|
||||
</div>
|
||||
<!-- END: Helpful vote card -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Загрузка…
Ссылка в новой задаче