Skip to content

Commit 50e03a4

Browse files
machidamachida
committed
first commit
0 parents  commit 50e03a4

18 files changed

+943
-0
lines changed

‎Gemfile

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

‎Gemfile.lock

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
GEM
2+
remote: http://rubygems.org/
3+
specs:
4+
activesupport (3.2.13)
5+
i18n (= 0.6.1)
6+
multi_json (~> 1.0)
7+
chunky_png (1.2.8)
8+
coffee-script (2.2.0)
9+
coffee-script-source
10+
execjs
11+
coffee-script-source (1.3.3)
12+
compass (0.12.2)
13+
chunky_png (~> 1.2)
14+
fssm (>= 0.2.7)
15+
sass (~> 3.1)
16+
execjs (1.4.0)
17+
multi_json (~> 1.0)
18+
fssm (0.2.10)
19+
haml (4.0.2)
20+
tilt
21+
hike (1.2.2)
22+
http_router (0.10.2)
23+
rack (>= 1.0.0)
24+
url_mount (~> 0.2.1)
25+
i18n (0.6.1)
26+
listen (0.7.3)
27+
maruku (0.6.1)
28+
syntax (>= 1.0.0)
29+
middleman (3.0.14)
30+
middleman-core (= 3.0.14)
31+
middleman-more (= 3.0.14)
32+
middleman-sprockets (~> 3.1.0)
33+
middleman-core (3.0.14)
34+
activesupport (~> 3.2.6)
35+
bundler (~> 1.1)
36+
listen (~> 0.7.3)
37+
rack (~> 1.4.1)
38+
rack-test (~> 0.6.1)
39+
rb-fsevent (~> 0.9.3)
40+
thor (~> 0.15.4)
41+
tilt (~> 1.3.6)
42+
middleman-more (3.0.14)
43+
coffee-script (~> 2.2.0)
44+
coffee-script-source (~> 1.3.3)
45+
compass (>= 0.12.2)
46+
execjs (~> 1.4.0)
47+
haml (>= 3.1.6)
48+
i18n (~> 0.6.0, < 0.6.2)
49+
maruku (~> 0.6.0)
50+
middleman-core (= 3.0.14)
51+
padrino-helpers (= 0.10.7)
52+
sass (>= 3.1.20)
53+
uglifier (~> 1.2.6)
54+
middleman-sprockets (3.1.1)
55+
middleman-core (>= 3.0.14)
56+
padrino-helpers (= 0.10.7)
57+
sprockets (~> 2.1)
58+
sprockets-helpers (~> 1.0.0)
59+
sprockets-sass (~> 1.0.0)
60+
multi_json (1.7.3)
61+
padrino-core (0.10.7)
62+
activesupport (~> 3.2.0)
63+
http_router (~> 0.10.2)
64+
sinatra (~> 1.3.1)
65+
thor (~> 0.15.2)
66+
tilt (~> 1.3.0)
67+
padrino-helpers (0.10.7)
68+
i18n (~> 0.6)
69+
padrino-core (= 0.10.7)
70+
rack (1.4.5)
71+
rack-protection (1.5.0)
72+
rack
73+
rack-test (0.6.2)
74+
rack (>= 1.0)
75+
rb-fsevent (0.9.3)
76+
sass (3.2.9)
77+
sinatra (1.3.6)
78+
rack (~> 1.4)
79+
rack-protection (~> 1.3)
80+
tilt (~> 1.3, >= 1.3.3)
81+
sprockets (2.9.3)
82+
hike (~> 1.2)
83+
multi_json (~> 1.0)
84+
rack (~> 1.0)
85+
tilt (~> 1.1, != 1.3.0)
86+
sprockets-helpers (1.0.1)
87+
sprockets (~> 2.0)
88+
sprockets-sass (1.0.1)
89+
sprockets (~> 2.0)
90+
tilt (~> 1.1)
91+
syntax (1.0.0)
92+
thor (0.15.4)
93+
tilt (1.3.7)
94+
uglifier (1.2.7)
95+
execjs (>= 0.3.0)
96+
multi_json (~> 1.3)
97+
url_mount (0.2.1)
98+
rack
99+
100+
PLATFORMS
101+
ruby
102+
103+
DEPENDENCIES
104+
middleman (~> 3.0.13)

‎config.rb

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
###
2+
# Compass
3+
###
4+
5+
# Susy grids in Compass
6+
# First: gem install susy
7+
# require 'susy'
8+
9+
# Change Compass configuration
10+
# compass_config do |config|
11+
# config.output_style = :compact
12+
# end
13+
14+
###
15+
# Page options, layouts, aliases and proxies
16+
###
17+
18+
# Per-page layout changes:
19+
#
20+
# With no layout
21+
# page "/path/to/file.html", :layout => false
22+
#
23+
# With alternative layout
24+
# page "/path/to/file.html", :layout => :otherlayout
25+
#
26+
# A path which all have the same layout
27+
# with_layout :admin do
28+
# page "/admin/*"
29+
# end
30+
31+
# Proxy (fake) files
32+
# page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
33+
# @which_fake_page = "Rendering a fake page with a variable"
34+
# end
35+
36+
###
37+
# Helpers
38+
###
39+
40+
# Automatic image dimensions on image_tag helper
41+
# activate :automatic_image_sizes
42+
43+
# Methods defined in the helpers block are available in templates
44+
# helpers do
45+
# def some_helper
46+
# "Helping"
47+
# end
48+
# end
49+
50+
set :css_dir, 'stylesheets'
51+
52+
set :js_dir, 'javascripts'
53+
54+
set :images_dir, 'images'
55+
56+
# Build-specific configuration
57+
configure :build do
58+
# For example, change the Compass output style for deployment
59+
# activate :minify_css
60+
61+
# Minify Javascript on build
62+
# activate :minify_javascript
63+
64+
# Enable cache buster
65+
# activate :cache_buster
66+
67+
# Use relative URLs
68+
# activate :relative_assets
69+
70+
# Compress PNGs after build
71+
# First: gem install middleman-smusher
72+
# require "middleman-smusher"
73+
# activate :smusher
74+
75+
# Or use a different image path
76+
# set :http_path, "/Content/images/"
77+
end

‎config.ru

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
require 'rubygems'
2+
require 'middleman/rack'
3+
4+
run Middleman.server

‎source/index.html.haml

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: ズルいデザインハンズオン
3+
---
4+
5+
%header
6+
%nav.wrap
7+
%ul
8+
%li= link_to "MyApp", "/",{:class => "logo"}
9+
%li= link_to "nav-link", "/"
10+
%li= link_to "nav-link", "/"
11+
%li= link_to "nav-link", "/"
12+
%li= link_to "nav-link", "/"
13+
%main
14+
#hero
15+
.wrap.column2
16+
.title.small
17+
%h1 MyApp
18+
.description.large
19+
%p
20+
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
21+
.join
22+
=link_to "DOWN LOAD", "/",{:class => "button"}
23+
#features
24+
.wrap.columns3
25+
.feature
26+
%h2 Feature
27+
%p
28+
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
29+
.feature
30+
%h2 Feature
31+
%p
32+
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
33+
.feature
34+
%h2 Feature
35+
%p
36+
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
37+
#gettingstarted
38+
.wrap.column1
39+
%h1 Getting Started
40+
%p
41+
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.
42+
43+
%p Et vix aliquid interesset scribentur. Sea cu meliore recteque, stet postulant ocurreret usu in. Vis eu ipsum facilisis. Ius ut legendos perpetua vituperatoribus.
44+
45+
%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.
46+
47+
%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.
48+
49+
%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.
50+
%footer
51+
.wrap
52+
%nav
53+
%ul
54+
%li= link_to "nav-link", "/"
55+
%li= link_to "nav-link", "/"
56+
%li= link_to "nav-link", "/"
57+
%li= link_to "nav-link", "/"
58+
%p#copyright © 2013 you, inc.

‎source/javascripts/all.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
//= require_tree .

‎source/layouts/layout.haml

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
%html
3+
%head
4+
%meta{:charset => "utf-8"}/
5+
%meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
6+
%title= data.page.title || "ken_c_lo"
7+
= stylesheet_link_tag "application"
8+
= javascript_include_tag "application"
9+
%body{:class => page_classes}
10+
= yield

‎source/stylesheets/3colors/_3colors_basic.sass

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
// テキストの色設定 *****************************************
2+
3+
// 背景 main-color のテキストカラー
4+
=main-text-color
5+
@if lightness($main-color) > 45%
6+
color: desaturate(darken($main-color, 64%), 20%)
7+
@else
8+
color: desaturate(lighten($main-color, 64%), 82%)
9+
10+
// 背景 main-color のテキストカラー
11+
=base-text-color
12+
@if lightness($base-color) > 45%
13+
color: desaturate(darken($base-color, 60%), 70%)
14+
@else
15+
color: desaturate(lighten($base-color, 50%), 80%)
16+
17+
// 背景 accent-color のテキストカラー
18+
=accent-text-color
19+
@if lightness($accent-color) > 45%
20+
color: desaturate(darken($accent-color, 60%), 20%)
21+
@else
22+
color: desaturate(lighten($accent-color, 50%), 80%)
23+
24+
// 色の適用 *****************************************
25+
26+
// body
27+
body
28+
background: $base-color
29+
+base-text-color
30+
31+
// header
32+
header
33+
a
34+
+base-text-color
35+
36+
// hero
37+
#hero
38+
background: $main-color
39+
+main-text-color
40+
.button
41+
background: $accent-color
42+
+accent-text-color
43+
&:hover
44+
background: lighten($accent-color, 12%)
45+
46+
// feature
47+
.feature
48+
+base-text-color
49+
50+
// gettingstarted
51+
#gettingstarted
52+
background: $base-color
53+
54+
// footer
55+
footer
56+
a
57+
+base-text-color
58+
59+
// レイアウト *****************************************
60+
61+
// サイトの最大幅
62+
.wrap
63+
max-width: 1140px
64+
65+
// header
66+
header
67+
padding: 20px 0 // ヘッダの高さ
68+
nav
69+
ul
70+
li
71+
margin: 0 1.2em 0 0 // header nav のリンクの間隔
72+
a
73+
&.logo
74+
font-size: 26px // ロゴのフォントサイズ
75+
margin: 0 1em 0 0 // ロゴの間隔
76+
77+
// hero
78+
$box-side-margin: 0.03 // 複数のカラムが横並びの場合の、カラムとカラムの間隔（0.01で1%）（※hero、features 共通）
79+
$title-width: 0.32 // #hero 内の .title（左カラム） の横幅（0.01で1%）→ 右カラムのサイズは自動で算出
80+
#hero
81+
padding: 120px 0 // #hero の上下の余白
82+
margin: 0 0 40px // #hero の下の間隔
83+
.title
84+
h1
85+
font-size: 68px // #hero のタイトルフォントサイズ
86+
.description
87+
p
88+
line-height: 1.4 // .description の本文の行間
89+
margin: 0 0 1.2em // .description の本文の段落の下の間隔
90+
.button
91+
font-size: 26px
92+
line-height: 2.2
93+
94+
// features
95+
#features
96+
margin: 0 0 50px // #features の下の間隔
97+
.feature
98+
h2
99+
font-size: 26px // .feature タイトルのフォントサイズ
100+
margin: 0 0 0.8em // .feature タイトルの下の間隔
101+
p
102+
line-height: 1.4 // .feature 本文の行間
103+
104+
// gettingstarted
105+
#gettingstarted
106+
padding: 0 // #gettingstarted の下の間隔
107+
h1
108+
font-size: 28px // #gettingstarted タイトルのフォントサイズ
109+
margin: 0 0 1em // #gettingstarted タイトルの下の間隔
110+
p
111+
line-height: 1.4 // #gettingstarted 本文の行間
112+
margin: 0 0 1.2em // #gettingstarted 本文の段落の下の間隔
113+
114+
// footer
115+
footer
116+
padding: 60px 0 // footer の上下の余白
117+
nav
118+
margin: 0 0 60px // footer nav の下の間隔
119+
li
120+
margin: 0 1.2em // footer nav のリンクの間隔

0 commit comments

Comments
 (0)