From 6296e5efdf583c235537e1f9420cf8ee1d1a695b Mon Sep 17 00:00:00 2001 From: Rachel Nabors Date: Thu, 29 Oct 2015 17:13:59 -0700 Subject: [PATCH] ADding icon, removing picture in favor of using src + srcset --- css/main.css | 19 ++++++++------ img/icon_filter.png | Bin 0 -> 1078 bytes img/icon_filter2x.png | Bin 0 -> 1173 bytes index.html | 57 ++++++++++++++++++------------------------ scss/_config.scss | 1 + scss/_menu.scss | 2 +- scss/main.scss | 5 ++++ 7 files changed, 44 insertions(+), 40 deletions(-) create mode 100644 img/icon_filter.png create mode 100644 img/icon_filter2x.png 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 0000000000000000000000000000000000000000..8fd0a7c77ae54f7e288a32cf1fe0bce8c02dc9cc GIT binary patch literal 1078 zcmaJ=Uq};i9KW(+NCv)TFCHiPlH1)jx4Fa1=5Eu8XKN0cXyNVdr#tojbobNE<%1Li zp&=whZ@mVA^aqnDv?#%lC?=8hun1rBsTjzN5c}P9vxnBf?|#4Em+$BE{rCCZ40p9v zRi3KEFsv%n&PLE)Z7xd%`X7I?u!6Q47>L1cbpR%L9bi6DjRQO+^MfD)cyav7ThNSQ z74=dy24h?&EvT}MH+^g=Swmztyf6$P9tVSx!Vo{6FA=yTGQ>p}M{$}TB&7DV z4!YA_Q6W7nctxV+EZ&@=5rGUKkEi4j#h_CRQQ)P~*))>`UT}fK46&C~j0@v_RR_4s z=C%ry+k<<&HoME?Y4kMU4$AH#DJSWqtPUsLNYRZBeE%a*G+i8^BW!R#7P>J+0z!=@ z$z(EVOFC_;K1kZVUN1>GNQc9UJgmmJ0{N6xG3ts8EHDIJ(x9X&xXH-J)ltY0DATqy!e512vEf(my= z1KDhLV`F1=b#-%dGoR1DSzgX$GV==yxm<4U;iH|MofnIXySuxe)<17=Z*OgF_0#$q z!VZO4Uo`b);(gDF*OcYR2i|h|=k4EL-H}@#??;$>=kb$$ORs959i3ccLzcT8E79xu z?4_RgjqhiKh70L)^SSDm6+>&MAM;bwRaYOZA77d7t^0L&wx+iJX`kVo=(W6?PLHJT bv`rquzI7ZMo0*MHnJ+mM=wjzu`>*{08=GR|DNig)WpGT%PfAtr z%uP&B4N6T+sVqF1YQw<5tdNekFy>6kDZmQ(pt$0_W6>OpmIf)Zi+=kmRcDWXlvKdpiZ23M-%ixv3?I z3Kh9IdBs*0wn|`gt$=Khu)dN4SV>8?trEmh5xxNm&iO^D3Z{Byy2%D+<_hMPdWNRv z<|gJk3PuKoruqiP`o;#jM#feq2396U3Q(W~w5=#5%__*n4QdyVXRDM^Qc_^0uU}qX zu2*iXmtT~wZ)j<0sc&GUZ)BtkRH0j3nOBlnp_^B%3^TzcwK%ybv!En1KTiQryA&s6|>+bR>cTMTiU z2i2Q`+bu>o_38s1qYsK)q{xN|0aFl&2~WB}4m|Ov<^fZD5in`nGBu}IEpRJqxF?Wfd2!`}-|NF6kt_+-DjTj$k+EYHLR zaTYsew;plW=9SPABW3i`l|xXn#@XnHc5l2)xp{ zJatF#3Te+cwuPURZt{99IQ1@S@fGd>(_30|s}^d<{#Kp${K3Zftm~<9E=ODQcfa#} kzps+9{`)fdN6H5n-hC1fb3Jjr8B|bsy85}Sb4q9e0I^l4F8}}l literal 0 HcmV?d00001 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 @@
    • - - - +
      + +

      Rachel Nabors

      @@ -642,9 +637,9 @@
    • - - - +
      + +

      Kory Bing

      @@ -656,9 +651,9 @@
    • - - - +
      + +

      Jessica Paoli

      @@ -670,9 +665,9 @@
    • - - - +
      + +

      Jennifer Fong

      @@ -684,9 +679,9 @@
    • - - - +
      + +

      Matthew Potch

      @@ -733,9 +728,7 @@
      - - - + Take Firefox Developer Edition for a dive »
      diff --git a/scss/_config.scss b/scss/_config.scss index 8915beb..e643f62 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -51,6 +51,7 @@ $colors: ( titleCopy: $abyss, altTitleCopy: $greyDark, sky: $skyLight, + code: $surface, link: $biolumination, linkVisited: $skyMedium, linkHover: $skyLight, diff --git a/scss/_menu.scss b/scss/_menu.scss index 131de70..5cc13c6 100644 --- a/scss/_menu.scss +++ b/scss/_menu.scss @@ -311,7 +311,7 @@ .crew { h3 { @include margin-trailer(3); } a { text-decoration: none;} - picture { + .porthole { position: relative; display: block; img { border-radius: 100%; } diff --git a/scss/main.scss b/scss/main.scss index 45c8433..887677c 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -224,6 +224,11 @@ strong { @extend %fontSpartan; } +code { + color: color(code); + font-weight: fontWeight(bold); +} + p { @extend %fontMerriweather; @include padding-trailer(3);