first commit

Gemfile

@@ -0,0 +1,5 @@
+# If you have OpenSSL installed, we recommend updating
+# the following line to use "https"
+source 'http://rubygems.org'
+
+gem "middleman", "~>3.0.13"

Gemfile.lock

@@ -0,0 +1,104 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    activesupport (3.2.13)
+      i18n (= 0.6.1)
+      multi_json (~> 1.0)
+    chunky_png (1.2.8)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.3.3)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    fssm (0.2.10)
+    haml (4.0.2)
+      tilt
+    hike (1.2.2)
+    http_router (0.10.2)
+      rack (>= 1.0.0)
+      url_mount (~> 0.2.1)
+    i18n (0.6.1)
+    listen (0.7.3)
+    maruku (0.6.1)
+      syntax (>= 1.0.0)
+    middleman (3.0.14)
+      middleman-core (= 3.0.14)
+      middleman-more (= 3.0.14)
+      middleman-sprockets (~> 3.1.0)
+    middleman-core (3.0.14)
+      activesupport (~> 3.2.6)
+      bundler (~> 1.1)
+      listen (~> 0.7.3)
+      rack (~> 1.4.1)
+      rack-test (~> 0.6.1)
+      rb-fsevent (~> 0.9.3)
+      thor (~> 0.15.4)
+      tilt (~> 1.3.6)
+    middleman-more (3.0.14)
+      coffee-script (~> 2.2.0)
+      coffee-script-source (~> 1.3.3)
+      compass (>= 0.12.2)
+      execjs (~> 1.4.0)
+      haml (>= 3.1.6)
+      i18n (~> 0.6.0, < 0.6.2)
+      maruku (~> 0.6.0)
+      middleman-core (= 3.0.14)
+      padrino-helpers (= 0.10.7)
+      sass (>= 3.1.20)
+      uglifier (~> 1.2.6)
+    middleman-sprockets (3.1.1)
+      middleman-core (>= 3.0.14)
+      padrino-helpers (= 0.10.7)
+      sprockets (~> 2.1)
+      sprockets-helpers (~> 1.0.0)
+      sprockets-sass (~> 1.0.0)
+    multi_json (1.7.3)
+    padrino-core (0.10.7)
+      activesupport (~> 3.2.0)
+      http_router (~> 0.10.2)
+      sinatra (~> 1.3.1)
+      thor (~> 0.15.2)
+      tilt (~> 1.3.0)
+    padrino-helpers (0.10.7)
+      i18n (~> 0.6)
+      padrino-core (= 0.10.7)
+    rack (1.4.5)
+    rack-protection (1.5.0)
+      rack
+    rack-test (0.6.2)
+      rack (>= 1.0)
+    rb-fsevent (0.9.3)
+    sass (3.2.9)
+    sinatra (1.3.6)
+      rack (~> 1.4)
+      rack-protection (~> 1.3)
+      tilt (~> 1.3, >= 1.3.3)
+    sprockets (2.9.3)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-helpers (1.0.1)
+      sprockets (~> 2.0)
+    sprockets-sass (1.0.1)
+      sprockets (~> 2.0)
+      tilt (~> 1.1)
+    syntax (1.0.0)
+    thor (0.15.4)
+    tilt (1.3.7)
+    uglifier (1.2.7)
+      execjs (>= 0.3.0)
+      multi_json (~> 1.3)
+    url_mount (0.2.1)
+      rack
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  middleman (~> 3.0.13)

config.rb

@@ -0,0 +1,77 @@
+###
+# Compass
+###
+
+# Susy grids in Compass
+# First: gem install susy
+# require 'susy'
+
+# Change Compass configuration
+# compass_config do |config|
+#   config.output_style = :compact
+# end
+
+###
+# Page options, layouts, aliases and proxies
+###
+
+# Per-page layout changes:
+#
+# With no layout
+# page "/path/to/file.html", :layout => false
+#
+# With alternative layout
+# page "/path/to/file.html", :layout => :otherlayout
+#
+# A path which all have the same layout
+# with_layout :admin do
+#   page "/admin/*"
+# end
+
+# Proxy (fake) files
+# page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
+#   @which_fake_page = "Rendering a fake page with a variable"
+# end
+
+###
+# Helpers
+###
+
+# Automatic image dimensions on image_tag helper
+# activate :automatic_image_sizes
+
+# Methods defined in the helpers block are available in templates
+# helpers do
+#   def some_helper
+#     "Helping"
+#   end
+# end
+
+set :css_dir, 'stylesheets'
+
+set :js_dir, 'javascripts'
+
+set :images_dir, 'images'
+
+# Build-specific configuration
+configure :build do
+  # For example, change the Compass output style for deployment
+  # activate :minify_css
+
+  # Minify Javascript on build
+  # activate :minify_javascript
+
+  # Enable cache buster
+  # activate :cache_buster
+
+  # Use relative URLs
+  # activate :relative_assets
+
+  # Compress PNGs after build
+  # First: gem install middleman-smusher
+  # require "middleman-smusher"
+  # activate :smusher
+
+  # Or use a different image path
+  # set :http_path, "/Content/images/"
+end

config.ru

@@ -0,0 +1,4 @@
+require 'rubygems'
+require 'middleman/rack'
+
+run Middleman.server

source/index.html.haml

@@ -0,0 +1,58 @@
+---
+title: ズルいデザインハンズオン
+---
+
+%header
+  %nav.wrap
+    %ul
+      %li= link_to "MyApp", "/",{:class => "logo"}
+      %li= link_to "nav-link", "/"
+      %li= link_to "nav-link", "/"
+      %li= link_to "nav-link", "/"
+      %li= link_to "nav-link", "/"
+%main
+  #hero
+    .wrap.column2
+      .title.small
+        %h1 MyApp
+      .description.large
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        .join
+          =link_to "DOWN LOAD", "/",{:class => "button"}
+  #features
+    .wrap.columns3
+      .feature
+        %h2 Feature
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      .feature
+        %h2 Feature
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      .feature
+        %h2 Feature
+        %p
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  #gettingstarted
+    .wrap.column1
+      %h1 Getting Started
+      %p
+        Lorem ipsum dolor sit amet, vix erant fastidii ad. Eu per esse dicat nobis, possim nostrud nam in. Sea ut nonumy detracto, et est probatus erroribus. At nisl possim perfecto duo, ne nec sumo civibus repudiare, simul regione dignissim per te. Eu nobis phaedrum sit. Partiendo persequeris et eam, eu duis omnes pertinax vix.
+
+      %p Et vix aliquid interesset scribentur. Sea cu meliore recteque, stet postulant ocurreret usu in. Vis eu ipsum facilisis. Ius ut legendos perpetua vituperatoribus.
+
+      %p Ius legere essent accommodare te, te qui nisl impedit blandit. Et vide animal intellegebat quo, hinc scaevola ex qui, mei id omnis doming. Ex aliquam dissentiet pro. Ut agam postulant neglegentur sed, te vis minim latine. No quo quas saepe. Te vix omnis laoreet sapientem, qui purto admodum quaerendum no, eu vim deleniti repudiare expetendis.
+
+      %p Rebum docendi te nec. Usu ad saepe accommodare. Pro duis reprimique an, pro tempor conceptam an, facer dolor luptatum vel id. No oporteat signiferumque ius, in sit tota affert bonorum, ius et soleat corrumpit scribentur. Etiam platonem cu sit, nec et epicuri scriptorem, tation tincidunt mediocritatem sed id. Ea vis esse utroque scripserit, erant latine eos ei. Pri vide moderatius ea, ad omnis deleniti offendit sea.
+
+      %p Elitr propriae vim et. Mazim intellegebat ut eum, cu pri essent deterruisset. An quidam corpora accusata nam, sea ad cibo atomorum. Regione intellegam at nam, id modus utinam mei. Id ridens corpora gubergren eos.
+%footer
+  .wrap
+    %nav
+      %ul
+        %li= link_to "nav-link", "/"
+        %li= link_to "nav-link", "/"
+        %li= link_to "nav-link", "/"
+        %li= link_to "nav-link", "/"
+    %p#copyright © 2013 you, inc.

source/javascripts/all.js

@@ -0,0 +1 @@
+//= require_tree .

source/layouts/layout.haml

@@ -0,0 +1,10 @@
+<!doctype html>
+%html
+  %head
+    %meta{:charset => "utf-8"}/
+    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+    %title= data.page.title || "ken_c_lo"
+    = stylesheet_link_tag "application"
+    = javascript_include_tag  "application"
+  %body{:class => page_classes}
+    = yield

source/stylesheets/3colors/_3colors_basic.sass

@@ -0,0 +1,120 @@
+// テキストの色設定 *****************************************
+
+// 背景 main-color のテキストカラー
+=main-text-color
+  @if lightness($main-color) > 45%
+    color: desaturate(darken($main-color, 64%), 20%)
+  @else
+    color: desaturate(lighten($main-color, 64%), 82%)
+
+// 背景 main-color のテキストカラー
+=base-text-color
+  @if lightness($base-color) > 45%
+    color: desaturate(darken($base-color, 60%), 70%)
+  @else
+    color: desaturate(lighten($base-color, 50%), 80%)
+
+// 背景 accent-color のテキストカラー
+=accent-text-color
+  @if lightness($accent-color) > 45%
+    color: desaturate(darken($accent-color, 60%), 20%)
+  @else
+    color: desaturate(lighten($accent-color, 50%), 80%)
+
+// 色の適用 *****************************************
+
+// body
+body
+  background: $base-color
+  +base-text-color
+
+// header
+header
+  a
+    +base-text-color
+
+// hero
+#hero
+  background: $main-color
+  +main-text-color
+  .button
+    background: $accent-color
+    +accent-text-color
+    &:hover
+      background: lighten($accent-color, 12%)
+
+// feature
+.feature
+  +base-text-color
+
+// gettingstarted
+#gettingstarted
+  background: $base-color
+
+// footer
+footer
+  a
+    +base-text-color
+
+// レイアウト *****************************************
+
+// サイトの最大幅
+.wrap
+  max-width: 1140px
+
+// header
+header
+  padding: 20px 0 // ヘッダの高さ
+  nav
+    ul
+      li
+        margin: 0 1.2em 0 0 // header nav のリンクの間隔
+        a
+          &.logo
+            font-size: 26px // ロゴのフォントサイズ
+            margin: 0 1em 0 0 // ロゴの間隔
+
+// hero
+$box-side-margin: 0.03 // 複数のカラムが横並びの場合の、カラムとカラムの間隔（0.01で1%）（※hero、features 共通）
+$title-width: 0.32 // #hero 内の .title（左カラム） の横幅（0.01で1%）→ 右カラムのサイズは自動で算出
+#hero
+  padding: 120px 0 // #hero の上下の余白
+  margin: 0 0 40px // #hero の下の間隔
+  .title
+    h1
+      font-size: 68px // #hero のタイトルフォントサイズ
+  .description
+    p
+      line-height: 1.4 // .description の本文の行間
+      margin: 0 0 1.2em // .description の本文の段落の下の間隔
+    .button
+      font-size: 26px
+      line-height: 2.2
+
+// features
+#features
+  margin: 0 0 50px // #features の下の間隔
+  .feature
+    h2
+      font-size: 26px // .feature タイトルのフォントサイズ
+      margin: 0 0 0.8em // .feature タイトルの下の間隔
+    p
+      line-height: 1.4 // .feature 本文の行間
+
+// gettingstarted
+#gettingstarted
+  padding: 0 // #gettingstarted の下の間隔
+  h1
+    font-size: 28px // #gettingstarted タイトルのフォントサイズ
+    margin: 0 0 1em // #gettingstarted タイトルの下の間隔
+  p
+    line-height: 1.4 // #gettingstarted 本文の行間
+    margin: 0 0 1.2em // #gettingstarted 本文の段落の下の間隔
+
+// footer
+footer
+  padding: 60px 0  // footer の上下の余白
+  nav
+    margin: 0 0 60px // footer nav の下の間隔
+    li
+      margin: 0 1.2em // footer nav のリンクの間隔