chameleon-jekyll-theme 0.0.0

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.
@@ -0,0 +1,14 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post">
5
+
6
+ <header class="post-header">
7
+ <h1 class="post-title">{{ page.title | escape }}</h1>
8
+ </header>
9
+
10
+ <div class="post-content">
11
+ {{ content }}
12
+ </div>
13
+
14
+ </article>
@@ -0,0 +1,27 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
5
+
6
+ <header class="post-header">
7
+ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
8
+ <p class="post-meta">
9
+ <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
10
+ {%- assign date_format = site.chameleon.date_format | default: "%b %-d, %Y" -%}
11
+ {{ page.date | date: date_format }}
12
+ </time>
13
+ {%- if page.author -%}
14
+ • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
15
+ {%- endif -%}</p>
16
+ </header>
17
+
18
+ <div class="post-content e-content" itemprop="articleBody">
19
+ {{ content }}
20
+ </div>
21
+
22
+ {%- if site.disqus.shortname -%}
23
+ {%- include disqus_comments.html -%}
24
+ {%- endif -%}
25
+
26
+ <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
27
+ </article>
@@ -0,0 +1,67 @@
1
+ @charset "utf-8";
2
+
3
+ // Define defaults for each variable.
4
+
5
+ $base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
6
+ $base-font-size: 16px !default;
7
+ $base-font-weight: 400 !default;
8
+ $small-font-size: $base-font-size * 0.875 !default;
9
+ $base-line-height: 1.5 !default;
10
+
11
+ $spacing-unit: 30px !default;
12
+
13
+ //# 17 on http://blog.visme.co/website-color-schemes/
14
+ // #747474 dark grey,
15
+ // #FFE400 yellow brand, #FF652F orange brand, #1476C green brand
16
+ //
17
+ //$text-color: #FFE400 !default;
18
+ //$background-color: #272727 !default;
19
+ //$brand-color: #2a7ae2 !default;
20
+
21
+ //$grey-color: #747474 !default;
22
+ //$grey-color-light: lighten($grey-color, 40%) !default;
23
+ //$grey-color-dark: darken($grey-color, 25%) !default;
24
+
25
+ // So I know its not Maxima
26
+ $background-color: #EDC7B7 !default;
27
+
28
+ // Mimina
29
+ $text-color: #111 !default;
30
+ //$background-color: #fdfdfd !default;
31
+ $brand-color: #2a7ae2 !default;
32
+
33
+ $grey-color: #828282 !default;
34
+ $grey-color-light: lighten($grey-color, 40%) !default;
35
+ $grey-color-dark: darken($grey-color, 25%) !default;
36
+
37
+ $table-text-align: left !default;
38
+
39
+ // Width of the content area
40
+ $content-width: 800px !default;
41
+
42
+ $on-palm: 600px !default;
43
+ $on-laptop: 800px !default;
44
+
45
+ // Use media queries like this:
46
+ // @include media-query($on-palm) {
47
+ // .wrapper {
48
+ // padding-right: $spacing-unit / 2;
49
+ // padding-left: $spacing-unit / 2;
50
+ // }
51
+ // }
52
+ @mixin media-query($device) {
53
+ @media screen and (max-width: $device) {
54
+ @content;
55
+ }
56
+ }
57
+
58
+ @mixin relative-font-size($ratio) {
59
+ font-size: $base-font-size * $ratio;
60
+ }
61
+
62
+ // Import partials.
63
+ @import
64
+ "chameleon/base",
65
+ "chameleon/layout",
66
+ "chameleon/syntax-highlighting"
67
+ ;
@@ -0,0 +1,254 @@
1
+ /**
2
+ * Reset some basic elements
3
+ */
4
+ body, h1, h2, h3, h4, h5, h6,
5
+ p, blockquote, pre, hr,
6
+ dl, dd, ol, ul, figure {
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+
11
+
12
+
13
+ /**
14
+ * Basic styling
15
+ */
16
+ body {
17
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
18
+ color: $text-color;
19
+ background-color: $background-color;
20
+ -webkit-text-size-adjust: 100%;
21
+ -webkit-font-feature-settings: "kern" 1;
22
+ -moz-font-feature-settings: "kern" 1;
23
+ -o-font-feature-settings: "kern" 1;
24
+ font-feature-settings: "kern" 1;
25
+ font-kerning: normal;
26
+ display: flex;
27
+ min-height: 100vh;
28
+ flex-direction: column;
29
+ }
30
+
31
+
32
+
33
+ /**
34
+ * Set `margin-bottom` to maintain vertical rhythm
35
+ */
36
+ h1, h2, h3, h4, h5, h6,
37
+ p, blockquote, pre,
38
+ ul, ol, dl, figure,
39
+ %vertical-rhythm {
40
+ margin-bottom: $spacing-unit / 2;
41
+ }
42
+
43
+
44
+
45
+ /**
46
+ * `main` element
47
+ */
48
+ main {
49
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
50
+ }
51
+
52
+
53
+
54
+ /**
55
+ * Images
56
+ */
57
+ img {
58
+ max-width: 100%;
59
+ vertical-align: middle;
60
+ }
61
+
62
+
63
+
64
+ /**
65
+ * Figures
66
+ */
67
+ figure > img {
68
+ display: block;
69
+ }
70
+
71
+ figcaption {
72
+ font-size: $small-font-size;
73
+ }
74
+
75
+
76
+
77
+ /**
78
+ * Lists
79
+ */
80
+ ul, ol {
81
+ margin-left: $spacing-unit;
82
+ }
83
+
84
+ li {
85
+ > ul,
86
+ > ol {
87
+ margin-bottom: 0;
88
+ }
89
+ }
90
+
91
+
92
+
93
+ /**
94
+ * Headings
95
+ */
96
+ h1, h2, h3, h4, h5, h6 {
97
+ font-weight: $base-font-weight;
98
+ }
99
+
100
+
101
+
102
+ /**
103
+ * Links
104
+ */
105
+ a {
106
+ color: $brand-color;
107
+ text-decoration: none;
108
+
109
+ &:visited {
110
+ color: darken($brand-color, 15%);
111
+ }
112
+
113
+ &:hover {
114
+ color: $text-color;
115
+ text-decoration: underline;
116
+ }
117
+
118
+ .social-media-list &:hover {
119
+ text-decoration: none;
120
+
121
+ .username {
122
+ text-decoration: underline;
123
+ }
124
+ }
125
+ }
126
+
127
+
128
+ /**
129
+ * Blockquotes
130
+ */
131
+ blockquote {
132
+ color: $grey-color;
133
+ border-left: 4px solid $grey-color-light;
134
+ padding-left: $spacing-unit / 2;
135
+ @include relative-font-size(1.125);
136
+ letter-spacing: -1px;
137
+ font-style: italic;
138
+
139
+ > :last-child {
140
+ margin-bottom: 0;
141
+ }
142
+ }
143
+
144
+
145
+
146
+ /**
147
+ * Code formatting
148
+ */
149
+ pre,
150
+ code {
151
+ @include relative-font-size(0.9375);
152
+ border: 1px solid $grey-color-light;
153
+ border-radius: 3px;
154
+ background-color: #eef;
155
+ }
156
+
157
+ code {
158
+ padding: 1px 5px;
159
+ }
160
+
161
+ pre {
162
+ padding: 8px 12px;
163
+ overflow-x: auto;
164
+
165
+ > code {
166
+ border: 0;
167
+ padding-right: 0;
168
+ padding-left: 0;
169
+ }
170
+ }
171
+
172
+
173
+
174
+ /**
175
+ * Wrapper
176
+ */
177
+ .wrapper {
178
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
179
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
180
+ margin-right: auto;
181
+ margin-left: auto;
182
+ padding-right: $spacing-unit;
183
+ padding-left: $spacing-unit;
184
+ @extend %clearfix;
185
+
186
+ @include media-query($on-laptop) {
187
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
188
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
189
+ padding-right: $spacing-unit / 2;
190
+ padding-left: $spacing-unit / 2;
191
+ }
192
+ }
193
+
194
+
195
+
196
+ /**
197
+ * Clearfix
198
+ */
199
+ %clearfix:after {
200
+ content: "";
201
+ display: table;
202
+ clear: both;
203
+ }
204
+
205
+
206
+
207
+ /**
208
+ * Icons
209
+ */
210
+
211
+ .svg-icon {
212
+ width: 16px;
213
+ height: 16px;
214
+ display: inline-block;
215
+ fill: #{$grey-color};
216
+ padding-right: 5px;
217
+ vertical-align: text-top;
218
+ }
219
+
220
+ .social-media-list {
221
+ li + li {
222
+ padding-top: 5px;
223
+ }
224
+ }
225
+
226
+
227
+
228
+ /**
229
+ * Tables
230
+ */
231
+ table {
232
+ margin-bottom: $spacing-unit;
233
+ width: 100%;
234
+ text-align: $table-text-align;
235
+ color: lighten($text-color, 18%);
236
+ border-collapse: collapse;
237
+ border: 1px solid $grey-color-light;
238
+ tr {
239
+ &:nth-child(even) {
240
+ background-color: lighten($grey-color-light, 6%);
241
+ }
242
+ }
243
+ th, td {
244
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
245
+ }
246
+ th {
247
+ background-color: lighten($grey-color-light, 3%);
248
+ border: 1px solid darken($grey-color-light, 4%);
249
+ border-bottom-color: darken($grey-color-light, 12%);
250
+ }
251
+ td {
252
+ border: 1px solid $grey-color-light;
253
+ }
254
+ }
@@ -0,0 +1,255 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ border-top: 5px solid $grey-color-dark;
6
+ border-bottom: 1px solid $grey-color-light;
7
+ min-height: $spacing-unit * 1.865;
8
+
9
+ // Positioning context for the mobile navigation icon
10
+ position: relative;
11
+ }
12
+
13
+ .site-title {
14
+ @include relative-font-size(1.625);
15
+ font-weight: 300;
16
+ line-height: $base-line-height * $base-font-size * 2.25;
17
+ letter-spacing: -1px;
18
+ margin-bottom: 0;
19
+ float: left;
20
+
21
+ &,
22
+ &:visited {
23
+ color: $grey-color-dark;
24
+ }
25
+ }
26
+
27
+ .site-nav {
28
+ float: right;
29
+ line-height: $base-line-height * $base-font-size * 2.25;
30
+
31
+ .nav-trigger {
32
+ display: none;
33
+ }
34
+
35
+ .menu-icon {
36
+ display: none;
37
+ }
38
+
39
+ .page-link {
40
+ color: $text-color;
41
+ line-height: $base-line-height;
42
+
43
+ // Gaps between nav items, but not on the last one
44
+ &:not(:last-child) {
45
+ margin-right: 20px;
46
+ }
47
+ }
48
+
49
+ @include media-query($on-palm) {
50
+ position: absolute;
51
+ top: 9px;
52
+ right: $spacing-unit / 2;
53
+ background-color: $background-color;
54
+ border: 1px solid $grey-color-light;
55
+ border-radius: 5px;
56
+ text-align: right;
57
+
58
+ label[for="nav-trigger"] {
59
+ display: block;
60
+ float: right;
61
+ width: 36px;
62
+ height: 36px;
63
+ z-index: 2;
64
+ cursor: pointer;
65
+ }
66
+
67
+ .menu-icon {
68
+ display: block;
69
+ float: right;
70
+ width: 36px;
71
+ height: 26px;
72
+ line-height: 0;
73
+ padding-top: 10px;
74
+ text-align: center;
75
+
76
+ > svg {
77
+ fill: $grey-color-dark;
78
+ }
79
+ }
80
+
81
+ input ~ .trigger {
82
+ clear: both;
83
+ display: none;
84
+ }
85
+
86
+ input:checked ~ .trigger {
87
+ display: block;
88
+ padding-bottom: 5px;
89
+ }
90
+
91
+ .page-link {
92
+ display: block;
93
+ padding: 5px 10px;
94
+
95
+ &:not(:last-child) {
96
+ margin-right: 0;
97
+ }
98
+ margin-left: 20px;
99
+ }
100
+ }
101
+ }
102
+
103
+
104
+
105
+ /**
106
+ * Site footer
107
+ */
108
+ .site-footer {
109
+ border-top: 1px solid $grey-color-light;
110
+ padding: $spacing-unit 0;
111
+ }
112
+
113
+ .footer-heading {
114
+ @include relative-font-size(1.125);
115
+ margin-bottom: $spacing-unit / 2;
116
+ }
117
+
118
+ .contact-list,
119
+ .social-media-list {
120
+ list-style: none;
121
+ margin-left: 0;
122
+ }
123
+
124
+ .footer-col-wrapper {
125
+ @include relative-font-size(0.9375);
126
+ color: $grey-color;
127
+ margin-left: -$spacing-unit / 2;
128
+ @extend %clearfix;
129
+ }
130
+
131
+ .footer-col {
132
+ float: left;
133
+ margin-bottom: $spacing-unit / 2;
134
+ padding-left: $spacing-unit / 2;
135
+ }
136
+
137
+ .footer-col-1 {
138
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
139
+ width: calc(35% - (#{$spacing-unit} / 2));
140
+ }
141
+
142
+ .footer-col-2 {
143
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
144
+ width: calc(20% - (#{$spacing-unit} / 2));
145
+ }
146
+
147
+ .footer-col-3 {
148
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
149
+ width: calc(45% - (#{$spacing-unit} / 2));
150
+ }
151
+
152
+ @include media-query($on-laptop) {
153
+ .footer-col-1,
154
+ .footer-col-2 {
155
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
156
+ width: calc(50% - (#{$spacing-unit} / 2));
157
+ }
158
+
159
+ .footer-col-3 {
160
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
161
+ width: calc(100% - (#{$spacing-unit} / 2));
162
+ }
163
+ }
164
+
165
+ @include media-query($on-palm) {
166
+ .footer-col {
167
+ float: none;
168
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
169
+ width: calc(100% - (#{$spacing-unit} / 2));
170
+ }
171
+ }
172
+
173
+
174
+
175
+ /**
176
+ * Page content
177
+ */
178
+ .page-content {
179
+ padding: $spacing-unit 0;
180
+ flex: 1 0 auto;
181
+ }
182
+
183
+ .page-heading {
184
+ @include relative-font-size(2);
185
+ }
186
+
187
+ .post-list-heading {
188
+ @include relative-font-size(1.75);
189
+ }
190
+
191
+ .post-list {
192
+ margin-left: 0;
193
+ list-style: none;
194
+
195
+ > li {
196
+ margin-bottom: $spacing-unit;
197
+ }
198
+ }
199
+
200
+ .post-meta {
201
+ font-size: $small-font-size;
202
+ color: $grey-color;
203
+ }
204
+
205
+ .post-link {
206
+ display: block;
207
+ @include relative-font-size(1.5);
208
+ }
209
+
210
+
211
+
212
+ /**
213
+ * Posts
214
+ */
215
+ .post-header {
216
+ margin-bottom: $spacing-unit;
217
+ }
218
+
219
+ .post-title {
220
+ @include relative-font-size(2.625);
221
+ letter-spacing: -1px;
222
+ line-height: 1;
223
+
224
+ @include media-query($on-laptop) {
225
+ @include relative-font-size(2.25);
226
+ }
227
+ }
228
+
229
+ .post-content {
230
+ margin-bottom: $spacing-unit;
231
+
232
+ h2 {
233
+ @include relative-font-size(2);
234
+
235
+ @include media-query($on-laptop) {
236
+ @include relative-font-size(1.75);
237
+ }
238
+ }
239
+
240
+ h3 {
241
+ @include relative-font-size(1.625);
242
+
243
+ @include media-query($on-laptop) {
244
+ @include relative-font-size(1.375);
245
+ }
246
+ }
247
+
248
+ h4 {
249
+ @include relative-font-size(1.25);
250
+
251
+ @include media-query($on-laptop) {
252
+ @include relative-font-size(1.125);
253
+ }
254
+ }
255
+ }