smock 0.1.65 → 0.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- smock (0.1.65)
4
+ smock (0.1.66)
5
5
  sass (= 3.2.19)
6
6
  thor (= 0.19.1)
7
7
 
@@ -1,3 +1,7 @@
1
+ .image--blocked
2
+ +space(margin-bottom, 2)
3
+ display: block
4
+
1
5
  .avatar
2
6
  +space(max-height, 14)
3
7
  width: 300px
@@ -1,3 +1,14 @@
1
+ section,
2
+ article
3
+ +clearfix
4
+
5
+ hr
6
+ border: 0
7
+ margin: 0
8
+ +space(height, 2)
9
+ +space(margin-bottom, 2)
10
+ box-shadow: inset 0 -1px 0 0 $border-color
11
+
1
12
  .l-container
2
13
  +outer-container
3
14
  min-width: $max-width
@@ -0,0 +1,12 @@
1
+ .avatar-caption
2
+ +typecsset-font-size($first-font-size)
3
+ clear: both
4
+ .avatar-caption__main
5
+ margin: 0
6
+ .avatar-caption__secondary
7
+ margin: 0
8
+ color: $gray
9
+
10
+ //this needs to be fixed, or removed.
11
+ .avatar-caption__2of12col-image
12
+ +space(padding-top, 0.6)
@@ -43,7 +43,6 @@ cite
43
43
  +typecsset-font-size($base-font-size)
44
44
  font-family: $font-stack-main
45
45
 
46
-
47
46
  .paragraph--heading
48
47
  +typecsset-font-size($first-font-size)
49
48
  +space(margin-bottom)
@@ -52,6 +51,11 @@ cite
52
51
  +typecsset-font-size($first-font-size)
53
52
  .paragraph--no-margin
54
53
  margin-bottom: 0
54
+ .paragraph--with-aside
55
+ +clearfix
56
+ .paragraph__large-image__heading
57
+ +space(margin-top)
58
+
55
59
  .heading--mast
56
60
  +space(margin-bottom, 2)
57
61
  +space(margin-top, 2)
@@ -19,6 +19,7 @@
19
19
  @import "includes/icons"
20
20
  @import "includes/forms"
21
21
  @import "includes/layouts"
22
+ @import "includes/molecules"
22
23
 
23
24
  @import "modules/am_grid"
24
25
  @import "modules/styleguide"
@@ -149,7 +150,7 @@
149
150
  .button--muted
150
151
  +secondary-button($orange)
151
152
 
152
- .button:disabled
153
+ .button[disabled]
153
154
  +button($gray-light)
154
155
 
155
156
  .button--large, .button--large:disabled
@@ -104,8 +104,11 @@
104
104
  <section class="style-group">
105
105
  <h3>Buttons</h3>
106
106
  <a href="#" class="button">Standard Button</a>
107
+ <br/>
107
108
  <a href="#" class="button button--muted">Muted Button</a>
108
- <button href="#" class="button" disabled>Disabled Button</button>
109
+ <br/>
110
+ <a href="#" class="button" disabled>Disabled Button</a>
111
+ <br/>
109
112
  </section>
110
113
 
111
114
  <section class="style-group">
@@ -144,6 +147,12 @@
144
147
  <p>This is a paragraph with <a href="#">A basic link</a> inside of it.</p>
145
148
  </div>
146
149
 
150
+ <div class="style-group__example">
151
+ <strong class="style-group__example__label">Horizontal Rule</strong>
152
+
153
+ <hr />
154
+ </div>
155
+
147
156
  <div class="style-group__example">
148
157
  <strong class="style-group__example__label">Avatar</strong>
149
158
 
@@ -0,0 +1,41 @@
1
+ <!DOCTYPE html>
2
+ <!--[if lt IE 7]>
3
+ <html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
4
+ <!--[if IE 7]>
5
+ <html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8"> <![endif]-->
6
+ <!--[if IE 8]>
7
+ <html lang="en" ng-app="moodBoard" class="no-js lt-ie9"> <![endif]-->
8
+ <!--[if gt IE 8]><!-->
9
+ <html lang="en" class="no-js">
10
+ <!--<![endif]-->
11
+ <head>
12
+ <meta charset="utf-8">
13
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
14
+ <title>Landing Page</title>
15
+ <meta name="description" content="">
16
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
17
+
18
+ <link rel="stylesheet" href="../smock.css"/>
19
+ </head>
20
+
21
+ <body am-grid>
22
+
23
+ <section class="classification">
24
+ <section class="style-group">
25
+ <h3>Text</h3>
26
+
27
+ <strong class="style-group__example__label">Avatar Caption</strong>
28
+ <div class="avatar-caption">
29
+ <p class="avatar-caption__main">Main Caption</p>
30
+ <p class="avatar-caption__secondary">Secondary Caption</p>
31
+ </div>
32
+
33
+ <br/>
34
+
35
+ <strong class="style-group__example__label">Large image heading</strong>
36
+ <p class="paragraph--bigger paragraph__large-avatar__heading"><a href="#">Professional Logo Design</a> for $150 by <a href="#">Brandbusters</a></p>
37
+ </section>
38
+
39
+ </section> <!-- end .classification -->
40
+ </body>
41
+ </html>
@@ -89,6 +89,41 @@
89
89
  </blockquote>
90
90
  </div>
91
91
  </section>
92
+
93
+
94
+ <section class="style-group">
95
+ <h3>Text</h3>
96
+
97
+ <strong class="style-group__example__label">Paragraphs with image aside</strong>
98
+ <article class="paragraph--with-aside">
99
+ <div class="paragraph__content--aside-sibling" am-grid-col="l:9">
100
+ <p class="paragraph--heading">How Brandbusters helped Keegan</p>
101
+ <p>"When designing logos we always look for simple geometric solutions,
102
+ in this case we started with a circle and then reduced it to form a 'C'
103
+ to match the company name 'Creat'd'. Since their name makes you think
104
+ of art and design, we initially tried designing the 'C' as a curved
105
+ pencil or brush. But wanted something a bit stronger. We found
106
+ inspiration in a color palette and settled on the design you see
107
+ now.</p>
108
+ <p>
109
+ This was first version and we liked it, so we uploaded it to see the
110
+ client's reaction. They were very impressed and accepted the work! This
111
+ job was fantastic as the client had a great name for their business and
112
+ they gave us a really good brief at the beginning. Jobs like this have
113
+ us thinking about leaving our full-time jobs so we can continue on
114
+ Envato Studio as successful freelance designers.</p>
115
+ </div>
116
+ <div class="paragraph__aside--content-sibling" am-grid-col="l:pre1 l:2">
117
+ <div class="avatar" am-grid-col="l:2:2">
118
+ <img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
119
+ </div>
120
+ <aside class="avatar-caption avatar-caption__2of12col-image">
121
+ <p class="avatar-caption__main">Brandbusters</p>
122
+ <p class="avatar-caption__secondary">Logo Designer</p>
123
+ </aside>
124
+ </div>
125
+ </article>
126
+ </section>
92
127
  </section> <!-- end .classification -->
93
128
  </body>
94
129
  </html>
@@ -0,0 +1,497 @@
1
+ <!DOCTYPE html>
2
+ <!--[if lt IE 7]> <html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3
+ <!--[if IE 7]> <html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8"> <![endif]-->
4
+ <!--[if IE 8]> <html lang="en" ng-app="moodBoard" class="no-js lt-ie9"> <![endif]-->
5
+ <!--[if gt IE 8]><!-->
6
+ <html lang="en" class="no-js">
7
+ <!--<![endif]-->
8
+ <head>
9
+ <meta charset="utf-8">
10
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
11
+ <title>Landing Page</title>
12
+ <meta name="description" content="">
13
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
14
+
15
+ <link rel="stylesheet" href="../../smock.css" />
16
+ <link rel="stylesheet" href="../../svg_images.css" />
17
+ </head>
18
+ <body am-grid>
19
+
20
+
21
+ <header class="header">
22
+ <div class="container">
23
+ <a class="header__logo svg__logo" href="https://studio-app.envato.com/smock/examples/">Envato Studio</a>
24
+
25
+ <nav class="header__categories">
26
+ <strong class="header__categories__label">Categories
27
+ <div class="header__categories__down-arrow hot-icon__arrow-down"></div>
28
+ </strong>
29
+ <ul class="header__categories__dropdown__top-level">
30
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="business-online-marketing">
31
+ <a class="header__categories__dropdown__top-level__link"
32
+ href="https://studio-app.envato.com/smock/examples/explore/business-online-marketing">Business &amp; Online Marketing</a>
33
+ <ul class="header__categories__dropdown__subcategories" id="business-online-marketing">
34
+ <li class="header__categories__dropdown__subcategories__category">
35
+ <a class="header__categories__dropdown__subcategories__category__link"
36
+ href="https://studio-app.envato.com/smock/examples/explore/social-media-design">Social Media Design</a>
37
+ </li>
38
+ <li class="header__categories__dropdown__subcategories__category">
39
+ <a class="header__categories__dropdown__subcategories__category__link"
40
+ href="https://studio-app.envato.com/smock/examples/explore/infographic-design">Infographic Design</a>
41
+ </li>
42
+ <li class="header__categories__dropdown__subcategories__category">
43
+ <a class="header__categories__dropdown__subcategories__category__link"
44
+ href="https://studio-app.envato.com/smock/examples/explore/web-banner-design">Web Banner Ad Design</a>
45
+ </li>
46
+ <li class="header__categories__dropdown__subcategories__category">
47
+ <a class="header__categories__dropdown__subcategories__category__link"
48
+ href="https://studio-app.envato.com/smock/examples/explore/presentation-design">Presentation Design</a>
49
+ </li>
50
+ <li class="header__categories__dropdown__subcategories__category">
51
+ <a class="header__categories__dropdown__subcategories__category__link"
52
+ href="https://studio-app.envato.com/smock/examples/explore/business-card-design">Business Card Design</a>
53
+ </li>
54
+ <li class="header__categories__dropdown__subcategories__category">
55
+ <a class="header__categories__dropdown__subcategories__category__link"
56
+ href="https://studio-app.envato.com/smock/examples/explore/stationery-design">Stationery Design</a>
57
+ </li>
58
+ </ul>
59
+ </li>
60
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="mobile-apps">
61
+ <a class="header__categories__dropdown__top-level__link" href="https://studio-app.envato.com/smock/examples/explore/mobile-apps">Mobile
62
+ &amp; Apps</a>
63
+ <ul class="header__categories__dropdown__subcategories" id="mobile-apps">
64
+ <li class="header__categories__dropdown__subcategories__category">
65
+ <a class="header__categories__dropdown__subcategories__category__link"
66
+ href="https://studio-app.envato.com/smock/examples/explore/app-design">App Design</a>
67
+ </li>
68
+ <li class="header__categories__dropdown__subcategories__category">
69
+ <a class="header__categories__dropdown__subcategories__category__link"
70
+ href="https://studio-app.envato.com/smock/examples/explore/app-development">App Development</a>
71
+ </li>
72
+ <li class="header__categories__dropdown__subcategories__category">
73
+ <a class="header__categories__dropdown__subcategories__category__link"
74
+ href="https://studio-app.envato.com/smock/examples/explore/mobile-design-development">Mobile Design &amp; Development</a>
75
+ </li>
76
+ </ul>
77
+ </li>
78
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="ecommerce-cms-development">
79
+ <a class="header__categories__dropdown__top-level__link"
80
+ href="https://studio-app.envato.com/smock/examples/explore/ecommerce-cms-development">Ecommerce &amp; CMS Development</a>
81
+ <ul class="header__categories__dropdown__subcategories" id="ecommerce-cms-development">
82
+ <li class="header__categories__dropdown__subcategories__category">
83
+ <a class="header__categories__dropdown__subcategories__category__link"
84
+ href="https://studio-app.envato.com/smock/examples/explore/drupal-development">Drupal</a>
85
+ </li>
86
+ <li class="header__categories__dropdown__subcategories__category">
87
+ <a class="header__categories__dropdown__subcategories__category__link"
88
+ href="https://studio-app.envato.com/smock/examples/explore/joomla-development">Joomla</a>
89
+ </li>
90
+ <li class="header__categories__dropdown__subcategories__category">
91
+ <a class="header__categories__dropdown__subcategories__category__link"
92
+ href="https://studio-app.envato.com/smock/examples/explore/online-shopping">Online Shopping</a>
93
+ </li>
94
+ <li class="header__categories__dropdown__subcategories__category">
95
+ <a class="header__categories__dropdown__subcategories__category__link"
96
+ href="https://studio-app.envato.com/smock/examples/explore/shopify-development">Shopify</a>
97
+ </li>
98
+ <li class="header__categories__dropdown__subcategories__category">
99
+ <a class="header__categories__dropdown__subcategories__category__link"
100
+ href="https://studio-app.envato.com/smock/examples/explore/magento-development">Magento</a>
101
+ </li>
102
+ <li class="header__categories__dropdown__subcategories__category">
103
+ <a class="header__categories__dropdown__subcategories__category__link"
104
+ href="https://studio-app.envato.com/smock/examples/explore/opencart-development">OpenCart</a>
105
+ </li>
106
+ <li class="header__categories__dropdown__subcategories__category">
107
+ <a class="header__categories__dropdown__subcategories__category__link"
108
+ href="https://studio-app.envato.com/smock/examples/explore/woocommerce">WooCommerce</a>
109
+ </li>
110
+ <li class="header__categories__dropdown__subcategories__category">
111
+ <a class="header__categories__dropdown__subcategories__category__link"
112
+ href="https://studio-app.envato.com/smock/examples/explore/cms-other">CMS Other</a>
113
+ </li>
114
+ </ul>
115
+ </li>
116
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="websites-programming">
117
+ <a class="header__categories__dropdown__top-level__link"
118
+ href="https://studio-app.envato.com/smock/examples/explore/websites-programming">Websites &amp; Programming</a>
119
+ <ul class="header__categories__dropdown__subcategories" id="websites-programming">
120
+ <li class="header__categories__dropdown__subcategories__category">
121
+ <a class="header__categories__dropdown__subcategories__category__link"
122
+ href="https://studio-app.envato.com/smock/examples/explore/new-website">New Website Design &amp; Development</a>
123
+ </li>
124
+ <li class="header__categories__dropdown__subcategories__category">
125
+ <a class="header__categories__dropdown__subcategories__category__link"
126
+ href="https://studio-app.envato.com/smock/examples/explore/landing-page-design-development">Landing Page Design &amp;
127
+ Development</a>
128
+ </li>
129
+ <li class="header__categories__dropdown__subcategories__category">
130
+ <a class="header__categories__dropdown__subcategories__category__link"
131
+ href="https://studio-app.envato.com/smock/examples/explore/web-components">Web Components</a>
132
+ </li>
133
+ <li class="header__categories__dropdown__subcategories__category">
134
+ <a class="header__categories__dropdown__subcategories__category__link"
135
+ href="https://studio-app.envato.com/smock/examples/explore/psd-to-html">PSD to HTML</a>
136
+ </li>
137
+ <li class="header__categories__dropdown__subcategories__category">
138
+ <a class="header__categories__dropdown__subcategories__category__link"
139
+ href="https://studio-app.envato.com/smock/examples/explore/email-design-development">Email Design &amp; Development</a>
140
+ </li>
141
+ <li class="header__categories__dropdown__subcategories__category">
142
+ <a class="header__categories__dropdown__subcategories__category__link"
143
+ href="https://studio-app.envato.com/smock/examples/explore/bug-fixes">Bug Fixes</a>
144
+ </li>
145
+ <li class="header__categories__dropdown__subcategories__category">
146
+ <a class="header__categories__dropdown__subcategories__category__link"
147
+ href="https://studio-app.envato.com/smock/examples/explore/website-customization">Website Customization &amp; Updates</a>
148
+ </li>
149
+ <li class="header__categories__dropdown__subcategories__category">
150
+ <a class="header__categories__dropdown__subcategories__category__link"
151
+ href="https://studio-app.envato.com/smock/examples/explore/php-development">PHP</a>
152
+ </li>
153
+ <li class="header__categories__dropdown__subcategories__category">
154
+ <a class="header__categories__dropdown__subcategories__category__link"
155
+ href="https://studio-app.envato.com/smock/examples/explore/server-admin">Server Admin</a>
156
+ </li>
157
+ </ul>
158
+ </li>
159
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="design-graphics">
160
+ <a class="header__categories__dropdown__top-level__link" href="https://studio-app.envato.com/smock/examples/explore/design-graphics">Design
161
+ &amp; Graphics</a>
162
+ <ul class="header__categories__dropdown__subcategories" id="design-graphics">
163
+ <li class="header__categories__dropdown__subcategories__category">
164
+ <a class="header__categories__dropdown__subcategories__category__link"
165
+ href="https://studio-app.envato.com/smock/examples/explore/3d-design-modeling">3D Design &amp; Modeling</a>
166
+ </li>
167
+ <li class="header__categories__dropdown__subcategories__category">
168
+ <a class="header__categories__dropdown__subcategories__category__link"
169
+ href="https://studio-app.envato.com/smock/examples/explore/photo-editing">Photo Editing</a>
170
+ </li>
171
+ <li class="header__categories__dropdown__subcategories__category">
172
+ <a class="header__categories__dropdown__subcategories__category__link"
173
+ href="https://studio-app.envato.com/smock/examples/explore/drawing-sketching">Drawing &amp; Sketching</a>
174
+ </li>
175
+ <li class="header__categories__dropdown__subcategories__category">
176
+ <a class="header__categories__dropdown__subcategories__category__link"
177
+ href="https://studio-app.envato.com/smock/examples/explore/vector-illustration">Vector Illustration</a>
178
+ </li>
179
+ <li class="header__categories__dropdown__subcategories__category">
180
+ <a class="header__categories__dropdown__subcategories__category__link"
181
+ href="https://studio-app.envato.com/smock/examples/explore/caricatures-cartoon-design">Caricatures &amp; Cartoon Design</a>
182
+ </li>
183
+ <li class="header__categories__dropdown__subcategories__category">
184
+ <a class="header__categories__dropdown__subcategories__category__link"
185
+ href="https://studio-app.envato.com/smock/examples/explore/digital-publishing">eBooks &amp; Digital Publishing</a>
186
+ </li>
187
+ <li class="header__categories__dropdown__subcategories__category">
188
+ <a class="header__categories__dropdown__subcategories__category__link"
189
+ href="https://studio-app.envato.com/smock/examples/explore/invitation-design">Invitation Design</a>
190
+ </li>
191
+ <li class="header__categories__dropdown__subcategories__category">
192
+ <a class="header__categories__dropdown__subcategories__category__link"
193
+ href="https://studio-app.envato.com/smock/examples/explore/t-shirt-apparel-design">T-Shirt &amp; Apparel Design</a>
194
+ </li>
195
+ <li class="header__categories__dropdown__subcategories__category">
196
+ <a class="header__categories__dropdown__subcategories__category__link"
197
+ href="https://studio-app.envato.com/smock/examples/explore/lettering-calligraphy">Lettering &amp; Calligraphy</a>
198
+ </li>
199
+ <li class="header__categories__dropdown__subcategories__category">
200
+ <a class="header__categories__dropdown__subcategories__category__link"
201
+ href="https://studio-app.envato.com/smock/examples/explore/icon-set-design">Icon Set Design</a>
202
+ </li>
203
+ <li class="header__categories__dropdown__subcategories__category">
204
+ <a class="header__categories__dropdown__subcategories__category__link"
205
+ href="https://studio-app.envato.com/smock/examples/explore/customize-graphics">Customize Graphics</a>
206
+ </li>
207
+ <li class="header__categories__dropdown__subcategories__category">
208
+ <a class="header__categories__dropdown__subcategories__category__link"
209
+ href="https://studio-app.envato.com/smock/examples/explore/app-icon-design">App Icon Design</a>
210
+ </li>
211
+ <li class="header__categories__dropdown__subcategories__category">
212
+ <a class="header__categories__dropdown__subcategories__category__link"
213
+ href="https://studio-app.envato.com/smock/examples/explore/poster-flyer-design">Poster &amp; Flyer Design</a>
214
+ </li>
215
+ <li class="header__categories__dropdown__subcategories__category">
216
+ <a class="header__categories__dropdown__subcategories__category__link"
217
+ href="https://studio-app.envato.com/smock/examples/explore/brochure-design">Brochure Design</a>
218
+ </li>
219
+ <li class="header__categories__dropdown__subcategories__category">
220
+ <a class="header__categories__dropdown__subcategories__category__link"
221
+ href="https://studio-app.envato.com/smock/examples/explore/design-graphics-other">Other</a>
222
+ </li>
223
+ </ul>
224
+ </li>
225
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="wordpress">
226
+ <a class="header__categories__dropdown__top-level__link" href="./explore_files/explore.html">WordPress</a>
227
+ <ul class="header__categories__dropdown__subcategories" id="wordpress">
228
+ <li class="header__categories__dropdown__subcategories__category">
229
+ <a class="header__categories__dropdown__subcategories__category__link"
230
+ href="https://studio-app.envato.com/smock/examples/explore/wordpress-installation">WordPress Installation</a>
231
+ </li>
232
+ <li class="header__categories__dropdown__subcategories__category">
233
+ <a class="header__categories__dropdown__subcategories__category__link"
234
+ href="https://studio-app.envato.com/smock/examples/explore/wordpress-plug-ins">WordPress Plug-ins</a>
235
+ </li>
236
+ <li class="header__categories__dropdown__subcategories__category">
237
+ <a class="header__categories__dropdown__subcategories__category__link"
238
+ href="https://studio-app.envato.com/smock/examples/explore/wordpress-customization">WordPress Customization</a>
239
+ </li>
240
+ <li class="header__categories__dropdown__subcategories__category">
241
+ <a class="header__categories__dropdown__subcategories__category__link"
242
+ href="https://studio-app.envato.com/smock/examples/explore/website-to-wordpress">Website to WordPress</a>
243
+ </li>
244
+ <li class="header__categories__dropdown__subcategories__category">
245
+ <a class="header__categories__dropdown__subcategories__category__link"
246
+ href="https://studio-app.envato.com/smock/examples/explore/psd-to-wordpress">PSD to WordPress</a>
247
+ </li>
248
+ </ul>
249
+ </li>
250
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="logo-design-branding">
251
+ <a class="header__categories__dropdown__top-level__link"
252
+ href="https://studio-app.envato.com/smock/examples/explore/logo-design-branding">Logo Design &amp; Branding</a>
253
+ <ul class="header__categories__dropdown__subcategories" id="logo-design-branding">
254
+ <li class="header__categories__dropdown__subcategories__category">
255
+ <a class="header__categories__dropdown__subcategories__category__link"
256
+ href="https://studio-app.envato.com/smock/examples/explore/logo-design">Logo Design</a>
257
+ </li>
258
+ <li class="header__categories__dropdown__subcategories__category">
259
+ <a class="header__categories__dropdown__subcategories__category__link"
260
+ href="https://studio-app.envato.com/smock/examples/explore/logo-customization">Logo Customization</a>
261
+ </li>
262
+ </ul>
263
+ </li>
264
+ <li class="header__categories__dropdown__top-level__category" data-submenu-id="video-animation">
265
+ <a class="header__categories__dropdown__top-level__link" href="https://studio-app.envato.com/smock/examples/explore/video-animation">Video
266
+ &amp; Animation</a>
267
+ <ul class="header__categories__dropdown__subcategories" id="video-animation">
268
+ <li class="header__categories__dropdown__subcategories__category">
269
+ <a class="header__categories__dropdown__subcategories__category__link"
270
+ href="https://studio-app.envato.com/smock/examples/explore/video">Video</a>
271
+ </li>
272
+ <li class="header__categories__dropdown__subcategories__category">
273
+ <a class="header__categories__dropdown__subcategories__category__link"
274
+ href="https://studio-app.envato.com/smock/examples/explore/animation">Animation</a>
275
+ </li>
276
+ </ul>
277
+ </li>
278
+ <li class="header__categories__dropdown__top-level__category--content">
279
+ <p>Can't find the exact service you're after? Most providers complete custom jobs. Just send them an enquiry.</p>
280
+ </li>
281
+ </ul>
282
+ </nav>
283
+
284
+ <div class="header__nav">
285
+ <a class="header__nav-link" href="https://studio-app.envato.com/smock/examples/start-selling/services/new">Create Service</a>
286
+ </div>
287
+
288
+ <div class="header__utilities">
289
+ <div class="header__search">
290
+ <form accept-charset="UTF-8" action="https://studio-app.envato.com/smock/examples/search" class="header__search__form has-validation"
291
+ id="new_search" method="get">
292
+ <div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
293
+ <label class="header__search__label" for="search_query">Search</label>
294
+ <button type="submit" class="header__search__button">
295
+ <i class="header__search__button__icon hot-icon__search-glass"></i>
296
+ </button>
297
+ <input autocomplete="off" class="header__search__body" id="search_query" name="search[query]" placeholder="Search"
298
+ type="text">
299
+ </form>
300
+ </div>
301
+
302
+ <div class="header__nav--user">
303
+ <div class="header__nav__profile">
304
+ <a class="header__nav__profile__link" href="https://studio-app.envato.com/smock/examples/users/test-user">test-user</a>
305
+
306
+ <div class="header__nav__arrow hot-icon__arrow-down"></div>
307
+
308
+ <div class="header__nav__dropdown--container">
309
+ <ul class="header__nav__dropdown">
310
+ <li class="header__nav__dropdown__item">
311
+ <a href="https://studio-app.envato.com/smock/examples/account/services">Your Services</a>
312
+ </li>
313
+ <li class="header__nav__dropdown__item">
314
+ <a href="https://studio-app.envato.com/smock/examples/account/jobs/providing">Your Jobs</a>
315
+ </li>
316
+ <li class="header__nav__dropdown__item">
317
+ <a href="https://studio-app.envato.com/smock/examples/account/profile/edit">Your Account</a>
318
+ </li>
319
+ <li class="header__nav__dropdown__item">
320
+ <a href="https://studio-app.envato.com/smock/examples/account/favorites">Your Favorites</a>
321
+ </li>
322
+ <li class="header__dropdown__seperator"></li>
323
+ <li class="header__nav__dropdown__item">
324
+ <a data-method="post" data-no-turbolink="true" href="https://sso.envato-staging.com/sign_out?to=studio"
325
+ rel="nofollow">Signout</a>
326
+ </li>
327
+ </ul>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </header>
334
+
335
+ <script async="" charset="utf-8" src="./explore_files/saved_resource" type="text/javascript"></script>
336
+ <script>
337
+ Studio.ready(function () {
338
+ new Studio.HeaderNavigation({el: '.header__categories'}).ready();
339
+ });
340
+ </script>
341
+
342
+
343
+ <script>
344
+ var noscript = document.getElementById('noscript');
345
+ if (noscript) {
346
+ noscript.parentNode.removeChild(noscript);
347
+ }
348
+ ;
349
+ </script>
350
+
351
+
352
+ <section class="hero image__hero--mobile-apps">
353
+ <div class="hero__container">
354
+ <div class="hero__headings">
355
+ <h2 class="hero__headings__main">Here's how we help</h2>
356
+ <h4 class="hero__headings__secondary">We connect you with expert designers and developers,<br />
357
+ who will take your idea and make it a reality.</h4>
358
+ </div>
359
+
360
+ <div class="hero__video-link">
361
+ <a href="https://studio-app.envato.com/smock/examples/explore/wordpress#fancy__category__video"
362
+ class="hero__heading__video-launcher">
363
+ <i class="hero__heading__video-launcher__play hot-icon__play"></i>
364
+ <span class="hero__heading__video-launcher__subtext">How it works</span>
365
+ </a>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <section class="l-container">
371
+ <h2 class="heading--mast">What our customers are saying</h2>
372
+
373
+ <section class="testimonials--inlined">
374
+ <blockquote class="testimonial testimonial--single" am-grid-col="l:6">
375
+ <div class="testimonial__image avatar" am-grid-col="l:1:6">
376
+ <img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
377
+ </div>
378
+ <div class="testimonial__content" am-grid-col="l:5:6">
379
+ <p class="testimonial__content__body">Maia was very patient
380
+ with all my questions and we problem-solved together. I would highly
381
+ recommend this service to anyone getting started.</p>
382
+ <cite>Sandra Hahn</cite>
383
+ </div>
384
+ </blockquote>
385
+
386
+ <blockquote class="testimonial testimonial--single" am-grid-col="l:6" am-grid-row="l:end">
387
+ <div class="testimonial__image avatar" am-grid-col="l:1:6">
388
+ <img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
389
+ </div>
390
+ <div class="testimonial__content" am-grid-col="l:5:6">
391
+ <p class="testimonial__content__body">Maia was very patient
392
+ with all my questions and we problem-solved together. I would highly
393
+ recommend this service to anyone getting started.</p>
394
+ <cite>Sandra Hahn</cite>
395
+ </div>
396
+ </blockquote>
397
+
398
+ <blockquote class="testimonial testimonial--single" am-grid-col="l:6">
399
+ <div class="testimonial__image avatar" am-grid-col="l:1:6">
400
+ <img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
401
+ </div>
402
+ <div class="testimonial__content" am-grid-col="l:5:6">
403
+ <p class="testimonial__content__body">Maia was very patient
404
+ with all my questions and we problem-solved together. I would highly
405
+ recommend this service to anyone getting started.</p>
406
+ <cite>Sandra Hahn</cite>
407
+ </div>
408
+ </blockquote>
409
+
410
+ <blockquote class="testimonial testimonial--single" am-grid-col="l:6" am-grid-row="l:end">
411
+ <div class="testimonial__image avatar" am-grid-col="l:1:6">
412
+ <img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
413
+ </div>
414
+ <div class="testimonial__content" am-grid-col="l:5:6">
415
+ <p class="testimonial__content__body">Maia was very patient
416
+ with all my questions and we problem-solved together. I would highly
417
+ recommend this service to anyone getting started.</p>
418
+ <cite>Sandra Hahn</cite>
419
+ </div>
420
+ </blockquote>
421
+ </section>
422
+
423
+ <article>
424
+ <h2 class="heading--mast">Helping Keegan start his new business</h2>
425
+ <article class="paragraph--with-aside">
426
+ <div class="paragraph__aside--content-sibling" am-grid-col="l:2">
427
+ <div class="avatar" am-grid-col="l:2:2">
428
+ <img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
429
+ </div>
430
+ <aside class="avatar-caption avatar-caption__2of12col-image">
431
+ <p class="avatar-caption__main">Keegan Baker</p>
432
+ <p class="avatar-caption__secondary">Entrepreneur</p>
433
+ </aside>
434
+ </div>
435
+ <div class="paragraph__content--aside-sibling" am-grid-col="l:9 l:pre1">
436
+ <p class="paragraph--heading">We needed a logo for a new tech startup</p>
437
+ <p>We’re a very small team, and with all our energy focused on building
438
+ the product I thought I’d give Envato Studio a shot, not having used it
439
+ before. Brandbusters were in the top few providers under the Logo Design
440
+ category and had plenty of great feedback. I had a flick through some of
441
+ their previous work and felt really comfortable that they would be able
442
+ to achieve the “feel” we were after.</p>
443
+ <p class="paragraph--no-margin">The simplicity of Envato Studio is unreal - it literally took me 2 or
444
+ 3 minutes to post the job up and a couple of days later we’d accepted the
445
+ final logo &amp; the whole process was wrapped up. We were really impressed
446
+ with the work. I gave Envato Studio a try because we were under the pump,
447
+ but I can easily see myself using it again in the future.</p>
448
+ </div>
449
+ </article>
450
+ <hr />
451
+ <article class="paragraph--with-aside">
452
+ <div class="paragraph__content--aside-sibling" am-grid-col="l:9">
453
+ <p class="paragraph--heading">How Brandbusters helped Keegan</p>
454
+ <p>"When designing logos we always look for simple geometric solutions,
455
+ in this case we started with a circle and then reduced it to form a 'C'
456
+ to match the company name 'Creat'd'. Since their name makes you think
457
+ of art and design, we initially tried designing the 'C' as a curved
458
+ pencil or brush. But wanted something a bit stronger. We found
459
+ inspiration in a color palette and settled on the design you see
460
+ now.</p>
461
+ <p>
462
+ This was first version and we liked it, so we uploaded it to see the
463
+ client's reaction. They were very impressed and accepted the work! This
464
+ job was fantastic as the client had a great name for their business and
465
+ they gave us a really good brief at the beginning. Jobs like this have
466
+ us thinking about leaving our full-time jobs so we can continue on
467
+ Envato Studio as successful freelance designers.</p>
468
+ </div>
469
+ <div class="paragraph__aside--content-sibling" am-grid-col="l:pre1 l:2">
470
+ <div class="avatar" am-grid-col="l:2:2">
471
+ <img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
472
+ </div>
473
+ <aside class="avatar-caption avatar-caption__2of12col-image">
474
+ <p class="avatar-caption__main">Brandbusters</p>
475
+ <p class="avatar-caption__secondary">Logo Designer</p>
476
+ </aside>
477
+ </div>
478
+ </article>
479
+
480
+ <article class="paragraph__large-image">
481
+ <p class="paragraph--bigger paragraph__large-image__heading"><a href="#">Professional Logo Design</a> for $150 by <a href="#">Brandbusters</a></p>
482
+ <img class="paragraph__large-image__image image--blocked" src="http://placehold.it/960x572" alt="Big Image placeholder" width="960" height="572" />
483
+ </article>
484
+ </article>
485
+
486
+ <a class="button button--large" am-grid-col="l:4 l:pre4" href="#">Logo Design Services</a>
487
+ </section>
488
+
489
+ <div class="container">
490
+ <footer class="sub-footer">
491
+ <p>Copyright &copy; 2014 Envato Studio. All Rights Reserved</p>
492
+ <a class="sub-footer__envato svg__envato-logo" href="http://envato.com">Envato</a>
493
+ </footer>
494
+ </div>
495
+
496
+ </body>
497
+ </html>
data/index.html CHANGED
@@ -8,6 +8,7 @@
8
8
  <div class="nav">
9
9
  <ul class="nav__list">
10
10
  <li class="nav__list__item"><a href="examples/atoms.html" target="style_frame">Atoms</a></li>
11
+ <li class="nav__list__item"><a href="examples/molecules.html" target="style_frame">Molecules</a></li>
11
12
  <li class="nav__list__item"><a href="examples/organisims.html" target="style_frame">Organisims</a></li>
12
13
  <li class="nav__list__item">
13
14
  Pages
@@ -15,6 +16,7 @@
15
16
  <li class="nav__list__item__dropdown__item"><a href="examples/pages/affiliates.html" target="style_frame">Affiliates</a></li>
16
17
  <li class="nav__list__item__dropdown__item"><a href="examples/pages/blackbox.html" target="style_frame">Blackbox</a></li>
17
18
  <li class="nav__list__item__dropdown__item"><a href="examples/pages/explore.html" target="style_frame">Explore</a></li>
19
+ <li class="nav__list__item__dropdown__item"><a href="examples/pages/testimonials.html" target="style_frame">Testimonials</a></li>
18
20
  </ul>
19
21
  </li>
20
22
  </ul>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: smock
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.65
4
+ version: 0.1.66
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -130,6 +130,7 @@ files:
130
130
  - app/assets/stylesheets/includes/_images.sass
131
131
  - app/assets/stylesheets/includes/_layouts.sass
132
132
  - app/assets/stylesheets/includes/_mixins.sass
133
+ - app/assets/stylesheets/includes/_molecules.sass
133
134
  - app/assets/stylesheets/includes/_svg_images.sass
134
135
  - app/assets/stylesheets/includes/_typography.sass
135
136
  - app/assets/stylesheets/includes/_typography_settings.sass
@@ -245,6 +246,7 @@ files:
245
246
  - app/assets/stylesheets/thirdparty/video-js.scss
246
247
  - bin/smock
247
248
  - examples/atoms.html
249
+ - examples/molecules.html
248
250
  - examples/organisims.html
249
251
  - examples/pages/affiliates.html
250
252
  - examples/pages/affiliates_files/themeforest-cf59c988c1d2bf085124a3b145d6426b.png
@@ -331,6 +333,7 @@ files:
331
333
  - examples/pages/explore_files/thumbnail_wordpress-1385019095.png
332
334
  - examples/pages/explore_files/thumbnail_x-1379162338.jpg
333
335
  - examples/pages/explore_files/tuts-plus-bd0affcfa95d86912384b5d39e923119.jpg
336
+ - examples/pages/testimonials.html
334
337
  - guide.sass
335
338
  - index.html
336
339
  - lib/smock.rb
@@ -357,7 +360,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
357
360
  version: '0'
358
361
  segments:
359
362
  - 0
360
- hash: 2689253262778552154
363
+ hash: 1375674154028886855
361
364
  required_rubygems_version: !ruby/object:Gem::Requirement
362
365
  none: false
363
366
  requirements:
@@ -366,7 +369,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
366
369
  version: '0'
367
370
  segments:
368
371
  - 0
369
- hash: 2689253262778552154
372
+ hash: 1375674154028886855
370
373
  requirements: []
371
374
  rubyforge_project: smock
372
375
  rubygems_version: 1.8.21