writers-zone 0.1.4 → 0.1.5

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,44 +1,45 @@
1
- // Define defaults for each variable.
2
-
3
- $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
4
- $base-font-size: 16px !default;
5
- $base-font-weight: 400 !default;
6
- $small-font-size: $base-font-size * 0.875 !default;
7
- $base-line-height: 1.5 !default;
8
-
9
- $spacing-unit: 30px !default;
10
-
11
- $text-color: #111 !default;
12
- $background-color: #fdfdfd !default;
13
- $brand-color: #2a7ae2 !default;
14
-
15
- $grey-color: #828282 !default;
16
- $grey-color-light: lighten($grey-color, 40%) !default;
17
- $grey-color-dark: darken($grey-color, 25%) !default;
18
-
19
- // Width of the content area
20
- $content-width: 800px !default;
21
-
22
- $on-palm: 600px !default;
23
- $on-laptop: 800px !default;
24
-
25
- // Use media queries like this:
26
- // @include media-query($on-palm) {
27
- // .wrapper {
28
- // padding-right: $spacing-unit / 2;
29
- // padding-left: $spacing-unit / 2;
30
- // }
31
- // }
32
- @mixin media-query($device) {
33
- @media screen and (max-width: $device) {
34
- @content;
35
- }
36
- }
37
-
38
- // Import partials.
39
- @import
40
- "writers-zone/base",
41
- "writers-zone/layout",
42
- "writers-zone/plugins",
43
- "writers-zone/syntax-highlighting"
44
- ;
1
+ @charset 'UTF-8';
2
+
3
+ // 1. Configuration and helpers
4
+ @import
5
+ 'abstracts/variables',
6
+ 'abstracts/functions',
7
+ 'abstracts/mixins';
8
+
9
+ // 2. Vendors
10
+ @import
11
+ 'vendor/normalize';
12
+
13
+ // 3. Base stuff
14
+ @import
15
+ 'base/base',
16
+ 'base/fonts',
17
+ 'base/typography',
18
+ 'base/helpers';
19
+
20
+ // 4. Layout-related sections
21
+ @import
22
+ 'layout/sticky-footer',
23
+ 'layout/header',
24
+ 'layout/footer',
25
+ 'layout/pagination',
26
+ 'layout/search';
27
+
28
+ // 5. Components
29
+ @import
30
+ 'components/icons',
31
+ 'components/button';
32
+
33
+ // 6. Page-specific styles
34
+ @import
35
+ 'pages/home',
36
+ 'pages/pages',
37
+ 'pages/posts';
38
+
39
+ // 7. Themes
40
+ @import
41
+ 'themes/default';
42
+
43
+ // 2-a. Vendors
44
+ @import
45
+ 'vendor/syntax-highlighting';
data/demo/css/main.scss CHANGED
@@ -3,5 +3,14 @@
3
3
  ---
4
4
  @charset "utf-8";
5
5
 
6
+ // Theme
7
+ $text-color: #111;
8
+ $background-color: #fdfdfd;
9
+ $brand-color: #2a7ae2;
10
+
11
+ $grey-color: #828282;
12
+ $grey-color-light: lighten($grey-color, 40%);
13
+ $grey-color-dark: darken($grey-color, 25%);
14
+
6
15
  // Import partials
7
16
  @import "writers-zone";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: writers-zone
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.4
4
+ version: 0.1.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - StartZeroGnu
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-10-05 00:00:00.000000000 Z
11
+ date: 2016-10-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rake
@@ -306,11 +306,27 @@ files:
306
306
  - _layouts/page.html
307
307
  - _layouts/post.html
308
308
  - _layouts/search.html
309
+ - _sass/abstracts/_functions.scss
310
+ - _sass/abstracts/_mixins.scss
311
+ - _sass/abstracts/_variables.scss
312
+ - _sass/base/_base.scss
313
+ - _sass/base/_fonts.scss
314
+ - _sass/base/_helpers.scss
315
+ - _sass/base/_typography.scss
316
+ - _sass/components/_button.scss
317
+ - _sass/components/_icons.scss
318
+ - _sass/layout/_footer.scss
319
+ - _sass/layout/_header.scss
320
+ - _sass/layout/_pagination.scss
321
+ - _sass/layout/_search.scss
322
+ - _sass/layout/_sticky-footer.scss
323
+ - _sass/pages/_home.scss
324
+ - _sass/pages/_pages.scss
325
+ - _sass/pages/_posts.scss
326
+ - _sass/themes/_default.scss
327
+ - _sass/vendor/_normalize.scss
328
+ - _sass/vendor/_syntax-highlighting.scss
309
329
  - _sass/writers-zone.scss
310
- - _sass/writers-zone/_base.scss
311
- - _sass/writers-zone/_layout.scss
312
- - _sass/writers-zone/_plugins.scss
313
- - _sass/writers-zone/_syntax-highlighting.scss
314
330
  - demo/Gemfile
315
331
  - demo/_config.yml
316
332
  - demo/_posts/2016-05-20-my-example-post.md
@@ -1,206 +0,0 @@
1
- /**
2
- * Reset some basic elements
3
- */
4
- body, h1, h2, h3, h4, h5, h6,
5
- p, blockquote, pre, hr,
6
- dl, dd, ol, ul, figure {
7
- margin: 0;
8
- padding: 0;
9
- }
10
-
11
-
12
-
13
- /**
14
- * Basic styling
15
- */
16
- body {
17
- font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
18
- color: $text-color;
19
- background-color: $background-color;
20
- -webkit-text-size-adjust: 100%;
21
- -webkit-font-feature-settings: "kern" 1;
22
- -moz-font-feature-settings: "kern" 1;
23
- -o-font-feature-settings: "kern" 1;
24
- font-feature-settings: "kern" 1;
25
- font-kerning: normal;
26
- }
27
-
28
-
29
-
30
- /**
31
- * Set `margin-bottom` to maintain vertical rhythm
32
- */
33
- h1, h2, h3, h4, h5, h6,
34
- p, blockquote, pre,
35
- ul, ol, dl, figure,
36
- %vertical-rhythm {
37
- margin-bottom: $spacing-unit / 2;
38
- }
39
-
40
-
41
-
42
- /**
43
- * Images
44
- */
45
- img {
46
- max-width: 100%;
47
- vertical-align: middle;
48
- }
49
-
50
-
51
-
52
- /**
53
- * Figures
54
- */
55
- figure > img {
56
- display: block;
57
- }
58
-
59
- figcaption {
60
- font-size: $small-font-size;
61
- }
62
-
63
-
64
-
65
- /**
66
- * Lists
67
- */
68
- ul, ol {
69
- margin-left: $spacing-unit;
70
- }
71
-
72
- li {
73
- > ul,
74
- > ol {
75
- margin-bottom: 0;
76
- }
77
- }
78
-
79
-
80
-
81
- /**
82
- * Headings
83
- */
84
- h1, h2, h3, h4, h5, h6 {
85
- font-weight: $base-font-weight;
86
- }
87
-
88
-
89
-
90
- /**
91
- * Links
92
- */
93
- a {
94
- color: $brand-color;
95
- text-decoration: none;
96
-
97
- &:visited {
98
- color: darken($brand-color, 15%);
99
- }
100
-
101
- &:hover {
102
- color: $text-color;
103
- text-decoration: underline;
104
- }
105
- }
106
-
107
-
108
-
109
- /**
110
- * Blockquotes
111
- */
112
- blockquote {
113
- color: $grey-color;
114
- border-left: 4px solid $grey-color-light;
115
- padding-left: $spacing-unit / 2;
116
- font-size: 18px;
117
- letter-spacing: -1px;
118
- font-style: italic;
119
-
120
- > :last-child {
121
- margin-bottom: 0;
122
- }
123
- }
124
-
125
-
126
-
127
- /**
128
- * Code formatting
129
- */
130
- pre,
131
- code {
132
- font-size: 15px;
133
- border: 1px solid $grey-color-light;
134
- border-radius: 3px;
135
- background-color: #eef;
136
- }
137
-
138
- code {
139
- padding: 1px 5px;
140
- }
141
-
142
- pre {
143
- padding: 8px 12px;
144
- overflow-x: auto;
145
-
146
- > code {
147
- border: 0;
148
- padding-right: 0;
149
- padding-left: 0;
150
- }
151
- }
152
-
153
-
154
-
155
- /**
156
- * Wrapper
157
- */
158
- .wrapper {
159
- max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
160
- max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
161
- margin-right: auto;
162
- margin-left: auto;
163
- padding-right: $spacing-unit;
164
- padding-left: $spacing-unit;
165
- @extend %clearfix;
166
-
167
- @include media-query($on-laptop) {
168
- max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
169
- max-width: calc(#{$content-width} - (#{$spacing-unit}));
170
- padding-right: $spacing-unit / 2;
171
- padding-left: $spacing-unit / 2;
172
- }
173
- }
174
-
175
-
176
-
177
- /**
178
- * Clearfix
179
- */
180
- %clearfix:after {
181
- content: "";
182
- display: table;
183
- clear: both;
184
- }
185
-
186
-
187
-
188
- /**
189
- * Icons
190
- */
191
- .icon > svg {
192
- display: inline-block;
193
- vertical-align: text-bottom;
194
-
195
- path {
196
- fill: $grey-color;
197
- }
198
- }
199
-
200
- .text-top > svg { vertical-align: text-top; }
201
-
202
- .c-color > svg {
203
-
204
- path { fill: currentColor; }
205
-
206
- }
@@ -1,237 +0,0 @@
1
- /**
2
- * Site header
3
- */
4
- .site-header {
5
- border-top: 5px solid $grey-color-dark;
6
- border-bottom: 1px solid $grey-color-light;
7
- min-height: 56px;
8
-
9
- // Positioning context for the mobile navigation icon
10
- position: relative;
11
- }
12
-
13
- .site-title {
14
- font-size: 26px;
15
- font-weight: 300;
16
- line-height: 56px;
17
- letter-spacing: -1px;
18
- margin-bottom: 0;
19
- float: left;
20
-
21
- &,
22
- &:visited {
23
- color: $grey-color-dark;
24
- }
25
- }
26
-
27
- .site-nav {
28
- float: right;
29
- line-height: 56px;
30
-
31
- .menu-icon {
32
- display: none;
33
- }
34
-
35
- .page-link {
36
- color: $text-color;
37
- line-height: $base-line-height;
38
-
39
- // Gaps between nav items, but not on the last one
40
- &:not(:last-child) {
41
- margin-right: 20px;
42
- }
43
- }
44
-
45
- @include media-query($on-palm) {
46
- position: absolute;
47
- top: 9px;
48
- right: $spacing-unit / 2;
49
- background-color: $background-color;
50
- border: 1px solid $grey-color-light;
51
- border-radius: 5px;
52
- text-align: right;
53
-
54
- .menu-icon {
55
- display: block;
56
- float: right;
57
- width: 36px;
58
- height: 26px;
59
- line-height: 0;
60
- padding-top: 10px;
61
- text-align: center;
62
-
63
- > svg path {
64
- fill: $grey-color-dark;
65
- }
66
- }
67
-
68
- .trigger {
69
- clear: both;
70
- display: none;
71
- }
72
-
73
- &:hover .trigger {
74
- display: block;
75
- padding-bottom: 5px;
76
- }
77
-
78
- .page-link {
79
- display: block;
80
- padding: 5px 10px;
81
-
82
- &:not(:last-child) {
83
- margin-right: 0;
84
- }
85
- margin-left: 20px;
86
- }
87
- }
88
- }
89
-
90
-
91
-
92
- /**
93
- * Site footer
94
- */
95
- .site-footer {
96
- border-top: 1px solid $grey-color-light;
97
- padding: $spacing-unit 0;
98
- }
99
-
100
- .footer-heading {
101
- font-size: 18px;
102
- margin-bottom: $spacing-unit / 2;
103
- }
104
-
105
- .contact-list,
106
- .social-media-list {
107
- list-style: none;
108
- margin-left: 0;
109
- }
110
-
111
- .footer-col-wrapper {
112
- font-size: 15px;
113
- color: $grey-color;
114
- margin-left: -$spacing-unit / 2;
115
- @extend %clearfix;
116
- }
117
-
118
- .footer-col {
119
- float: left;
120
- margin-bottom: $spacing-unit / 2;
121
- padding-left: $spacing-unit / 2;
122
- }
123
-
124
- .footer-col-1 {
125
- width: -webkit-calc(35% - (#{$spacing-unit} / 2));
126
- width: calc(35% - (#{$spacing-unit} / 2));
127
- }
128
-
129
- .footer-col-2 {
130
- width: -webkit-calc(20% - (#{$spacing-unit} / 2));
131
- width: calc(20% - (#{$spacing-unit} / 2));
132
- }
133
-
134
- .footer-col-3 {
135
- width: -webkit-calc(45% - (#{$spacing-unit} / 2));
136
- width: calc(45% - (#{$spacing-unit} / 2));
137
- }
138
-
139
- @include media-query($on-laptop) {
140
- .footer-col-1,
141
- .footer-col-2 {
142
- width: -webkit-calc(50% - (#{$spacing-unit} / 2));
143
- width: calc(50% - (#{$spacing-unit} / 2));
144
- }
145
-
146
- .footer-col-3 {
147
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
148
- width: calc(100% - (#{$spacing-unit} / 2));
149
- }
150
- }
151
-
152
- @include media-query($on-palm) {
153
- .footer-col {
154
- float: none;
155
- width: -webkit-calc(100% - (#{$spacing-unit} / 2));
156
- width: calc(100% - (#{$spacing-unit} / 2));
157
- }
158
- }
159
-
160
-
161
-
162
- /**
163
- * Page content
164
- */
165
- .page-content {
166
- padding: $spacing-unit 0;
167
- }
168
-
169
- .page-heading {
170
- font-size: 20px;
171
- }
172
-
173
- .post-list {
174
- margin-left: 0;
175
- list-style: none;
176
-
177
- > li {
178
- margin-bottom: $spacing-unit;
179
- }
180
- }
181
-
182
- .post-meta {
183
- font-size: $small-font-size;
184
- color: $grey-color;
185
- }
186
-
187
- .post-link {
188
- display: block;
189
- font-size: 24px;
190
- }
191
-
192
-
193
-
194
- /**
195
- * Posts
196
- */
197
- .post-header {
198
- margin-bottom: $spacing-unit;
199
- }
200
-
201
- .post-title {
202
- font-size: 42px;
203
- letter-spacing: -1px;
204
- line-height: 1;
205
-
206
- @include media-query($on-laptop) {
207
- font-size: 36px;
208
- }
209
- }
210
-
211
- .post-content {
212
- margin-bottom: $spacing-unit;
213
-
214
- h2 {
215
- font-size: 32px;
216
-
217
- @include media-query($on-laptop) {
218
- font-size: 28px;
219
- }
220
- }
221
-
222
- h3 {
223
- font-size: 26px;
224
-
225
- @include media-query($on-laptop) {
226
- font-size: 22px;
227
- }
228
- }
229
-
230
- h4 {
231
- font-size: 20px;
232
-
233
- @include media-query($on-laptop) {
234
- font-size: 18px;
235
- }
236
- }
237
- }