Takeru Suzuki terkel
terkel
/ _double-dash.scss
Last active
February 19, 2017 06:54
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* <span class="double-dash">―</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
/ _color.scss
Last active
July 20, 2019 05:34
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ _placeholder-image.scss
Created
August 3, 2016 07:44
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @function placeholder-image ($width, $height: $width) { | |
| $size: $width + "/" + $height; | |
| $src: "https://unsplash.it/" + $size + "/?random=" + random(); | |
| @return url($src); | |
| } |
terkel
/ _random-image.scss
Created
November 11, 2015 07:48
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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
/ 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 11.111vh 22.222vw 22.222vh 11.111vw; | |
| } |
terkel
/ _ratio.scss
Created
November 29, 2014 08:01
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ _shareButtons.html
Last active
August 29, 2015 14:07
Share button scripts with `async`. See http://myakura.hatenablog.com/entry/2014/10/14/061713
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.0.rc.1) | |
| // Compass (v1.0.0.alpha.20) | |
| // ---- | |
| .outer { | |
| color: red; | |
| .inner { | |
| color: green; |
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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
/ _subclass.scss
Created
March 13, 2014 13:29
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin subclass ($superclass) { | |
| .#{ $superclass }, | |
| [class^="#{ $superclass }-"], | |
| [class*=" #{ $superclass }-"] { | |
| @content; | |
| } | |
| } |