Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryuichi.N nukos

  • Tokyo/Japan
View GitHub Profile
View font-awesome-jekyll.rb
module Jekyll
class RenderFontAwesomeTag < Liquid::Tag
def initialize(tag_name, text, tokens)
super
@classes = text.split(' ')
end
def render(context)
# local vars
@nukos
nukos / index.html
Created Jan 31, 2015
Jekyll for archive list
View index.html
{% for post in site.posts %}
{% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
{% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
{% if month != nmonth %}
<li class="list-item">
<a href="/{{ post.date | date: '%Y/%m/' }}">
<span class="item-year" title="{{ post.date | date: '%Y年' }}">{{ post.date | date: '%Y' }}</span>
<span class="item-month" title="{{ post.date | date: '%m月' }}">{{ post.date | date: '%m' }}</span>
</a>
</li>
@nukos
nukos / _config.yml
Last active Feb 12, 2017
Jekyll Plugin: Liquid tag FontAwesome icon.
View _config.yml
fa_prefix: #default: fa
fa_exclude:
View _data_state.scss
$mix-data-state-prefix: 'is' !default;
$mix-data-state-attr: 'data' !default;
@mixin data-state($name, $state: true, $attr: $mix-data-state-attr, $prefix: $mix-data-state-prefix) {
&[#{$attr}-#{$prefix}-#{$name}=#{$state}] {
@content;
}
}
View _atoms-hoge.scss
$a-atom-setting: 1 !default;
@mixin a-label($var) {
//attrs
font-size: $var;
@content;
}
View _material-design-shadow-sass-fanction.scss
$shadow-x-ratio: 0.375 !default;
$shadow-y-ratio: 0.375 !default;
$shadow-blur-lower: 1 !default;
$shadow-blur-ratio: 1 !default;
$shadow-color: #000000 !default;
$shadow-alpha-init: 0.375 !default;
$shadow-alpha-lower: 0.175 !default;
$shadow-alpha-ratio: 0.005 !default;
@function layer-shadow( $dp: 0, $x: 0px, $y: 1px, $blur: 1px ) {
@nukos
nukos / _atom-overlay-badges.scss
Created Jul 6, 2016
Example: Atomic Design for SCSS
View _atom-overlay-badges.scss
@mixin atom-overlay-badges {
position: absolute;
margin: 0;
padding: vr(.2) vr(.3);
line-height: vr(1);
font-size: modular-scale(-4);
font-weight: bold;
color: #fff;
@nukos
nukos / prism-css-naming-conventions-v0.1.0.md
Last active Jul 1, 2016
CSS Classの命名規則について
View prism-css-naming-conventions-v0.1.0.md

Prism CSS naming conventions

SMACSSSUIT CSS naming conventionsをベースに個人的なプロジェクトのみで使用するクラス名の命名規則について考えてみた。

基本

IDはスタイリングに使わずクラスのみを使用する。

カテゴリ

カテゴリ表すためにプレフィックスを使用する。

@nukos
nukos / category_archive.html
Last active Feb 10, 2016
Jekyll for category archive.
View category_archive.html
---
layout: default
---
<h2 class="post_title">{{page.title}}</h2>
<ul>
{% for post in site.posts %}
{% for category in post.category %}
{% if category == page.category %}
<li class="archive_list">
<time datetime='{{post.date | date: "%Y-%m-%d"}}'>{{post.date | date: "%m/%d/%y"}}</time> <a class="archive_list_article_link" href='{{post.url}}'>{{post.title}}</a>