Skip to content

Instantly share code, notes, and snippets.

View terkel's full-sized avatar

Takeru Suzuki terkel

114 followers · 60 following
View GitHub Profile
@terkel
terkel / _double-dash.scss
Last active February 19, 2017 06:54
/* <span class="double-dash">&#x2015;</span> */
.double-dash {
display: inline-block;
font-family: sans-serif;
line-height: 0;
margin-left: 0.5em;
margin-right: 0.5em;
text-align: center;
transform: scaleX(2);
}
@terkel
terkel / _color.scss
Last active July 20, 2019 05:34
// Grayscale
$color-black: hsl(0, 0%, 0%); // #000000
$color-white: hsl(0, 0%, 100%); // #FFFFFF
$color-gray-50: hsl(0, 0%, 98%); // #FAFAFA, rgb(250, 250, 250)
$color-gray-100: hsl(0, 0%, 96%); // #F5F5F5, rgb(245, 245, 245)
$color-gray-200: hsl(0, 0%, 93%); // #EEEEEE, rgb(238, 238, 238)
$color-gray-300: hsl(0, 0%, 88%); // #E0E0E0, rgb(224, 224, 224)
$color-gray-400: hsl(0, 0%, 74%); // #BDBDBD, rgb(189, 189, 189)
$color-gray-500: hsl(0, 0%, 62%); // #9E9E9E, rgb(158, 158, 158)
@terkel
terkel / _placeholder-image.scss
Created August 3, 2016 07:44
@function placeholder-image ($width, $height: $width) {
$size: $width + "/" + $height;
$src: "https://unsplash.it/" + $size + "/?random=" + random();
@return url($src);
}
@terkel
terkel / _random-image.scss
Created November 11, 2015 07:48
@function random-image ($width: 400, $height: null) {
$height: if($height, $height, $width);
$size: $width + "/" + $height;
$src: "https://unsplash.it/" + $size + "/?random=" + random();
@return url($src);
}
@terkel
terkel / van-de-graaf.css
Created January 30, 2015 22:03
Van de Graaf canon for web page http://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon
body {
margin: 11.111vh 22.222vw 22.222vh 11.111vw;
}
@terkel
terkel / _ratio.scss
Created November 29, 2014 08:01
// Musical intervals
$octave: 2; // 2:1
$major-seventh: 1.875; // 15:8
$minor-seventh: 1.778; // 16:9
$major-sixth: 1.667; // 5:3
$minor-sixth: 1.6; // 8:5
$perfect-fifth: 1.5; // 3:2
$diminished-fifth: 1.414; // √2:1
$augumented-fourth: 1.414; // √2:1
$perfect-fourth: 1.333; // 4:3
@terkel
terkel / _shareButtons.html
Last active August 29, 2015 14:07
Share button scripts with `async`. See http://myakura.hatenablog.com/entry/2014/10/14/061713
<div data-href="http://YOUR-URL-GOES-HERE" data-layout="button_count" class="fb-share-button"></div>
<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.0" id="facebook-jssdk" async></script>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script src="//platform.twitter.com/widgets.js" id="twitter-wjs" async></script>
<div data-size="medium" class="g-plusone"></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<a href="http://b.hatena.ne.jp/entry/" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="en" class="hatena-bookmark-button"></a>
@terkel
terkel / SassMeister-input.scss
Created July 16, 2014 12:09
Generated by SassMeister.com.
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
.outer {
color: red;
.inner {
color: green;
@terkel
terkel / responsive-icon-label.js
Created June 23, 2014 14:30
Show/hide icon labels using media queries. Demo: http://terkel.jp/demo/responsive-icon-label/demo.html
/**
* Show/hide icon labels using media queries.
*
* @param {Object} images NodeList of icon images
* @param {String} mqString Media query string
* @param {Boolean} [fallback] Show label text for no-media-queries browsers
* @example
* var navIcons = document.querySelectorAll('nav img');
* responsiveIconLabel(navIcons, '(min-width: 801px)', true);
*/
@terkel
terkel / _subclass.scss
Created March 13, 2014 13:29
@mixin subclass ($superclass) {
.#{ $superclass },
[class^="#{ $superclass }-"],
[class*=" #{ $superclass }-"] {
@content;
}
}