diff --git a/css/main.css b/css/main.css index 5805c8c..2e61fc4 100644 --- a/css/main.css +++ b/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 { diff --git a/img/icon_filter.png b/img/icon_filter.png new file mode 100644 index 0000000..8fd0a7c Binary files /dev/null and b/img/icon_filter.png differ diff --git a/img/icon_filter2x.png b/img/icon_filter2x.png new file mode 100644 index 0000000..7bc791d Binary files /dev/null and b/img/icon_filter2x.png differ diff --git a/index.html b/index.html index 4d68e8c..d5e8823 100755 --- a/index.html +++ b/index.html @@ -226,7 +226,7 @@

  • On the flashlight fish above, right-click “inspect element.”

  • In the developer tools, navigate to the Animation tab.

  • Press play - rewind icon + rewind icon to start the fish’s swimming animation.

    • @@ -254,9 +254,7 @@

  • In the developer tools, click on the Rules tab.

  • Find the nautilus’s animation-timing-function.

  • Click the - - cubic-bezier editor icon - next to linear to open the cubic-bezier editor.

    • + cubic-bezier editor icon next to linear to open the cubic-bezier editor.

  • Optional: Play with the handles.

  • Choose a curve with some bounce, like Backwards.

    • @@ -337,7 +335,7 @@

  • On the fish, right-click “inspect element.”

  • Navigate to the Rules tab.

  • Find the orange roughy’s filter property.

    • -

  • Click on the icon next to the filter to explore other CSS filters.

    • +

  • Click on the filter icon next to filter to explore other CSS filters.

  • Click the x next to the custom filter to remove it.

  • Optional: Try adding a greyscale filter. How do the two differ?

    • @@ -390,8 +388,8 @@

    1. On the dragonfish’s photophore above, right-click “inspect element.”

      2. -

    2. In the Rules panel, find the fill property and click the color icon next to its color value to open the color picker.

      3. -

    3. In the color picker, click the eyedropper icon.

      4. +

    4. In the Rules panel, find the fill property and click the color icon next to its color value to open the color picker.

      5. +

    5. In the color picker, click the eyedropper icon.

    6. Eyedropper the flashlight fish’s photophore to sample its color.

    @@ -512,12 +510,11 @@

  • On the glowing fluid below, right-click “inspect element.”

  • Navigate to the Animations tab.

  • Click rewind - - rewind icon - + rewind icon to go back to the beginning of the timeline.

  • Click play - rewind icon + rewind icon to replay the transition.

    • @@ -574,9 +571,7 @@
    - - - + Free download »
    @@ -628,9 +623,9 @@