leonids 0.1.1

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.
Files changed (47) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +6 -0
  3. data/README.md +36 -0
  4. data/_includes/disqus.html +12 -0
  5. data/_includes/footer.html +3 -0
  6. data/_includes/head.html +21 -0
  7. data/_includes/js.html +14 -0
  8. data/_includes/nav.html +33 -0
  9. data/_includes/read_time.html +8 -0
  10. data/_includes/sidebar.html +27 -0
  11. data/_includes/social-links.html +40 -0
  12. data/_layouts/default.html +22 -0
  13. data/_layouts/page.html +21 -0
  14. data/_layouts/post.html +67 -0
  15. data/_layouts/post_listing.html +62 -0
  16. data/_sass/components/_buttons.scss +92 -0
  17. data/_sass/components/_global.scss +122 -0
  18. data/_sass/components/_grid.scss +125 -0
  19. data/_sass/components/_helpers.scss +194 -0
  20. data/_sass/components/_mixins.scss +280 -0
  21. data/_sass/components/_normalize.scss +427 -0
  22. data/_sass/components/_syntax-highlighting.scss +124 -0
  23. data/_sass/components/_typography.scss +98 -0
  24. data/_sass/components/_variables.scss +79 -0
  25. data/_sass/pages/_archive.scss +47 -0
  26. data/_sass/pages/_layout.scss +91 -0
  27. data/_sass/pages/_post.scss +248 -0
  28. data/_sass/pages/_tags.scss +58 -0
  29. data/categories/index.html +18 -0
  30. data/css/font-awesome.min.css +4 -0
  31. data/css/main.scss +27 -0
  32. data/favicon.ico +0 -0
  33. data/favicon.png +0 -0
  34. data/fonts/FontAwesome.otf +0 -0
  35. data/fonts/fontawesome-webfont.eot +0 -0
  36. data/fonts/fontawesome-webfont.svg +640 -0
  37. data/fonts/fontawesome-webfont.ttf +0 -0
  38. data/fonts/fontawesome-webfont.woff +0 -0
  39. data/fonts/fontawesome-webfont.woff2 +0 -0
  40. data/img/avatar.jpg +0 -0
  41. data/img/leonids-logo.png +0 -0
  42. data/index.html +4 -0
  43. data/js/jquery-2.1.4.min.js +4 -0
  44. data/js/main.js +2 -0
  45. data/leonids.gemspec +22 -0
  46. data/screenshot.png +0 -0
  47. metadata +146 -0
@@ -0,0 +1,98 @@
1
+ /* ==========================================================================
2
+ Typography
3
+ ========================================================================== */
4
+
5
+ //
6
+ // Global
7
+ //
8
+
9
+ html {
10
+ line-height: $base-line-height;
11
+ font-family: $font-family-base;
12
+ font-weight: normal;
13
+ color: $text-color;
14
+ -webkit-font-smoothing: antialiased;
15
+ text-rendering: optimizeLegibility;
16
+ font-size: $font-size-base;
17
+ }
18
+
19
+ //
20
+ // Blockquote
21
+ //
22
+
23
+ blockquote {
24
+ display: block;
25
+ position: relative;
26
+ padding-left: 20px;
27
+ font-style: italic;
28
+ border-left: 5px solid $secondary;
29
+ }
30
+
31
+ //
32
+ // Links
33
+ //
34
+
35
+ a {
36
+ text-decoration: none;
37
+ color: $primary;
38
+ &:hover,
39
+ &:focus {
40
+ color: lighten($primary, 14%);
41
+ text-decoration: none;
42
+ }
43
+ }
44
+
45
+ //
46
+ // Header Styles
47
+ //
48
+
49
+ h1, h2, h3, h4, h5, h6 {
50
+ font-weight: 600;
51
+ line-height: 1.7;
52
+ }
53
+
54
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
55
+ font-weight: inherit;
56
+ color: $text-color;
57
+ &:hover,
58
+ &:focus {
59
+ color: lighten($text-color, 24%);
60
+ }
61
+ }
62
+ h1 { font-size: $font-size-h1; margin: ($font-size-h1 / 2) 0 ($font-size-h1 / 2.5) 0;}
63
+ h2 { font-size: $font-size-h2; margin: ($font-size-h2 / 2) 0 ($font-size-h2 / 2.5) 0;}
64
+ h3 { font-size: $font-size-h3; margin: ($font-size-h3 / 2) 0 ($font-size-h3 / 2.5) 0;}
65
+ h4 { font-size: $font-size-h4; margin: ($font-size-h4 / 2) 0 ($font-size-h4 / 2.5) 0;}
66
+ h5 { font-size: $font-size-h5; margin: ($font-size-h5 / 2) 0 ($font-size-h5 / 2.5) 0;}
67
+ h6 { font-size: $font-size-h6; margin: ($font-size-h6 / 2) 0 ($font-size-h6 / 2.5) 0; text-transform: uppercase;}
68
+
69
+ //
70
+ // Horizontal rules
71
+ //
72
+
73
+ hr {
74
+ margin-top: $spacer-y;
75
+ margin-bottom: $spacer-y;
76
+ border: 0;
77
+ border-top: $hr-border-width solid $hr-border-color;
78
+ }
79
+
80
+ //
81
+ // Text Styles
82
+ //
83
+
84
+ em { font-style: italic; }
85
+
86
+ strong { font-weight: 600; }
87
+
88
+ small,
89
+ .small {
90
+ font-size: 80%;
91
+ font-weight: normal;
92
+ }
93
+
94
+ p {
95
+ margin: 1.2em 0;
96
+ word-spacing: 0.05em;
97
+ line-height: 1.6em;
98
+ }
@@ -0,0 +1,79 @@
1
+ /*
2
+ * Global Variables
3
+ */
4
+
5
+ // Google font import
6
+ @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,400,400italic|Roboto+Mono);
7
+
8
+ // Custom variables
9
+
10
+ // Spacing
11
+ //
12
+ // Control the default styling of most Bootstrap elements by modifying these
13
+ // variables. Mostly focused on spacing.
14
+
15
+ $spacer: 1rem !default;
16
+ $spacer-x: $spacer !default;
17
+ $spacer-y: $spacer !default;
18
+ $border-width: .0625rem !default;
19
+
20
+ // Typography
21
+ //
22
+ // Font, line-height, and color for body text, headings, and more.
23
+
24
+ $font-family-sans-serif: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
25
+ $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
26
+ $font-family-monospace: "Roboto Mono", "Courier New", monospace !default;
27
+ $font-family-base: $font-family-sans-serif !default;
28
+
29
+ // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
30
+ $font-size-root: 15px !default;
31
+
32
+ $font-size-base: $font-size-root !default;
33
+ $font-size-lg: $font-size-root * 1.25 !default;
34
+ $font-size-sm: $font-size-root * 0.875 !default;
35
+ $font-size-xs: $font-size-root * 0.75 !default;
36
+
37
+ $font-size-h1: 2rem !default;
38
+ $font-size-h2: 1.75rem !default;
39
+ $font-size-h3: 1.5rem !default;
40
+ $font-size-h4: 1.25rem !default;
41
+ $font-size-h5: 1.15rem !default;
42
+ $font-size-h6: 1rem !default;
43
+
44
+ $base-line-height: 1.5;
45
+ $base-space-unit: 1.5em;
46
+
47
+ $hr-border-color: rgba(0,0,0,.1) !default;
48
+ $hr-border-width: $border-width;
49
+
50
+ //
51
+ // Colors
52
+ //
53
+
54
+ $text-color: rgba(0, 0, 0, 0.87) !default;
55
+ $background-color: #f5f5f5;
56
+
57
+ $white: #fff;
58
+ $primary: #42b983;
59
+ $secondary: #8d7edc;
60
+ $success: #65e892;
61
+ $danger: #f83e4b;
62
+ $warning: #F5A623;
63
+ $info: #09ABF6;
64
+
65
+ // Tables
66
+ $table-border-color: #d0d0d0 !default;
67
+ $table-striped-color: #f2f2f2 !default;
68
+
69
+ // Grid Variables
70
+ $num-cols: 12 !default;
71
+ $gutter-width: 1.5rem !default;
72
+ $element-top-margin: $gutter-width/3 !default;
73
+ $element-bottom-margin: ($gutter-width*2)/3 !default;
74
+
75
+ // Media Query Ranges
76
+ $small-screen: 600px !default;
77
+ $medium-screen: 992px !default;
78
+ $large-screen: 1200px !default;
79
+ $larger-screen: 1600px !default;
@@ -0,0 +1,47 @@
1
+ .archive {
2
+ #timeline {
3
+ position: relative;
4
+ &:before {
5
+ content: '';
6
+ position: absolute;
7
+ top: 0;
8
+ left: -2px;
9
+ height: 100%;
10
+ width: 4px;
11
+ background: $background-color;
12
+ }
13
+ &:after {
14
+ content: "";
15
+ display: table;
16
+ clear: both;
17
+ }
18
+ }
19
+
20
+ .archive-title {
21
+ position: relative;
22
+ margin: 2em auto 1em;
23
+ .archive-year {
24
+ margin-left: 1em;
25
+ &:before {
26
+ content: " ";
27
+ position: absolute;
28
+ left: 0;
29
+ top: 50%;
30
+ margin-left: -4px;
31
+ margin-top: -4px;
32
+ width: 8px;
33
+ height: 8px;
34
+ background: #bbb;
35
+ border-radius: 50%;
36
+ }
37
+ }
38
+ }
39
+
40
+
41
+ ul {
42
+ list-style: none;
43
+ li {
44
+ margin: 1em auto;
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,91 @@
1
+ /* LAYOUT CSS */
2
+ .cover {
3
+ background-color: $background-color;
4
+ position: fixed;
5
+ text-align: center;
6
+ width: 100%;
7
+ min-height: 400px;
8
+ padding: 30px 15px 20px;
9
+ z-index: 1;
10
+ @include media-query($small-screen) {
11
+ background-position: center;
12
+ padding: 30px;
13
+ }
14
+ @include media-query($medium-screen) {
15
+ height: 100vh;
16
+ position: initial;
17
+ width: 100%;
18
+ }
19
+ }
20
+ .cover-card {
21
+ color: $text-color;
22
+ padding: 0 30px;
23
+ .avatar {
24
+ border-radius: 50%;
25
+ width: 100px;
26
+ height: 100px;
27
+ float: none;
28
+ }
29
+ .author_name {
30
+ display: block;
31
+ color: #F36170;
32
+ font-size: 1.75em;
33
+ text-transform: lowercase;
34
+ }
35
+ .author_job {
36
+ display: block;
37
+ color: $secondary;
38
+ font-size: 0.8em;
39
+ font-weight: 700;
40
+ text-transform: uppercase;
41
+ margin: -5px auto 10px;
42
+ }
43
+ .author_bio {
44
+ font-size: 90%;
45
+ display: block;
46
+ }
47
+ @include media-query($medium-screen) {
48
+ text-align: right;
49
+ margin: 0 auto;
50
+ padding: 0 0px 80px;
51
+ }
52
+ }
53
+ .social-links {
54
+ margin-top: 0.5em;
55
+ ul {
56
+ margin: 0;
57
+ padding: 0;
58
+ li {
59
+ list-style: none;
60
+ display: inline-block;
61
+ margin-left: 1em;
62
+ a.social-link-item {
63
+ color: $secondary;
64
+ &:hover,
65
+ &:focus {
66
+ color: lighten($secondary, 14%);
67
+ }
68
+ }
69
+ }
70
+ }
71
+ }
72
+ .nav-list {
73
+ margin: 0;
74
+ padding: 0;
75
+ list-style: none;
76
+ .nav-item {
77
+ display: inline-block;
78
+ *display: inline;
79
+ zoom: 1;
80
+ & a {
81
+ margin-top: 1em;
82
+ text-transform: lowercase;
83
+ font-size: 85%;
84
+ color: $secondary;
85
+ &:hover,
86
+ &:focus {
87
+ color: lighten($secondary, 14%);
88
+ }
89
+ }
90
+ }
91
+ }
@@ -0,0 +1,248 @@
1
+ // Post listing
2
+ .post-listing {
3
+ background-color: $white;
4
+ position: absolute;
5
+ top: 400px;
6
+ z-index: 233;
7
+ width: 100%;
8
+ padding: 20px 20px 0;
9
+ -webkit-transform: translate3d(0,0,1px);
10
+ transform: translate3d(0,0,1px);
11
+ @include media-query($small-screen) {
12
+ padding: 50px 30px 0;
13
+ }
14
+ @include media-query($medium-screen) {
15
+ height: 100vh;
16
+ overflow-y: scroll;
17
+ position: initial;
18
+ top: 0;
19
+ }
20
+ }
21
+
22
+ .image-credit {
23
+ float: right;
24
+ font-weight: bold;
25
+ font-style: italic;
26
+ color: $info;
27
+ font-size: 13px;
28
+ padding-right: 20px;
29
+ }
30
+
31
+ // Post Section
32
+ section.post {
33
+ margin-bottom: 80px;
34
+ }
35
+
36
+ // Back home button
37
+
38
+ .back-home a {
39
+ font-size: 13px;
40
+ font-weight: bold;
41
+ color: $info;
42
+ border: 1px solid lighten($text-color, 45%);
43
+ border-radius: 0.4em;
44
+ padding: 0.5em 1em;
45
+ }
46
+
47
+ // Post title
48
+ .post-title {
49
+
50
+ }
51
+
52
+ .post-title-link {
53
+ color: $primary;
54
+ font-size: 14px;
55
+ margin-left: 10px;
56
+ &:hover,
57
+ &:focus {
58
+ color: lighten($primary, 14%);
59
+ }
60
+ }
61
+
62
+ // Post meta
63
+ .post-meta {
64
+ font-size: 13px;
65
+ font-weight: bold;
66
+ .post-date {
67
+ color: $secondary;
68
+ }
69
+ .post-author {
70
+ text-transform: uppercase;
71
+ color: $warning;
72
+ }
73
+ .post-cat {
74
+ text-transform: uppercase;
75
+ color: $warning;
76
+ }
77
+ .read-time {
78
+ color: $primary;
79
+ }
80
+ }
81
+
82
+ // Read more buttons
83
+
84
+ a.read-more {
85
+ padding: 5px 8px;
86
+ }
87
+
88
+ // Post content
89
+
90
+ #post {
91
+ padding-bottom: 50px;
92
+ .post-header {
93
+ margin: 0 auto 50px;
94
+ }
95
+ }
96
+
97
+ #post h1 {
98
+ margin: 0.5em 0 1em;
99
+ }
100
+ #post h2 {
101
+ margin: 2em 0 0.8em;
102
+ padding-bottom: 0.7em;
103
+ border-bottom: 1px solid #ddd;
104
+ }
105
+ #post h3 {
106
+ margin: 1.75em 0 1.2em;
107
+ position: relative;
108
+ }
109
+
110
+ #page {
111
+ padding-bottom: 50px;
112
+ min-height: 70vh;
113
+ .page-header {
114
+ margin: 0 auto 50px;
115
+ }
116
+ }
117
+
118
+ .post-navigation {
119
+ background-color: #f6f6f6;
120
+ @include box-shadow;
121
+ }
122
+ .leonids-icon {
123
+ margin: 0 auto;
124
+ padding: 20px 30px;
125
+ text-align: center;
126
+ color: $warning;
127
+ font-size: 16px;
128
+ line-height: 16px;
129
+ }
130
+ .post-nav-prev,
131
+ .post-nav-next {
132
+ min-height: 10px;
133
+ width: 100%;
134
+ }
135
+ .post-nav-next {
136
+ text-align: right;
137
+ }
138
+ .post-nav-btn {
139
+ width: 100%;
140
+ padding: 20px 30px;
141
+ .post-nav-text {
142
+ font-size: 16px;
143
+ line-height: 16px;
144
+ font-weight: bold;
145
+ }
146
+ .table-cell {
147
+ vertical-align: middle;
148
+ }
149
+ }
150
+ .post-image-feature {
151
+ margin-bottom: 40px;
152
+ .feature-image {
153
+ width: 100%;
154
+ max-height: 500px;
155
+ }
156
+ }
157
+
158
+ // Shares Buttons
159
+ .share-buttons {
160
+ padding-top: 1em;
161
+ border-top: 1px solid #ddd;
162
+ ul {
163
+ margin: 0;
164
+ padding: 0;
165
+ list-style: none;
166
+ li {
167
+ display: inline-block;
168
+ margin-right: 0.5em;
169
+ span {
170
+ display: none;
171
+ @include media-query($small-screen) {
172
+ display: inline;
173
+ margin: 0.5em;
174
+ }
175
+ }
176
+ }
177
+ }
178
+ }
179
+ .twitter {
180
+ background-color: #77bcf1;
181
+ color: $white;
182
+ border-color: #77bcf1;
183
+ &:visited {
184
+ color: $white;
185
+ border-color: #77bcf1;
186
+ }
187
+ &:hover {
188
+ background-color: $white;
189
+ color: #77bcf1;
190
+ border-color: #77bcf1;
191
+ }
192
+ }
193
+ .facebook {
194
+ background-color: #627aac;
195
+ color: $white;
196
+ border-color: #627aac;
197
+ &:visited {
198
+ color: $white;
199
+ border-color: #627aac;
200
+ }
201
+ &:hover {
202
+ background-color: $white;
203
+ color: #627aac;
204
+ border-color: #627aac;
205
+ }
206
+ }
207
+ .google-plus {
208
+ background-color: #e36f60;
209
+ color: $white;
210
+ border-color: #e36f60;
211
+ &:visited {
212
+ color: $white;
213
+ border-color: #e36f60;
214
+ }
215
+ &:hover {
216
+ background-color: $white;
217
+ color: #e36f60;
218
+ border-color: #e36f60;
219
+ }
220
+ }
221
+ .hacker-news {
222
+ background-color: #f60;
223
+ color: $white;
224
+ border-color: #f60;
225
+ &:visited {
226
+ color: $white;
227
+ border-color: #f60;
228
+ }
229
+ &:hover {
230
+ background-color: $white;
231
+ color: #f60;
232
+ border-color: #f60;
233
+ }
234
+ }
235
+ .reddit {
236
+ background-color: #5f99cf;
237
+ color: $white;
238
+ border-color: #5f99cf;
239
+ &:visited {
240
+ color: $white;
241
+ border-color: #5f99cf;
242
+ }
243
+ &:hover {
244
+ background-color: $white;
245
+ color: #5f99cf;
246
+ border-color: #5f99cf;
247
+ }
248
+ }