minimal-devices 0.5.7 → 0.5.8
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +1 -1
- data/Gemfile.lock +11 -2
- data/Rakefile +22 -0
- data/css/imac.css +1 -0
- data/css/ipad.css +2 -2
- data/css/iphone.css +2 -2
- data/dist/minimal-devices.zip +0 -0
- data/lib/minimal-devices.rb +1 -1
- data/minimal-devices.gemspec +2 -0
- data/pkg/minimal-devices-0.5.6.zip +0 -0
- data/pkg/minimal-devices-0.5.6/css/imac.css +99 -0
- data/pkg/minimal-devices-0.5.6/css/ipad.css +185 -0
- data/pkg/minimal-devices-0.5.6/css/iphone.css +237 -0
- data/pkg/minimal-devices-0.5.6/css/macbook.css +84 -0
- data/pkg/minimal-devices-0.5.6/templates/device_markup/imac.html +13 -0
- data/pkg/minimal-devices-0.5.6/templates/device_markup/ipad.html +18 -0
- data/pkg/minimal-devices-0.5.6/templates/device_markup/iphone.html +24 -0
- data/pkg/minimal-devices-0.5.6/templates/device_markup/macbook.html +13 -0
- data/stylesheets/device/_imac.scss +1 -0
- data/templates/device_markup/imac.html +1 -1
- data/templates/device_markup/macbook.html +10 -5
- metadata +58 -25
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: bd0c3ff7ab5c885c07da8e863032890e2703abf2
|
4
|
+
data.tar.gz: 2f8dfe2c72be224baa2d8db59073817e3e961147
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 123e990ddee96e75c98e6e3176dd3bcc2cd29548205d5a8a89ef7444e4e3cb42fee88acb66902996bc8ad0358f05f5acf52122f6c354ccd2efd825245481eb8a
|
7
|
+
data.tar.gz: 9cb1124164beb069774ef2f4da29d25cad1a8e6330202a4d9fe9fc6111a68ec0d88c17ff959bef198fce72397d62fa1691bf753d9b88b06bad376b4bffcb57f6
|
data/.gitignore
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,17 +1,26 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
minimal-devices (0.5.
|
4
|
+
minimal-devices (0.5.8)
|
5
5
|
|
6
6
|
GEM
|
7
7
|
remote: https://rubygems.org/
|
8
8
|
specs:
|
9
|
-
|
9
|
+
chunky_png (1.2.8)
|
10
|
+
compass (0.13.alpha.4)
|
11
|
+
chunky_png (~> 1.2)
|
12
|
+
listen (<= 0.9.9)
|
13
|
+
sass (~> 3.2.5)
|
14
|
+
listen (0.7.3)
|
15
|
+
rake (10.1.0)
|
16
|
+
sass (3.2.9)
|
10
17
|
|
11
18
|
PLATFORMS
|
12
19
|
ruby
|
13
20
|
|
14
21
|
DEPENDENCIES
|
15
22
|
bundler (~> 1.3)
|
23
|
+
compass (~> 0.13.alpha.4)
|
16
24
|
minimal-devices!
|
17
25
|
rake
|
26
|
+
sass (~> 3.2.9)
|
data/Rakefile
CHANGED
@@ -1 +1,23 @@
|
|
1
1
|
require "bundler/gem_tasks"
|
2
|
+
require 'rake/packagetask'
|
3
|
+
|
4
|
+
|
5
|
+
desc "Compile to css and package"
|
6
|
+
task :builder do
|
7
|
+
|
8
|
+
Dir.chdir('css-output') do
|
9
|
+
sh("compass compile --force")
|
10
|
+
end
|
11
|
+
|
12
|
+
sh("rake repackage")
|
13
|
+
sh("rm -f -r dist/minimal-devices")
|
14
|
+
sh("rake build")
|
15
|
+
|
16
|
+
end
|
17
|
+
|
18
|
+
Rake::PackageTask.new('minimal-devices', :noversion) do |p|
|
19
|
+
p.need_zip = true;
|
20
|
+
p.package_files.include("css/*", "templates/*/*")
|
21
|
+
p.package_dir = "dist"
|
22
|
+
|
23
|
+
end
|
data/css/imac.css
CHANGED
data/css/ipad.css
CHANGED
@@ -67,8 +67,8 @@
|
|
67
67
|
width: 50%;
|
68
68
|
height: 80%;
|
69
69
|
position: absolute;
|
70
|
-
top: 0.
|
71
|
-
right:
|
70
|
+
top: 0.625em;
|
71
|
+
right: 0.625em;
|
72
72
|
border-radius: 0 3.125em 0 0;
|
73
73
|
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
74
74
|
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
data/css/iphone.css
CHANGED
@@ -67,8 +67,8 @@
|
|
67
67
|
width: 50%;
|
68
68
|
height: 80%;
|
69
69
|
position: absolute;
|
70
|
-
top: 0.
|
71
|
-
right:
|
70
|
+
top: 0.625em;
|
71
|
+
right: 0.625em;
|
72
72
|
border-radius: 0 3.125em 0 0;
|
73
73
|
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
74
74
|
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
Binary file
|
data/lib/minimal-devices.rb
CHANGED
data/minimal-devices.gemspec
CHANGED
Binary file
|
@@ -0,0 +1,99 @@
|
|
1
|
+
.md-imac {
|
2
|
+
width: 62.5em;
|
3
|
+
height: 50em;
|
4
|
+
}
|
5
|
+
.md-imac .md-body {
|
6
|
+
width: 100%;
|
7
|
+
height: 43.125em;
|
8
|
+
background: #c6c7ca;
|
9
|
+
border-radius: 1.875em;
|
10
|
+
overflow: hidden;
|
11
|
+
}
|
12
|
+
.md-imac .md-top {
|
13
|
+
width: 100%;
|
14
|
+
height: 37.1875em;
|
15
|
+
background: #0f0f0f;
|
16
|
+
border-radius: 1.875em 1.875em 0 0;
|
17
|
+
position: relative;
|
18
|
+
}
|
19
|
+
.md-imac .md-screen {
|
20
|
+
width: 57.5em;
|
21
|
+
height: 32.375em;
|
22
|
+
margin: 0 auto;
|
23
|
+
position: relative;
|
24
|
+
top: 2.375em;
|
25
|
+
background: #17171a;
|
26
|
+
}
|
27
|
+
.md-imac .md-camera {
|
28
|
+
width: 0.375em;
|
29
|
+
height: 0.375em;
|
30
|
+
margin: 0 auto;
|
31
|
+
position: relative;
|
32
|
+
top: 1.25em;
|
33
|
+
background: #000;
|
34
|
+
border-radius: 100%;
|
35
|
+
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
|
36
|
+
}
|
37
|
+
.md-imac .md-camera:after {
|
38
|
+
content: "";
|
39
|
+
display: block;
|
40
|
+
width: 0.125em;
|
41
|
+
height: 0.125em;
|
42
|
+
position: absolute;
|
43
|
+
left: 0.125em;
|
44
|
+
top: 0.0625em;
|
45
|
+
background: #353542;
|
46
|
+
border-radius: 100%;
|
47
|
+
}
|
48
|
+
.md-imac .md-base {
|
49
|
+
width: 19.25em;
|
50
|
+
height: 6.875em;
|
51
|
+
margin: -0.5em auto;
|
52
|
+
}
|
53
|
+
.md-imac .md-stand {
|
54
|
+
width: 13.125em;
|
55
|
+
height: 6.125em;
|
56
|
+
margin: 0 auto;
|
57
|
+
background: #cccdcf;
|
58
|
+
background: -webkit-linear-gradient(#b7b8bb, #cccdcf 50%, #d9dadb 80%, #cccdcf, #bfc0c3);
|
59
|
+
background: -moz-linear-gradient(#b7b8bb, #cccdcf 50%, #d9dadb 80%, #cccdcf, #bfc0c3);
|
60
|
+
background: -o-linear-gradient(#b7b8bb, #cccdcf 50%, #d9dadb 80%, #cccdcf, #bfc0c3);
|
61
|
+
background: linear-gradient(#b7b8bb, #cccdcf 50%, #d9dadb 80%, #cccdcf, #bfc0c3);
|
62
|
+
-webkit-transform: perspective(50em) rotate3d(1, 0, 0, 30deg);
|
63
|
+
-moz-transform: perspective(50em) rotate3d(1, 0, 0, 30deg);
|
64
|
+
-ms-transform: perspective(50em) rotate3d(1, 0, 0, 30deg);
|
65
|
+
-o-transform: perspective(50em) rotate3d(1, 0, 0, 30deg);
|
66
|
+
transform: perspective(50em) rotate3d(1, 0, 0, 30deg);
|
67
|
+
}
|
68
|
+
.md-imac .md-foot {
|
69
|
+
width: 15em;
|
70
|
+
height: 3.125em;
|
71
|
+
margin: 0 auto;
|
72
|
+
position: relative;
|
73
|
+
bottom: 1.5em;
|
74
|
+
border-radius: 0 0 0.625em 0.625em;
|
75
|
+
background: -webkit-linear-gradient(#bfc0c3 20%, #cccdcf);
|
76
|
+
background: -moz-linear-gradient(#bfc0c3 20%, #cccdcf);
|
77
|
+
background: -o-linear-gradient(#bfc0c3 20%, #cccdcf);
|
78
|
+
background: linear-gradient(#bfc0c3 20%, #cccdcf);
|
79
|
+
-webkit-transform: perspective(11.875em) rotate3d(1, 0, 0, 70deg);
|
80
|
+
-moz-transform: perspective(11.875em) rotate3d(1, 0, 0, 70deg);
|
81
|
+
-ms-transform: perspective(11.875em) rotate3d(1, 0, 0, 70deg);
|
82
|
+
-o-transform: perspective(11.875em) rotate3d(1, 0, 0, 70deg);
|
83
|
+
transform: perspective(11.875em) rotate3d(1, 0, 0, 70deg);
|
84
|
+
box-shadow: 0 0.375em 0 #bfc0c3;
|
85
|
+
}
|
86
|
+
.md-imac.md-glare .md-top:after {
|
87
|
+
content: "";
|
88
|
+
display: block;
|
89
|
+
width: 50%;
|
90
|
+
height: 100%;
|
91
|
+
position: absolute;
|
92
|
+
top: 0;
|
93
|
+
right: 0;
|
94
|
+
border-radius: 0 1.25em 0 0;
|
95
|
+
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
96
|
+
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
97
|
+
background: -o-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
98
|
+
background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
99
|
+
}
|
@@ -0,0 +1,185 @@
|
|
1
|
+
.md-ipad .md-body {
|
2
|
+
width: 100%;
|
3
|
+
height: 100%;
|
4
|
+
border-radius: 3.75em;
|
5
|
+
border-style: solid;
|
6
|
+
border-width: 0.375em;
|
7
|
+
position: relative;
|
8
|
+
}
|
9
|
+
|
10
|
+
.md-ipad .md-screen {
|
11
|
+
position: relative;
|
12
|
+
margin: 0 auto;
|
13
|
+
background-color: #161616;
|
14
|
+
border-radius: 0.25em;
|
15
|
+
overflow: hidden;
|
16
|
+
box-shadow: 0 0 0px 3px #161616;
|
17
|
+
}
|
18
|
+
.md-ipad .md-screen img {
|
19
|
+
width: 100%;
|
20
|
+
}
|
21
|
+
|
22
|
+
.md-ipad .md-home-button {
|
23
|
+
display: block;
|
24
|
+
width: 3.625em;
|
25
|
+
height: 3.625em;
|
26
|
+
margin: 0 auto;
|
27
|
+
position: relative;
|
28
|
+
border-radius: 100%;
|
29
|
+
border: none;
|
30
|
+
cursor: default;
|
31
|
+
font-size: 100%;
|
32
|
+
}
|
33
|
+
.md-ipad .md-home-button:after {
|
34
|
+
content: "";
|
35
|
+
display: block;
|
36
|
+
width: 1.125em;
|
37
|
+
height: 1.125em;
|
38
|
+
margin: 0 auto;
|
39
|
+
position: relative;
|
40
|
+
border-style: solid;
|
41
|
+
border-width: 0.125em;
|
42
|
+
border-radius: 0.25em;
|
43
|
+
}
|
44
|
+
|
45
|
+
.md-ipad .md-front-camera {
|
46
|
+
width: 0.875em;
|
47
|
+
height: 0.875em;
|
48
|
+
margin: 0 auto;
|
49
|
+
position: relative;
|
50
|
+
border-radius: 100%;
|
51
|
+
}
|
52
|
+
.md-ipad .md-front-camera:after {
|
53
|
+
content: "";
|
54
|
+
display: block;
|
55
|
+
width: 0.375em;
|
56
|
+
height: 0.375em;
|
57
|
+
position: relative;
|
58
|
+
top: 0.25em;
|
59
|
+
left: 0.25em;
|
60
|
+
background-color: #8c8091;
|
61
|
+
border-radius: 100%;
|
62
|
+
}
|
63
|
+
|
64
|
+
.md-ipad.md-glare:before {
|
65
|
+
content: "";
|
66
|
+
display: block;
|
67
|
+
width: 50%;
|
68
|
+
height: 80%;
|
69
|
+
position: absolute;
|
70
|
+
top: 0.75em;
|
71
|
+
right: 0em;
|
72
|
+
border-radius: 0 3.125em 0 0;
|
73
|
+
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
74
|
+
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
75
|
+
background: -o-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
76
|
+
background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
77
|
+
z-index: 100;
|
78
|
+
}
|
79
|
+
|
80
|
+
.md-ipad {
|
81
|
+
width: 53.375em;
|
82
|
+
height: 79.4375em;
|
83
|
+
position: relative;
|
84
|
+
}
|
85
|
+
.md-ipad .md-front-camera {
|
86
|
+
top: 3.125em;
|
87
|
+
}
|
88
|
+
.md-ipad .md-screen {
|
89
|
+
width: 48em;
|
90
|
+
height: 64em;
|
91
|
+
top: 6.25em;
|
92
|
+
}
|
93
|
+
.md-ipad .md-home-button {
|
94
|
+
bottom: -8.75em;
|
95
|
+
}
|
96
|
+
.md-ipad.md-landscape {
|
97
|
+
-webkit-transform: rotateZ(90deg);
|
98
|
+
-moz-transform: rotateZ(90deg);
|
99
|
+
-ms-transform: rotateZ(90deg);
|
100
|
+
-o-transform: rotateZ(90deg);
|
101
|
+
transform: rotateZ(90deg);
|
102
|
+
}
|
103
|
+
.md-ipad.md-landscape.md-glare:before {
|
104
|
+
-webkit-transform: rotateY(180deg);
|
105
|
+
-moz-transform: rotateY(180deg);
|
106
|
+
-ms-transform: rotateY(180deg);
|
107
|
+
-o-transform: rotateY(180deg);
|
108
|
+
transform: rotateY(180deg);
|
109
|
+
left: 0.625em;
|
110
|
+
top: 0.625em;
|
111
|
+
}
|
112
|
+
|
113
|
+
.md-white-device .md-front-camera, .md-white-device .md-top-speaker, .md-white-device .md-home-button {
|
114
|
+
background: -webkit-linear-gradient(#d0d0c5, #eeeeea);
|
115
|
+
background: -moz-linear-gradient(#d0d0c5, #eeeeea);
|
116
|
+
background: -o-linear-gradient(#d0d0c5, #eeeeea);
|
117
|
+
background: linear-gradient(#d0d0c5, #eeeeea);
|
118
|
+
}
|
119
|
+
|
120
|
+
.md-black-device .md-front-camera, .md-black-device .md-top-speaker, .md-black-device .md-home-button {
|
121
|
+
background: -webkit-linear-gradient(#141917, #202623);
|
122
|
+
background: -moz-linear-gradient(#141917, #202623);
|
123
|
+
background: -o-linear-gradient(#141917, #202623);
|
124
|
+
background: linear-gradient(#141917, #202623);
|
125
|
+
}
|
126
|
+
|
127
|
+
.md-white-device.md-landscape .md-home-button, .md-white-device.md-landscape .md-front-camera, .md-white-device.md-landscape .md-top-speaker {
|
128
|
+
background: -webkit-linear-gradient(left, #d0d0c5, #eeeeea);
|
129
|
+
background: -moz-linear-gradient(left, #d0d0c5, #eeeeea);
|
130
|
+
background: -o-linear-gradient(left, #d0d0c5, #eeeeea);
|
131
|
+
background: linear-gradient(to right, #d0d0c5, #eeeeea);
|
132
|
+
}
|
133
|
+
|
134
|
+
.md-black-device.md-landscape .md-home-button, .md-black-device.md-landscape .md-front-camera, .md-black-device.md-landscape .md-top-speaker {
|
135
|
+
background: -webkit-linear-gradient(left, #141917, #202623);
|
136
|
+
background: -moz-linear-gradient(left, #141917, #202623);
|
137
|
+
background: -o-linear-gradient(left, #141917, #202623);
|
138
|
+
background: linear-gradient(to right, #141917, #202623);
|
139
|
+
}
|
140
|
+
|
141
|
+
.md-white-device .md-body {
|
142
|
+
background-color: #ebebe4;
|
143
|
+
border-color: #f1f2eb;
|
144
|
+
}
|
145
|
+
.md-white-device .md-buttons {
|
146
|
+
background-color: #ebebe4;
|
147
|
+
}
|
148
|
+
.md-white-device .md-buttons:after, .md-white-device .md-buttons:before {
|
149
|
+
background-color: #ebebe4;
|
150
|
+
}
|
151
|
+
.md-white-device .md-front-camera:after {
|
152
|
+
background-color: #8c8091;
|
153
|
+
}
|
154
|
+
.md-white-device .md-top-speaker:after {
|
155
|
+
background-color: #4b414a;
|
156
|
+
}
|
157
|
+
.md-white-device .md-home-button:after {
|
158
|
+
border-color: #eff1e6;
|
159
|
+
}
|
160
|
+
.md-white-device:after {
|
161
|
+
background: #ebebe4;
|
162
|
+
}
|
163
|
+
|
164
|
+
.md-black-device .md-body {
|
165
|
+
background-color: #1b211e;
|
166
|
+
border-color: #282e2b;
|
167
|
+
}
|
168
|
+
.md-black-device .md-buttons {
|
169
|
+
background-color: #1b211e;
|
170
|
+
}
|
171
|
+
.md-black-device .md-buttons:after, .md-black-device .md-buttons:before {
|
172
|
+
background-color: #1b211e;
|
173
|
+
}
|
174
|
+
.md-black-device .md-front-camera:after {
|
175
|
+
background-color: #2c292f;
|
176
|
+
}
|
177
|
+
.md-black-device .md-top-speaker:after {
|
178
|
+
background-color: #191616;
|
179
|
+
}
|
180
|
+
.md-black-device .md-home-button:after {
|
181
|
+
border-color: #444a45;
|
182
|
+
}
|
183
|
+
.md-black-device:after {
|
184
|
+
background: #1b211e;
|
185
|
+
}
|
@@ -0,0 +1,237 @@
|
|
1
|
+
.md-iphone-5 .md-body {
|
2
|
+
width: 100%;
|
3
|
+
height: 100%;
|
4
|
+
border-radius: 3.75em;
|
5
|
+
border-style: solid;
|
6
|
+
border-width: 0.375em;
|
7
|
+
position: relative;
|
8
|
+
}
|
9
|
+
|
10
|
+
.md-iphone-5 .md-screen {
|
11
|
+
position: relative;
|
12
|
+
margin: 0 auto;
|
13
|
+
background-color: #161616;
|
14
|
+
border-radius: 0.25em;
|
15
|
+
overflow: hidden;
|
16
|
+
box-shadow: 0 0 0px 3px #161616;
|
17
|
+
}
|
18
|
+
.md-iphone-5 .md-screen img {
|
19
|
+
width: 100%;
|
20
|
+
}
|
21
|
+
|
22
|
+
.md-iphone-5 .md-home-button {
|
23
|
+
display: block;
|
24
|
+
width: 3.625em;
|
25
|
+
height: 3.625em;
|
26
|
+
margin: 0 auto;
|
27
|
+
position: relative;
|
28
|
+
border-radius: 100%;
|
29
|
+
border: none;
|
30
|
+
cursor: default;
|
31
|
+
font-size: 100%;
|
32
|
+
}
|
33
|
+
.md-iphone-5 .md-home-button:after {
|
34
|
+
content: "";
|
35
|
+
display: block;
|
36
|
+
width: 1.125em;
|
37
|
+
height: 1.125em;
|
38
|
+
margin: 0 auto;
|
39
|
+
position: relative;
|
40
|
+
border-style: solid;
|
41
|
+
border-width: 0.125em;
|
42
|
+
border-radius: 0.25em;
|
43
|
+
}
|
44
|
+
|
45
|
+
.md-iphone-5 .md-front-camera {
|
46
|
+
width: 0.875em;
|
47
|
+
height: 0.875em;
|
48
|
+
margin: 0 auto;
|
49
|
+
position: relative;
|
50
|
+
border-radius: 100%;
|
51
|
+
}
|
52
|
+
.md-iphone-5 .md-front-camera:after {
|
53
|
+
content: "";
|
54
|
+
display: block;
|
55
|
+
width: 0.375em;
|
56
|
+
height: 0.375em;
|
57
|
+
position: relative;
|
58
|
+
top: 0.25em;
|
59
|
+
left: 0.25em;
|
60
|
+
background-color: #8c8091;
|
61
|
+
border-radius: 100%;
|
62
|
+
}
|
63
|
+
|
64
|
+
.md-iphone-5.md-glare:before {
|
65
|
+
content: "";
|
66
|
+
display: block;
|
67
|
+
width: 50%;
|
68
|
+
height: 80%;
|
69
|
+
position: absolute;
|
70
|
+
top: 0.75em;
|
71
|
+
right: 0em;
|
72
|
+
border-radius: 0 3.125em 0 0;
|
73
|
+
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
74
|
+
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
75
|
+
background: -o-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
76
|
+
background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
77
|
+
z-index: 100;
|
78
|
+
}
|
79
|
+
|
80
|
+
.md-iphone-5:after {
|
81
|
+
content: "";
|
82
|
+
display: block;
|
83
|
+
width: 3.3125em;
|
84
|
+
height: 0.1875em;
|
85
|
+
position: absolute;
|
86
|
+
right: 3.625em;
|
87
|
+
top: -0.1875em;
|
88
|
+
border-radius: 0.125em 0.125em 0 0;
|
89
|
+
}
|
90
|
+
|
91
|
+
.md-iphone-5 {
|
92
|
+
width: 22.8125em;
|
93
|
+
height: 49em;
|
94
|
+
position: relative;
|
95
|
+
}
|
96
|
+
.md-iphone-5 .md-front-camera {
|
97
|
+
top: 1.25em;
|
98
|
+
}
|
99
|
+
.md-iphone-5 .md-top-speaker {
|
100
|
+
width: 3.75em;
|
101
|
+
height: 0.875em;
|
102
|
+
margin: 0 auto;
|
103
|
+
position: relative;
|
104
|
+
top: 2.25em;
|
105
|
+
border-radius: 3.125em;
|
106
|
+
}
|
107
|
+
.md-iphone-5 .md-top-speaker:after {
|
108
|
+
content: "";
|
109
|
+
display: block;
|
110
|
+
width: 3.25em;
|
111
|
+
height: 0.375em;
|
112
|
+
margin: 0 auto;
|
113
|
+
position: relative;
|
114
|
+
top: 0.25em;
|
115
|
+
background-color: #4b414a;
|
116
|
+
border-radius: 3.125em;
|
117
|
+
}
|
118
|
+
.md-iphone-5 .md-screen {
|
119
|
+
width: 20em;
|
120
|
+
height: 35.5em;
|
121
|
+
top: 3.75em;
|
122
|
+
}
|
123
|
+
.md-iphone-5 .md-home-button {
|
124
|
+
bottom: -5.9375em;
|
125
|
+
}
|
126
|
+
.md-iphone-5 .md-buttons {
|
127
|
+
width: 0.1875em;
|
128
|
+
height: 1.875em;
|
129
|
+
position: absolute;
|
130
|
+
left: -0.5em;
|
131
|
+
top: 5.9375em;
|
132
|
+
border-radius: 0.125em 0 0 0.125em;
|
133
|
+
}
|
134
|
+
.md-iphone-5 .md-buttons:after, .md-iphone-5 .md-buttons:before {
|
135
|
+
content: "";
|
136
|
+
display: block;
|
137
|
+
position: absolute;
|
138
|
+
width: 0.1875em;
|
139
|
+
height: 1.5625em;
|
140
|
+
border-radius: 0.125em 0 0 0.125em;
|
141
|
+
}
|
142
|
+
.md-iphone-5 .md-buttons:after {
|
143
|
+
top: 3.125em;
|
144
|
+
}
|
145
|
+
.md-iphone-5 .md-buttons:before {
|
146
|
+
top: 6.25em;
|
147
|
+
}
|
148
|
+
.md-iphone-5.md-landscape {
|
149
|
+
-webkit-transform: rotateZ(90deg);
|
150
|
+
-moz-transform: rotateZ(90deg);
|
151
|
+
-ms-transform: rotateZ(90deg);
|
152
|
+
-o-transform: rotateZ(90deg);
|
153
|
+
transform: rotateZ(90deg);
|
154
|
+
}
|
155
|
+
.md-iphone-5.md-landscape.md-glare:before {
|
156
|
+
-webkit-transform: rotateY(180deg);
|
157
|
+
-moz-transform: rotateY(180deg);
|
158
|
+
-ms-transform: rotateY(180deg);
|
159
|
+
-o-transform: rotateY(180deg);
|
160
|
+
transform: rotateY(180deg);
|
161
|
+
left: 0.625em;
|
162
|
+
top: 0.625em;
|
163
|
+
}
|
164
|
+
|
165
|
+
.md-white-device .md-front-camera, .md-white-device .md-top-speaker, .md-white-device .md-home-button {
|
166
|
+
background: -webkit-linear-gradient(#d0d0c5, #eeeeea);
|
167
|
+
background: -moz-linear-gradient(#d0d0c5, #eeeeea);
|
168
|
+
background: -o-linear-gradient(#d0d0c5, #eeeeea);
|
169
|
+
background: linear-gradient(#d0d0c5, #eeeeea);
|
170
|
+
}
|
171
|
+
|
172
|
+
.md-black-device .md-front-camera, .md-black-device .md-top-speaker, .md-black-device .md-home-button {
|
173
|
+
background: -webkit-linear-gradient(#141917, #202623);
|
174
|
+
background: -moz-linear-gradient(#141917, #202623);
|
175
|
+
background: -o-linear-gradient(#141917, #202623);
|
176
|
+
background: linear-gradient(#141917, #202623);
|
177
|
+
}
|
178
|
+
|
179
|
+
.md-white-device.md-landscape .md-home-button, .md-white-device.md-landscape .md-front-camera, .md-white-device.md-landscape .md-top-speaker {
|
180
|
+
background: -webkit-linear-gradient(left, #d0d0c5, #eeeeea);
|
181
|
+
background: -moz-linear-gradient(left, #d0d0c5, #eeeeea);
|
182
|
+
background: -o-linear-gradient(left, #d0d0c5, #eeeeea);
|
183
|
+
background: linear-gradient(to right, #d0d0c5, #eeeeea);
|
184
|
+
}
|
185
|
+
|
186
|
+
.md-black-device.md-landscape .md-home-button, .md-black-device.md-landscape .md-front-camera, .md-black-device.md-landscape .md-top-speaker {
|
187
|
+
background: -webkit-linear-gradient(left, #141917, #202623);
|
188
|
+
background: -moz-linear-gradient(left, #141917, #202623);
|
189
|
+
background: -o-linear-gradient(left, #141917, #202623);
|
190
|
+
background: linear-gradient(to right, #141917, #202623);
|
191
|
+
}
|
192
|
+
|
193
|
+
.md-white-device .md-body {
|
194
|
+
background-color: #ebebe4;
|
195
|
+
border-color: #f1f2eb;
|
196
|
+
}
|
197
|
+
.md-white-device .md-buttons {
|
198
|
+
background-color: #ebebe4;
|
199
|
+
}
|
200
|
+
.md-white-device .md-buttons:after, .md-white-device .md-buttons:before {
|
201
|
+
background-color: #ebebe4;
|
202
|
+
}
|
203
|
+
.md-white-device .md-front-camera:after {
|
204
|
+
background-color: #8c8091;
|
205
|
+
}
|
206
|
+
.md-white-device .md-top-speaker:after {
|
207
|
+
background-color: #4b414a;
|
208
|
+
}
|
209
|
+
.md-white-device .md-home-button:after {
|
210
|
+
border-color: #eff1e6;
|
211
|
+
}
|
212
|
+
.md-white-device:after {
|
213
|
+
background: #ebebe4;
|
214
|
+
}
|
215
|
+
|
216
|
+
.md-black-device .md-body {
|
217
|
+
background-color: #1b211e;
|
218
|
+
border-color: #282e2b;
|
219
|
+
}
|
220
|
+
.md-black-device .md-buttons {
|
221
|
+
background-color: #1b211e;
|
222
|
+
}
|
223
|
+
.md-black-device .md-buttons:after, .md-black-device .md-buttons:before {
|
224
|
+
background-color: #1b211e;
|
225
|
+
}
|
226
|
+
.md-black-device .md-front-camera:after {
|
227
|
+
background-color: #2c292f;
|
228
|
+
}
|
229
|
+
.md-black-device .md-top-speaker:after {
|
230
|
+
background-color: #191616;
|
231
|
+
}
|
232
|
+
.md-black-device .md-home-button:after {
|
233
|
+
border-color: #444a45;
|
234
|
+
}
|
235
|
+
.md-black-device:after {
|
236
|
+
background: #1b211e;
|
237
|
+
}
|
@@ -0,0 +1,84 @@
|
|
1
|
+
.md-macbook-pro {
|
2
|
+
width: 55.3125em;
|
3
|
+
height: 31.875em;
|
4
|
+
}
|
5
|
+
.md-macbook-pro .md-lid {
|
6
|
+
width: 45em;
|
7
|
+
height: 30.625em;
|
8
|
+
margin: 0 auto;
|
9
|
+
position: relative;
|
10
|
+
border-radius: 1.875em;
|
11
|
+
border: solid 0.1875em #cdced1;
|
12
|
+
background: #131313;
|
13
|
+
}
|
14
|
+
.md-macbook-pro .md-camera {
|
15
|
+
width: 0.375em;
|
16
|
+
height: 0.375em;
|
17
|
+
margin: 0 auto;
|
18
|
+
position: relative;
|
19
|
+
top: 1.0625em;
|
20
|
+
background: #000;
|
21
|
+
border-radius: 100%;
|
22
|
+
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
|
23
|
+
}
|
24
|
+
.md-macbook-pro .md-camera:after {
|
25
|
+
content: "";
|
26
|
+
display: block;
|
27
|
+
width: 0.125em;
|
28
|
+
height: 0.125em;
|
29
|
+
position: absolute;
|
30
|
+
left: 0.125em;
|
31
|
+
top: 0.0625em;
|
32
|
+
background: #353542;
|
33
|
+
border-radius: 100%;
|
34
|
+
}
|
35
|
+
.md-macbook-pro .md-screen {
|
36
|
+
width: 42.25em;
|
37
|
+
height: 26.375em;
|
38
|
+
margin: 0 auto;
|
39
|
+
position: relative;
|
40
|
+
top: 2.0625em;
|
41
|
+
background: #1d1d1d;
|
42
|
+
}
|
43
|
+
.md-macbook-pro .md-base {
|
44
|
+
width: 100%;
|
45
|
+
height: 0.9375em;
|
46
|
+
position: relative;
|
47
|
+
top: -0.75em;
|
48
|
+
background: #c6c7ca;
|
49
|
+
}
|
50
|
+
.md-macbook-pro .md-base:after {
|
51
|
+
content: "";
|
52
|
+
display: block;
|
53
|
+
width: 100%;
|
54
|
+
height: 0.5em;
|
55
|
+
margin: 0 auto;
|
56
|
+
position: relative;
|
57
|
+
bottom: -0.1875em;
|
58
|
+
background: #b9babe;
|
59
|
+
border-radius: 0 0 1.25em 1.25em;
|
60
|
+
}
|
61
|
+
.md-macbook-pro .md-base:before {
|
62
|
+
content: "";
|
63
|
+
display: block;
|
64
|
+
width: 7.6875em;
|
65
|
+
height: 0.625em;
|
66
|
+
margin: 0 auto;
|
67
|
+
position: relative;
|
68
|
+
background: #a6a8ad;
|
69
|
+
border-radius: 0 0 0.625em 0.625em;
|
70
|
+
}
|
71
|
+
.md-macbook-pro.md-glare .md-lid:after {
|
72
|
+
content: "";
|
73
|
+
display: block;
|
74
|
+
width: 50%;
|
75
|
+
height: 100%;
|
76
|
+
position: absolute;
|
77
|
+
top: 0;
|
78
|
+
right: 0;
|
79
|
+
border-radius: 0 1.25em 0 0;
|
80
|
+
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
81
|
+
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
82
|
+
background: -o-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
83
|
+
background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
84
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div class="md-imac md-glare">
|
2
|
+
<div class="md-body">
|
3
|
+
<div class="md-top">
|
4
|
+
<div class="md-camera"></div>
|
5
|
+
<div class="md-screen"></div>
|
6
|
+
</div>
|
7
|
+
</div>
|
8
|
+
|
9
|
+
<div class="md-base">
|
10
|
+
<div class="md-stand"></div>
|
11
|
+
<div class="md-foot"></div>
|
12
|
+
</div>
|
13
|
+
</div>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<div class="md-ipad md-white-device md-glare">
|
2
|
+
<div class="md-body">
|
3
|
+
<div class="md-front-camera"></div>
|
4
|
+
<div class="md-screen"></div>
|
5
|
+
|
6
|
+
<button class="md-home-button"></button>
|
7
|
+
</div>
|
8
|
+
</div>
|
9
|
+
|
10
|
+
|
11
|
+
<div class="md-ipad md-black-device md-glare">
|
12
|
+
<div class="md-body">
|
13
|
+
<div class="md-front-camera"></div>
|
14
|
+
<div class="md-screen"></div>
|
15
|
+
|
16
|
+
<button class="md-home-button"></button>
|
17
|
+
</div>
|
18
|
+
</div>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<div class="md-iphone-5 md-white-device md-glare">
|
2
|
+
<div class="md-body">
|
3
|
+
<div class="md-buttons"></div>
|
4
|
+
|
5
|
+
<div class="md-front-camera"></div>
|
6
|
+
<div class="md-top-speaker"></div>
|
7
|
+
<div class="md-screen"></div>
|
8
|
+
|
9
|
+
<button class="md-home-button"></button>
|
10
|
+
</div>
|
11
|
+
</div>
|
12
|
+
|
13
|
+
<div class="md-iphone-5 md-black-device md-glare">
|
14
|
+
<div class="md-body">
|
15
|
+
|
16
|
+
<div class="md-buttons"></div>
|
17
|
+
|
18
|
+
<div class="md-front-camera"></div>
|
19
|
+
<div class="md-top-speaker"></div>
|
20
|
+
<div class="md-screen"></div>
|
21
|
+
|
22
|
+
<button class="md-home-button"></button>
|
23
|
+
</div>
|
24
|
+
</div>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div class="md-imac md-glare">
|
2
|
+
<div class="md-body">
|
3
|
+
<div class="md-top">
|
4
|
+
<div class="md-camera"></div>
|
5
|
+
<div class="md-screen"></div>
|
6
|
+
</div>
|
7
|
+
</div>
|
8
|
+
|
9
|
+
<div class="md-base">
|
10
|
+
<div class="md-stand"></div>
|
11
|
+
<div class="md-foot"></div>
|
12
|
+
</div>
|
13
|
+
</div>
|
@@ -1,8 +1,13 @@
|
|
1
|
-
<div class="md-
|
2
|
-
<div class="md-
|
3
|
-
<div class="md-
|
4
|
-
|
1
|
+
<div class="md-imac md-glare">
|
2
|
+
<div class="md-body">
|
3
|
+
<div class="md-top">
|
4
|
+
<div class="md-camera"></div>
|
5
|
+
<div class="md-screen"></div>
|
6
|
+
</div>
|
5
7
|
</div>
|
6
8
|
|
7
|
-
<div class="md-base"
|
9
|
+
<div class="md-base">
|
10
|
+
<div class="md-stand"></div>
|
11
|
+
<div class="md-foot"></div>
|
12
|
+
</div>
|
8
13
|
</div>
|
metadata
CHANGED
@@ -1,39 +1,71 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: minimal-devices
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.5.
|
5
|
-
prerelease:
|
4
|
+
version: 0.5.8
|
6
5
|
platform: ruby
|
7
6
|
authors:
|
8
7
|
- Jared Hardy
|
9
8
|
autorequire:
|
10
9
|
bindir: bin
|
11
10
|
cert_chain: []
|
12
|
-
date: 2013-06-
|
13
|
-
default_executable:
|
11
|
+
date: 2013-06-24 00:00:00.000000000 Z
|
14
12
|
dependencies:
|
15
13
|
- !ruby/object:Gem::Dependency
|
16
14
|
name: bundler
|
17
|
-
requirement:
|
18
|
-
none: false
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
19
16
|
requirements:
|
20
17
|
- - ~>
|
21
18
|
- !ruby/object:Gem::Version
|
22
19
|
version: '1.3'
|
23
20
|
type: :development
|
24
21
|
prerelease: false
|
25
|
-
version_requirements:
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ~>
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.3'
|
26
27
|
- !ruby/object:Gem::Dependency
|
27
28
|
name: rake
|
28
|
-
requirement:
|
29
|
-
none: false
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
30
|
requirements:
|
31
|
-
- -
|
31
|
+
- - '>='
|
32
32
|
- !ruby/object:Gem::Version
|
33
33
|
version: '0'
|
34
34
|
type: :development
|
35
35
|
prerelease: false
|
36
|
-
version_requirements:
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: compass
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - ~>
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: 0.13.alpha.4
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - ~>
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: 0.13.alpha.4
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: sass
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - ~>
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: 3.2.9
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - ~>
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: 3.2.9
|
37
69
|
description: HTML and CSS minimal devices
|
38
70
|
email:
|
39
71
|
- jared@jaredhardy.com
|
@@ -57,9 +89,18 @@ files:
|
|
57
89
|
- css/ipad.css
|
58
90
|
- css/iphone.css
|
59
91
|
- css/macbook.css
|
92
|
+
- dist/minimal-devices.zip
|
60
93
|
- lib/minimal-devices.rb
|
61
94
|
- minimal-devices.gemspec
|
62
|
-
- pkg/minimal-devices-0.5.
|
95
|
+
- pkg/minimal-devices-0.5.6.zip
|
96
|
+
- pkg/minimal-devices-0.5.6/css/imac.css
|
97
|
+
- pkg/minimal-devices-0.5.6/css/ipad.css
|
98
|
+
- pkg/minimal-devices-0.5.6/css/iphone.css
|
99
|
+
- pkg/minimal-devices-0.5.6/css/macbook.css
|
100
|
+
- pkg/minimal-devices-0.5.6/templates/device_markup/imac.html
|
101
|
+
- pkg/minimal-devices-0.5.6/templates/device_markup/ipad.html
|
102
|
+
- pkg/minimal-devices-0.5.6/templates/device_markup/iphone.html
|
103
|
+
- pkg/minimal-devices-0.5.6/templates/device_markup/macbook.html
|
63
104
|
- stylesheets/_minimal-devices.scss
|
64
105
|
- stylesheets/device/_color-variations.scss
|
65
106
|
- stylesheets/device/_imac.scss
|
@@ -74,36 +115,28 @@ files:
|
|
74
115
|
- templates/device_markup/iphone.html
|
75
116
|
- templates/device_markup/macbook.html
|
76
117
|
- test.html
|
77
|
-
has_rdoc: true
|
78
118
|
homepage: ''
|
79
119
|
licenses:
|
80
120
|
- MIT
|
121
|
+
metadata: {}
|
81
122
|
post_install_message:
|
82
123
|
rdoc_options: []
|
83
124
|
require_paths:
|
84
125
|
- lib
|
85
126
|
required_ruby_version: !ruby/object:Gem::Requirement
|
86
|
-
none: false
|
87
127
|
requirements:
|
88
|
-
- -
|
128
|
+
- - '>='
|
89
129
|
- !ruby/object:Gem::Version
|
90
130
|
version: '0'
|
91
|
-
segments:
|
92
|
-
- 0
|
93
|
-
hash: -4109979197000534528
|
94
131
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
95
|
-
none: false
|
96
132
|
requirements:
|
97
|
-
- -
|
133
|
+
- - '>='
|
98
134
|
- !ruby/object:Gem::Version
|
99
135
|
version: '0'
|
100
|
-
segments:
|
101
|
-
- 0
|
102
|
-
hash: -4109979197000534528
|
103
136
|
requirements: []
|
104
137
|
rubyforge_project:
|
105
|
-
rubygems_version:
|
138
|
+
rubygems_version: 2.0.3
|
106
139
|
signing_key:
|
107
|
-
specification_version:
|
140
|
+
specification_version: 4
|
108
141
|
summary: HTML and CSS minimal devices
|
109
142
|
test_files: []
|