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.
- checksums.yaml +4 -4
- data/README.md +12 -0
- data/_includes/footer.html +13 -10
- data/_includes/head.html +2 -1
- data/_includes/header.html +30 -26
- data/_includes/icons/svg/github.svg +1 -1
- data/_includes/icons/svg/twitter.svg +1 -1
- data/_layouts/default.html +11 -9
- data/_layouts/search.html +1 -1
- data/_sass/abstracts/_functions.scss +3 -0
- data/_sass/abstracts/_mixins.scss +46 -0
- data/_sass/abstracts/_variables.scss +28 -0
- data/_sass/base/_base.scss +146 -0
- data/_sass/base/_fonts.scss +3 -0
- data/_sass/base/_helpers.scss +79 -0
- data/_sass/base/_typography.scss +53 -0
- data/_sass/components/_button.scss +3 -0
- data/_sass/components/_icons.scss +19 -0
- data/_sass/layout/_footer.scss +95 -0
- data/_sass/layout/_header.scss +159 -0
- data/_sass/{writers-zone/_plugins.scss → layout/_pagination.scss} +10 -43
- data/_sass/layout/_search.scss +42 -0
- data/_sass/layout/_sticky-footer.scss +39 -0
- data/_sass/pages/_home.scss +3 -0
- data/_sass/pages/_pages.scss +35 -0
- data/_sass/pages/_posts.scss +50 -0
- data/_sass/themes/_default.scss +4 -0
- data/_sass/vendor/_normalize.scss +460 -0
- data/_sass/{writers-zone → vendor}/_syntax-highlighting.scss +0 -0
- data/_sass/writers-zone.scss +45 -44
- data/demo/css/main.scss +9 -0
- metadata +22 -6
- data/_sass/writers-zone/_base.scss +0 -206
- data/_sass/writers-zone/_layout.scss +0 -237
@@ -0,0 +1,79 @@
|
|
1
|
+
// -----------------------------------------------------------------------------
|
2
|
+
// This file contains CSS helper classes.
|
3
|
+
// -----------------------------------------------------------------------------
|
4
|
+
|
5
|
+
/**
|
6
|
+
* Wrapper
|
7
|
+
*/
|
8
|
+
.wrapper {
|
9
|
+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
|
10
|
+
max-width: calc(#{$content-width} - (#{$spacing-unit}));
|
11
|
+
margin-right: auto;
|
12
|
+
margin-left: auto;
|
13
|
+
padding-right: $spacing-unit / 2;
|
14
|
+
padding-left: $spacing-unit / 2;
|
15
|
+
|
16
|
+
@include media-query($on-laptop) {
|
17
|
+
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
|
18
|
+
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
19
|
+
padding-right: $spacing-unit;
|
20
|
+
padding-left: $spacing-unit;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
/**
|
27
|
+
* Clearfix
|
28
|
+
*/
|
29
|
+
// %clearfix:after {
|
30
|
+
// content: "";
|
31
|
+
// display: table;
|
32
|
+
// clear: both;
|
33
|
+
// }
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
/**
|
38
|
+
* Main content containers
|
39
|
+
* 1. Make the container full-width with a maximum width
|
40
|
+
* 2. Center it in the viewport
|
41
|
+
* 3. Leave some space on the edges, especially valuable on small screens
|
42
|
+
*/
|
43
|
+
.container {
|
44
|
+
//max-width: $max-width; /* 1 */
|
45
|
+
max-width: $content-width; /* 1 */
|
46
|
+
margin-left: auto; /* 2 */
|
47
|
+
margin-right: auto; /* 2 */
|
48
|
+
padding-left: 20px; /* 3 */
|
49
|
+
padding-right: 20px; /* 3 */
|
50
|
+
width: 100%; /* 1 */
|
51
|
+
}
|
52
|
+
|
53
|
+
/**
|
54
|
+
* Hide text while making it readable for screen readers
|
55
|
+
* 1. Needed in WebKit-based browsers because of an implementation bug;
|
56
|
+
* See: https://code.google.com/p/chromium/issues/detail?id=457146
|
57
|
+
*/
|
58
|
+
.hide-text {
|
59
|
+
overflow: hidden;
|
60
|
+
padding: 0; /* 1 */
|
61
|
+
text-indent: 101%;
|
62
|
+
white-space: nowrap;
|
63
|
+
}
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Hide element while making it readable for screen readers
|
67
|
+
* Shamelessly borrowed from HTML5Boilerplate:
|
68
|
+
* https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
|
69
|
+
*/
|
70
|
+
.visually-hidden {
|
71
|
+
border: 0;
|
72
|
+
clip: rect(0 0 0 0);
|
73
|
+
height: 1px;
|
74
|
+
margin: -1px;
|
75
|
+
overflow: hidden;
|
76
|
+
padding: 0;
|
77
|
+
position: absolute;
|
78
|
+
width: 1px;
|
79
|
+
}
|
@@ -0,0 +1,53 @@
|
|
1
|
+
/**
|
2
|
+
* Basic typography style for copy text
|
3
|
+
*/
|
4
|
+
|
5
|
+
body {
|
6
|
+
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
|
7
|
+
color: $text-color;
|
8
|
+
-webkit-text-size-adjust: 100%;
|
9
|
+
-webkit-font-feature-settings: "kern" 1;
|
10
|
+
-moz-font-feature-settings: "kern" 1;
|
11
|
+
-o-font-feature-settings: "kern" 1;
|
12
|
+
font-feature-settings: "kern" 1;
|
13
|
+
font-kerning: normal;
|
14
|
+
}
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Figcaption
|
20
|
+
*/
|
21
|
+
figcaption {
|
22
|
+
font-size: $small-font-size;
|
23
|
+
}
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
/**
|
28
|
+
* Headings
|
29
|
+
*/
|
30
|
+
h1, h2, h3, h4, h5, h6 {
|
31
|
+
font-weight: $base-font-weight;
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
/**
|
36
|
+
* Blockquotes
|
37
|
+
*/
|
38
|
+
blockquote {
|
39
|
+
color: $grey-color;
|
40
|
+
font-size: 18px;
|
41
|
+
letter-spacing: -1px;
|
42
|
+
font-style: italic;
|
43
|
+
}
|
44
|
+
|
45
|
+
|
46
|
+
|
47
|
+
/**
|
48
|
+
* Code formatting
|
49
|
+
*/
|
50
|
+
pre,
|
51
|
+
code {
|
52
|
+
font-size: 15px;
|
53
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/**
|
2
|
+
* Icons
|
3
|
+
*/
|
4
|
+
.icon > svg {
|
5
|
+
display: inline-block;
|
6
|
+
vertical-align: text-bottom;
|
7
|
+
|
8
|
+
path {
|
9
|
+
fill: $grey-color;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
.text-top > svg { vertical-align: text-top; }
|
14
|
+
|
15
|
+
.c-color > svg {
|
16
|
+
|
17
|
+
path { fill: currentColor; }
|
18
|
+
|
19
|
+
}
|
@@ -0,0 +1,95 @@
|
|
1
|
+
// -----------------------------------------------------------------------------
|
2
|
+
// This file contains all styles related to the footer of the site/application.
|
3
|
+
// -----------------------------------------------------------------------------
|
4
|
+
|
5
|
+
/**
|
6
|
+
* Site footer
|
7
|
+
*/
|
8
|
+
.site-footer {
|
9
|
+
|
10
|
+
border-top: 1px solid $grey-color-light;
|
11
|
+
padding: $spacing-unit 0;
|
12
|
+
|
13
|
+
}
|
14
|
+
|
15
|
+
.footer-heading {
|
16
|
+
|
17
|
+
font-size: 18px;
|
18
|
+
|
19
|
+
}
|
20
|
+
|
21
|
+
.footer-section {
|
22
|
+
|
23
|
+
font-size: 15px;
|
24
|
+
color: $grey-color;
|
25
|
+
|
26
|
+
}
|
27
|
+
|
28
|
+
.contact-list,
|
29
|
+
.social-media-list,
|
30
|
+
.footer-description {
|
31
|
+
|
32
|
+
list-style: none;
|
33
|
+
margin-left: 0;
|
34
|
+
|
35
|
+
}
|
36
|
+
|
37
|
+
@include media-query($on-palm) {
|
38
|
+
|
39
|
+
.footer-nav {
|
40
|
+
|
41
|
+
// compatibility with all browsers (desktop/mobile) less
|
42
|
+
// - IE < 10
|
43
|
+
// - Opera (desktop/mobile) < 12.1
|
44
|
+
// more datails: http://caniuse.com/#feat=flexbox
|
45
|
+
|
46
|
+
display: -webkit-box;
|
47
|
+
display: -moz-box;
|
48
|
+
display: -ms-flexbox;
|
49
|
+
display: -webkit-flex;
|
50
|
+
display: flex;
|
51
|
+
|
52
|
+
}
|
53
|
+
|
54
|
+
.contact-list,
|
55
|
+
.social-media-list {
|
56
|
+
|
57
|
+
|
58
|
+
-webkit-box-flex: 1;
|
59
|
+
-moz-box-flex: 1;
|
60
|
+
-webkit-flex: 1 1 50%;
|
61
|
+
-ms-flex: 1 1 50%;
|
62
|
+
flex: 1 1 50%;
|
63
|
+
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@include media-query($on-laptop) {
|
68
|
+
|
69
|
+
.footer-section {
|
70
|
+
|
71
|
+
// compatibility with all browsers (desktop/mobile) less
|
72
|
+
// - IE < 10
|
73
|
+
// - Opera (desktop/mobile) < 12.1
|
74
|
+
// more datails: http://caniuse.com/#feat=flexbox
|
75
|
+
|
76
|
+
display: -webkit-box;
|
77
|
+
display: -moz-box;
|
78
|
+
display: -ms-flexbox;
|
79
|
+
display: -webkit-flex;
|
80
|
+
display: flex;
|
81
|
+
|
82
|
+
}
|
83
|
+
|
84
|
+
.footer-description,
|
85
|
+
.footer-nav {
|
86
|
+
|
87
|
+
|
88
|
+
-webkit-box-flex: 1;
|
89
|
+
-moz-box-flex: 1;
|
90
|
+
-webkit-flex: 1 1 50%;
|
91
|
+
-ms-flex: 1 1 50%;
|
92
|
+
flex: 1 1 50%;
|
93
|
+
|
94
|
+
}
|
95
|
+
}
|
@@ -0,0 +1,159 @@
|
|
1
|
+
// -----------------------------------------------------------------------------
|
2
|
+
// This file contains all styles related to the header of the site/application.
|
3
|
+
// -----------------------------------------------------------------------------
|
4
|
+
|
5
|
+
/**
|
6
|
+
* Site header
|
7
|
+
*/
|
8
|
+
.site-header {
|
9
|
+
|
10
|
+
border-top: 5px solid $grey-color-dark;
|
11
|
+
border-bottom: 1px solid $grey-color-light;
|
12
|
+
box-sizing: content-box;
|
13
|
+
padding: 0.50rem 0;
|
14
|
+
|
15
|
+
}
|
16
|
+
|
17
|
+
.header-layout {
|
18
|
+
|
19
|
+
// compatibility with all browsers (desktop/mobile) less
|
20
|
+
// - IE < 10
|
21
|
+
// - Opera (desktop/mobile) < 12.1
|
22
|
+
// more datails: http://caniuse.com/#feat=flexbox
|
23
|
+
|
24
|
+
display: -webkit-box;
|
25
|
+
display: -moz-box;
|
26
|
+
display: -ms-flexbox;
|
27
|
+
display: -webkit-flex;
|
28
|
+
display: flex;
|
29
|
+
|
30
|
+
-webkit-box-pack: justify;
|
31
|
+
-moz-box-pack: justify;
|
32
|
+
-webkit-justify-content: space-between;
|
33
|
+
-ms-flex-pack: justify;
|
34
|
+
justify-content: space-between;
|
35
|
+
|
36
|
+
-webkit-box-align: center;
|
37
|
+
-moz-box-align: center;
|
38
|
+
-webkit-align-items: center;
|
39
|
+
-ms-flex-align: center;
|
40
|
+
align-items: center;
|
41
|
+
|
42
|
+
@include media-query($on-laptop) {
|
43
|
+
|
44
|
+
margin-right: $spacing-unit;
|
45
|
+
margin-left: $spacing-unit;
|
46
|
+
|
47
|
+
}
|
48
|
+
|
49
|
+
}
|
50
|
+
|
51
|
+
.site-title {
|
52
|
+
|
53
|
+
font-size: 26px;
|
54
|
+
font-weight: 300;
|
55
|
+
|
56
|
+
&,
|
57
|
+
&:visited {
|
58
|
+
|
59
|
+
color: $grey-color-dark;
|
60
|
+
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
.burguer {
|
65
|
+
|
66
|
+
border: 1px solid $grey-color-dark;
|
67
|
+
border-radius: 0.25rem;
|
68
|
+
padding: $spacing-unit / 4;
|
69
|
+
|
70
|
+
@include media-query($on-palm) {
|
71
|
+
|
72
|
+
display: none;
|
73
|
+
|
74
|
+
}
|
75
|
+
|
76
|
+
> svg {
|
77
|
+
|
78
|
+
vertical-align: text-top;
|
79
|
+
|
80
|
+
path {
|
81
|
+
|
82
|
+
fill: $grey-color-dark;
|
83
|
+
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
.site-menu {
|
89
|
+
|
90
|
+
background: $background-color;
|
91
|
+
list-style: none;
|
92
|
+
margin-left: 0;
|
93
|
+
position: absolute;
|
94
|
+
left: -50%;
|
95
|
+
top: 3.8rem;
|
96
|
+
transition: 0.5s;
|
97
|
+
|
98
|
+
@include media-query($on-palm) {
|
99
|
+
|
100
|
+
position: inherit;
|
101
|
+
margin-bottom: 0;
|
102
|
+
transition: none;
|
103
|
+
|
104
|
+
// compatibility with all browsers (desktop/mobile) less
|
105
|
+
// - IE < 10
|
106
|
+
// - Opera (desktop/mobile) < 12.1
|
107
|
+
// more datails: http://caniuse.com/#feat=flexbox
|
108
|
+
|
109
|
+
display: -webkit-box;
|
110
|
+
display: -moz-box;
|
111
|
+
display: -ms-flexbox;
|
112
|
+
display: -webkit-flex;
|
113
|
+
display: flex;
|
114
|
+
|
115
|
+
}
|
116
|
+
|
117
|
+
li:last-child {
|
118
|
+
|
119
|
+
border-bottom: 3px solid $grey-color-dark;
|
120
|
+
|
121
|
+
@include media-query($on-palm) {
|
122
|
+
|
123
|
+
border: none;
|
124
|
+
|
125
|
+
}
|
126
|
+
|
127
|
+
}
|
128
|
+
|
129
|
+
.page-link {
|
130
|
+
|
131
|
+
display: block;
|
132
|
+
padding: 0.25rem 0.50rem 0.25rem 2rem;
|
133
|
+
color: $text-color;
|
134
|
+
border-right: 1px solid $grey-color-light;
|
135
|
+
border-bottom: 1px solid $grey-color-light;
|
136
|
+
|
137
|
+
@include media-query($on-palm) {
|
138
|
+
|
139
|
+
border: none;
|
140
|
+
padding: 0.25rem 0.50rem;
|
141
|
+
|
142
|
+
}
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
/* checkbox */
|
147
|
+
#menu-icon {
|
148
|
+
|
149
|
+
display: none;
|
150
|
+
|
151
|
+
/* show menu */
|
152
|
+
&:checked ~ .site-menu {
|
153
|
+
|
154
|
+
transition: 0.5s;
|
155
|
+
right: 50%;
|
156
|
+
left: 0;
|
157
|
+
|
158
|
+
}
|
159
|
+
}
|
@@ -27,6 +27,16 @@
|
|
27
27
|
|
28
28
|
}
|
29
29
|
|
30
|
+
.pagination-posts {
|
31
|
+
|
32
|
+
-webkit-box-align: center;
|
33
|
+
-moz-box-align: center;
|
34
|
+
-webkit-align-items: center;
|
35
|
+
-ms-flex-align: center;
|
36
|
+
align-items: center;
|
37
|
+
|
38
|
+
}
|
39
|
+
|
30
40
|
.pagination-pages { margin-top: $spacing-unit / 2 ; }
|
31
41
|
|
32
42
|
.previous-posts,
|
@@ -41,46 +51,3 @@
|
|
41
51
|
}
|
42
52
|
|
43
53
|
.next-posts { text-align: right; }
|
44
|
-
|
45
|
-
/**
|
46
|
-
* Search
|
47
|
-
*/
|
48
|
-
|
49
|
-
.search-input {
|
50
|
-
|
51
|
-
padding-bottom: $spacing-unit;
|
52
|
-
color: $grey-color;
|
53
|
-
display: flex;
|
54
|
-
|
55
|
-
.icon {
|
56
|
-
margin-right: $spacing-unit / 4;
|
57
|
-
}
|
58
|
-
|
59
|
-
input {
|
60
|
-
|
61
|
-
border: 1px solid $grey-color-light;
|
62
|
-
padding: 0.1rem 0.3rem;
|
63
|
-
font-size: $base-font-size;
|
64
|
-
color: $grey-color;
|
65
|
-
flex: 1;
|
66
|
-
|
67
|
-
}
|
68
|
-
|
69
|
-
}
|
70
|
-
|
71
|
-
.search-box ul {
|
72
|
-
|
73
|
-
list-style: none;
|
74
|
-
margin: 0;
|
75
|
-
padding: 0;
|
76
|
-
|
77
|
-
li:first-child {
|
78
|
-
|
79
|
-
border-top: 1px solid $grey-color-light;
|
80
|
-
padding-top: $spacing-unit;
|
81
|
-
|
82
|
-
}
|
83
|
-
|
84
|
-
a { margin-left: $spacing-unit / 4; }
|
85
|
-
|
86
|
-
}
|