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.
@@ -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,3 @@
1
+ // -----------------------------------------------------------------------------
2
+ // This file contains all styles related to the button component.
3
+ // -----------------------------------------------------------------------------
@@ -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
- }