hacked-jekyll 1.4.1 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +64 -16
- data/_config.yml +8 -12
- data/_data/json.yml +1 -0
- data/_layouts/404.html +5 -10
- data/_layouts/default.html +32 -2
- data/_layouts/home.html +70 -80
- data/assets/css/normalize.css +349 -0
- data/assets/css/open-color.css +343 -0
- data/assets/css/styles.css +97 -0
- data/assets/js/typed.umd.js +3 -0
- metadata +9 -13
- data/_includes/head.html +0 -18
- data/_includes/typed.html +0 -12
- data/_sass/_base.scss +0 -40
- data/_sass/_fonts.scss +0 -15
- data/_sass/_json.scss +0 -65
- data/assets/css/normalize.min.css +0 -1
- data/assets/css/open-color.min.css +0 -1
- data/assets/css/styles.min.scss +0 -8
- data/assets/js/typed.min.js +0 -1
- /data/assets/{fonts → webfonts}/hack-italic-subset.woff2 +0 -0
- /data/assets/{fonts → webfonts}/hack-regular-subset.woff2 +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8c50e8c315bc6f0d84d2bfae224fb8c6ebadaa0b9aa09712910893965fbf70aa
|
4
|
+
data.tar.gz: ad03b97a2b1934129981dc29a4a778980c1a9555d6900586e8fd264bdf668807
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 636600327a0e6cf07cef33db6f97475cb3e61edb264d624764e0b7346bba2511e81f5ba82841e1c6f0c805414652dc11813da3674133087058b2e0b49b7e8fa9
|
7
|
+
data.tar.gz: 91c5f61428af457a8cb485f3e9a3d8f30264cfb4c1275266b4a4f12dd2e727e77a3c151c87eaec336036b22d8111ed8d479fed0fbc8fc2da8713fc186ac4469f
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# hacked-jekyll
|
2
2
|
|
3
|
-
Hacked Jekyll is a responsive, minimalistic Jekyll theme for a tiny
|
3
|
+
Hacked Jekyll is a responsive, minimalistic Jekyll theme for a tiny personal website. It consists of a homepage and a 404 page. The homepage lists information about the user in a format that resembles JSON, giving the website a "hacked" appearance. As in JSON, elements can be strings, arrays, or hashes. One of the string elements, typically the user's description, can use [typed.js](https://mattboldt.com/demos/typed-js/) to cycle through multiple lines of text.
|
4
4
|
|
5
5
|
The style is rebooted through [normalize.css](https://necolas.github.io/normalize.css/) and based on the [Open Color](https://yeun.github.io/open-color/) library. The monospaced typeface [Hack](https://sourcefoundry.org/hack/) is served together with the website. The favicons are generated by [favicon.io](https://favicon.io/).
|
6
6
|
|
@@ -38,31 +38,79 @@ To customize hidden files, you can create new files with the same names and path
|
|
38
38
|
|
39
39
|
## Usage
|
40
40
|
|
41
|
-
|
41
|
+
You can input the content of your JSON object in `_data/json.yml`. This is a list of key-value pairs: for each of them you need to provide `key` and `value`, as in the example below.
|
42
42
|
|
43
|
-
|
43
|
+
```yaml
|
44
|
+
- key: Name
|
45
|
+
value: Place Holder
|
46
|
+
```
|
47
|
+
|
48
|
+
In addition, you can provide a `url`, in which case the value is rendered as a hyperlink. Here is an example:
|
49
|
+
|
50
|
+
```yaml
|
51
|
+
- key: Source
|
52
|
+
value: piazzai/hacked-jekyll
|
53
|
+
url: https://github.com/piazzai/hacked-jekyll
|
54
|
+
```
|
55
|
+
|
56
|
+
If `value` is a single line of text, the resulting JSON element will be a string. If `value` includes multiple lines of text, as in the code below, the resulting JSON element will be an array.
|
57
|
+
|
58
|
+
```yaml
|
59
|
+
- key: Address
|
60
|
+
value:
|
61
|
+
- University of Jekyll
|
62
|
+
- Department of Themes
|
63
|
+
- 123 Main St, Anytown, USA
|
64
|
+
```
|
65
|
+
|
66
|
+
An array can also consist of hyperlinks. To achieve this, provide each line of `value` with its own `value` and `url`, like so:
|
67
|
+
|
68
|
+
```yaml
|
69
|
+
- key: Profiles
|
70
|
+
value:
|
71
|
+
- value: Instagram
|
72
|
+
url: https://www.instagram.com
|
73
|
+
- value: LinkedIn
|
74
|
+
url: https://www.linkedin.com
|
75
|
+
```
|
44
76
|
|
45
|
-
|
77
|
+
Finally, it is possible to render `value` as a hash, which is a list of key-value pairs. This will happen automatically if the elements of `value` have their own `key` and `value` (and possibly a `url`).
|
46
78
|
|
47
79
|
```yaml
|
48
|
-
|
80
|
+
- key: Contact
|
81
|
+
value:
|
82
|
+
- key: Office
|
83
|
+
value: Foobar Hall 1.23
|
84
|
+
- key: Phone
|
85
|
+
value: +1 234 567 890
|
86
|
+
- key: Email
|
87
|
+
value: username@domain.com
|
88
|
+
url: "mailto:username@domain.com"
|
49
89
|
```
|
50
90
|
|
51
|
-
|
91
|
+
You can customize the appearance of the rendered JSON object using site variables. These have default values that can be overridden by specifying a new value in your `_config.yml` file.
|
52
92
|
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
93
|
+
| Variable | Default | Purpose |
|
94
|
+
| -------------- | :-----------------: | ----------------------------------------------------- |
|
95
|
+
| `lowercase` | `true` | Set all keys and values to lowercase |
|
96
|
+
| `color_bg` | `var(--oc-gray-9)` | Set the background color |
|
97
|
+
| `color_punct` | `var(--oc-green-9)` | Set the color of quote marks, commas, and parentheses |
|
98
|
+
| `color_keyval` | `var(--oc-green-4)` | Set the color of all keys and values |
|
99
|
+
| `color_hover` | `var(--oc-green-5)` | Set the color of values on hover (if they are links) |
|
100
|
+
| `show_quotes` | `true` | Display quote marks around keys and values |
|
101
|
+
| `show_commas` | `true` | Display commas between key-value pairs |
|
102
|
+
| `target` | `_self` | Set the target tab/window of hyperlinks |
|
58
103
|
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
104
|
+
All color defaults use the naming convention of the Open Color library ([read here](https://yeun.github.io/open-color/documents.html)). You can change them to any other color in the library, any base CSS color, or any three or six-digit hex color. For example:
|
105
|
+
|
106
|
+
```yaml
|
107
|
+
color_bg: var(--oc-indigo-8)
|
108
|
+
color_punct: black
|
109
|
+
color_keyval: '#fff'
|
110
|
+
color_hover: '#cc5de8'
|
63
111
|
```
|
64
112
|
|
65
|
-
|
113
|
+
If you use Open Color names, remember to wrap them in a CSS variable.
|
66
114
|
|
67
115
|
## Bugs
|
68
116
|
|
data/_config.yml
CHANGED
@@ -3,19 +3,15 @@ description: ""
|
|
3
3
|
baseurl: ""
|
4
4
|
url: ""
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
6
|
+
lowercase: true
|
7
|
+
color_bg: var(--oc-gray-9)
|
8
|
+
color_punct: var(--oc-green-9)
|
9
|
+
color_keyval: var(--oc-green-4)
|
10
|
+
color_hover: var(--oc-green-5)
|
11
|
+
show_quotes: true
|
12
|
+
show_commas: true
|
13
|
+
target: "_self"
|
14
14
|
|
15
15
|
plugins:
|
16
16
|
- jekyll-seo-tag
|
17
17
|
- jekyll-sitemap
|
18
|
-
|
19
|
-
sass:
|
20
|
-
style: compressed
|
21
|
-
sourcemap: never
|
data/_data/json.yml
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
# empty
|
data/_layouts/404.html
CHANGED
@@ -2,13 +2,8 @@
|
|
2
2
|
layout: default
|
3
3
|
---
|
4
4
|
|
5
|
-
<
|
6
|
-
<
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
<div class="block">
|
11
|
-
{% assign home = site.url | split: "//" | slice: 1 %}
|
12
|
-
<a href="{{ site.url }}">{{ home }}</a>
|
13
|
-
</div>
|
14
|
-
</main>
|
5
|
+
<div class="error">
|
6
|
+
<h1>404</h1>
|
7
|
+
<p>Page not found</p>
|
8
|
+
<p class="mt"><a href="{{ site.url }}">{{ site.url | split: "//" | slice: 1 }}</a></p>
|
9
|
+
</div>
|
data/_layouts/default.html
CHANGED
@@ -1,10 +1,40 @@
|
|
1
1
|
<!DOCTYPE html>
|
2
2
|
|
3
3
|
<html lang="en">
|
4
|
-
|
4
|
+
|
5
|
+
<head>
|
6
|
+
<meta charset="UTF-8" />
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
8
|
+
<title>{{ site.title }}</title>
|
9
|
+
|
10
|
+
{% seo title=false %}
|
11
|
+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
12
|
+
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
|
13
|
+
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
|
14
|
+
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
|
15
|
+
<link rel="manifest" href="assets/site.webmanifest">
|
16
|
+
<link rel="stylesheet" href="assets/css/normalize.css" />
|
17
|
+
<link rel="stylesheet" href="assets/css/open-color.css" />
|
18
|
+
<link rel="stylesheet" href="assets/css/styles.css" />
|
19
|
+
<script src="assets/js/typed.umd.js"></script>
|
20
|
+
</head>
|
5
21
|
|
6
22
|
<body>
|
7
|
-
|
23
|
+
<main>
|
24
|
+
|
25
|
+
{{ content }}
|
26
|
+
|
27
|
+
</main>
|
28
|
+
<script>
|
29
|
+
var typed = new Typed("#typed", {
|
30
|
+
stringsElement: "#strings",
|
31
|
+
backSpeed: 10,
|
32
|
+
typeSpeed: 30,
|
33
|
+
backDelay: 1000,
|
34
|
+
loop: true,
|
35
|
+
smartBackspace: true,
|
36
|
+
});
|
37
|
+
</script>
|
8
38
|
</body>
|
9
39
|
|
10
40
|
</html>
|
data/_layouts/home.html
CHANGED
@@ -2,87 +2,77 @@
|
|
2
2
|
layout: default
|
3
3
|
---
|
4
4
|
|
5
|
-
{%
|
6
|
-
{%
|
7
|
-
{%
|
8
|
-
{%
|
5
|
+
{% if site.show_quotes -%}
|
6
|
+
{% assign quote = '"' -%}
|
7
|
+
{% endif -%}
|
8
|
+
{% if site.show_commas -%}
|
9
|
+
{% assign comma = ',' -%}
|
10
|
+
{% endif -%}
|
11
|
+
{% assign target = site.target | prepend: 'target="' | append: '"' -%}
|
9
12
|
|
10
|
-
<
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
{% if site.json.description.first %}
|
19
|
-
<div id="typed-strings">
|
20
|
-
{% for i in site.json.description %}
|
21
|
-
<span>{{ i | prepend: '"' | append: '",'}}</span>
|
22
|
-
{% endfor %}
|
13
|
+
<div id="json">
|
14
|
+
{% for pair in site.data.json %}
|
15
|
+
<div class="my ms">
|
16
|
+
{% if pair.typed -%}
|
17
|
+
<div id="strings">
|
18
|
+
{% for value in pair.value -%}
|
19
|
+
<span>{{ value }}</span>
|
20
|
+
{%- endfor %}
|
23
21
|
</div>
|
24
|
-
<
|
25
|
-
{
|
26
|
-
|
27
|
-
{
|
28
|
-
{%
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
{% endif %}
|
37
|
-
</div>
|
38
|
-
<div class="block">
|
39
|
-
{% if site.json.address %}
|
40
|
-
{% if site.json.address.first %}
|
41
|
-
<p><span class="array-key">address</span></p>
|
42
|
-
<div class="array">
|
43
|
-
{% for i in site.json.address %}
|
44
|
-
<p class="array-attr">{{ i }}</p>
|
45
|
-
{% endfor %}
|
46
|
-
</div>
|
47
|
-
{% else %}
|
48
|
-
<p><span class="key">address</span><span class="attr">{{ site.json.address }}</span></p>
|
49
|
-
{% endif %}
|
50
|
-
{% endif %}
|
51
|
-
</div>
|
52
|
-
<div class="block">
|
53
|
-
{% if site.json.contact %}
|
54
|
-
{% if site.json.contact.first %}
|
55
|
-
<p><span class="list-key">contact</span></p>
|
56
|
-
<div class="list">
|
57
|
-
{% for i in site.json.contact %}
|
58
|
-
<p><span class="list-subkey">{{ i | slice: 0 }}</span><span class="list-attr">{{ i | slice: 1 }}</span></p>
|
59
|
-
{% endfor %}
|
60
|
-
</div>
|
61
|
-
{% else %}
|
62
|
-
<p><span class="key">contact</span><span class="attr">{{ site.json.contact }}</span></p>
|
63
|
-
{% endif %}
|
64
|
-
{% endif %}
|
65
|
-
</div>
|
66
|
-
<div class="block">
|
67
|
-
{% if site.json.demo %}
|
68
|
-
{% assign demo = site.json.demo | split: "//" | slice: 1 %}
|
69
|
-
<p><span class="key">demo</span><span class="attr"><a href="{{ site.json.demo }}" {{ target }}>{{ demo }}</a></span>
|
22
|
+
{{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
|
23
|
+
{{ quote }}<span class="value"><span id="typed"></span></span>{{ quote }}
|
24
|
+
{%- elsif pair.value.first.key -%}
|
25
|
+
{{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
|
26
|
+
{% for value in pair.value -%}
|
27
|
+
{% if value.url -%}
|
28
|
+
<p class="ms">
|
29
|
+
{{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
|
30
|
+
{{ quote }}<a class="value" href="{{ value.url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
|
31
|
+
{%- unless forloop.last -%}
|
32
|
+
{{ comma }}
|
33
|
+
{%- endunless %}
|
70
34
|
</p>
|
71
|
-
{%
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
{%
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
35
|
+
{% else -%}
|
36
|
+
<p class="ms">
|
37
|
+
{{ quote }}<span class="key">{{ value.key }}</span>{{ quote }}:
|
38
|
+
{{ quote }}<span class="value">{{ value.value }}</span>{{ quote }}
|
39
|
+
{%- unless forloop.last -%}
|
40
|
+
{{ comma }}
|
41
|
+
{%- endunless %}
|
42
|
+
</p>
|
43
|
+
{% endif -%}
|
44
|
+
{%- endfor -%}
|
45
|
+
]
|
46
|
+
{%- elsif pair.value.first -%}
|
47
|
+
{{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}: [
|
48
|
+
{% for value in pair.value -%}
|
49
|
+
{% if value.url -%}
|
50
|
+
<p class="ms">
|
51
|
+
{{ quote }}<a class="value" href="{{ value.url }}" {{ target }}>{{ value.value }}</a>{{ quote }}
|
52
|
+
{%- unless forloop.last -%}
|
53
|
+
{{ comma }}
|
54
|
+
{%- endunless %}
|
55
|
+
</p>
|
56
|
+
{% else -%}
|
57
|
+
<p class="ms">
|
58
|
+
{{ quote }}<span class="value">{{ value }}</span>{{ quote }}
|
59
|
+
{%- unless forloop.last -%}
|
60
|
+
{{ comma }}
|
61
|
+
{%- endunless %}
|
62
|
+
</p>
|
63
|
+
{% endif -%}
|
64
|
+
{%- endfor -%}
|
65
|
+
]
|
66
|
+
{%- elsif pair.url -%}
|
67
|
+
{{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
|
68
|
+
{{ quote }}<a class="value" href="{{ pair.url }}" {{ target }}>{{ pair.value }}</a>{{ quote }}
|
69
|
+
{%- else -%}
|
70
|
+
{{ quote }}<span class="key">{{ pair.key }}</span>{{ quote }}:
|
71
|
+
{{ quote }}<span class="value">{{ pair.value }}</span>{{ quote }}
|
72
|
+
{%- endif -%}
|
73
|
+
{%- unless forloop.last -%}
|
74
|
+
{{ comma }}
|
75
|
+
{%- endunless %}
|
87
76
|
</div>
|
88
|
-
|
77
|
+
{% endfor %}
|
78
|
+
</div>
|