jekyll-indieweb 2.0.0.pre.beta

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.markdown +93 -0
  4. data/_includes/author.html +11 -0
  5. data/_includes/hcard.html +16 -0
  6. data/_includes/head.html +19 -0
  7. data/_includes/header.html +17 -0
  8. data/_includes/icons.html +70 -0
  9. data/_includes/icons_base.html +70 -0
  10. data/_includes/pagination.html +35 -0
  11. data/_includes/post-content.html +83 -0
  12. data/_includes/post-hcard.html +32 -0
  13. data/_includes/post-like.html +11 -0
  14. data/_includes/post.html +47 -0
  15. data/_includes/webmentions.html +10 -0
  16. data/_layouts/default.html +30 -0
  17. data/_layouts/header.html +17 -0
  18. data/_layouts/micropubpost.html +4 -0
  19. data/_layouts/page.html +14 -0
  20. data/_layouts/post.html +38 -0
  21. data/assets/css/_inc/article.css +142 -0
  22. data/assets/css/_inc/darkmode.css +39 -0
  23. data/assets/css/_inc/footer.css +12 -0
  24. data/assets/css/_inc/grid.css +63 -0
  25. data/assets/css/_inc/hcard.css +231 -0
  26. data/assets/css/_inc/header.css +50 -0
  27. data/assets/css/_inc/links.css +41 -0
  28. data/assets/css/_inc/main.css +27 -0
  29. data/assets/css/_inc/remedy.css +89 -0
  30. data/assets/css/_inc/variables.css +45 -0
  31. data/assets/css/main.css +729 -0
  32. data/assets/css/main.css.map +1 -0
  33. data/assets/images/favicon.png +0 -0
  34. data/assets/images/icons/facebook.svg +1 -0
  35. data/assets/images/icons/flickr.svg +1 -0
  36. data/assets/images/icons/foursquare.svg +1 -0
  37. data/assets/images/icons/github.svg +1 -0
  38. data/assets/images/icons/instagram.svg +1 -0
  39. data/assets/images/icons/linkedin.svg +1 -0
  40. data/assets/images/icons/mail.svg +1 -0
  41. data/assets/images/icons/rss.svg +1 -0
  42. data/assets/images/icons/tumblr.svg +1 -0
  43. data/assets/images/icons/twitter.svg +1 -0
  44. data/assets/images/profile.png +0 -0
  45. data/assets/images/social_preview.png +0 -0
  46. metadata +227 -0
@@ -0,0 +1,32 @@
1
+ <div class="h-card p-author">
2
+ <div class="media media-flip img-flexie">
3
+ <div class="img">
4
+ <img class="u-photo" alt="{{site.author}}" src="{{ site.author_img }}">
5
+ </div>
6
+ <h2 class="p-name media-title">
7
+ {% if post.author %}
8
+ {% assign author = post.author %}
9
+ {% elsif page.author %}
10
+ {% assign author = page.author %}
11
+ {% else %}
12
+ {% assign author = site.author %}
13
+ {% endif %}
14
+ <a href="{{ site.github.url }}" class="entry-author-link" rel="author">
15
+ {% if author %}{{ author }}{% endif %}
16
+ </a>
17
+ </h2>
18
+ <div class="media-content">
19
+ <p>{{ site.bio }}</p>
20
+ <p>
21
+ <a href="{{ post.url | prepend: site.github.url }}">{{ page.title }} </a> posted on <time datetime="{{ page.date | date_to_xmlschema }}" class="dt-time post-date">{{ page.date | date_to_string }}</time>.
22
+ </p>
23
+ <div class="tags">
24
+ {% for tags in post.tags %}
25
+ <a class="tag" href="/tags/{{tags}}">{{ tags }}</a>
26
+ {% endfor %}
27
+ </div>
28
+ <div class="media-footer">
29
+ {% include icons.html %}
30
+ </div>
31
+ </div>
32
+ </div>
@@ -0,0 +1,11 @@
1
+ <article class="h-entry">
2
+ <p class="p-name">
3
+ Liked
4
+ {% for like in post.mf-like-of %}
5
+ {% comment %}
6
+ TODO: Figure out if can get title of like.
7
+ {% endcomment %}
8
+ <a class="u-like-of" href="{{like}}">{{like}}</a>{% if forloop.rindex == 2 %} and {% elsif forloop.last != true %}, {% endif %}
9
+ {% endfor %}
10
+ </p>
11
+ </article>
@@ -0,0 +1,47 @@
1
+ {% assign post = include.post %}
2
+
3
+
4
+ <article class="post h-entry">
5
+ <header class="entry-header">
6
+ {% if post.title != '' %}
7
+ <h1 class="title p-name">
8
+ {% if post.mf-bookmark %}
9
+ <a class="u-bookmark-of" href="{{post.mf-bookmark | first}}">{{post.title}}</a>
10
+ {% elsif post.mf-bookmark-of %}
11
+ <a class="u-bookmark-of" href="{{post.mf-bookmark-of | first}}">{{post.title}}</a>
12
+ {% elsif post.mf-repost-of %}
13
+ <a class="u-repost-of" href="{{post.mf-repost-of | first}}">{{post.title}}</a>
14
+ {% else %}
15
+ <a class="u-url" href="{{ post.url }}">
16
+ {{ post.title }}
17
+ </a>
18
+ {% endif %}
19
+ </h1>
20
+ {% endif %}
21
+
22
+ {% if post.title == '' %}
23
+ <a class="u-url" href="{{ post.url }}"><time datetime="{{ post.date | date_to_xmlschema }}" class="dt-time post-date">{{ post.date | date_to_string }}</time></a>
24
+ {% else %}
25
+ <time datetime="{{ post.date | date_to_xmlschema }}" class="dt-time post-date">{{ post.date | date_to_string }}</time>
26
+ {% endif %}
27
+ <h3 class="subtitle">Tags</h3>
28
+ <div class="tags">
29
+ <!-- Kilroy was here -->
30
+ {% for tags in post.tags %}
31
+ <a class="tag" href="/tags/{{ tags }}">
32
+ {{ tags }}
33
+ </a>
34
+ {% endfor %}
35
+ <!-- end tags -->
36
+ </div>
37
+ </header>
38
+
39
+ <div class="entry-content">
40
+ {% if post.mf-like-of != null %}
41
+ {% include post-like.html post=post %}
42
+ {% else %}
43
+ {% include post-content.html post=post %}
44
+ {% endif %}
45
+ </div>
46
+
47
+ </article>
@@ -0,0 +1,10 @@
1
+ <script id="webmention-hosted">
2
+ (function () {
3
+ var sn = document.createElement("script"), s = document.getElementsByTagName("script")[0], url;
4
+ url = document.querySelectorAll ? document.querySelectorAll("link[rel~=canonical]") : false;
5
+ url = url && url[0] ? url[0].href : false;
6
+ sn.type = "text/javascript"; sn.async = true;
7
+ sn.src = "//webmention.herokuapp.com/api/embed?url=" + encodeURIComponent(url || window.location);
8
+ s.parentNode.insertBefore(sn, s);
9
+ }());
10
+ </script>
@@ -0,0 +1,30 @@
1
+ <!doctype html>
2
+ <html lang="{{ page.lang | default: site.lang | default: "en" }}">
3
+
4
+ {% include head.html %}
5
+
6
+ <body
7
+ {% if page.layout == "default" %}
8
+ class="{{page.bodyClass}} h-feed"
9
+ {% else %}
10
+ class="{{page.layout}}-content"
11
+ {% endif %}
12
+ >
13
+ <div class="wrapper">
14
+ {% include header.html %}
15
+ {% if page.url == '/' %}
16
+ {% include hcard.html %}
17
+ {% endif %}
18
+ <main class="content">
19
+ {{ content }}
20
+ </main>
21
+ <aside class="sidebar">
22
+ </aside>
23
+ <footer class="colophon" role="contentinfo">
24
+ <p>
25
+ Built with <a href="https://github.com/miklb/jekyll-indieweb">Jekyll</a> on <a href="https://indiewebcamp.com">IndieWeb principles</a>
26
+ </p>
27
+ </footer>
28
+ </div>
29
+ </body>
30
+ </html>
@@ -0,0 +1,17 @@
1
+ <header class="mainheader">
2
+ <div class="site-branding">
3
+ <a class="logo" href="/">
4
+ <img src="/assets/images/og_img.jpg" alt="{{ site.title }}">
5
+ </a>
6
+ <h1>{{ site.title }}</h1>
7
+ </div>
8
+ <nav class="mainnav" role="navigation">
9
+ {% for item in site.data.navbar.main-nav %}
10
+ {% if page.url == item.url %}
11
+ <a class="is-current" href="{{ item.url }}">{{ item.title }}</a>
12
+ {% else %}
13
+ <a href="{{ item.url }}">{{ item.title }}</a>
14
+ {% endif %}
15
+ {% endfor %}
16
+ </nav>
17
+ </header>
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: post
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,14 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post">
5
+
6
+ <header class="entry-header">
7
+ <h1 class="post-title">{{ page.title }}</h1>
8
+ </header>
9
+
10
+ <div class="post-content">
11
+ {{ content }}
12
+ </div>
13
+
14
+ </article>
@@ -0,0 +1,38 @@
1
+ ---
2
+ layout: default
3
+ bodyClass: post-single
4
+ ---
5
+
6
+ <article class="post h-entry">
7
+ <header class="entry-header">
8
+ {% if post.title != '' %}
9
+ <h1 class="title p-name">
10
+ {% if post.mf-bookmark %}
11
+ <a class="u-bookmark-of" href="{{page.mf-bookmark | first}}">{{post.title}}</a>
12
+ {% elsif post.mf-bookmark-of %}
13
+ <a class="u-bookmark-of" href="{{page.mf-bookmark-of | first}}">{{post.title}}</a>
14
+ {% elsif post.mf-repost-of %}
15
+ <a class="u-repost-of" href="{{page.mf-repost-of | first}}">{{post.title}}</a>
16
+ {% else %}
17
+ <a class="u-url" href="{{ site.github.url }}{{ page.url }}">
18
+ {{ page.title }}
19
+ </a>
20
+ {% endif %}
21
+ </h1>
22
+ {% endif %}
23
+ </header>
24
+ <div class="entry-content">
25
+ {% if page.mf-like-of != null %}
26
+ {% include post-like.html post=page %}
27
+ {% else %}
28
+ {% include post-content.html post=page %}
29
+ {% endif %}
30
+ </div>
31
+ <footer class="entry-footer">
32
+ {% include post-hcard.html %}
33
+ </footer>
34
+ </article>
35
+
36
+ {% if site.webmentions %}
37
+ {% include webmentions.html %}
38
+ {% endif %}
@@ -0,0 +1,142 @@
1
+
2
+ main article {
3
+ display: flex;
4
+ margin: 0 3em;
5
+ }
6
+
7
+ .post-content article {
8
+ flex-wrap: wrap;
9
+ }
10
+
11
+ .entry-header {
12
+ padding-right: 2em;
13
+ min-width: 20vw;
14
+ flex-grow: 2;
15
+ }
16
+
17
+ .title {
18
+ color: var(--very-dark-gray);
19
+ }
20
+
21
+ .subtitle {
22
+ font-size: 1.5rem;
23
+ color: var(--orange);
24
+ }
25
+
26
+ .post-date {
27
+ color: var(--gray);
28
+ }
29
+
30
+ .entry-content {
31
+ margin-top: 0;
32
+ font-size: 1.4em;
33
+ }
34
+
35
+ .entry-content p:first-of-type {
36
+ margin-top: 0;
37
+ padding-top: 0;
38
+ font-size: 140%;
39
+ }
40
+ /* Ripped from https://css-tricks.com/snippets/css/drop-caps/ */
41
+ .entry-content p:first-child:first-letter {
42
+ color: var(--red);
43
+ float: left;
44
+ font-family: Georgia;
45
+ font-size: 75px;
46
+ line-height: 60px;
47
+ padding-top: 4px;
48
+ padding-right: 8px;
49
+ padding-left: 3px;
50
+ }
51
+ /* Inspired by https://codepen.io/wbeeftink/pen/dIaDH */
52
+ .tag {
53
+ background: var(--light-gray);
54
+ border-radius: 3px 0 0 3px;
55
+ color: #999;
56
+ display: inline-block;
57
+ height: 26px;
58
+ font-size: 18px;
59
+ line-height: 26px;
60
+ padding: 0 20px 0 23px;
61
+ position: relative;
62
+ margin: 0 10px 10px 0;
63
+ text-decoration: none;
64
+ -webkit-transition: color 0.2s;
65
+ }
66
+
67
+ .tag::before {
68
+ background: var(--bg);
69
+ border-radius: 10px;
70
+ box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
71
+ content: '';
72
+ height: 6px;
73
+ left: 10px;
74
+ position: absolute;
75
+ width: 6px;
76
+ top: 10px;
77
+ }
78
+
79
+ .tag::after {
80
+ background: var(--bg);
81
+ border-bottom: 13px solid transparent;
82
+ border-left: 10px solid var(--light-gray);
83
+ border-top: 13px solid transparent;
84
+ content: '';
85
+ position: absolute;
86
+ right: 0;
87
+ top: 0;
88
+ }
89
+
90
+ .tag:hover {
91
+ background-color: var(--red);
92
+ color: white;
93
+ }
94
+
95
+ .tag:hover::after {
96
+ border-left-color: var(--red);
97
+ }
98
+
99
+ .entry-footer {
100
+
101
+ width: 49vw;
102
+ }
103
+
104
+ @media (max-width: 550px) {
105
+ .content {
106
+ padding: 2em 0;
107
+ }
108
+ main article {
109
+ flex-direction: column;
110
+ margin: 0 1em;
111
+ }
112
+
113
+ .entry-footer {
114
+ width: 100%;
115
+ }
116
+ }
117
+
118
+ /* Pagination */
119
+
120
+ .content nav {
121
+ display: flex;
122
+ justify-content: center;
123
+ }
124
+
125
+ .pagination {
126
+ list-style: none;
127
+ margin: 0;
128
+ padding: 0;
129
+ display: flex;
130
+ }
131
+
132
+ .pagination li {
133
+ margin: 0 1px;
134
+ }
135
+
136
+ .pagination a {
137
+ display: block;
138
+ padding: .5em 1em;
139
+ border: 1px solid #999;
140
+ border-radius: .2em;
141
+ text-decoration: none;
142
+ }
@@ -0,0 +1,39 @@
1
+ @media (prefers-color-scheme: dark) {
2
+ body {
3
+ color: var(--yellow);
4
+ background-color:var(--very-dark-gray);
5
+ }
6
+
7
+ a:visited {
8
+ color: var(--red);
9
+ }
10
+
11
+ .navbar-item a {
12
+ color: var(--light);
13
+ }
14
+
15
+ .subtitle {
16
+ color: var(--color2dark);
17
+ }
18
+
19
+ .post-date {
20
+ color: var(--blue);
21
+ }
22
+
23
+
24
+ .tag {
25
+ background: var(--gray);
26
+ }
27
+
28
+ .media-content .tag {
29
+ background: var(--very-dark-gray)
30
+ }
31
+
32
+ .tag::before, .tag::after {
33
+ background: var(--very-dark-gray);
34
+ }
35
+
36
+ .tag::after {
37
+ border-left: 10px solid var(--gray);
38
+ }
39
+ }
@@ -0,0 +1,12 @@
1
+
2
+ .colophon {
3
+ text-align: center;
4
+ background: var(--dark-gray);
5
+ color: var(--very-light-gray);
6
+ min-height: 5em;
7
+ font-size: 1.3em;
8
+ }
9
+
10
+ .colophon p:first-of-type {
11
+ padding-top: 1em;
12
+ }
@@ -0,0 +1,63 @@
1
+
2
+ .wrapper {
3
+ margin: 0 auto;
4
+ grid-row-gap: 10px;
5
+ grid-template-areas:
6
+ "header"
7
+ "content"
8
+ "sidebar"
9
+ "footer";
10
+ }
11
+
12
+ .mainheader {
13
+ grid-area: header;
14
+ }
15
+
16
+
17
+ .content {
18
+ grid-area: content;
19
+ padding: 20px;
20
+ }
21
+
22
+ .sidebar {
23
+ grid-area: sidebar;
24
+ }
25
+
26
+ /*
27
+ Main footer
28
+ */
29
+
30
+ .colophon {
31
+ grid-area: footer;
32
+ }
33
+
34
+ /*
35
+ Grid
36
+ */
37
+
38
+ @media (min-width: 550px) {
39
+
40
+ .home .site {
41
+ grid-column-gap: 2rem;
42
+ grid-row-gap: 20rem;
43
+ grid-template-columns: 2fr 4fr;
44
+ grid-template-areas:
45
+ "header header"
46
+ "content content"
47
+ "footer footer"
48
+ }
49
+
50
+ .site {
51
+ grid-column-gap: 2rem;
52
+ grid-row-gap: 2rem;
53
+ grid-template-columns: 2fr 4fr;
54
+ grid-template-areas:
55
+ "header header"
56
+ "sidebar content"
57
+ "footer footer"
58
+ }
59
+
60
+
61
+
62
+
63
+ }