Skip to content

Instantly share code, notes, and snippets.

View nukos's full-sized avatar

Ryuichi.N nukos

  • Tokyo/Japan
View GitHub Profile
@nukos
nukos / _color_palettes_mixins.scss
Created March 6, 2015 12:22
SCSS Color Code Managemant Mixins.
// Mixin to return the color code
//
// $property_name - The name of the property.
// $args - Argments.
// - name : Component name.
// - palettes : Palettes Array (Default: $PALETTES).
// - state : <Option> State Name (Default: normal).
// - theme : <Option> Theme Name (Default: base).
//
// EXAMPLE:
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 January 31, 2015 15:59
Jekyll for archive list
{% 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 February 12, 2017 15:01
Jekyll Plugin: Liquid tag FontAwesome icon.
fa_prefix: #default: fa
fa_exclude:
$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;
}
}
$a-atom-setting: 1 !default;
@mixin a-label($var) {
//attrs
font-size: $var;
@content;
}
$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 July 6, 2016 01:50
Example: Atomic Design for 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 July 1, 2016 03:20
CSS Classの命名規則について

Prism CSS naming conventions

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

基本

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

カテゴリ

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

@nukos
nukos / category_archive.html
Last active February 10, 2016 00:37
Jekyll for category archive.
---
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>