nukos

// 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:

nukos

module Jekyll
  class RenderFontAwesomeTag < Liquid::Tag
 
    def initialize(tag_name, text, tokens)
      super
      @classes         = text.split(' ')
    end
 
    def render(context)
      # local vars

nukos

{% 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

fa_prefix: #default: fa
fa_exclude:

nukos

$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;
  }
}

nukos

$a-atom-setting: 1 !default;
@mixin a-label($var) {
  //attrs
  font-size: $var;
  @content;
}

nukos

$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

@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

Prism CSS naming conventions

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

基本

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

カテゴリ

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

nukos

---
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>