keithchu

// define breakpoints
$small:  #{"screen and (max-width: 479px)"}
$medium: #{"screen and (min-width: 480px) and (max-width: 767px)"}
$large:  #{"screen and (min-width: 768px)"}

// define mixin
=respond-to($media...)
  $media-list: null
  @each $query in $media
    $media-list: append($media-list, unquote("#{$query}"), comma)

keithchu

Keybase proof

I hereby claim:

• I am keithchu on github.
• I am catharsis (https://keybase.io/catharsis) on keybase.
• I have a public key whose fingerprint is 8504 0391 3AD0 D0D5 DB32 7382 6A7D E12C 1CD9 9E7A

To claim this, I am signing this object:

keithchu

<div>
  <a href="#open" class="trigger">Open Flyout</a>
  <a href="#" class="close">Close</a>
  <div class="flyout-wrapper" id="open">
    <ul class="flyout">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>

keithchu

javascript:window.location=%22data:text/html,%20%3Chtml%20contenteditable%20style='font:%2024px%20%5C%22Avenir%20Next%5C%22,%20Georgia,%20serif'%3E%22;

keithchu

<article class="sandbox">
  <header>
    <h1>Demo of <code>image-set()</code> and <code>srcset</code></h1>
  </header>
  
  <section class="image-set">
    
    <h2><code>image-set()</code></h2>
    
    <!-- 1. normal use case, bg images -->

keithchu

<i class="square"></i>

keithchu

/**
 * Death to the Bottom Line / @catharsis
 */
body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 2em 4em;
  width: 500px;
}
code {

keithchu

/**
 * Deployotron
 * original art: @mrdiec
 * code: @catharsis
 */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { margin: 10em 15em; }

.robo {

keithchu

@spinner-size:              64px;
@spinner-offset:            @spinner-size / 2;
@spinner-anim-length:       3s;
@spinner-tine-size:         12px;
@spinner-tine-steps:        12;
@spinner-tine-step:         360deg / @spinner-tine-steps;
@spinner-tine-step-delay:   (@spinner-anim-length / 2) / @spinner-tine-steps;

@-webkit-keyframes spinner {
    0% {

keithchu

/**
 * Star Rating Using HTML <input type="range">
 */

html {
  min-height: 100%;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
      tap-highlight-color: rgba(0,0,0,0);
}