jasper-theme 0.0.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 (54) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +52 -0
  4. data/_includes/author-profile.html +68 -0
  5. data/_includes/author.html +61 -0
  6. data/_includes/card.html +26 -0
  7. data/_includes/category.html +27 -0
  8. data/_includes/floating-header.hbs +28 -0
  9. data/_includes/footer.html +30 -0
  10. data/_includes/header.html +17 -0
  11. data/_includes/icons/avatar.svg +1 -0
  12. data/_includes/icons/facebook.svg +1 -0
  13. data/_includes/icons/infinity.svg +1 -0
  14. data/_includes/icons/rss.svg +1 -0
  15. data/_includes/icons/twitter.svg +1 -0
  16. data/_includes/icons/web.svg +1 -0
  17. data/_includes/meta.html +7 -0
  18. data/_includes/multiple-author.html +0 -0
  19. data/_includes/navbar.html +36 -0
  20. data/_includes/navigation.html +14 -0
  21. data/_includes/other-post.html +38 -0
  22. data/_includes/posts.html +3 -0
  23. data/_includes/reading-time.html +10 -0
  24. data/_includes/single-author.html +24 -0
  25. data/_includes/subscribe-form.html +8 -0
  26. data/_includes/subscribe-overlay.html +15 -0
  27. data/_layouts/author.html +12 -0
  28. data/_layouts/category.html +13 -0
  29. data/_layouts/default.html +12 -0
  30. data/_layouts/home.html +9 -0
  31. data/_layouts/page.html +5 -0
  32. data/_layouts/post.html +103 -0
  33. data/_sass/1-helpers/_functions.sass +0 -0
  34. data/_sass/1-helpers/_helpers.sass +2 -0
  35. data/_sass/1-helpers/_mixins.sass +43 -0
  36. data/_sass/1-helpers/_variables.sass +10 -0
  37. data/_sass/2-base/_base.sass +2 -0
  38. data/_sass/2-base/_global.sass +62 -0
  39. data/_sass/2-base/_normalize.scss +190 -0
  40. data/_sass/2-base/_typography.sass +0 -0
  41. data/_sass/3-layout/_footer.sass +54 -0
  42. data/_sass/3-layout/_header.sass +174 -0
  43. data/_sass/3-layout/_layout.sass +2 -0
  44. data/_sass/4-modules/_card.sass +229 -0
  45. data/_sass/4-modules/_modules.sass +4 -0
  46. data/_sass/4-modules/_previous-next-post.sass +116 -0
  47. data/_sass/4-modules/_subscribe-form.sass +66 -0
  48. data/_sass/4-modules/_subscribe-overlay.sass +78 -0
  49. data/_sass/5-pages/_author-profile.sass +66 -0
  50. data/_sass/5-pages/_pages.sass +2 -0
  51. data/_sass/5-pages/_post.sass +361 -0
  52. data/assets/css/style.sass +8 -0
  53. data/assets/js/script.js +9 -0
  54. metadata +138 -0
@@ -0,0 +1,3 @@
1
+ {% for post in site.posts reversed %}
2
+ {% include card.html url=post.url image=post.image category=post.category title=post.title description=post.description author=post.author content=post.content %}
3
+ {% endfor %}
@@ -0,0 +1,10 @@
1
+ <span class="reading-time">
2
+ {% assign words = include.content | number_of_words %}
3
+ {% assign min_read = "min read" %}
4
+
5
+ {% if words < 360 %}
6
+ 1 {{min_read}}
7
+ {% else %}
8
+ {{ words | divided_by: 180 }} {{ min_read }}
9
+ {% endif %}
10
+ </span>
@@ -0,0 +1,24 @@
1
+ {% assign writer = site.data.authors[page.author] %}
2
+ <section class="author-card">
3
+ {% assign writer_image = writer.image | slice: 0, 5 %}
4
+ {% if writer_image == "https" %}
5
+ <img class="author-profile-image" src="{{writer.image}}" alt="{{writer.name}}"/>
6
+ {% else %}
7
+ <span class="avatar-wrapper">
8
+ {% include icons/avatar.svg %}
9
+ </span>
10
+ {% endif %}
11
+ <section class="author-card-content">
12
+ <h4 class="author-card-name">
13
+ <a href="/author/{{writer.user_name}}">{{writer.name}}</a>
14
+ </h4>
15
+ {% if writer.bio %}
16
+ <p>{{writer.bio}}</p>
17
+ {% else %}
18
+ <p>Read <a href="/author/{{writer.user_name}}">more posts</a> by this author.</p>
19
+ {% endif %}
20
+ </section>
21
+ </section>
22
+ <div class="post-full-footer-right">
23
+ <a class="author-card-button" href="/author/{{writer.user_name}}">Read More</a>
24
+ </div>
@@ -0,0 +1,8 @@
1
+ <form method="post" action="/subscribe/">
2
+ <div class="form-group">
3
+ <input class="subscribe-email" type="email" name="email" placeholder="youremail@example.com">
4
+ </div>
5
+ <button type="submit">
6
+ <span>Subscribe</span>
7
+ </button>
8
+ </form>
@@ -0,0 +1,15 @@
1
+ <div id="subscribe" class="subscribe-overlay" style="display: none">
2
+ <a class="subscribe-overlay-close" onclick="hide_subscribe_overlay()"></a>
3
+ <div class="subscribe-overlay-content">
4
+ {% if site.logo != "" %}
5
+ <img class="subscribe-overlay-logo"src="{{site.logo}}" alt="{{site.title}} Logo" />
6
+ {% else %}
7
+ <h1 class="subscribe-overlay-site-name">
8
+ {{site.title}}
9
+ </h1>
10
+ {% endif %}
11
+ <h1 class="subscribe-overlay-title">Subscribe to Ghost</h1>
12
+ <p class="subscribe-overlay-description">Stay up to date! Get all the latest &amp; greatest posts delivered straight to your inbox</p>
13
+ {% include subscribe-form.html %}
14
+ </div>
15
+ </div>
@@ -0,0 +1,12 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <body class="author-template">
6
+ <div class="site-wrapper">
7
+
8
+ {{ content }}
9
+
10
+ {% include footer.html %}
11
+ </div>
12
+ </body>
@@ -0,0 +1,13 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <body class="category-template">
6
+ <div class="site-wrapper">
7
+ {% assign homepage = false %}
8
+
9
+ {{ content }}
10
+
11
+ {% include footer.html %}
12
+ </div>
13
+ </body>
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ {% include meta.html %}
6
+ </head>
7
+
8
+ {{ content }}
9
+
10
+ <script src="{{ '/assets/js/script.js' | relative_url }}"></script>
11
+
12
+ </html>
@@ -0,0 +1,9 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <body class="home-template">
6
+ <div class="site-wrapper">
7
+ {{ content }}
8
+ </div>
9
+ </body>
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
@@ -0,0 +1,103 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <body class="post-template">
6
+ <div class="site-wrapper">
7
+ {% assign homepage = false %}
8
+ <header class="site-header outer">
9
+ <div class="inner">
10
+ {% include navbar.html %}
11
+ </div>
12
+ </header>
13
+ <main id="site-main" class="site-main outer">
14
+ <div class="inner">
15
+
16
+ <article class="post-full">
17
+
18
+ <header class="post-full-header">
19
+ <section class="post-full-meta">
20
+ <time class="post-full-meta-date" datetime="{{ page.date | date: "%d %b %Y" }}">{{ page.date | date: "%d %b %Y" }}</time>
21
+ <span class="date-divider">/</span>
22
+ {% assign category = page.category | split: "-" | join: " " %}
23
+ <a class="post-full-meta-category" href="/category/{{page.category}}">{{category}}</a>
24
+ </section>
25
+ <h1 class="post-full-title">{{page.title}}</h1>
26
+ </header>
27
+
28
+ <figure class="post-full-image" style="background-image: url({{page.image|relative_url}})"></figure>
29
+
30
+ <section class="post-full-content">
31
+ {{content}}
32
+ </section>
33
+
34
+ <!-- Email subscribe form at the bottom of the page -->
35
+
36
+ {% if site.subscribe %}
37
+ <section class="subscribe-form">
38
+ <h3 class="subscribe-form-title">Subscribe to {{site.title}}</h3>
39
+ <p>Get the latest posts delivered right to your inbox</p>
40
+ {% include subscribe-form.html %}
41
+ </section>
42
+ {% endif %}
43
+
44
+ <footer class="post-full-footer">
45
+
46
+ <!-- There are two options for how we display the byline/author-info. If the post has more than one author, we load a specific template from includes/byline-multiple.html, otherwise we just use the default byline. -->
47
+
48
+ {% assign author_name = page.author | split: ", " %}
49
+ {% assign number_of_authors = author_name | size %}
50
+
51
+ {% if number_of_authors < 1 %}
52
+
53
+ {% else %}
54
+ {% include single-author.html %}
55
+ {% endif %}
56
+
57
+ </footer>
58
+
59
+ <!-- <section class="post-full-comments">
60
+ If you want to embed comments, this is a good place to do it!
61
+ </section> -->
62
+
63
+ </article>
64
+ </div>
65
+ </main>
66
+
67
+ <!-- Links to Previous/Next posts -->
68
+ <aside class="read-next outer">
69
+ <div class="inner">
70
+ <div class="read-next-feed">
71
+
72
+ <!-- If there's a previous post, display it using the same markup included from - includes/card.html -->
73
+
74
+ {% if page.previous.url %}
75
+ {% if page.next.url%}
76
+ {% include other-post.html %}
77
+ {% endif %}
78
+ {% endif %}
79
+
80
+
81
+ {% if page.previous.url %}
82
+ {% include card.html url=page.previous.url image=page.previous.image category=page.previous.category title=page.previous.title description=page.previous.description author=page.previous.author content=page.previous.content %}
83
+ {% else %}
84
+ {% include other-post.html %}
85
+ {% endif %}
86
+
87
+
88
+ <!-- If there's a next post, display it using the same markup included from - includes/card.html -->
89
+
90
+ {% if page.next.url %}
91
+ {% include card.html url=page.next.url image=page.next.image category=page.next.category title=page.next.title
92
+ description=page.next.description author=page.next.author content=page.next.content %}
93
+ {% else %}
94
+ {% include other-post.html %}
95
+ {% endif %}
96
+
97
+ </div>
98
+ </div>
99
+ </aside>
100
+
101
+ {% include footer.html %}
102
+ </div>
103
+ </body>
File without changes
@@ -0,0 +1,2 @@
1
+ @import 'mixins'
2
+ @import 'variables'
@@ -0,0 +1,43 @@
1
+ =card
2
+ display: flex
3
+ flex: 1 1 300px
4
+ flex-direction: column
5
+ overflow: hidden
6
+ margin: 0 20px 40px
7
+ min-height: 300px
8
+ background: $white 50%
9
+ background-size: cover
10
+ border-radius: 5px
11
+ box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03)
12
+ transition: all .5s ease
13
+
14
+ @if $card_shadow == "out"
15
+ &:hover
16
+ box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04)
17
+ transition: all .4s ease
18
+ transform: translate3D(0,-1px,0) scale(1.02)
19
+ @else
20
+ &:hover
21
+ box-shadow: 0 0 1px rgba(39,44,49,.1), 0 3px 16px rgba(39,44,49,.07)
22
+ transition: all .3s ease
23
+ transform: translate3D(0,-1px,0)
24
+
25
+ =reading-time
26
+ @if $reading_time == "show"
27
+
28
+ @else
29
+ display: none
30
+
31
+ =post_image
32
+ @if $post_image == "big"
33
+
34
+ @media (max-width: 1040px)
35
+ width: 100%
36
+
37
+ @media (min-width: 1040px)
38
+ margin: 3em -100px
39
+ max-width: 1040px
40
+
41
+ @else
42
+ margin: 3em auto
43
+ max-width: 100%
@@ -0,0 +1,10 @@
1
+ $white: #fff
2
+ $black: #000
3
+
4
+ // Cards
5
+ $card_shadow: in // in or out
6
+ $reading_time: show // show or hide
7
+
8
+ // Posts
9
+ $header_post_image: big // small or big
10
+ $post_image: big // small or big
@@ -0,0 +1,2 @@
1
+ @import 'normalize'
2
+ @import 'global'
@@ -0,0 +1,62 @@
1
+ *
2
+ box-sizing: inherit
3
+
4
+ body
5
+ overflow-x: hidden
6
+ color: #3c484e
7
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif
8
+ font-size: 16px
9
+ line-height: 1.5
10
+ font-weight: 400
11
+ font-style: normal
12
+ letter-spacing: 0
13
+ text-rendering: optimizeLegibility
14
+ background-color: #f4f8fb
15
+ -webkit-font-smoothing: antialiased
16
+ moz-osx-font-smoothing: grayscale
17
+ -moz-font-feature-settings: "liga" on
18
+
19
+ a
20
+ text-decoration: none
21
+
22
+ h1, h2, h3, h4, h5, h6
23
+ margin-top: 0
24
+ line-height: 1.35
25
+ font-weight: 700
26
+
27
+ h1
28
+ font-size: 3.5rem
29
+
30
+ @media (max-width: 500px)
31
+ h1
32
+ font-size: 2rem
33
+
34
+ code
35
+ font-family: monospace,monospace
36
+
37
+ hr
38
+ position: relative
39
+ display: block
40
+ width: 100%
41
+ margin: 2.5em 0 3.5em
42
+ padding: 0
43
+ height: 1px
44
+ border: 0
45
+ border-top: 1px solid #e3e9ed
46
+
47
+ .site-wrapper
48
+ display: flex
49
+ flex-direction: column
50
+ min-height: 100vh
51
+
52
+ .outer
53
+ position: relative
54
+ padding: 0 4vw
55
+
56
+ .inner
57
+ margin: 0 auto
58
+ max-width: 1040px
59
+ width: 100%
60
+
61
+ ::selection
62
+ background: #cbeafb
@@ -0,0 +1,190 @@
1
+ /*! normalize.css v1.0.0 | MIT License | github.com/codecarrotnet/normalize.css */
2
+ html {
3
+ line-height: 1.15;
4
+ -ms-text-size-adjust: 100%;
5
+ -webkit-text-size-adjust: 100%;
6
+ }
7
+ body {
8
+ margin: 0;
9
+ }
10
+ article,
11
+ aside,
12
+ footer,
13
+ header,
14
+ nav,
15
+ section {
16
+ display: block;
17
+ }
18
+ h1 {
19
+ font-size: 2em;
20
+ margin: 0.67em 0;
21
+ }
22
+ figcaption,
23
+ figure,
24
+ main {
25
+ display: block;
26
+ }
27
+ figure {
28
+ margin: 1em 40px;
29
+ }
30
+ hr {
31
+ box-sizing: content-box;
32
+ height: 0;
33
+ overflow: visible;
34
+ }
35
+ pre {
36
+ font-family: monospace, monospace;
37
+ font-size: 1em;
38
+ }
39
+ a {
40
+ background-color: transparent;
41
+ -webkit-text-decoration-skip: objects;
42
+ }
43
+ abbr[title] {
44
+ border-bottom: none;
45
+ text-decoration: underline;
46
+ text-decoration: underline dotted;
47
+ }
48
+ b,
49
+ strong {
50
+ font-weight: inherit;
51
+ }
52
+ b,
53
+ strong {
54
+ font-weight: bolder;
55
+ }
56
+ code,
57
+ kbd,
58
+ samp {
59
+ font-family: monospace, monospace;
60
+ font-size: 1em;
61
+ }
62
+ dfn {
63
+ font-style: italic;
64
+ }
65
+ mark {
66
+ background-color: #ff0;
67
+ color: #000;
68
+ }
69
+ small {
70
+ font-size: 80%;
71
+ }
72
+ sub,
73
+ sup {
74
+ font-size: 75%;
75
+ line-height: 0;
76
+ position: relative;
77
+ vertical-align: baseline;
78
+ }
79
+ sub {
80
+ bottom: -0.25em;
81
+ }
82
+ sup {
83
+ top: -0.5em;
84
+ }
85
+ audio,
86
+ video {
87
+ display: inline-block;
88
+ }
89
+ audio:not([controls]) {
90
+ display: none;
91
+ height: 0;
92
+ }
93
+ img {
94
+ border-style: none;
95
+ }
96
+ svg:not(:root) {
97
+ overflow: hidden;
98
+ }
99
+ button,
100
+ input,
101
+ optgroup,
102
+ select,
103
+ textarea {
104
+ font-family: sans-serif;
105
+ font-size: 100%;
106
+ line-height: 1.15;
107
+ margin: 0;
108
+ }
109
+ button,
110
+ input {
111
+ overflow: visible;
112
+ }
113
+ button,
114
+ select {
115
+ text-transform: none;
116
+ }
117
+ [type="reset"],
118
+ [type="submit"],
119
+ button,
120
+ html [type="button"] {
121
+ -webkit-appearance: button;
122
+ }
123
+ [type="button"]::-moz-focus-inner,
124
+ [type="reset"]::-moz-focus-inner,
125
+ [type="submit"]::-moz-focus-inner,
126
+ button::-moz-focus-inner {
127
+ border-style: none;
128
+ padding: 0;
129
+ }
130
+ [type="button"]:-moz-focusring,
131
+ [type="reset"]:-moz-focusring,
132
+ [type="submit"]:-moz-focusring,
133
+ button:-moz-focusring {
134
+ outline: 1px dotted ButtonText;
135
+ }
136
+ fieldset {
137
+ padding: 0.35em 0.75em 0.625em;
138
+ }
139
+ legend {
140
+ box-sizing: border-box;
141
+ color: inherit;
142
+ display: table;
143
+ max-width: 100%;
144
+ padding: 0;
145
+ white-space: normal;
146
+ }
147
+ progress {
148
+ display: inline-block;
149
+ vertical-align: baseline;
150
+ }
151
+ textarea {
152
+ overflow: auto;
153
+ }
154
+ [type="checkbox"],
155
+ [type="radio"] {
156
+ box-sizing: border-box;
157
+ padding: 0;
158
+ }
159
+ [type="number"]::-webkit-inner-spin-button,
160
+ [type="number"]::-webkit-outer-spin-button {
161
+ height: auto;
162
+ }
163
+ [type="search"] {
164
+ -webkit-appearance: textfield;
165
+ outline-offset: -2px;
166
+ }
167
+ [type="search"]::-webkit-search-cancel-button,
168
+ [type="search"]::-webkit-search-decoration {
169
+ -webkit-appearance: none;
170
+ }
171
+ ::-webkit-file-upload-button {
172
+ -webkit-appearance: button;
173
+ font: inherit;
174
+ }
175
+ details,
176
+ menu {
177
+ display: block;
178
+ }
179
+ summary {
180
+ display: list-item;
181
+ }
182
+ canvas {
183
+ display: inline-block;
184
+ }
185
+ template {
186
+ display: none;
187
+ }
188
+ [hidden] {
189
+ display: none;
190
+ }