spaacedout 1.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/LICENSE.haackbar +21 -0
  4. data/LICENSE.plainwhite-jekyll +21 -0
  5. data/README.md +131 -0
  6. data/_includes/comments/comments.html +3 -0
  7. data/_includes/comments/comments_link.html +3 -0
  8. data/_includes/comments/disqus_comments.html +20 -0
  9. data/_includes/comments/disqus_comments_link.html +7 -0
  10. data/_includes/end-notice.html +2 -0
  11. data/_includes/footer.html +3 -0
  12. data/_includes/head.html +22 -0
  13. data/_includes/head/google-adsense.html +1 -0
  14. data/_includes/head/google-analytics.html +6 -0
  15. data/_includes/head/stylesheets.html +4 -0
  16. data/_includes/head/twitter.html +8 -0
  17. data/_includes/header.html +43 -0
  18. data/_includes/info-notice.html +2 -0
  19. data/_includes/pagination.html +10 -0
  20. data/_includes/post/archive_post.html +19 -0
  21. data/_includes/post/edit.html +11 -0
  22. data/_includes/post/meta.html +23 -0
  23. data/_includes/post/tags.html +4 -0
  24. data/_includes/social-links.html +11 -0
  25. data/_includes/warning-notice.html +2 -0
  26. data/_layouts/default.html +14 -0
  27. data/_layouts/home.html +40 -0
  28. data/_layouts/page.html +14 -0
  29. data/_layouts/post.html +23 -0
  30. data/_sass/SpaacedOut.scss +3 -0
  31. data/_sass/core/base.scss +67 -0
  32. data/_sass/core/core.scss +8 -0
  33. data/_sass/core/footer.scss +6 -0
  34. data/_sass/core/header.scss +204 -0
  35. data/_sass/core/main.scss +19 -0
  36. data/_sass/core/notice.scss +16 -0
  37. data/_sass/core/post.scss +72 -0
  38. data/_sass/syntax-highlight.scss +156 -0
  39. data/_sass/variables/variables.scss +54 -0
  40. data/assets/js/utils.js +114 -0
  41. data/assets/pages/archives.md +14 -0
  42. data/assets/pages/tags.md +49 -0
  43. data/assets/style.scss +4 -0
  44. data/assets/syntax-highlight.scss +4 -0
  45. metadata +213 -0
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: site.lang | default: "en" }}">
3
+ {% include head.html %}
4
+ <body>
5
+ {% include header.html %}
6
+
7
+ <main class="page-content" aria-label="Content">
8
+
9
+ {{ content }}
10
+ </div>
11
+ {% include footer.html %}
12
+ </main>
13
+ </body>
14
+ </html>
@@ -0,0 +1,40 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
6
+ <div class="wrapper">
7
+ <div class="home">
8
+ {% if page.title %}
9
+ <h1 class="page-heading">{{ page.title }}</h1>
10
+ {% endif %}
11
+
12
+ {% if site.posts.size > 0 %}
13
+ <div class="posts-list">
14
+ {% for post in paginator.posts %}
15
+ {% unless post.redirect %}
16
+ <header class="post-header">
17
+ <h1 class="post-title p-name" itemprop="name headline"><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title | escape }}</a></h1>
18
+ {% include post/meta.html %}
19
+ </header>
20
+
21
+ <div class="post-content e-content" itemprop="articleBody">
22
+ {% if site.show_excerpts %}
23
+ <div class="excerpt">
24
+ {% if post.excerpt_image %}
25
+ <img src="{{post.excerpt_image }}" />
26
+ {% endif %}
27
+ {{ post.excerpt }}
28
+ <a href="{{ post.url }}" class="read-more">Read More</a>
29
+ </div>
30
+ {% else %}
31
+ {{ post.content }}
32
+ {% endif %}
33
+ </div>
34
+ {% endunless %}
35
+ {% endfor %}
36
+ </div>
37
+ {% include pagination.html %}
38
+ {% endif %}
39
+ </div>
40
+ </div>
@@ -0,0 +1,14 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <div class="wrapper">
6
+ <article class="page">
7
+ <header class="post-header">
8
+ <h1 class="post-title">{{ page.title | escape }}</h1>
9
+ </header>
10
+ <div class="post-content">
11
+ {{ content }}
12
+ </div>
13
+ </article>
14
+ </div>
@@ -0,0 +1,23 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <div class="wrapper">
6
+ <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
7
+ <header class="post-header">
8
+ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
9
+ {% include post/meta.html %}
10
+ </header>
11
+
12
+ <div class="post-content e-content" itemprop="articleBody">
13
+ {{ content }}
14
+ </div>
15
+ <span class="edit">Found a typo or mistake in the post? {% include post/edit.html %}</span>
16
+
17
+ {% if site.comments.enabled %}
18
+ {% include comments/comments.html %}
19
+ {% endif %}
20
+
21
+ <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
22
+ </article>
23
+ </div>
@@ -0,0 +1,3 @@
1
+ @import "variables/variables";
2
+
3
+ @import "core/core";
@@ -0,0 +1,67 @@
1
+ *,
2
+ *:before,
3
+ *:after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ color: $color-primary;
9
+ background-color: $color-background;
10
+ font-family:$font-standard;
11
+ font-size: $size-standard-font;
12
+ line-height: $size-standard-line-height;
13
+ margin: 0;
14
+ -webkit-font-smoothing: antialiased;
15
+ -moz-osx-font-smoothing: grayscale;
16
+ }
17
+
18
+ img,
19
+ embed,
20
+ object,
21
+ video {
22
+ max-width: 100%;
23
+ }
24
+
25
+ a {
26
+ color: $color-link;
27
+ transition: color $transition-time;
28
+ text-decoration: none;
29
+ &:hover {
30
+ color: $color-link-hover;
31
+ }
32
+ }
33
+
34
+ h1, h3, h5 {
35
+ font-weight: 900;
36
+ line-height: 1em;
37
+
38
+ a {
39
+ color: $color-secondary;
40
+ text-decoration: none;
41
+
42
+ &:hover {
43
+ color: $color-secondary;
44
+ }
45
+ }
46
+ }
47
+
48
+ h2, h4, h6 {
49
+ font-weight: 400;
50
+ line-height: 1em;
51
+
52
+ a {
53
+ text-decoration: none;
54
+ }
55
+ }
56
+
57
+ h1, h2 {
58
+ font-size: 2em;
59
+ }
60
+
61
+ h3, h4 {
62
+ font-size: 1.5em;
63
+ }
64
+
65
+ h5, h6 {
66
+ font-size: 1em;
67
+ }
@@ -0,0 +1,8 @@
1
+ @import "base";
2
+
3
+ @import "header";
4
+ @import "main";
5
+ @import "footer";
6
+
7
+ @import "post";
8
+ @import "notice";
@@ -0,0 +1,6 @@
1
+ footer {
2
+ font-family: $font-sans;
3
+ font-size: ($size-standard-font*.75);
4
+ color: $color-grey;
5
+ margin-top: 20px;
6
+ }
@@ -0,0 +1,204 @@
1
+ .header {
2
+ background-color: $color-header-background!important;
3
+ font-family: $font-sans;
4
+ position: fixed;
5
+ top: 0;
6
+ z-index: 2;
7
+
8
+ @media screen and (max-width: $media-breakpoint-sm-max) {
9
+ height: $size-about-pane-mobile;
10
+ padding: 15px;
11
+ width: 100%;
12
+ }
13
+
14
+ @media screen and (min-width: $media-breakpoint-md-min) {
15
+ height: 100%;
16
+ padding: 1%;
17
+ width: $size-about-pane;
18
+ max-width: 285px;
19
+ }
20
+
21
+ a, a:active, a:hover, a:visited {
22
+ text-decoration: none;
23
+ }
24
+
25
+ .site-avatar {
26
+ padding: 0 25%;
27
+ margin-bottom: 30px;
28
+ @media screen and (max-width: $media-breakpoint-sm-max) {
29
+ display: none;
30
+ }
31
+ z-index: 4;
32
+ }
33
+
34
+ .site-title {
35
+ font-family: $font-site-title;
36
+ font-size: $size-standard-font*2.5;
37
+ color: $color-white;
38
+ text-shadow: 0.15rem 0.15rem #000;
39
+ z-index: 6;
40
+ position: relative;
41
+ }
42
+
43
+ .site-subtitle {
44
+ color: $color-lightblue;
45
+ z-index: 8;
46
+ position: relative;
47
+ margin: 25px 0;
48
+ text-transform: uppercase;
49
+ font-size: 1.1em;
50
+ text-align: center;
51
+ }
52
+
53
+ .site-nav {
54
+ line-height: $size-standard-line-height * 1.2;
55
+
56
+ ul {
57
+ list-style-type: none;
58
+ margin-left: 0;
59
+ padding-top: 10%;
60
+ padding-left: 10px;
61
+
62
+ li {
63
+ font-size: 1.3em;
64
+ font-weight: 700;
65
+ line-height: $size-standard-line-height;
66
+ text-transform: lowercase;
67
+ padding: 10px 0;
68
+
69
+ a {
70
+ color: $color-white;
71
+
72
+ &:hover {
73
+ text-decoration: none;
74
+ color: $color-purple;
75
+ transition: color $transition-time;
76
+ }
77
+ }
78
+
79
+ &.current-page {
80
+ background: $color-header-background-active;
81
+ color: $color-orange;
82
+ margin-left: -10px;
83
+ padding-left: 10px;
84
+ width: $size-about-pane - 35px;
85
+
86
+ a, a:hover {
87
+ color: $color-orange;
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }
93
+
94
+ .social-links {
95
+ bottom: 0;
96
+ height: 80px;
97
+ left: 0;
98
+ position: absolute;
99
+ width: 100%;
100
+ z-index: 10;
101
+ background-color: $color-social-icons-background;
102
+
103
+ // If screen is resized too small, plop the footer in the bottom
104
+ @media screen and (max-height: 600px) {
105
+ //position: relative;
106
+ //display: none;
107
+ }
108
+
109
+ ul {
110
+ display: flex;
111
+ justify-content: space-between;
112
+ list-style-type: none;
113
+ margin: 20px 10px;
114
+ padding-left: 0;
115
+
116
+ li {
117
+ display: block;
118
+ margin: 0;
119
+ padding: 0;
120
+
121
+ a {
122
+ color: $color-social-icons-color;
123
+ font-size: 2em;
124
+
125
+ &:hover {
126
+ color: $color-social-icons-hover;
127
+ transition: color $transition-time;
128
+ }
129
+ }
130
+
131
+ } // .social-links ul li
132
+ } // .social-links ul
133
+ } // .social-links
134
+
135
+ .menu-toggle {
136
+ margin-left: auto;
137
+ z-index: 20;
138
+ display: none;
139
+
140
+ @media screen and (max-width: $media-breakpoint-sm-max) {
141
+ display: inline-block;
142
+ right: 10px;
143
+ top: 15px;
144
+ position: absolute;
145
+ cursor: pointer;
146
+ color: $color-lightgrey;
147
+ font-size: 1.2em;
148
+ }
149
+ }
150
+ } // header
151
+
152
+
153
+ @media screen and (max-width: $media-breakpoint-sm-max) {
154
+ .site-subtitle {
155
+ display: none;
156
+ }
157
+
158
+ .header .site-nav {
159
+ flex: 1;
160
+ padding-top: 10%;
161
+
162
+ ul {
163
+ padding-top: 10px!important;
164
+
165
+ li.current-page {
166
+ width: 100vw!important;
167
+ }
168
+ }
169
+ }
170
+
171
+ .main-navigation {
172
+ background-color: $color-header-background!important;
173
+ position: absolute;
174
+ -webkit-transition: right .3s ease-in-out !important;
175
+ transition: right .3s ease-in-out !important;
176
+ right: -100%;
177
+ width: 100%;
178
+ display: flex;
179
+ flex-direction: column;
180
+ min-height: 100vh;
181
+ top:0;
182
+ }
183
+
184
+ .social-links {
185
+ position: relative!important;
186
+ padding-top: 5px;
187
+ }
188
+
189
+ .menu--opened {
190
+ .page-content {
191
+ height: 100%;
192
+ left: 0;
193
+ top: 0;
194
+ -webkit-transform: translate3d(0, 0, 0);
195
+ transform: translate3d(0, 0, 0);
196
+ width: 100%;
197
+ }
198
+
199
+ .main-navigation, .site-nav, .social-links {
200
+ right: 0;
201
+ visibility: visible;
202
+ }
203
+ }
204
+ }
@@ -0,0 +1,19 @@
1
+ main.page-content {
2
+ @media screen and (max-width: $media-breakpoint-sm-max) {
3
+ margin-top: $size-about-pane-mobile;
4
+ padding: 15px;
5
+ }
6
+
7
+ @media screen and (min-width: $media-breakpoint-md-min) {
8
+ max-width: calc(100% - #{$size-about-pane});
9
+ margin-left: $size-about-pane;
10
+ width: 100%;
11
+ padding: 30px;
12
+ }
13
+
14
+ .wrapper {
15
+ display: block;
16
+ background-color: $color-white;
17
+ padding: 10px;
18
+ }
19
+ }
@@ -0,0 +1,16 @@
1
+ .notice {
2
+ margin: 30px 0;
3
+ padding: 10px;
4
+ border-radius: 5px;
5
+
6
+ &.info {
7
+ border: 1px solid $color-lightblue;
8
+ background-color: lighten($color-lightblue, 30%);
9
+ color: darken($color-lightblue, 30%);
10
+ }
11
+ &.warning {
12
+ border: 1px solid $color-red;
13
+ background-color: lighten($color-red, 30%);
14
+ color: darken($color-red, 30%);
15
+ }
16
+ }
@@ -0,0 +1,72 @@
1
+ .post-title a {
2
+ color: $color-blue!important;
3
+ }
4
+
5
+ .meta {
6
+ display: flex;
7
+ justify-content: space-between;
8
+ align-items: center;
9
+ color: $color-post-meta;
10
+
11
+ @media screen and (max-width: $media-breakpoint-sm-max) {
12
+ align-items: normal;
13
+ }
14
+
15
+ .tags {
16
+ list-style-type: none;
17
+ margin: 0;
18
+ padding: 0;
19
+
20
+ li {
21
+ float: left;
22
+ background-color: $color-lightgrey;
23
+ padding: 5px 20px;
24
+ border-radius: 2px;
25
+ margin-right: 10px;
26
+ margin-bottom: 10px;
27
+ text-transform: lowercase;
28
+
29
+ a {
30
+ color: $color-post-meta;
31
+ }
32
+ }
33
+ }
34
+
35
+ .meta-part {
36
+ display: inline-block;
37
+
38
+ @media screen and (max-width: $media-breakpoint-sm-max) {
39
+ display: block;
40
+ text-align: right;
41
+ }
42
+ }
43
+
44
+ .post-date {
45
+ margin-right: 10px;
46
+ min-width: 150px;
47
+ vertical-align: middle;
48
+ }
49
+
50
+ .vertical-bar {
51
+ font-family: $font-sans;
52
+ font-weight: 900;
53
+ font-size: 1.2em;
54
+ margin: 0 10px;
55
+ color: $color-lightgrey;
56
+
57
+ @media screen and (max-width: $media-breakpoint-sm-max) {
58
+ margin: 0;
59
+ display: none;
60
+ }
61
+ }
62
+
63
+ .edit {
64
+ margin-right: 0;
65
+ }
66
+ }
67
+
68
+ .tag_page {
69
+ .tag {
70
+ display: none;
71
+ }
72
+ }