jekyll-theme-superb 0.1.1 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +27 -8
  3. data/_layouts/default.html +1 -2
  4. data/_layouts/page.html +3 -1
  5. data/_layouts/post.html +8 -8
  6. data/_sass/highlighter.css +61 -0
  7. data/_sass/theme.scss +357 -1
  8. data/assets/css/style.css +454 -313
  9. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 977e44fe6e20ad2eee9ae6cef641a07fbb2030f98ef0bdd1eef4098ee74c8b2c
4
- data.tar.gz: 3aa39230bde287162e35dba283248557d3d2f489cdf4f9b0c06191dc3302b845
3
+ metadata.gz: 15257ecf0efbef70d36e5745e287a9755033b60a70a2c5aabdfbce73f4c92ba8
4
+ data.tar.gz: b061377f12a7d273ae5e7fce42e4ae19fea79b8147748fcb09e6fb01a7b9d888
5
5
  SHA512:
6
- metadata.gz: 4917128dbf92ca1a1bcde9e52285e85b59c80b32fe06b5bd3ac21f36c4d28f516d9cb78bd9187ba3d206e09db0fdecdedb0ed9a838c5b7ef54c9125456e1e531
7
- data.tar.gz: cf6bcd8f3c4d9b4671677a7e5c57a19e4a8fbe0257b6de1691d89f2c520b7e8e2100f8c238a6d404e79ac3d9bed530b79f4605c43ef6b47950668883b638a9de
6
+ metadata.gz: 71e11a952dcfa15dcd43afde8fbf928e3843aaa6dcdc4bf07a83cdfbb004efa229ac9d52e9277f6893d979db9bb35f365899b3d7ce634a6af66cb90a1f81da30
7
+ data.tar.gz: 41c49ac29b4a88e349069feb9e861490331d911cf1ca3284f44fa042291de19530ff53540472bff6b4af714634777c68b5c1c9e0c066c615e3cc47a73d98bc0a
data/README.md CHANGED
@@ -5,6 +5,7 @@ This is a simple Jekyll theme that uses [tailwindCSS's-based ui-kit](https://git
5
5
  ![screenshot of the theme](./screenshot.png)
6
6
 
7
7
  _\* Article titles were copied from [dev.to](dev.to)'s homepage at the time of designing of this template._
8
+
8
9
  ## Installation
9
10
 
10
11
  Add this line to your Jekyll site's `Gemfile`:
@@ -33,7 +34,9 @@ Theme has a `post` layout used for displaying a single post, an `index` layout u
33
34
 
34
35
  ## Configuration
35
36
 
36
- @TODO: Document all available config options
37
+ Additional to other config options already present in jekyll itself, this theme also has:
38
+
39
+ - **subtitle**: Shown next to the name of the blog (top left corner, visible desktop only)
37
40
 
38
41
  ## Contributing
39
42
 
@@ -41,19 +44,35 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/simply
41
44
 
42
45
  ## Development
43
46
 
44
- To set up your environment to develop this theme, run `bundle install`.
47
+ To set up your environment to develop this theme, run `bundle install` and `npm install`.
45
48
 
46
- Your theme is setup just like a normal Jekyll site! To test your theme, run `npm run jekyll:dev` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
49
+ To run `postcss` for the tailwind part:
47
50
 
48
- Additionally, the theme is based on tailwindCSS, so postcss is required to modify existing styles:
51
+ ```
52
+ npm run css:dev
53
+ ```
49
54
 
50
- $ npm install
51
- $ npm run css:dev
55
+ To run jekyll and its processor:
56
+
57
+ ```
58
+ npm run jekyll:dev
59
+ ```
52
60
 
61
+ > Note: You might checkout [`concurrently`](https://www.npmjs.com/package/concurrently), if you want to run both commands... wait for it... *concurrently*.
53
62
 
63
+ ## Releasing
54
64
 
55
- When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
56
- To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-superb.gemspec` accordingly.
65
+ First, make sure the theme runs smoothly (or at all) locally.
66
+
67
+ Then create the 💎
68
+ ```
69
+ gem build jekyll-theme-superb.gemspec
70
+ ```
71
+
72
+ Lastly, publish it to the ☁️
73
+ ```
74
+ gem push jekyll-theme-superb-*.gem
75
+ ```
57
76
 
58
77
  ## License
59
78
 
data/_layouts/default.html CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  {%- include head.html -%}
5
5
 
6
- <body class="font-merriweather">
6
+ <body class="font-serif">
7
7
  <div class="container mx-auto">
8
8
 
9
9
  {%- include header.html -%}
@@ -13,5 +13,4 @@
13
13
  {%- include footer.html -%}
14
14
  </div>
15
15
  </body>
16
-
17
16
  </html>
data/_layouts/page.html CHANGED
@@ -2,4 +2,6 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- {{ content }}
5
+ <div class="px-4 py-2 desktop:px-0 page">
6
+ {{ content }}
7
+ </div>
data/_layouts/post.html CHANGED
@@ -2,12 +2,12 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <div class="prose max-w-fit py-4">
6
- <div>
7
- <span class="text-grey/50">0644</span>
8
- <span class="text-graphite mx-4">{{ page.author }}</span>
9
- <span class="text-graphite">{{ page.date | date: "%-d %b '%y" }}</span>
10
- </div>
11
- <h2 class="mb-6 mt-0">{{page.title}}</h2>
12
- {{ content }}
5
+ <div class="px-4 py-2 desktop:px-0 post">
6
+ <div>
7
+ <span class="text-grey/50">0644</span>
8
+ <span class="text-graphite mx-4">{{ page.author }}</span>
9
+ <span class="text-graphite">{{ page.date | date: "%-d %b '%y" }}</span>
10
+ </div>
11
+ <h2 class="mb-6 mt-0 desktop:text-h4 text-h5 font-bold">{{page.title}}</h2>
12
+ <div class="font-serif font-thin post">{{ content }}</div>
13
13
  </div>
data/_sass/highlighter.css ADDED
@@ -0,0 +1,61 @@
1
+ .highlight .hll { background-color: #ffffcc }
2
+ .highlight .c { color: #408080; font-style: italic } /* Comment */
3
+ .highlight .err { border: 1px solid #FF0000 } /* Error */
4
+ .highlight .k { color: #008000; font-weight: bold } /* Keyword */
5
+ .highlight .o { color: #666666 } /* Operator */
6
+ .highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
7
+ .highlight .cp { color: #BC7A00 } /* Comment.Preproc */
8
+ .highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
9
+ .highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
10
+ .highlight .gd { color: #A00000 } /* Generic.Deleted */
11
+ .highlight .ge { font-style: italic } /* Generic.Emph */
12
+ .highlight .gr { color: #FF0000 } /* Generic.Error */
13
+ .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
14
+ .highlight .gi { color: #00A000 } /* Generic.Inserted */
15
+ .highlight .go { color: #808080 } /* Generic.Output */
16
+ .highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
17
+ .highlight .gs { font-weight: bold } /* Generic.Strong */
18
+ .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
19
+ .highlight .gt { color: #0040D0 } /* Generic.Traceback */
20
+ .highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
21
+ .highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
22
+ .highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
23
+ .highlight .kp { color: #008000 } /* Keyword.Pseudo */
24
+ .highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
25
+ .highlight .kt { color: #B00040 } /* Keyword.Type */
26
+ .highlight .m { color: #666666 } /* Literal.Number */
27
+ .highlight .s { color: #BA2121 } /* Literal.String */
28
+ .highlight .na { color: #7D9029 } /* Name.Attribute */
29
+ .highlight .nb { color: #008000 } /* Name.Builtin */
30
+ .highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
31
+ .highlight .no { color: #880000 } /* Name.Constant */
32
+ .highlight .nd { color: #AA22FF } /* Name.Decorator */
33
+ .highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
34
+ .highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
35
+ .highlight .nf { color: #0000FF } /* Name.Function */
36
+ .highlight .nl { color: #A0A000 } /* Name.Label */
37
+ .highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
38
+ .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
39
+ .highlight .nv { color: #19177C } /* Name.Variable */
40
+ .highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
41
+ .highlight .w { color: #bbbbbb } /* Text.Whitespace */
42
+ .highlight .mf { color: #666666 } /* Literal.Number.Float */
43
+ .highlight .mh { color: #666666 } /* Literal.Number.Hex */
44
+ .highlight .mi { color: #666666 } /* Literal.Number.Integer */
45
+ .highlight .mo { color: #666666 } /* Literal.Number.Oct */
46
+ .highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
47
+ .highlight .sc { color: #BA2121 } /* Literal.String.Char */
48
+ .highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
49
+ .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
50
+ .highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
51
+ .highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
52
+ .highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
53
+ .highlight .sx { color: #008000 } /* Literal.String.Other */
54
+ .highlight .sr { color: #BB6688 } /* Literal.String.Regex */
55
+ .highlight .s1 { color: #BA2121 } /* Literal.String.Single */
56
+ .highlight .ss { color: #19177C } /* Literal.String.Symbol */
57
+ .highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
58
+ .highlight .vc { color: #19177C } /* Name.Variable.Class */
59
+ .highlight .vg { color: #19177C } /* Name.Variable.Global */
60
+ .highlight .vi { color: #19177C } /* Name.Variable.Instance */
61
+ .highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
data/_sass/theme.scss CHANGED
@@ -1,3 +1,359 @@
1
1
  @tailwind base;
2
2
  @tailwind components;
3
- @tailwind utilities;
3
+ @tailwind utilities;
4
+
5
+
6
+ @layer components {
7
+ .post, .page {
8
+ p {
9
+ margin-top: 1.25em;
10
+ margin-bottom: 1.25em;
11
+ }
12
+
13
+ a {
14
+ @apply link link-green font-bold;
15
+ }
16
+
17
+ code {
18
+ @apply bg-porcelain px-2 py-1 rounded;
19
+ }
20
+
21
+ figure.highlight {
22
+ @apply bg-porcelain p-2;
23
+ overflow: auto;
24
+ code {
25
+ @apply p-0;
26
+ }
27
+ }
28
+
29
+ ul, ol {
30
+ @apply list list-green;
31
+ }
32
+
33
+ .highlight .hll {
34
+ background-color: #ffffcc
35
+ }
36
+
37
+ .highlight .c {
38
+ color: #408080;
39
+ font-style: italic
40
+ }
41
+
42
+ /* Comment */
43
+ .highlight .err {
44
+ border: 1px solid #FF0000
45
+ }
46
+
47
+ /* Error */
48
+ .highlight .k {
49
+ color: #008000;
50
+ font-weight: bold
51
+ }
52
+
53
+ /* Keyword */
54
+ .highlight .o {
55
+ color: #666666
56
+ }
57
+
58
+ /* Operator */
59
+ .highlight .cm {
60
+ color: #408080;
61
+ font-style: italic
62
+ }
63
+
64
+ /* Comment.Multiline */
65
+ .highlight .cp {
66
+ color: #BC7A00
67
+ }
68
+
69
+ /* Comment.Preproc */
70
+ .highlight .c1 {
71
+ color: #408080;
72
+ font-style: italic
73
+ }
74
+
75
+ /* Comment.Single */
76
+ .highlight .cs {
77
+ color: #408080;
78
+ font-style: italic
79
+ }
80
+
81
+ /* Comment.Special */
82
+ .highlight .gd {
83
+ color: #A00000
84
+ }
85
+
86
+ /* Generic.Deleted */
87
+ .highlight .ge {
88
+ font-style: italic
89
+ }
90
+
91
+ /* Generic.Emph */
92
+ .highlight .gr {
93
+ color: #FF0000
94
+ }
95
+
96
+ /* Generic.Error */
97
+ .highlight .gh {
98
+ color: #000080;
99
+ font-weight: bold
100
+ }
101
+
102
+ /* Generic.Heading */
103
+ .highlight .gi {
104
+ color: #00A000
105
+ }
106
+
107
+ /* Generic.Inserted */
108
+ .highlight .go {
109
+ color: #808080
110
+ }
111
+
112
+ /* Generic.Output */
113
+ .highlight .gp {
114
+ color: #000080;
115
+ font-weight: bold
116
+ }
117
+
118
+ /* Generic.Prompt */
119
+ .highlight .gs {
120
+ font-weight: bold
121
+ }
122
+
123
+ /* Generic.Strong */
124
+ .highlight .gu {
125
+ color: #800080;
126
+ font-weight: bold
127
+ }
128
+
129
+ /* Generic.Subheading */
130
+ .highlight .gt {
131
+ color: #0040D0
132
+ }
133
+
134
+ /* Generic.Traceback */
135
+ .highlight .kc {
136
+ color: #008000;
137
+ font-weight: bold
138
+ }
139
+
140
+ /* Keyword.Constant */
141
+ .highlight .kd {
142
+ color: #008000;
143
+ font-weight: bold
144
+ }
145
+
146
+ /* Keyword.Declaration */
147
+ .highlight .kn {
148
+ color: #008000;
149
+ font-weight: bold
150
+ }
151
+
152
+ /* Keyword.Namespace */
153
+ .highlight .kp {
154
+ color: #008000
155
+ }
156
+
157
+ /* Keyword.Pseudo */
158
+ .highlight .kr {
159
+ color: #008000;
160
+ font-weight: bold
161
+ }
162
+
163
+ /* Keyword.Reserved */
164
+ .highlight .kt {
165
+ color: #B00040
166
+ }
167
+
168
+ /* Keyword.Type */
169
+ .highlight .m {
170
+ color: #666666
171
+ }
172
+
173
+ /* Literal.Number */
174
+ .highlight .s {
175
+ color: #BA2121
176
+ }
177
+
178
+ /* Literal.String */
179
+ .highlight .na {
180
+ color: #7D9029
181
+ }
182
+
183
+ /* Name.Attribute */
184
+ .highlight .nb {
185
+ color: #008000
186
+ }
187
+
188
+ /* Name.Builtin */
189
+ .highlight .nc {
190
+ color: #0000FF;
191
+ font-weight: bold
192
+ }
193
+
194
+ /* Name.Class */
195
+ .highlight .no {
196
+ color: #880000
197
+ }
198
+
199
+ /* Name.Constant */
200
+ .highlight .nd {
201
+ color: #AA22FF
202
+ }
203
+
204
+ /* Name.Decorator */
205
+ .highlight .ni {
206
+ color: #999999;
207
+ font-weight: bold
208
+ }
209
+
210
+ /* Name.Entity */
211
+ .highlight .ne {
212
+ color: #D2413A;
213
+ font-weight: bold
214
+ }
215
+
216
+ /* Name.Exception */
217
+ .highlight .nf {
218
+ color: #0000FF
219
+ }
220
+
221
+ /* Name.Function */
222
+ .highlight .nl {
223
+ color: #A0A000
224
+ }
225
+
226
+ /* Name.Label */
227
+ .highlight .nn {
228
+ color: #0000FF;
229
+ font-weight: bold
230
+ }
231
+
232
+ /* Name.Namespace */
233
+ .highlight .nt {
234
+ color: #008000;
235
+ font-weight: bold
236
+ }
237
+
238
+ /* Name.Tag */
239
+ .highlight .nv {
240
+ color: #19177C
241
+ }
242
+
243
+ /* Name.Variable */
244
+ .highlight .ow {
245
+ color: #AA22FF;
246
+ font-weight: bold
247
+ }
248
+
249
+ /* Operator.Word */
250
+ .highlight .w {
251
+ color: #bbbbbb
252
+ }
253
+
254
+ /* Text.Whitespace */
255
+ .highlight .mf {
256
+ color: #666666
257
+ }
258
+
259
+ /* Literal.Number.Float */
260
+ .highlight .mh {
261
+ color: #666666
262
+ }
263
+
264
+ /* Literal.Number.Hex */
265
+ .highlight .mi {
266
+ color: #666666
267
+ }
268
+
269
+ /* Literal.Number.Integer */
270
+ .highlight .mo {
271
+ color: #666666
272
+ }
273
+
274
+ /* Literal.Number.Oct */
275
+ .highlight .sb {
276
+ color: #BA2121
277
+ }
278
+
279
+ /* Literal.String.Backtick */
280
+ .highlight .sc {
281
+ color: #BA2121
282
+ }
283
+
284
+ /* Literal.String.Char */
285
+ .highlight .sd {
286
+ color: #BA2121;
287
+ font-style: italic
288
+ }
289
+
290
+ /* Literal.String.Doc */
291
+ .highlight .s2 {
292
+ color: #BA2121
293
+ }
294
+
295
+ /* Literal.String.Double */
296
+ .highlight .se {
297
+ color: #BB6622;
298
+ font-weight: bold
299
+ }
300
+
301
+ /* Literal.String.Escape */
302
+ .highlight .sh {
303
+ color: #BA2121
304
+ }
305
+
306
+ /* Literal.String.Heredoc */
307
+ .highlight .si {
308
+ color: #BB6688;
309
+ font-weight: bold
310
+ }
311
+
312
+ /* Literal.String.Interpol */
313
+ .highlight .sx {
314
+ color: #008000
315
+ }
316
+
317
+ /* Literal.String.Other */
318
+ .highlight .sr {
319
+ color: #BB6688
320
+ }
321
+
322
+ /* Literal.String.Regex */
323
+ .highlight .s1 {
324
+ color: #BA2121
325
+ }
326
+
327
+ /* Literal.String.Single */
328
+ .highlight .ss {
329
+ color: #19177C
330
+ }
331
+
332
+ /* Literal.String.Symbol */
333
+ .highlight .bp {
334
+ color: #008000
335
+ }
336
+
337
+ /* Name.Builtin.Pseudo */
338
+ .highlight .vc {
339
+ color: #19177C
340
+ }
341
+
342
+ /* Name.Variable.Class */
343
+ .highlight .vg {
344
+ color: #19177C
345
+ }
346
+
347
+ /* Name.Variable.Global */
348
+ .highlight .vi {
349
+ color: #19177C
350
+ }
351
+
352
+ /* Name.Variable.Instance */
353
+ .highlight .il {
354
+ color: #666666
355
+ }
356
+
357
+ /* Literal.Number.Integer.Long */
358
+ }
359
+ }