Merge pull request #80 from ruedap/staging

Add comments to CSS files
ruedap · Jan 6, 2015 · 9d24b5d · 9d24b5d
2 parents 375dede + 08feb65
commit 9d24b5d
Show file tree

Hide file tree

Showing 23 changed files with 135 additions and 25 deletions.
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -3,21 +3,6 @@
 
 @import "normalize";
 
-@import "daplog/all/_reset";
-@import "daplog/all/_variables";
-@import "daplog/all/_functions";
-@import "daplog/all/_mixins";
-@import "daplog/all/_utilities";
-@import "daplog/all/_elements";
-
-@import "daplog/block/_container";
-@import "daplog/block/_header";
-@import "daplog/block/_blog-logo";
-@import "daplog/block/_main";
-@import "daplog/block/_article-list";
-@import "daplog/block/_article";
-@import "daplog/block/_article-body";
-@import "daplog/block/_footer";
-
-@import "daplog/context/_embed";
-@import "daplog/context/_rouge";
+@import "daplog/_all";
+@import "daplog/_block";
+@import "daplog/_context";
diff --git a/app/assets/stylesheets/daplog/_all.scss b/app/assets/stylesheets/daplog/_all.scss
@@ -0,0 +1,10 @@
+// ============================================================================
+// アプリ全体で使用する、または、アプリ全体に影響する定義です。
+// ============================================================================
+
+@import "daplog/all/_reset";
+@import "daplog/all/_variables";
+@import "daplog/all/_functions";
+@import "daplog/all/_mixins";
+@import "daplog/all/_utilities";
+@import "daplog/all/_elements";
diff --git a/app/assets/stylesheets/daplog/_block.scss b/app/assets/stylesheets/daplog/_block.scss
@@ -0,0 +1,13 @@
+// ============================================================================
+// ブロック（コンポーネント）単位で1ブロック＝1ファイルごとに定義します。
+// そのブロックのモディファイアも同じファイル内に定義します。
+// ============================================================================
+
+@import "daplog/block/_container";
+@import "daplog/block/_header";
+@import "daplog/block/_blog-logo";
+@import "daplog/block/_main";
+@import "daplog/block/_footer";
+@import "daplog/block/_article-list";
+@import "daplog/block/_article";
+@import "daplog/block/_article-body";
diff --git a/app/assets/stylesheets/daplog/_context.scss b/app/assets/stylesheets/daplog/_context.scss
@@ -0,0 +1,6 @@
+// ============================================================================
+// allやblockに属さない場合の定義をここで行います。
+// ============================================================================
+
+@import "daplog/context/_embed";
+@import "daplog/context/_rouge";
diff --git a/app/assets/stylesheets/daplog/all/_elements.scss b/app/assets/stylesheets/daplog/all/_elements.scss
@@ -1,3 +1,7 @@
+// ============================================================================
+// 全体で使用する要素のスタイルを定義します。
+// ============================================================================
+
 *,
 *:before,
 *:after {

diff --git a/app/assets/stylesheets/daplog/all/_functions.scss b/app/assets/stylesheets/daplog/all/_functions.scss
@@ -1,3 +1,7 @@
+// ============================================================================
+// 全体で使用する関数を定義します。
+// ============================================================================
+
 @function strip-units($value) {
     @return $value / ($value * 0 + 1);
 }

diff --git a/app/assets/stylesheets/daplog/all/_mixins.scss b/app/assets/stylesheets/daplog/all/_mixins.scss
@@ -1,4 +1,7 @@
+// ============================================================================
+// 全体で使用するミックスインを定義します。
+// ============================================================================
+
 @import "mixins/_base";
 @import "mixins/_dapicons";
 @import "mixins/_styles";
-
diff --git a/app/assets/stylesheets/daplog/all/_reset.scss b/app/assets/stylesheets/daplog/all/_reset.scss
@@ -1,3 +1,8 @@
+// ============================================================================
+// 最初に初期化しておく要素のスタイルを定義します。
+// アプリケーションに依存したスタイルは`_elements.scss`で定義してください。
+// ============================================================================
+
 blockquote,
 dl,
 dd,

diff --git a/app/assets/stylesheets/daplog/all/_utilities.scss b/app/assets/stylesheets/daplog/all/_utilities.scss
@@ -1,3 +1,7 @@
+// ============================================================================
+// 全体で使用するユーティリティクラスを定義します。
+// ============================================================================
+
 @import "utilities/display";
 @import "utilities/layout";
 @import "utilities/size";

diff --git a/app/assets/stylesheets/daplog/all/_variables.scss b/app/assets/stylesheets/daplog/all/_variables.scss
@@ -1,3 +1,7 @@
+// ============================================================================
+// 全体で使用する変数を定義します。
+// ============================================================================
+
 
 // Fibonacci
 // ===========================================================================
@@ -36,16 +40,15 @@ $fibonacci-map: (
 
 $ratio-golden: 1.618;
 
+
 // Color
 // ===========================================================================
 
 $color-brand: rgb(24,63,83);
-
 $color-body: #21272d;
 $bgcolor-body: rgba($color-brand, fibo(xxsmall, alpha));
 $bgcolor-content: #fff;
 
-
 $color-link: rgba($color-brand, fibo(medium, alpha));
 $color-link-hover: rgba($color-brand, fibo(small, alpha));
 $color-link-focus: $color-link-hover;
@@ -68,7 +71,6 @@ $font-family-avenir: "Avenir Next", "Avenir", $font-family-helvetica;
 $font-family-fjalla: "Fjalla One", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-montserrat: "Montserrat", $font-family-avenir;
 $font-family-mono: Consolas, "Liberation Mono", Courier, "Hiragino Kaku Gothic ProN", Meiryo, monospace;
-
 $font-family-georgia: Georgia, Cambria, "Times New Roman", Times, serif;
 $font-family-crimson: "Crimson Text", "YuMin", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", $font-family-georgia;
 $font-family-android: Roboto, "Droid Sans";
@@ -87,7 +89,6 @@ $width-base: 987px;
 $max-width-Container: $width-base;
 
 
-
 // Media queries
 // ===========================================================================
 

diff --git a/app/assets/stylesheets/daplog/all/mixins/_base.scss b/app/assets/stylesheets/daplog/all/mixins/_base.scss
@@ -1,3 +1,8 @@
+// ============================================================================
+// 汎用的なミックスインを定義します。
+// アプリケーションに依存したミックスインは`_styles.scss`で定義してください。
+// ============================================================================
+
 @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
   color: $normal;
   @if $visited { &:visited { color: $visited; } }
@@ -27,4 +32,3 @@
     @content;
   }
 }
-
diff --git a/app/assets/stylesheets/daplog/all/mixins/_dapicons.scss b/app/assets/stylesheets/daplog/all/mixins/_dapicons.scss
@@ -1,3 +1,7 @@
+// ============================================================================
+// アイコンフォント`dapicons`を使用するためのミックスインを定義します。
+// ============================================================================
+
 @font-face {
   font-family: "dapicons";
   src: asset-url("dapicons.eot");
@@ -6,7 +10,6 @@
   font-style: normal;
 }
 
-
 @mixin dapicons {
   @include font-smoothing(false);
   font-family: "dapicons";

diff --git a/app/assets/stylesheets/daplog/all/mixins/_styles.scss b/app/assets/stylesheets/daplog/all/mixins/_styles.scss
@@ -1,3 +1,7 @@
+// ============================================================================
+// アプリケーションに依存したスタイル用のミックスインを定義します。
+// ============================================================================
+
 @mixin style-article-section-mark($size-name) {
   display: block;
   position: relative;

diff --git a/app/assets/stylesheets/daplog/block/_article-body.scss b/app/assets/stylesheets/daplog/block/_article-body.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// 1つの記事の本文を表します。`.Article`ブロックに内包されます。
+// ============================================================================
+
+// Variable, Mixin, Placeholder
+// ============================================================================
 
 %ArticleBody-justify {
   word-wrap: break-word;
@@ -290,6 +296,9 @@
   }
 }
 
+// Block
+// ============================================================================
+
 .ArticleBody {
   @extend %ArticleBody-heading;
   @extend %ArticleBody-justify;

diff --git a/app/assets/stylesheets/daplog/block/_article-list.scss b/app/assets/stylesheets/daplog/block/_article-list.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// 記事タイトルのリストを表します。
+// ============================================================================
+
+// Block
+// ============================================================================
 
 .ArticleList {
   color: #fff;

diff --git a/app/assets/stylesheets/daplog/block/_article.scss b/app/assets/stylesheets/daplog/block/_article.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// 1つの記事を表します。`.ArticleBody`ブロックを内包します。
+// ============================================================================
+
+// Block
+// ============================================================================
 
 .Article-datetimeContainer {
   display: block;

diff --git a/app/assets/stylesheets/daplog/block/_blog-logo.scss b/app/assets/stylesheets/daplog/block/_blog-logo.scss
@@ -1,3 +1,10 @@
+// ============================================================================
+// ブログのロゴを表します。
+// ============================================================================
+
+// Block
+// ============================================================================
+
 .BlogLogo {
   display: block;
   width: 100%;

diff --git a/app/assets/stylesheets/daplog/block/_container.scss b/app/assets/stylesheets/daplog/block/_container.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// 汎用的なコンテナを表します。
+// ============================================================================
+
+// Block
+// ============================================================================
 
 .Container {
   display: block;

diff --git a/app/assets/stylesheets/daplog/block/_footer.scss b/app/assets/stylesheets/daplog/block/_footer.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// グローバルフッターを表します。
+// ============================================================================
+
+// Block
+// ============================================================================
 
 .Footer {
   display: block;

diff --git a/app/assets/stylesheets/daplog/block/_header.scss b/app/assets/stylesheets/daplog/block/_header.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// グローバルヘッダーを表します。
+// ============================================================================
+
+// Block
+// ============================================================================
 
 .Header-container {
   background-color: $bgcolor-content;

diff --git a/app/assets/stylesheets/daplog/block/_main.scss b/app/assets/stylesheets/daplog/block/_main.scss
@@ -1,3 +1,9 @@
+// ============================================================================
+// メインコンテンツを表します。
+// ============================================================================
+
+// Block
+// ============================================================================
 
 .Main-container {
   background-color: $bgcolor-content;

diff --git a/app/assets/stylesheets/daplog/context/_embed.scss b/app/assets/stylesheets/daplog/context/_embed.scss
@@ -1,9 +1,19 @@
+// ============================================================================
+// 外部サービスの埋め込みパーツ用のスタイルを定義します。
+// ============================================================================
+
+// Twitter
+// ============================================================================
+
 .twitter-tweet,
 iframe[src*='instagram.com'] {
   display: block;
   margin: 30px auto !important;
 }
 
+// Instagram
+// ============================================================================
+
 iframe[src*='instagram.com'] {
   width: 282px;
   height: 327px;

diff --git a/app/assets/stylesheets/daplog/context/_rouge.css.erb b/app/assets/stylesheets/daplog/context/_rouge.css.erb
@@ -1 +1,3 @@
+<%# シンタックスハイライト用のスタイルを定義します。 %>
+
 <%= Rouge::Themes::Github.render(:scope => '.highlight') %>