зеркало из https://github.com/mozilla/deepdev.git
ADding icon, removing picture in favor of using src + srcset
This commit is contained in:
Rachel Nabors
Родитель
3b2a66b8a3
Коммит
6296e5efdf
19
css/main.css
19
css/main.css
|
|
@ -281,7 +281,7 @@ h1, .subtitle {
|
|||
transform: translateY(calc(100% - 4rem));
|
||||
}
|
||||
.won .menu {
|
||||
background-image: url('../img/svg/bg_tentacles.svg?1445884404');
|
||||
background-image: url('../img/svg/bg_tentacles.svg?1445988425');
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 135% 0;
|
||||
|
|
@ -558,14 +558,14 @@ h1, .subtitle {
|
|||
.crew a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.crew picture {
|
||||
.crew .porthole {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.crew picture img {
|
||||
.crew .porthole img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
.crew picture:before {
|
||||
.crew .porthole:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -573,7 +573,7 @@ h1, .subtitle {
|
|||
left: -10%;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
background: url('../img/svg/porthole.svg?1445970394') 0 0/100% 100%;
|
||||
background: url('../img/svg/porthole.svg?1445988425') 0 0/100% 100%;
|
||||
}
|
||||
.crew .nautical, .crew .irl {
|
||||
-webkit-transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
|
|
@ -850,6 +850,11 @@ h2 {
|
|||
color: #56fddb;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #39dbb4;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -2072,12 +2077,12 @@ footer {
|
|||
}
|
||||
|
||||
.ooze_near {
|
||||
background: url('../img/ooze_near.svg?1445546832') repeat-x 0 30px;
|
||||
background: url('../img/ooze_near.svg?1445360730') repeat-x 0 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.ooze_far {
|
||||
background: url('../img/ooze_far.svg?1445546832') repeat-x 0 10px;
|
||||
background: url('../img/ooze_far.svg?1445360730') repeat-x 0 10px;
|
||||
}
|
||||
|
||||
.ooze_far, .ooze_near {
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.1 KiB |
57
index.html
57
index.html
|
|
@ -226,7 +226,7 @@
|
|||
<li><p>On the flashlight fish above, <strong>right-click “inspect element.”</strong></p></li>
|
||||
<li><p>In the developer tools, navigate to the <strong>Animation tab.</strong></p></li>
|
||||
<li><p><strong>Press play</strong>
|
||||
<img srcset="img/icon_play.png, img/icon_play2x.png 2x" height="17" width="17" alt="rewind icon">
|
||||
<img src="img/icon_play.png" srcset="img/icon_play2x.png 2x" height="17" width="17" alt="rewind icon">
|
||||
to start the fish’s swimming animation.</p></li>
|
||||
</ol>
|
||||
<video class="video" controls src="videos/flashlight.mp4"></video>
|
||||
|
|
@ -254,9 +254,7 @@
|
|||
<li><p>In the developer tools, click on <strong>the Rules tab.</strong></p></li>
|
||||
<li><p>Find the nautilus’s <code>animation-timing-function.</code></p></li>
|
||||
<li><p>Click the
|
||||
<picture>
|
||||
<img srcset="img/icon_bezier.png, img/icon_bezier2x.png 2x" height="17" width="17" alt="cubic-bezier editor icon">
|
||||
</picture> next to <code>linear</code> to open the cubic-bezier editor.</p></li>
|
||||
<img src="img/icon_bezier.png" srcset="img/icon_bezier2x.png 2x" height="17" width="17" alt="cubic-bezier editor icon"> next to <code>linear</code> to open the cubic-bezier editor.</p></li>
|
||||
<li><p><strong>Optional:</strong> Play with the handles.</p></li>
|
||||
<li><p>Choose a curve with some bounce, like <strong>Backwards.</strong></p></li>
|
||||
</ol>
|
||||
|
|
@ -337,7 +335,7 @@
|
|||
<li><p>On the fish, <strong>right-click “inspect element.”</strong></p></li>
|
||||
<li><p>Navigate to the <strong>Rules tab.</strong></p></li>
|
||||
<li><p>Find the orange roughy’s <code>filter</code> property.</p></li>
|
||||
<li><p>Click on <strong>the icon next to the filter</strong> to explore other CSS filters.</p></li>
|
||||
<li><p>Click on <strong>the <img src="img/icon_filter.png" srcset="img/icon_filter2x.png 2x" height="17" width="17" alt="filter icon"> next to <code>filter</code></strong> to explore other CSS filters.</p></li>
|
||||
<li><p><strong>Click the x</strong> next to the custom filter to remove it.</p></li>
|
||||
<li><p><strong>Optional:</strong> Try adding a greyscale filter. How do the two differ?</p></li>
|
||||
</ol>
|
||||
|
|
@ -390,8 +388,8 @@
|
|||
</figure>
|
||||
<ol>
|
||||
<li><p>On the dragonfish’s photophore above, <strong>right-click “inspect element.”</strong></p></li>
|
||||
<li><p>In the <strong>Rules panel,</strong> find the <code>fill</code> property and click the <img srcset="img/icon_color.png, img/icon_color2x.png 2x" height="17" width="17" alt="color icon"> next to its color value to open the color picker.</p></li>
|
||||
<li><p>In the color picker, click the <strong>eyedropper <img srcset="img/icon_eyedropper.png, img/icon_eyedropper2x.png 2x" height="24" width="24" alt="icon">.</strong></p></li>
|
||||
<li><p>In the <strong>Rules panel,</strong> find the <code>fill</code> property and click the <img src="img/icon_color.png" srcset="img/icon_color2x.png 2x" height="17" width="17" alt="color icon"> next to its color value to open the color picker.</p></li>
|
||||
<li><p>In the color picker, click the <strong>eyedropper <img src="img/icon_eyedropper.png" srcset="img/icon_eyedropper2x.png 2x" height="24" width="24" alt="icon">.</strong></p></li>
|
||||
<li><p>Eyedropper the <strong>flashlight fish’s photophore</strong> to sample its <span class="biolumiColor">color.</span></p></li>
|
||||
</ol>
|
||||
<video class="video" controls src="videos/disco.mp4"></video>
|
||||
|
|
@ -512,12 +510,11 @@
|
|||
<li><p>On the glowing fluid below, <strong>right-click “inspect element.”</strong></p></li>
|
||||
<li><p>Navigate to the <strong>Animations tab.</strong></p></li>
|
||||
<li><p>Click <strong>rewind</strong>
|
||||
<picture>
|
||||
<img srcset="img/icon_rewind.png, img/icon_rewind2x.png 2x" height="17" width="17" alt="rewind icon">
|
||||
</picture>
|
||||
<img src="img/icon_rewind.png" srcse
|
||||
t="img/icon_rewind2x.png 2x" height="17" width="17" alt="rewind icon">
|
||||
to go back to the beginning of the timeline.</p></li>
|
||||
<li><p>Click <strong>play</strong>
|
||||
<img srcset="img/icon_play.png, img/icon_play2x.png 2x" height="17" width="17" alt="rewind icon">
|
||||
<img src="img/icon_play.png" srcset="img/icon_play2x.png 2x" height="17" width="17" alt="rewind icon">
|
||||
to replay the transition.</p></li>
|
||||
</ol>
|
||||
<video class="video" controls src="videos/shrimp.mp4"></video>
|
||||
|
|
@ -574,9 +571,7 @@
|
|||
<menu id="menu_options">
|
||||
<div class="ff-download">
|
||||
<a href="https://www.mozilla.org/firefox/developer/">
|
||||
<picture>
|
||||
<img class="logo" srcset="img/logo_dev-ed-white.png, img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
|
||||
</picture>
|
||||
<img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
|
||||
</a>
|
||||
<a class="download" href="https://www.mozilla.org/firefox/developer/">Free download »</a>
|
||||
</div>
|
||||
|
|
@ -628,9 +623,9 @@
|
|||
<div class="panel crew" data-panel="crew_panel">
|
||||
<ul class="sound-off">
|
||||
<li><a href="http://rachelnabors.com" target="_blank">
|
||||
<picture>
|
||||
<img srcset="img/crew/rachel-nabors.jpg, img/crew/rachel-nabors2x.jpg 2x" height="100" width="100" alt=" ">
|
||||
</picture>
|
||||
<div class="porthole">
|
||||
<img src="img/crew/rachel-nabors.jpg" srcset="img/crew/rachel-nabors2x.jpg 2x" height="100" width="100" alt=" ">
|
||||
</div>
|
||||
<h4 class="name">Rachel Nabors</h4>
|
||||
<div class="title">
|
||||
<strong class="nautical">
|
||||
|
|
@ -642,9 +637,9 @@
|
|||
</div></a>
|
||||
</li>
|
||||
<li><a href="http://korybing.com/" target="_blank">
|
||||
<picture>
|
||||
<img srcset="img/crew/bing.png, img/crew/bing2x.png 2x" height="100" width="100" alt=" ">
|
||||
</picture>
|
||||
<div class="porthole">
|
||||
<img src="img/crew/bing.png" srcset="img/crew/bing2x.png 2x" height="100" width="100" alt=" ">
|
||||
</div>
|
||||
<h4 class="name">Kory Bing</h4>
|
||||
<div class="title">
|
||||
<strong class="nautical">
|
||||
|
|
@ -656,9 +651,9 @@
|
|||
</div></a>
|
||||
</li>
|
||||
<li><a href="http://jessicapaoli.com/" target="_blank">
|
||||
<picture>
|
||||
<img srcset="img/crew/paoli.png, img/crew/paoli2x.png 2x" height="100" width="100" alt=" ">
|
||||
</picture>
|
||||
<div class="porthole">
|
||||
<img src="img/crew/paoli.png" srcset="img/crew/paoli2x.png 2x" height="100" width="100" alt=" ">
|
||||
</div>
|
||||
<h4 class="name">Jessica Paoli</h4>
|
||||
<div class="title">
|
||||
<strong class="nautical">
|
||||
|
|
@ -670,9 +665,9 @@
|
|||
</div></a>
|
||||
</li>
|
||||
<li>
|
||||
<picture>
|
||||
<img srcset="img/crew/fong.jpg, img/crew/fong2x.jpg 2x" height="100" width="100" alt=" ">
|
||||
</picture>
|
||||
<div class="porthole">
|
||||
<img src="img/crew/fong.jpg" srcset="img/crew/fong2x.jpg 2x" height="100" width="100" alt=" ">
|
||||
</div>
|
||||
<h4 class="name">Jennifer Fong</h4>
|
||||
<div class="title">
|
||||
<strong class="nautical">
|
||||
|
|
@ -684,9 +679,9 @@
|
|||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<picture>
|
||||
<img srcset="img/crew/potch.jpg, img/crew/potch2x.jpg 2x" height="100" width="100" alt=" ">
|
||||
</picture>
|
||||
<div class="porthole">
|
||||
<img src="img/crew/potch.jpg" srcset="img/crew/potch2x.jpg 2x" height="100" width="100" alt=" ">
|
||||
</div>
|
||||
<h4 class="name">Matthew Potch</h4>
|
||||
<div class="title">
|
||||
<strong class="nautical">
|
||||
|
|
@ -733,9 +728,7 @@
|
|||
<div class="join-the-deep">
|
||||
<div class="ff-download">
|
||||
<a href="https://www.mozilla.org/firefox/developer/">
|
||||
<picture>
|
||||
<img class="logo" srcset="img/logo_dev-ed-white.png, img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
|
||||
</picture>
|
||||
<img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
|
||||
</a>
|
||||
<a class="download" href="https://www.mozilla.org/firefox/developer/">Take Firefox Developer Edition for a dive »</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ $colors: (
|
|||
titleCopy: $abyss,
|
||||
altTitleCopy: $greyDark,
|
||||
sky: $skyLight,
|
||||
code: $surface,
|
||||
link: $biolumination,
|
||||
linkVisited: $skyMedium,
|
||||
linkHover: $skyLight,
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@
|
|||
.crew {
|
||||
h3 { @include margin-trailer(3); }
|
||||
a { text-decoration: none;}
|
||||
picture {
|
||||
.porthole {
|
||||
position: relative;
|
||||
display: block;
|
||||
img { border-radius: 100%; }
|
||||
|
|
|
|||
|
|
@ -224,6 +224,11 @@ strong {
|
|||
@extend %fontSpartan;
|
||||
}
|
||||
|
||||
code {
|
||||
color: color(code);
|
||||
font-weight: fontWeight(bold);
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %fontMerriweather;
|
||||
@include padding-trailer(3);
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче