mozilla
/
deepdev
зеркало из https://github.com/mozilla/deepdev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

ADding icon, removing picture in favor of using src + srcset

This commit is contained in:
Rachel Nabors 2015-10-29 17:13:59 -07:00
Родитель 3b2a66b8a3
Коммит 6296e5efdf
7 изменённых файлов: 44 добавлений и 40 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

19
css/main.css
Просмотреть файл

@ -281,7 +281,7 @@ h1, .subtitle {
transform: translateY(calc(100% - 4rem)); transform: translateY(calc(100% - 4rem));
} }
.won .menu { .won .menu {
background-image: url('../img/svg/bg_tentacles.svg?1445884404'); background-image: url('../img/svg/bg_tentacles.svg?1445988425');
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 135% 0; background-position: 135% 0;
@ -558,14 +558,14 @@ h1, .subtitle {
.crew a { .crew a {
text-decoration: none; text-decoration: none;
} }
.crew picture { .crew .porthole {
position: relative; position: relative;
display: block; display: block;
} }
.crew picture img { .crew .porthole img {
border-radius: 100%; border-radius: 100%;
} }
.crew picture:before { .crew .porthole:before {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
@ -573,7 +573,7 @@ h1, .subtitle {
left: -10%; left: -10%;
width: 120%; width: 120%;
height: 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 { .crew .nautical, .crew .irl {
-webkit-transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transition: opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ -850,6 +850,11 @@ h2 {
color: #56fddb; color: #56fddb;
} }
code {
color: #39dbb4;
font-weight: 700;
}
p { p {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -2072,12 +2077,12 @@ footer {
} }
.ooze_near { .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; z-index: 2;
} }
.ooze_far { .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 { .ooze_far, .ooze_near {

Двоичные данные
img/icon_filter.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
img/icon_filter2x.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

57
index.html
Просмотреть файл

@ -226,7 +226,7 @@
<li><p>On the flashlight fish above, <strong>right-click “inspect element.”</strong></p></li> <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>In the developer tools, navigate to the <strong>Animation tab.</strong></p></li>
<li><p><strong>Press play</strong> <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> to start the fish’s swimming animation.</p></li>
</ol> </ol>
<video class="video" controls src="videos/flashlight.mp4"></video> <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>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>Find the nautilus’s <code>animation-timing-function.</code></p></li>
<li><p>Click the <li><p>Click the
<picture> <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>
<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>
<li><p><strong>Optional:</strong> Play with the handles.</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> <li><p>Choose a curve with some bounce, like <strong>Backwards.</strong></p></li>
</ol> </ol>
@ -337,7 +335,7 @@
<li><p>On the fish, <strong>right-click “inspect element.”</strong></p></li> <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>Navigate to the <strong>Rules tab.</strong></p></li>
<li><p>Find the orange roughy’s <code>filter</code> property.</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>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> <li><p><strong>Optional:</strong> Try adding a greyscale filter. How do the two differ?</p></li>
</ol> </ol>
@ -390,8 +388,8 @@
</figure> </figure>
<ol> <ol>
<li><p>On the dragonfish’s photophore above, <strong>right-click “inspect element.”</strong></p></li> <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 <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 srcset="img/icon_eyedropper.png, img/icon_eyedropper2x.png 2x" height="24" width="24" alt="icon">.</strong></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> <li><p>Eyedropper the <strong>flashlight fish’s photophore</strong> to sample its <span class="biolumiColor">color.</span></p></li>
</ol> </ol>
<video class="video" controls src="videos/disco.mp4"></video> <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>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>Navigate to the <strong>Animations tab.</strong></p></li>
<li><p>Click <strong>rewind</strong> <li><p>Click <strong>rewind</strong>
<picture> <img src="img/icon_rewind.png" srcse
<img srcset="img/icon_rewind.png, img/icon_rewind2x.png 2x" height="17" width="17" alt="rewind icon"> t="img/icon_rewind2x.png 2x" height="17" width="17" alt="rewind icon">
</picture>
to go back to the beginning of the timeline.</p></li> to go back to the beginning of the timeline.</p></li>
<li><p>Click <strong>play</strong> <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> to replay the transition.</p></li>
</ol> </ol>
<video class="video" controls src="videos/shrimp.mp4"></video> <video class="video" controls src="videos/shrimp.mp4"></video>
@ -574,9 +571,7 @@
<menu id="menu_options"> <menu id="menu_options">
<div class="ff-download"> <div class="ff-download">
<a href="https://www.mozilla.org/firefox/developer/"> <a href="https://www.mozilla.org/firefox/developer/">
<picture> <img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
<img class="logo" srcset="img/logo_dev-ed-white.png, img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
</picture>
</a> </a>
<a class="download" href="https://www.mozilla.org/firefox/developer/">Free download »</a> <a class="download" href="https://www.mozilla.org/firefox/developer/">Free download »</a>
</div> </div>
@ -628,9 +623,9 @@
<div class="panel crew" data-panel="crew_panel"> <div class="panel crew" data-panel="crew_panel">
<ul class="sound-off"> <ul class="sound-off">
<li><a href="http://rachelnabors.com" target="_blank"> <li><a href="http://rachelnabors.com" target="_blank">
<picture> <div class="porthole">
<img srcset="img/crew/rachel-nabors.jpg, img/crew/rachel-nabors2x.jpg 2x" height="100" width="100" alt=" "> <img src="img/crew/rachel-nabors.jpg" srcset="img/crew/rachel-nabors2x.jpg 2x" height="100" width="100" alt=" ">
</picture> </div>
<h4 class="name">Rachel Nabors</h4> <h4 class="name">Rachel Nabors</h4>
<div class="title"> <div class="title">
<strong class="nautical"> <strong class="nautical">
@ -642,9 +637,9 @@
</div></a> </div></a>
</li> </li>
<li><a href="http://korybing.com/" target="_blank"> <li><a href="http://korybing.com/" target="_blank">
<picture> <div class="porthole">
<img srcset="img/crew/bing.png, img/crew/bing2x.png 2x" height="100" width="100" alt=" "> <img src="img/crew/bing.png" srcset="img/crew/bing2x.png 2x" height="100" width="100" alt=" ">
</picture> </div>
<h4 class="name">Kory Bing</h4> <h4 class="name">Kory Bing</h4>
<div class="title"> <div class="title">
<strong class="nautical"> <strong class="nautical">
@ -656,9 +651,9 @@
</div></a> </div></a>
</li> </li>
<li><a href="http://jessicapaoli.com/" target="_blank"> <li><a href="http://jessicapaoli.com/" target="_blank">
<picture> <div class="porthole">
<img srcset="img/crew/paoli.png, img/crew/paoli2x.png 2x" height="100" width="100" alt=" "> <img src="img/crew/paoli.png" srcset="img/crew/paoli2x.png 2x" height="100" width="100" alt=" ">
</picture> </div>
<h4 class="name">Jessica Paoli</h4> <h4 class="name">Jessica Paoli</h4>
<div class="title"> <div class="title">
<strong class="nautical"> <strong class="nautical">
@ -670,9 +665,9 @@
</div></a> </div></a>
</li> </li>
<li> <li>
<picture> <div class="porthole">
<img srcset="img/crew/fong.jpg, img/crew/fong2x.jpg 2x" height="100" width="100" alt=" "> <img src="img/crew/fong.jpg" srcset="img/crew/fong2x.jpg 2x" height="100" width="100" alt=" ">
</picture> </div>
<h4 class="name">Jennifer Fong</h4> <h4 class="name">Jennifer Fong</h4>
<div class="title"> <div class="title">
<strong class="nautical"> <strong class="nautical">
@ -684,9 +679,9 @@
</div> </div>
</li> </li>
<li> <li>
<picture> <div class="porthole">
<img srcset="img/crew/potch.jpg, img/crew/potch2x.jpg 2x" height="100" width="100" alt=" "> <img src="img/crew/potch.jpg" srcset="img/crew/potch2x.jpg 2x" height="100" width="100" alt=" ">
</picture> </div>
<h4 class="name">Matthew Potch</h4> <h4 class="name">Matthew Potch</h4>
<div class="title"> <div class="title">
<strong class="nautical"> <strong class="nautical">
@ -733,9 +728,7 @@
<div class="join-the-deep"> <div class="join-the-deep">
<div class="ff-download"> <div class="ff-download">
<a href="https://www.mozilla.org/firefox/developer/"> <a href="https://www.mozilla.org/firefox/developer/">
<picture> <img class="logo" src="img/logo_dev-ed-white.png" srcset="img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
<img class="logo" srcset="img/logo_dev-ed-white.png, img/logo_dev-ed-white2x.png 2x" alt="Firefox DevEdition">
</picture>
</a> </a>
<a class="download" href="https://www.mozilla.org/firefox/developer/">Take Firefox Developer Edition for a dive »</a> <a class="download" href="https://www.mozilla.org/firefox/developer/">Take Firefox Developer Edition for a dive »</a>
</div> </div>

1
scss/_config.scss
Просмотреть файл

@ -51,6 +51,7 @@ $colors: (
titleCopy: $abyss, titleCopy: $abyss,
altTitleCopy: $greyDark, altTitleCopy: $greyDark,
sky: $skyLight, sky: $skyLight,
code: $surface,
link: $biolumination, link: $biolumination,
linkVisited: $skyMedium, linkVisited: $skyMedium,
linkHover: $skyLight, linkHover: $skyLight,

2
scss/_menu.scss
Просмотреть файл

@ -311,7 +311,7 @@
.crew { .crew {
h3 { @include margin-trailer(3); } h3 { @include margin-trailer(3); }
a { text-decoration: none;} a { text-decoration: none;}
picture { .porthole {
position: relative; position: relative;
display: block; display: block;
img { border-radius: 100%; } img { border-radius: 100%; }

5
scss/main.scss
Просмотреть файл

@ -224,6 +224,11 @@ strong {
@extend %fontSpartan; @extend %fontSpartan;
} }
code {
color: color(code);
font-weight: fontWeight(bold);
}
p { p {
@extend %fontMerriweather; @extend %fontMerriweather;
@include padding-trailer(3); @include padding-trailer(3);