jekyll-theme-persephone 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +52 -0
  4. data/_includes/assets.html +14 -0
  5. data/_includes/comment.html +35 -0
  6. data/_includes/comments.html +18 -0
  7. data/_includes/contact.html +7 -0
  8. data/_includes/footer.html +5 -0
  9. data/_includes/head.html +10 -0
  10. data/_includes/header.html +24 -0
  11. data/_includes/header_nav.html +10 -0
  12. data/_includes/icons.html +42 -0
  13. data/_includes/icons/ellipsis.html +5 -0
  14. data/_includes/icons/facebook.html +2 -0
  15. data/_includes/icons/github.html +3 -0
  16. data/_includes/icons/instagram.html +5 -0
  17. data/_includes/icons/left.html +3 -0
  18. data/_includes/icons/link.html +4 -0
  19. data/_includes/icons/linkedin.html +5 -0
  20. data/_includes/icons/mail.html +4 -0
  21. data/_includes/icons/right.html +3 -0
  22. data/_includes/icons/rss.html +5 -0
  23. data/_includes/icons/smile.html +6 -0
  24. data/_includes/icons/twitter.html +3 -0
  25. data/_includes/icons/user.html +4 -0
  26. data/_includes/icons/weibo.html +3 -0
  27. data/_includes/loading.html +4 -0
  28. data/_includes/new_comment.html +50 -0
  29. data/_includes/pagination.html +29 -0
  30. data/_includes/slides.html +53 -0
  31. data/_includes/smiley.html +12 -0
  32. data/_includes/summary.html +30 -0
  33. data/_includes/title.html +7 -0
  34. data/_layouts/404.html +8 -0
  35. data/_layouts/archive.html +33 -0
  36. data/_layouts/blog.html +29 -0
  37. data/_layouts/book.html +28 -0
  38. data/_layouts/chapter.html +32 -0
  39. data/_layouts/default.html +7 -0
  40. data/_layouts/home.html +6 -0
  41. data/_layouts/list.html +33 -0
  42. data/_layouts/page.html +17 -0
  43. data/_layouts/post.html +42 -0
  44. data/_sass/persephone.scss +29 -0
  45. data/_sass/persephone/_archive.scss +140 -0
  46. data/_sass/persephone/_blog.scss +190 -0
  47. data/_sass/persephone/_book.scss +120 -0
  48. data/_sass/persephone/_chapter.scss +192 -0
  49. data/_sass/persephone/_comments.scss +208 -0
  50. data/_sass/persephone/_common.scss +110 -0
  51. data/_sass/persephone/_content.scss +278 -0
  52. data/_sass/persephone/_error.scss +16 -0
  53. data/_sass/persephone/_header.scss +140 -0
  54. data/_sass/persephone/_keyframes.scss +11 -0
  55. data/_sass/persephone/_list.scss +105 -0
  56. data/_sass/persephone/_minxins.scss +68 -0
  57. data/_sass/persephone/_post.scss +169 -0
  58. data/_sass/persephone/_slides.scss +264 -0
  59. data/_sass/persephone/_summary.scss +101 -0
  60. data/_sass/persephone/_variables.scss +15 -0
  61. data/assets/css/tomorrow.css +72 -0
  62. data/assets/js/highlight.js +2 -0
  63. data/assets/js/main.js +161 -0
  64. data/assets/main.scss +4 -0
  65. metadata +149 -0
@@ -0,0 +1,264 @@
1
+ .slide {
2
+ width: 100vw;
3
+ height: 100vh;
4
+ overflow: hidden;
5
+ }
6
+ .slide__section {
7
+ width: 100%;
8
+ height: 100%;
9
+ display: flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ position: absolute;
13
+ left: 0;
14
+ top: 0;
15
+ z-index: 1;
16
+ opacity: 0;
17
+ overflow: hidden;
18
+ }
19
+ .slide__section:first-child {
20
+ z-index: 5;
21
+ opacity: 1;
22
+ }
23
+ .slide__img {
24
+ height: 85%;
25
+ position: relative;
26
+ overflow: hidden;
27
+ }
28
+ .slide__img_placehold {
29
+ position: absolute;
30
+ left: 0;
31
+ top: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ transform: translateY(0);
35
+ background-color: var(--bg-color);
36
+ background-size: 100% 100%;
37
+ @include transition(all 0.35s ease);
38
+ transform-origin: 100% 100%;
39
+ }
40
+ .slide__img .slide__link:hover ~ .slide__img_placehold {
41
+ transform: scale(1.1);
42
+ }
43
+ .slide__img img {
44
+ height: 100%;
45
+ width: auto;
46
+ }
47
+ .slide__text {
48
+ z-index: 5;
49
+ position: relative;
50
+ height: 120px;
51
+ width: 275px;
52
+ margin-top: -10%;
53
+ }
54
+ .slide__link {
55
+ display: block;
56
+ width: 100%;
57
+ height: 100%;
58
+ position: absolute;
59
+ left: 0;
60
+ top: 0;
61
+ z-index: 6;
62
+ }
63
+ .slide__text_left {
64
+ margin-right: -10%;
65
+ text-align: right;
66
+ }
67
+ .slide__text_right {
68
+ margin-left: -10%;
69
+ text-align: left;
70
+ }
71
+ .slide__title {
72
+ width: 275px;
73
+ position: relative;
74
+ background-color: transparent;
75
+ min-height: 65px;
76
+ }
77
+ .slide__time {
78
+ display: inline-block;
79
+ margin-top: 0.5rem;
80
+ background-color: transparent;
81
+ height: 35px;
82
+ width: 120px;
83
+ position: relative;
84
+ }
85
+ .slide__title_inner, .slide__time_inner {
86
+ background-color: var(--dark);
87
+ opacity: 0;
88
+ width: 0;
89
+ height: 100%;
90
+ position: absolute;
91
+ top: 0;
92
+ }
93
+ .slide__text_left .slide__title_inner,
94
+ .slide__text_left .slide__time_inner {
95
+ right: 0;
96
+ }
97
+ .slide__text_right .slide__title_inner,
98
+ .slide__text_right .slide__time_inner {
99
+ left: 0;
100
+ }
101
+
102
+ .slide__title_text, .slide__time_text {
103
+ color: var(--white);
104
+ opacity: 0;
105
+ }
106
+ .slide__title_text {
107
+ padding: 0 20px;
108
+ line-height: 65px;
109
+ overflow: hidden;
110
+ text-overflow: ellipsis;
111
+ white-space: nowrap;
112
+ }
113
+ .slide__text_left .slide__title_text {
114
+ transform: translateX(100px);
115
+ }
116
+ .slide__text_right .slide__title_text {
117
+ transform: translateX(-100px);
118
+ }
119
+ .slide__time_text {
120
+ padding: 0 15px;
121
+ line-height: 35px;
122
+ text-align: center;
123
+ }
124
+ .slide__text_left .slide__time_text {
125
+ transform: translateX(40px);
126
+ }
127
+ .slide__text_right .slide__time_text {
128
+ transform: translateX(-40px);
129
+ }
130
+ .slide__desc {
131
+ position: absolute;
132
+ width: 80%;
133
+ top: 100%;
134
+ color: var(--gray);
135
+ opacity: 0;
136
+ transform: tranlateY(-100px);
137
+ }
138
+ .slide__text_left .slide__desc {
139
+ right: 60%;
140
+ }
141
+ .slide__text_right .slide__desc {
142
+ left: 60%;
143
+ }
144
+
145
+ .slide__controls {
146
+ position: fixed;
147
+ right: 3rem;
148
+ top: 0;
149
+ height: 100%;
150
+ display: flex;
151
+ width: 35px;
152
+ align-items: flex-end;
153
+ flex-direction: column;
154
+ justify-content: center;
155
+ z-index: 7;
156
+
157
+ }
158
+ .slide__control {
159
+ width: 100%;
160
+ height: 1.25rem;
161
+ display: inline-block;
162
+ cursor: pointer;
163
+ position: relative;
164
+ &:after {
165
+ content: "";
166
+ display: inline-block;
167
+ width: 65%;
168
+ height: 3px;
169
+ background-color: var(--gray-light);
170
+ position: absolute;
171
+ right: 0;
172
+ top: 50%;
173
+ margin-top: -1.5px;
174
+ @include transition(all 0.35s linear);
175
+ }
176
+ }
177
+ .slide__control:hover:after {
178
+ width: 100%;
179
+ }
180
+ .slide__control.current:after {
181
+ background-color: var(--dark);
182
+ width: 100%;;
183
+ }
184
+ .slide__control__icon {
185
+ display: inline-block;
186
+ width: 40px;
187
+ height: 40px;
188
+ border-radius: 50%;
189
+ position: relative;
190
+ margin-right: -10px;
191
+ cursor: pointer;
192
+ }
193
+ .slide__control__icon.slide__control_top {
194
+ margin-bottom: 3rem;
195
+ }
196
+ .slide__control__icon.slide__control_bottom {
197
+ margin-top: 3rem;
198
+ }
199
+ .circle-progress {
200
+ stroke: var(--gray-light);
201
+ fill: none;
202
+ stroke-width: 1;
203
+ stroke-dasharray: 0 120;
204
+ transition: all 0.45s ease-in;
205
+ }
206
+ .slide__control__icon:hover .circle-progress {
207
+ stroke-dasharray: 120 120;
208
+ }
209
+ .slide__control_arrow {
210
+ position: absolute;
211
+ height: 60%;
212
+ width: 2px;
213
+ left: calc(50% - 1px);
214
+ top: 20%;
215
+ background-color: var(--gray-light);
216
+ transition: all 0.25s ease-in;
217
+ }
218
+ .slide__control_arrow:after, .slide__control_arrow:before {
219
+ @include pseudo();
220
+ height: 50%;
221
+ width: 2px;
222
+ background-color: var(--gray-light);
223
+ }
224
+ .slide__control_up:after, .slide__control_up:before {
225
+ top: 0;
226
+ left: 0;
227
+ }
228
+ .slide__control_down:after, .slide__control_down:before {
229
+ bottom: 0;
230
+ left: 0;
231
+ }
232
+ .slide__control_up:before {
233
+ transform-origin: top right;
234
+ transform: rotate(-45deg);
235
+ }
236
+ .slide__control_up:after {
237
+ transform-origin: left top;
238
+ transform: rotate(45deg);
239
+ }
240
+ .slide__control_down:before {
241
+ transform-origin: bottom right;
242
+ transform: rotate(-45deg);
243
+ }
244
+ .slide__control_down:after {
245
+ transform-origin: left bottom;
246
+ transform: rotate(45deg);
247
+ }
248
+ @media screen and (max-width: 768px) {
249
+ .slide__controls, .slide__desc {
250
+ display: none;
251
+ }
252
+ .slide__img {
253
+ width: calc(100% - 3rem);
254
+ height: auto;
255
+ }
256
+ .slide__img img {
257
+ width: 100%;
258
+ height: auto;
259
+ }
260
+ .slide__text {
261
+ position: absolute;
262
+ margin-top: 0;
263
+ }
264
+ }
@@ -0,0 +1,101 @@
1
+ .book-summary {
2
+ position: absolute;
3
+ top: 0px;
4
+ left: -300px;
5
+ bottom: 0px;
6
+ z-index: 1;
7
+ overflow-y: auto;
8
+ width: 300px;
9
+ color: var(--grayer);
10
+ background: var(--white);
11
+ border-right: 1px solid rgba(0, 0, 0, 0.07);
12
+ -webkit-transition: left 250ms ease;
13
+ -moz-transition: left 250ms ease;
14
+ -o-transition: left 250ms ease;
15
+ transition: left 250ms ease;
16
+ &::-webkit-scrollbar {
17
+ width: 8px;
18
+ height: 1px;
19
+ }
20
+ &::-webkit-scrollbar-thumb {
21
+ border-radius: 8px;
22
+ background-color: var(--light);
23
+ }
24
+ &::-webkit-scrollbar-track {
25
+ border-radius: 8px;
26
+ background-color: var(--lightest);
27
+ }
28
+ }
29
+ .book-summary ul.summary {
30
+ list-style: none;
31
+ margin: 0px;
32
+ padding: 0px;
33
+ -webkit-transition: top 0.5s ease;
34
+ -moz-transition: top 0.5s ease;
35
+ -o-transition: top 0.5s ease;
36
+ transition: top 0.5s ease;
37
+ font-size: 16px;
38
+ }
39
+ .book-summary ul.summary li {
40
+ list-style: none;
41
+ }
42
+ .book-summary ul.summary li.header {
43
+ padding: 10px 15px;
44
+ padding-top: 20px;
45
+ text-transform: uppercase;
46
+ color: var(--gray);
47
+ }
48
+ .book-summary ul.summary li.divider {
49
+ height: 1px;
50
+ margin: 7px 0;
51
+ overflow: hidden;
52
+ background: rgba(0, 0, 0, 0.07);
53
+ }
54
+ .book-summary ul.summary li i.fa-check {
55
+ display: none;
56
+ position: absolute;
57
+ right: 9px;
58
+ top: 16px;
59
+ font-size: 9px;
60
+ color: #33cc33;
61
+ }
62
+ .book-summary ul.summary li.done > a {
63
+ color: var(--grayer);
64
+ font-weight: normal;
65
+ }
66
+ .book-summary ul.summary li.done > a i {
67
+ display: inline;
68
+ }
69
+ .book-summary ul.summary li a,
70
+ .book-summary ul.summary li span {
71
+ display: block;
72
+ padding: 10px 15px;
73
+ border-bottom: none;
74
+ color: var(--grayer);
75
+ background: transparent;
76
+ text-overflow: ellipsis;
77
+ overflow: hidden;
78
+ white-space: nowrap;
79
+ position: relative;
80
+ }
81
+ .book-summary ul.summary li a:hover {
82
+ text-decoration: underline;
83
+ }
84
+ .book-summary ul.summary li a:focus {
85
+ outline: none;
86
+ }
87
+ .book-summary ul.summary li.active > a {
88
+ color: var(--blue);
89
+ background: transparent;
90
+ text-decoration: none;
91
+ }
92
+ .book-summary ul.summary li ul {
93
+ padding-left: 20px;
94
+ }
95
+ @media (max-width: 600px) {
96
+ .book-summary {
97
+ width: calc(100% - 60px);
98
+ bottom: 0px;
99
+ left: -100%;
100
+ }
101
+ }
@@ -0,0 +1,15 @@
1
+ :root {
2
+ --dark: #343a40;
3
+ --grayer: #495057;
4
+ --gray: #6c757d;
5
+ --gray-light: #ced4da;
6
+ --light-gray: #adb5bd;
7
+ --light: #dee2e6;
8
+ --lighter: #e9ecef;
9
+ --lightest: #faf9fa;
10
+ --white: #fff;
11
+ --blue: #007bff;
12
+ --red: #dc3545;
13
+ --bg-color: var(--white);
14
+ --content-width: 750px;
15
+ }
@@ -0,0 +1,72 @@
1
+ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
2
+
3
+ /* Tomorrow Comment */
4
+ .hljs-comment,
5
+ .hljs-quote {
6
+ color: #8e908c;
7
+ }
8
+
9
+ /* Tomorrow Red */
10
+ .hljs-variable,
11
+ .hljs-template-variable,
12
+ .hljs-tag,
13
+ .hljs-name,
14
+ .hljs-selector-id,
15
+ .hljs-selector-class,
16
+ .hljs-regexp,
17
+ .hljs-deletion {
18
+ color: #c82829;
19
+ }
20
+
21
+ /* Tomorrow Orange */
22
+ .hljs-number,
23
+ .hljs-built_in,
24
+ .hljs-builtin-name,
25
+ .hljs-literal,
26
+ .hljs-type,
27
+ .hljs-params,
28
+ .hljs-meta,
29
+ .hljs-link {
30
+ color: #f5871f;
31
+ }
32
+
33
+ /* Tomorrow Yellow */
34
+ .hljs-attribute {
35
+ color: #eab700;
36
+ }
37
+
38
+ /* Tomorrow Green */
39
+ .hljs-string,
40
+ .hljs-symbol,
41
+ .hljs-bullet,
42
+ .hljs-addition {
43
+ color: #718c00;
44
+ }
45
+
46
+ /* Tomorrow Blue */
47
+ .hljs-title,
48
+ .hljs-section {
49
+ color: #4271ae;
50
+ }
51
+
52
+ /* Tomorrow Purple */
53
+ .hljs-keyword,
54
+ .hljs-selector-tag {
55
+ color: #8959a8;
56
+ }
57
+
58
+ .hljs {
59
+ display: block;
60
+ overflow-x: auto;
61
+ background: white;
62
+ color: #4d4d4c;
63
+ padding: 0.5em;
64
+ }
65
+
66
+ .hljs-emphasis {
67
+ font-style: italic;
68
+ }
69
+
70
+ .hljs-strong {
71
+ font-weight: bold;
72
+ }