jasper-theme 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
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
+ }