зеркало из https://github.com/mozilla/deepdev.git
Setting up UI. No time to figure out smooth scrolling sans jQuery.
This commit is contained in:
Rachel Nabors
Родитель
2b42c7b6ef
Коммит
e606a2d731
|
|
@ -1 +1,3 @@
|
|||
.DS_Store
|
||||
.sass-cache/*
|
||||
.sass-cache/
|
||||
63
css/main.css
63
css/main.css
|
|
@ -50,10 +50,17 @@ html {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* UI */
|
||||
.indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segment {
|
||||
min-height: 100vh;
|
||||
min-height: 80rem;
|
||||
position: relative;
|
||||
padding: 0 2em;
|
||||
padding: 2em;
|
||||
padding-top: 2.33333rem;
|
||||
padding-bottom: 2.66667rem;
|
||||
}
|
||||
@media (min-width: 54em) {
|
||||
.segment {
|
||||
|
|
@ -61,16 +68,9 @@ html {
|
|||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.segment h1, .segment h2, .segment h3, .segment p, .segment li {
|
||||
opacity: 0;
|
||||
transition: opacity 2.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.segment * {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.segment.in-view h1, .segment.in-view h2, .segment.in-view h3, .segment.in-view p, .segment.in-view li {
|
||||
opacity: 1;
|
||||
}
|
||||
.segment.in-view .subtitle {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
@ -78,14 +78,27 @@ html {
|
|||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.challenge, .solved .challenge, .facts, .show-challenge .facts {
|
||||
.segment h1, .segment h2, .segment h3, .segment .content, .challenge, .solved .challenge {
|
||||
opacity: 0;
|
||||
transition: opacity 2.1s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
.solving .challenge, .show-challenge .challenge, .solved .facts {
|
||||
.segment.in-view h1, .segment.in-view h2, .segment.in-view h3, .segment.in-view .content, .solving .challenge, .show-challenge .challenge, .solved .facts {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.puzzle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.challenge {
|
||||
transition-duration: 300ms;
|
||||
background: #0b4a61;
|
||||
padding: 1.33333rem 1em;
|
||||
margin: 1.33333rem -1em;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, p, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -132,12 +145,7 @@ li {
|
|||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
@media (min-width: 54em) {
|
||||
p {
|
||||
padding-bottom: 2rem;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
|
|
@ -171,22 +179,28 @@ img {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#title {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 190px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.waves {
|
||||
background: #39dbb4;
|
||||
height: 110px;
|
||||
padding-bottom: 2em;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 2em;
|
||||
bottom: 60px;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
height: 130px;
|
||||
}
|
||||
.in-zone .wave {
|
||||
animation-name: oceanSurge;
|
||||
|
|
@ -212,7 +226,6 @@ img {
|
|||
}
|
||||
|
||||
.wave-close {
|
||||
bottom: 1.9em;
|
||||
animation-duration: 3.4s;
|
||||
}
|
||||
.wave-close:before {
|
||||
|
|
@ -224,14 +237,14 @@ img {
|
|||
animation-duration: 5.5s;
|
||||
}
|
||||
.wave-near:before {
|
||||
background: url("../img/wave-near.svg") repeat-x 60% 100%;
|
||||
background: url("../img/wave-near.svg") repeat-x 100% 100%;
|
||||
animation-duration: 3.4s;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.wave-mid {
|
||||
background: #002351;
|
||||
padding-top: 10px;
|
||||
height: 130px;
|
||||
}
|
||||
.wave-mid:before {
|
||||
background: url("../img/wave-mid.svg") repeat-x 0 10px;
|
||||
|
|
@ -249,6 +262,7 @@ img {
|
|||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
/* Zones */
|
||||
#epipelagic {
|
||||
background: linear-gradient(to bottom, #39dbb4 0%, #007e84 50%, #0b4960 100%);
|
||||
color: #06191b;
|
||||
|
|
@ -277,4 +291,5 @@ footer {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
line-height: 2em;
|
||||
z-index: 3;
|
||||
}
|
||||
|
|
|
|||
42
index.html
42
index.html
|
|
@ -54,10 +54,16 @@
|
|||
<div class="facts">
|
||||
<p>Flashlight fish are a tropical species that sometimes comes out of the deep at night. They have a bioluminescent pocket under their eye they use to communicate with each other, disorient predators, and hunt.</p>
|
||||
</div>
|
||||
<div class="puzzle">
|
||||
<div class="creature_flashlight-fish" id="creature_flashlight-fish1">
|
||||
<img src="img/fish-test.png" />
|
||||
</div>
|
||||
<div class="indicator">Start challenge</div>
|
||||
</div>
|
||||
<div class="challenge">
|
||||
<p>Oh no! This little flashlight fish is having trouble keeping up with the others. Use your browser’s dev tools to unpause its swimming animation so it can catch up.</p>
|
||||
<iframe width="420" height="315" class="video" src="https://www.youtube.com/embed/T2jykykN3yc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<img src="img/fish-test.png" />
|
||||
</div>
|
||||
<div class="segment right" id="d600">
|
||||
<h3>Nautilus</h3>
|
||||
|
|
@ -68,19 +74,33 @@
|
|||
<div class="challenge">
|
||||
<p>Nautili get around using jet propulsion. This coupled with their buoyant, air-filled shells, gives them their characteristic bobbing motion as they move through the water.</p>
|
||||
<p>These nautili are moving a little too smoothly through the water. Use your browser’s dev tools to adjust their easing to look more natural.</p>
|
||||
<iframe width="420" height="315" class="video" src="https://www.youtube.com/embed/T2jykykN3yc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="puzzle">
|
||||
<div class="creature_flashlight-fish" id="creature_flashlight-fish1">
|
||||
<img src="img/fish-test.png" />
|
||||
</div>
|
||||
<div class="indicator">Start challenge</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="segment top" id="d800">
|
||||
<h3>Humboldt Squid</h3>
|
||||
<div class="challenge">
|
||||
<p>When Humboldt squid feed, they rapidly flash from white to red. Scientists think they might actually be flashing as a form of camouflage or to disorient their prey.</p>
|
||||
<p>These squid are on the hunt! But how are they changing colors so quickly? Use the animation playback controls to slow down their flashing and see what's really happening.</p>
|
||||
</div>
|
||||
<div class="facts">
|
||||
<p>The chromatophores on the Humboldt’s body change color too rapidly for the human eye to perceive. There coloration and aggressive feeding behavior have earned them the nickname “red devils” with Mexican fishermen.</p>
|
||||
<p>These squid can form huge shoals of over 1000 individuals. They take only a year to grow to full size, and that fast growth means a big appetite.</p>
|
||||
<p>Recently, this species has started spreading northward as far as the coast of Oregon in the United States. If the thought of armies of aggro squid invading your coastline keeps you up at night, take heart: although Humboldts do migrate toward the surface at night to hunt, you’re unlikely to ever encounter one. The upward limit of their migration, 130 meters below the surface, is well below the depth of unassisted divers.</p>
|
||||
</div>
|
||||
<div class="challenge">
|
||||
<p>When Humboldt squid feed, they rapidly flash from white to red. Scientists think they might actually be flashing as a form of camouflage or to disorient their prey.</p>
|
||||
<p>These squid are on the hunt! But how are they changing colors so quickly? Use the animation playback controls to slow down their flashing and see what's really happening.</p>
|
||||
<iframe width="420" height="315" class="video" src="https://www.youtube.com/embed/T2jykykN3yc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="puzzle">
|
||||
<div class="creature_flashlight-fish" id="creature_flashlight-fish1">
|
||||
<img src="img/fish-test.png" />
|
||||
</div>
|
||||
<div class="indicator">Start challenge</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zone" id="bathypelagic">
|
||||
|
|
@ -107,9 +127,14 @@
|
|||
</div>
|
||||
<div class="facts">
|
||||
<p>Red wavelengths are the first part of the color spectrum to be filtered out by water. In other words, the deeper you go, the bluer things get. Many fish in the deep are bright red in broad daylight, but look black down here because there's no red light for them to reflect. (Why don’t you check out how the Humboldt squid look with the filter off?)</p>
|
||||
<iframe width="420" height="315" class="video" src="https://www.youtube.com/embed/T2jykykN3yc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="puzzle">
|
||||
<div class="creature_orange-roughy" id="creature_orange-roughy1">
|
||||
<img src="img/creature_orange-roughy2.png" height="407" width="741">
|
||||
</div>
|
||||
<div class="indicator">Start challenge</div>
|
||||
</div>
|
||||
<img src="img/creature_orange-roughy.png" height="409" width="744" class="creature" />
|
||||
<img src="img/creature_orange-roughy2.png" height="407" width="741">
|
||||
</div>
|
||||
<div class="segment focus" id="d1800">
|
||||
<div class="content">
|
||||
|
|
@ -221,6 +246,9 @@
|
|||
<script src="js/vendor/anchor.1.2.1.min.js"></script>
|
||||
<script src="js/vendor/waypoints.noframework.4.0.0.min.js"></script>
|
||||
<script src="js/vendor/waypoints.inview.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>if (!window.jQuery) { document.write('<script src="js/jquery-2.1.4.min.js"><\/script>'); }
|
||||
</script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
|
||||
|
|
|
|||
65
js/main.js
65
js/main.js
|
|
@ -1,5 +1,5 @@
|
|||
(function(){
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
var waypoint = new Waypoint({
|
||||
|
|
@ -15,14 +15,14 @@
|
|||
new Waypoint.Inview({
|
||||
element: child,
|
||||
enter: function(direction) {
|
||||
this.element.classList.add("in-zone");
|
||||
this.element.classList.add('in-zone');
|
||||
},
|
||||
// entered: function(direction) {
|
||||
// },
|
||||
// exit: function(direction) {
|
||||
// },
|
||||
exited: function(direction) {
|
||||
this.element.classList.remove("in-zone");
|
||||
this.element.classList.remove('in-zone');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
@ -33,15 +33,70 @@
|
|||
new Waypoint.Inview({
|
||||
element: child,
|
||||
enter: function(direction) {
|
||||
this.element.classList.add("in-view");
|
||||
this.element.classList.add('in-view');
|
||||
},
|
||||
// entered: function(direction) {
|
||||
// },
|
||||
// exit: function(direction) {
|
||||
// },
|
||||
exited: function(direction) {
|
||||
this.element.classList.remove("in-view");
|
||||
this.element.classList.remove('in-view');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
var indicators = document.getElementsByClassName('indicator');
|
||||
|
||||
Array.prototype.forEach.call(indicators, function(indicator) {
|
||||
indicator.addEventListener('click', function(){
|
||||
var parent = findParentBySelector(indicator, '.segment');
|
||||
parent.classList.toggle('show-challenge');
|
||||
// var challenge = parent.getElementsByClassName('challenge')[0];
|
||||
var puzzle = findParentBySelector(indicator, '.puzzle');
|
||||
$('html, body').animate({
|
||||
scrollTop: $(puzzle).offset().top
|
||||
}, 300);
|
||||
})
|
||||
});
|
||||
|
||||
// Debouncing on rezize
|
||||
// http://davidwalsh.name/javascript-debounce-function
|
||||
// If `immediate` is passed, trigger the function on the
|
||||
// leading edge, instead of the trailing.
|
||||
|
||||
// call like so: window.addEventListener('resize', myEfficientFn);
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// For accessing parents by selector:
|
||||
// http://stackoverflow.com/questions/14234560/javascript-how-to-get-parent-element-by-selector
|
||||
function collectionHas(a, b) { //helper function (see below)
|
||||
for(var i = 0, len = a.length; i < len; i ++) {
|
||||
if(a[i] == b) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function findParentBySelector(elm, selector) {
|
||||
var all = document.querySelectorAll(selector);
|
||||
var cur = elm.parentNode;
|
||||
while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
|
||||
cur = cur.parentNode; //go up
|
||||
}
|
||||
return cur; //will return null if not found
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@ $skyMedium: #4ed9f2;
|
|||
$base-font-color: color(copy);
|
||||
|
||||
$colors: (
|
||||
copy: $greyLight,
|
||||
altCopy: $black,
|
||||
titleCopy: $abyss,
|
||||
altTitleCopy: $greyDark,
|
||||
link: $biolumination,
|
||||
link-visited: $skyMedium,
|
||||
sky: $skyLight,
|
||||
copy: $greyLight,
|
||||
altCopy: $black,
|
||||
titleCopy: $abyss,
|
||||
altTitleCopy: $greyDark,
|
||||
link: $biolumination,
|
||||
link-visited: $skyMedium,
|
||||
sky: $skyLight,
|
||||
);
|
||||
|
||||
// Now, getting colors...
|
||||
|
|
@ -50,12 +50,12 @@ $colors: (
|
|||
|
||||
// Easings
|
||||
$easings: (
|
||||
// in: cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
out: cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
inOut: cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
bounceIn: cubic-bezier(0.6, -0.28, 0.735, 0.045),
|
||||
bounceOut: cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
bounceInOut: cubic-bezier(0.68, -0.55, 0.265, 1.55)
|
||||
// in: cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
out: cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
inOut: cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
bounceIn: cubic-bezier(0.6, -0.28, 0.735, 0.045),
|
||||
bounceOut: cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
bounceInOut: cubic-bezier(0.68, -0.55, 0.265, 1.55)
|
||||
);
|
||||
|
||||
@function ease($key) {
|
||||
|
|
@ -69,15 +69,15 @@ $easings: (
|
|||
|
||||
// Timings
|
||||
$durations: (
|
||||
fast: 200ms,
|
||||
timely: 300ms,
|
||||
slow: 500ms,
|
||||
slower: 800ms,
|
||||
slowest: 1.3s,
|
||||
days: 2.1s,
|
||||
weeks: 3.4s,
|
||||
months: 5.5s,
|
||||
years: 8.9s,
|
||||
fast: 200ms,
|
||||
timely: 300ms,
|
||||
slow: 500ms,
|
||||
slower: 800ms,
|
||||
slowest: 1.3s,
|
||||
days: 2.1s,
|
||||
weeks: 3.4s,
|
||||
months: 5.5s,
|
||||
years: 8.9s,
|
||||
);
|
||||
|
||||
@function duration($key) {
|
||||
|
|
|
|||
|
|
@ -2,31 +2,37 @@
|
|||
@import "config";
|
||||
@import "typography";
|
||||
|
||||
$heightScreen: 100vh; // 100vh = height of screen = 200 meters of ocean
|
||||
$heightScreen: 80rem; // 100vh = height of screen = 200 meters of ocean
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* UI */
|
||||
.indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segment {
|
||||
min-height: $heightScreen;
|
||||
position: relative;
|
||||
padding: 0 2em;
|
||||
padding: 2em;
|
||||
@include padding-leader(7);
|
||||
@include padding-trailer(8);
|
||||
@include breakpoint($double_col){
|
||||
max-width: 102rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@extend %t-medium;
|
||||
h1, h2, h3, p, li {
|
||||
opacity: 0;
|
||||
transition: opacity duration(days) ease(out);
|
||||
h1, h2, h3, .content {
|
||||
@extend %content-hidden;
|
||||
}
|
||||
* {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
&.in-view {
|
||||
h1, h2, h3, p, li {
|
||||
opacity: 1;
|
||||
h1, h2, h3, .content {
|
||||
@extend %content-revealed;
|
||||
}
|
||||
.subtitle {
|
||||
opacity: .6
|
||||
|
|
@ -58,13 +64,27 @@ $heightScreen: 100vh; // 100vh = height of screen = 200 meters of ocean
|
|||
|
||||
%content-hidden {
|
||||
opacity: 0;
|
||||
transition: opacity duration(days) ease(out);
|
||||
}
|
||||
|
||||
%content-revealed {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.puzzle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.challenge {
|
||||
transition-duration: duration(timely);
|
||||
|
||||
// Appearance
|
||||
background: $twilight;
|
||||
padding: rhythm(4) 1em;
|
||||
margin: rhythm(4) -1em;
|
||||
// /Appearance
|
||||
|
||||
// undiscovered/default
|
||||
@extend %content-hidden;
|
||||
|
||||
|
|
@ -78,21 +98,22 @@ $heightScreen: 100vh; // 100vh = height of screen = 200 meters of ocean
|
|||
.solved & {
|
||||
@extend %content-hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.facts {
|
||||
// unsolved/default
|
||||
// unsolved
|
||||
@extend %content-hidden;
|
||||
// @extend %content-hidden;
|
||||
|
||||
// solved/shown
|
||||
.solved & {
|
||||
@extend %content-revealed;
|
||||
}
|
||||
// toggled off
|
||||
.show-challenge & {
|
||||
@extend %content-hidden;
|
||||
}
|
||||
// .show-challenge & {
|
||||
// @extend %content-hidden;
|
||||
// }
|
||||
}
|
||||
|
||||
.progress {}
|
||||
|
|
@ -149,28 +170,17 @@ li {
|
|||
margin-left: 4em;
|
||||
}
|
||||
|
||||
@include breakpoint($double_col){
|
||||
.content {
|
||||
.content, .facts, .challenge {
|
||||
@include breakpoint($double_col){
|
||||
-moz-column-count: 2;
|
||||
-moz-column-gap: 2rem;
|
||||
column-count: 2;
|
||||
column-gap: 2rem;
|
||||
//break-inside: avoid;
|
||||
ul {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
.facts, .challenge {
|
||||
@extend .content;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($double_col){
|
||||
p {
|
||||
@include padding-trailer(6);
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -215,20 +225,26 @@ img {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#title {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 190px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.waves {
|
||||
background: $surface;
|
||||
height: 110px;
|
||||
padding-bottom: 2em;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: 0; bottom: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
left: 0; bottom: 2em;
|
||||
left: 0; bottom: 60px;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
height: 130px;
|
||||
.in-zone & {
|
||||
animation-name: oceanSurge;
|
||||
animation-timing-function: ease(inOut);
|
||||
|
|
@ -253,7 +269,6 @@ img {
|
|||
}
|
||||
|
||||
.wave-close {
|
||||
bottom: 1.9em;
|
||||
animation-duration: duration(weeks);
|
||||
&:before {
|
||||
background: url("../img/wave-close.svg") repeat-x 100% 100%;
|
||||
|
|
@ -264,7 +279,7 @@ img {
|
|||
.wave-near {
|
||||
animation-duration: duration(months);
|
||||
&:before {
|
||||
background: url("../img/wave-near.svg") repeat-x 60% 100%;
|
||||
background: url("../img/wave-near.svg") repeat-x 100% 100%;
|
||||
animation-duration: duration(weeks);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
|
@ -272,7 +287,7 @@ img {
|
|||
|
||||
.wave-mid {
|
||||
background: $midnight;
|
||||
padding-top: 10px;
|
||||
height: 130px;
|
||||
&:before {
|
||||
background: url("../img/wave-mid.svg") repeat-x 0 10px;
|
||||
background-size: 305px 120px;
|
||||
|
|
@ -288,6 +303,7 @@ img {
|
|||
100% { transform: translateY(10px); }
|
||||
}
|
||||
|
||||
/* Zones */
|
||||
#epipelagic {
|
||||
background: linear-gradient(to bottom, $surface 0%, #007e84 50%, #0b4960 100%);
|
||||
color: color(altCopy);
|
||||
|
|
@ -316,4 +332,5 @@ footer {
|
|||
bottom: 0; left: 0;
|
||||
width: 100%;
|
||||
line-height: 2em;
|
||||
z-index: 3;
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче