kids 0.1.1 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fdcc497f099b822c14dcfc3807ecf5aff725b17e826494801e6fde7e367ea5d3
4
- data.tar.gz: 734f0c8ec32dac3fc99c6d882b500cd83c54182a36200c7fe81e5eb7f05b4431
3
+ metadata.gz: a9c364afdc0cdda3a22eba31e7970a31eb9054333bfda0b2075a1503605e619e
4
+ data.tar.gz: a122b0797a848b5007622e67fdc128a523c33701c5e76dcab9214028edd5a16a
5
5
  SHA512:
6
- metadata.gz: fc1c8989ffc57599a31a2e45bcfd7be878cea30d8e5669bd65cdea70e5391ab89ee43686028dfa48124664b348bc4d661eb53fffd1086047b4b41271ca5d6bd9
7
- data.tar.gz: bfcd3b3a8377d41b817c2a8390a61d21e875c3feae1e1f945029611c1141e9193a74f97671c3132a355062ffba757ce483fb90774ef8988177d3ed54b90452bf
6
+ metadata.gz: 43ead2acb16b41cc1b47f566c0badecfdb271dc20bb98a1b01dfdaa9c6694a654a70e8cfc9dbfe9ba0baad49e6f81388be1fe9450ce9bc7576555f783e27b9cb
7
+ data.tar.gz: 17ebda58180ffa50bf8b8feec0e87f7a90bee7a454d22af25e26c269dedf6a752c974ab258a20dadf9cd90aa8afb97b092fcd5658a7227fad9404a21e336ea27
@@ -0,0 +1,28 @@
1
+ {%- assign locale = site.lang | 'en' -%}
2
+
3
+ <div id="related-pages">
4
+ {%- if page.previous -%}
5
+ {%- assign previous = page.previous -%}
6
+ <div id="related-page-previous">
7
+ <p class="related-page-heading">{{ 'common.previous' | translate: locale }}</p>
8
+ <p class="related-page-title">
9
+ <a href="{{ previous.url | relative_url }}">
10
+ {{ previous.title }}
11
+ </a>
12
+ </p>
13
+ <p class="related-page-date">{{ previous.date | i18n_date: 'default', locale }}</p>
14
+ </div>
15
+ {%- endif -%}
16
+ {%- if page.next -%}
17
+ {%- assign next = page.next -%}
18
+ <div id="related-page-next">
19
+ <p class="related-page-heading">{{ 'common.next' | translate: locale }}</p>
20
+ <p class="related-page-title">
21
+ <a href="{{ next.url | relative_url }}">
22
+ {{ next.title }}
23
+ </a>
24
+ </p>
25
+ <p class="related-page-date">{{ next.date | i18n_date: 'default', locale }}</p>
26
+ </div>
27
+ {%- endif -%}
28
+ </div>
@@ -11,18 +11,15 @@ layout: default
11
11
  <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
12
12
  <ul class="post-list">
13
13
  {%- for post in site.posts limit:site.kids.home_posts -%}
14
- {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
15
14
  <li>
16
- <article>
17
- <div class="title-wrapper">
18
- <h3>
19
- <a class="post-link" href="{{ post.url | relative_url }}">
15
+ <article class="post-list-item">
16
+ <div class="post-link">
17
+ <a href="{{ post.url | relative_url }}">
20
18
  {{ post.title | escape }}
21
19
  </a>
22
- </h3>
23
- <span class="post-meta">{{ post.date | date: date_format }}</span>
24
20
  </div>
25
- <div>
21
+ <div class="post-meta">{{ post.date | i18n_date: 'default', site.lang }}</div>
22
+ <div class="post-excerpt">
26
23
  {%- if site.show_excerpts -%}
27
24
  {{ post.excerpt | markdownify }}
28
25
  {%- endif -%}
@@ -7,17 +7,22 @@ layout: default
7
7
  <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
8
8
  <p class="post-meta">
9
9
  <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
10
- {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
11
- {{ page.date | date: date_format }}
10
+ {{ page.date | i18n_date: 'default', site.lang }}
12
11
  </time>
13
12
  {%- if page.author -%}
14
13
  • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author | escape }}</span></span>
15
14
  {%- endif -%}</p>
16
15
  </div>
17
16
 
17
+ {%- if page.cover -%}
18
+ {% asset '{{ page.cover }}' title='{{ page.cover_alt }}' %}
19
+ {%- endif -%}
20
+
18
21
  <div class="post-content e-content" itemprop="articleBody">
19
22
  {{ content }}
20
23
  </div>
21
24
 
22
25
  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
26
+
27
+ {%- include related-pages.html -%}
23
28
  </article>
@@ -1,11 +1,24 @@
1
1
  @charset "utf-8";
2
2
 
3
3
  // Define defaults for each variable.
4
+ $background-color: #fff;
4
5
  $text-color: #333;
5
- $accent-color: #0d9;
6
+
7
+ $background-color-dark: #333;
8
+ $text-color-dark: #fff;
9
+
10
+ $text-color-subdued: #666;
11
+ $text-color-subdued-dark: #aaa;
12
+
13
+ $accent-color: #16d;
14
+ $accent-color-dark: #5af;
15
+
6
16
  $accent-inverted: #fff;
17
+ $accent-inverted-dark: #333;
18
+
7
19
  $accent-inverted-active: #ccc;
20
+ $accent-inverted-active-dark: #666;
8
21
 
9
22
  // Import partials.
10
- @import "kids/base", "kids/images", "kids/layout", "kids/links",
11
- "kids/typography";
23
+ @import "kids/base", "kids/images", "kids/index", "kids/layout", "kids/links",
24
+ "kids/related_pages", "kids/typography";
@@ -5,6 +5,10 @@ body {
5
5
 
6
6
  #site-title {
7
7
  color: $accent-color;
8
+ @media (prefers-color-scheme: dark) {
9
+ color: $accent-color-dark;
10
+ }
11
+
8
12
  font-size: 1.5rem;
9
13
  font-weight: bold;
10
14
  letter-spacing: -1px;
@@ -14,5 +18,10 @@ body {
14
18
  outline: 0;
15
19
  color: $accent-inverted;
16
20
  background-color: $accent-color;
21
+
22
+ @media (prefers-color-scheme: dark) {
23
+ color: $accent-inverted-dark;
24
+ background-color: $accent-color-dark;
25
+ }
17
26
  }
18
27
  }
@@ -2,3 +2,65 @@ img {
2
2
  display: block;
3
3
  max-width: 100%;
4
4
  }
5
+
6
+ video {
7
+ display: block;
8
+ max-width: 100%;
9
+ }
10
+
11
+ /**
12
+ Responsive embed from getbootstrap:
13
+ cf. https://raw.githubusercontent.com/twbs/bootstrap/14cb65f702defde25a59cf419c078e32e2f1d20d/scss/helpers/_embed.scss
14
+ */
15
+
16
+ .embed-responsive {
17
+ position: relative;
18
+ width: 100%;
19
+
20
+ &::before {
21
+ display: block;
22
+ content: "";
23
+ }
24
+
25
+ .embed-responsive-item,
26
+ iframe,
27
+ embed,
28
+ object,
29
+ video {
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ width: 100%;
34
+ height: 100%;
35
+ border: 0;
36
+ }
37
+ }
38
+
39
+ // scss-docs-start embed-responsive-aspect-ratios
40
+ $embed-responsive-aspect-ratios: (
41
+ "21by9": (
42
+ x: 21,
43
+ y: 9,
44
+ ),
45
+ "16by9": (
46
+ x: 16,
47
+ y: 9,
48
+ ),
49
+ "4by3": (
50
+ x: 4,
51
+ y: 3,
52
+ ),
53
+ "1by1": (
54
+ x: 1,
55
+ y: 1,
56
+ ),
57
+ ) !default;
58
+ // scss-docs-end embed-responsive-aspect-ratios
59
+
60
+ @each $key, $ratio in $embed-responsive-aspect-ratios {
61
+ .embed-responsive-#{$key} {
62
+ &::before {
63
+ padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
64
+ }
65
+ }
66
+ }
@@ -0,0 +1,21 @@
1
+ .post-list {
2
+ .post-list-item {
3
+ display: flex;
4
+ flex-flow: row wrap;
5
+ align-items: baseline;
6
+
7
+ .post-link {
8
+ order: 1;
9
+ margin: 0.2rem 0.8rem 0 0;
10
+ }
11
+
12
+ .post-meta {
13
+ order: 2;
14
+ }
15
+
16
+ .post-excerpt {
17
+ flex: 1 1 100%;
18
+ order: 3;
19
+ }
20
+ }
21
+ }
@@ -62,25 +62,6 @@ main {
62
62
  li {
63
63
  margin-bottom: 2em;
64
64
  }
65
-
66
- article {
67
- display: flex;
68
- flex-flow: column nowrap;
69
-
70
- .title-wrapper {
71
- display: flex;
72
- align-items: baseline;
73
-
74
- h3 {
75
- padding: 0;
76
- margin: 0;
77
- }
78
-
79
- > * + * {
80
- margin-left: 1em;
81
- }
82
- }
83
- }
84
65
  }
85
66
  }
86
67
 
@@ -1,26 +1,88 @@
1
+ $button-border: darken($accent-color, 8%);
2
+ $button-border-dark: lighten($accent-color-dark, 8%);
3
+
1
4
  a {
2
- &:link {
3
- color: inherit;
4
- text-decoration-color: $accent-color;
5
- text-decoration-line: underline;
6
- text-underline-position: under;
7
- }
5
+ &:not(.button) {
6
+ &:link {
7
+ color: $accent-color;
8
+ text-decoration-color: $accent-color;
9
+
10
+ @media (prefers-color-scheme: dark) {
11
+ color: $accent-color-dark;
12
+ text-decoration-color: $accent-color-dark;
13
+ }
14
+
15
+ text-decoration-line: underline;
16
+ text-underline-position: under;
17
+ }
18
+
19
+ &:visited {
20
+ color: $accent-color;
21
+ text-decoration-color: $accent-color;
22
+
23
+ @media (prefers-color-scheme: dark) {
24
+ color: $accent-color-dark;
25
+ text-decoration-color: $accent-color-dark;
26
+ }
27
+
28
+ text-decoration-line: underline;
29
+ }
30
+
31
+ &:hover,
32
+ &:focus {
33
+ outline: 0;
34
+ color: $accent-inverted;
35
+ background-color: $accent-color;
36
+
37
+ @media (prefers-color-scheme: dark) {
38
+ color: $accent-inverted-dark;
39
+ background-color: $accent-color-dark;
40
+ }
8
41
 
9
- &:visited {
10
- color: inherit;
11
- text-decoration-color: $accent-color;
12
- text-decoration-line: underline;
42
+ padding: 8px;
43
+ margin: -8px;
44
+ }
45
+
46
+ &:active {
47
+ color: $accent-inverted-active;
48
+ @media (prefers-color-scheme: dark) {
49
+ color: $accent-inverted-active-dark;
50
+ }
51
+ }
13
52
  }
14
53
 
15
- &:hover,
16
- &:focus {
17
- outline: 0;
18
- color: $accent-inverted;
54
+ &.button {
55
+ -moz-appearance: none;
56
+ -webkit-appearance: none;
57
+ text-decoration: none;
58
+
19
59
  background-color: $accent-color;
20
- padding: 8px;
21
- margin: -8px;
22
- transform: rotate(45deg);
23
- }
60
+ color: $accent-inverted;
61
+ border: 1px solid $button-border;
24
62
 
25
- &:active { color: $accent-inverted-active; }
63
+ @media (prefers-color-scheme: dark) {
64
+ background-color: $accent-color-dark;
65
+ color: $accent-inverted-dark;
66
+ border: 1px solid $button-border-dark;
67
+ }
68
+
69
+ align-items: center;
70
+ border-radius: 4px;
71
+ box-shadow: none;
72
+ display: inline-flex;
73
+ font-size: inherit;
74
+ justify-content: center;
75
+ padding: 0.5em 1em;
76
+ position: relative;
77
+ vertical-align: top;
78
+
79
+ cursor: pointer;
80
+
81
+ &:hover {
82
+ background-color: $button-border;
83
+ @media (prefers-color-scheme: dark) {
84
+ background-color: $button-border-dark;
85
+ }
86
+ }
87
+ }
26
88
  }
@@ -0,0 +1,102 @@
1
+ #related-pages {
2
+ border-top: 1px solid $accent-inverted-active;
3
+ border-bottom: 1px solid $accent-inverted-active;
4
+
5
+ @media (prefers-color-scheme: dark) {
6
+ border-top: 1px solid $accent-inverted-active-dark;
7
+ border-bottom: 1px solid $accent-inverted-active-dark;
8
+ }
9
+
10
+ display: flex;
11
+ flex-flow: row nowrap;
12
+ justify-content: space-between;
13
+ margin: 3rem 0 0 0;
14
+
15
+ @media screen and (max-width: 767px) {
16
+ flex-flow: column nowrap;
17
+ }
18
+ }
19
+
20
+ #related-page-previous,
21
+ #related-page-next {
22
+ align-content: flex-start;
23
+ align-items: baseline;
24
+ box-sizing: border-box;
25
+ display: flex;
26
+ flex-flow: row wrap;
27
+ padding: 0.5rem 0;
28
+
29
+ @media screen and (min-width: 768px) {
30
+ flex: 0 0 50%;
31
+ }
32
+
33
+ p {
34
+ margin: 0;
35
+ }
36
+ }
37
+
38
+ #related-page-previous {
39
+ text-align: left;
40
+ justify-content: flex-start;
41
+
42
+ @media screen and (min-width: 768px) {
43
+ border-right: 1px solid $accent-inverted-active;
44
+ @media (prefers-color-scheme: dark) {
45
+ border-right: 1px solid $accent-inverted-active-dark;
46
+ }
47
+ padding-right: 1rem;
48
+ }
49
+
50
+ .related-page-heading {
51
+ margin-right: 0.5rem;
52
+ order: 1;
53
+ }
54
+
55
+ .related-page-date {
56
+ order: 2;
57
+ }
58
+ }
59
+
60
+ #related-page-next {
61
+ text-align: right;
62
+ justify-content: flex-end;
63
+
64
+ @media screen and (min-width: 768px) {
65
+ padding-left: 1rem;
66
+ }
67
+
68
+ .related-page-heading {
69
+ margin-left: 0.5rem;
70
+ order: 2;
71
+ }
72
+
73
+ .related-page-date {
74
+ order: 1;
75
+ }
76
+ }
77
+
78
+ .related-page-heading {
79
+ color: $text-color-subdued;
80
+ @media (prefers-color-scheme: dark) {
81
+ color: $text-color-subdued-dark;
82
+ }
83
+
84
+ font-weight: 600;
85
+ font-size: 0.85rem;
86
+ text-transform: uppercase;
87
+ }
88
+
89
+ .related-page-title {
90
+ flex: 0 0 100%;
91
+ font-weight: 400;
92
+ padding: 0.1rem 0 0.1rem 0;
93
+ order: 3;
94
+ }
95
+
96
+ .related-page-date {
97
+ color: $text-color-subdued;
98
+ @media (prefers-color-scheme: dark) {
99
+ color: $text-color-subdued-dark;
100
+ }
101
+ font-size: 0.85rem;
102
+ }
@@ -1,5 +1,12 @@
1
1
  html {
2
+ background-color: $background-color;
2
3
  color: $text-color;
4
+
5
+ @media (prefers-color-scheme: dark) {
6
+ background-color: $background-color-dark;
7
+ color: $text-color-dark;
8
+ }
9
+
3
10
  font-family: "Inter", -apple-system, sans-serif;
4
11
  font-size: 100%;
5
12
  line-height: 1.42;
@@ -14,18 +21,39 @@ main {
14
21
  hyphens: auto;
15
22
 
16
23
  .post-header {
17
- margin-bottom: 1em;
24
+ margin-bottom: 2rem;
25
+ }
26
+
27
+ .post-meta {
28
+ color: $text-color-subdued;
29
+ @media (prefers-color-scheme: dark) {
30
+ color: $text-color-subdued-dark;
31
+ }
18
32
  }
19
33
 
20
34
  p {
21
35
  margin: 0 auto;
22
36
  }
23
37
 
24
- p + p {
25
- text-indent: 1em;
38
+ .post-content {
39
+ p + p {
40
+ text-indent: 1em;
41
+ }
42
+
43
+ blockquote {
44
+ margin: 0;
45
+ padding: 0 1em;
46
+ border-left: 4px solid $accent-color;
47
+
48
+ p:last-child {
49
+ text-indent: 0;
50
+ }
51
+ }
26
52
  }
27
53
 
28
- img {
54
+ p ~ div,
55
+ img,
56
+ video {
29
57
  padding: 1em 0;
30
58
  }
31
59
 
@@ -33,8 +61,8 @@ main {
33
61
  hanging-punctuation: first;
34
62
  }
35
63
 
36
- li + li {
37
- margin-top: 0.5em;
64
+ li > ul {
65
+ padding-left: 2rem;
38
66
  }
39
67
 
40
68
  @media (min-width: 1024px) {
@@ -48,15 +76,18 @@ main {
48
76
 
49
77
  h1,
50
78
  h2,
51
- h3 {
79
+ h3,
80
+ .post-list-item > .post-link {
52
81
  font-weight: 700;
53
82
  letter-spacing: -0.02em;
54
83
  }
55
84
 
56
85
  h1 {
57
- font-size: 200%;
58
- margin-top: 1em;
59
- margin-bottom: 0.5em;
86
+ font-size: 1.8rem;
87
+ margin-top: 0;
88
+ margin-bottom: 0;
89
+ // No margin-top since this is the top of the page and we want only 1 per page.
90
+ // No margin-bottom as metadata should follow.
60
91
  }
61
92
 
62
93
  h2 {
@@ -65,8 +96,12 @@ h2 {
65
96
  margin-bottom: 0.5em;
66
97
  }
67
98
 
68
- h3 {
99
+ h3,
100
+ .post-list-item > .post-link {
69
101
  font-size: 125%;
102
+ }
103
+
104
+ h3 {
70
105
  margin-top: 1em;
71
106
  margin-bottom: 0.5em;
72
107
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: kids
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.1
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mick F
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-04-05 00:00:00.000000000 Z
11
+ date: 2020-04-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -72,6 +72,34 @@ dependencies:
72
72
  - - "~>"
73
73
  - !ruby/object:Gem::Version
74
74
  version: '1.3'
75
+ - !ruby/object:Gem::Dependency
76
+ name: jekyll-assets
77
+ requirement: !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - ">="
80
+ - !ruby/object:Gem::Version
81
+ version: '0'
82
+ type: :runtime
83
+ prerelease: false
84
+ version_requirements: !ruby/object:Gem::Requirement
85
+ requirements:
86
+ - - ">="
87
+ - !ruby/object:Gem::Version
88
+ version: '0'
89
+ - !ruby/object:Gem::Dependency
90
+ name: buckygem
91
+ requirement: !ruby/object:Gem::Requirement
92
+ requirements:
93
+ - - "~>"
94
+ - !ruby/object:Gem::Version
95
+ version: '0.5'
96
+ type: :runtime
97
+ prerelease: false
98
+ version_requirements: !ruby/object:Gem::Requirement
99
+ requirements:
100
+ - - "~>"
101
+ - !ruby/object:Gem::Version
102
+ version: '0.5'
75
103
  - !ruby/object:Gem::Dependency
76
104
  name: bundler
77
105
  requirement: !ruby/object:Gem::Requirement
@@ -98,6 +126,7 @@ files:
98
126
  - _includes/google-analytics.html
99
127
  - _includes/head.html
100
128
  - _includes/header.html
129
+ - _includes/related-pages.html
101
130
  - _layouts/archives.html
102
131
  - _layouts/default.html
103
132
  - _layouts/home.html
@@ -106,11 +135,14 @@ files:
106
135
  - _sass/kids.scss
107
136
  - _sass/kids/_base.scss
108
137
  - _sass/kids/_images.scss
138
+ - _sass/kids/_index.scss
109
139
  - _sass/kids/_layout.scss
110
140
  - _sass/kids/_links.scss
141
+ - _sass/kids/_related_pages.scss
111
142
  - _sass/kids/_typography.scss
112
143
  - assets/css/style.scss
113
144
  - assets/images/keith-misner-h0Vxgz5tyXA-unsplash.jpg
145
+ - assets/videos/dumb-dumber-gagging.mp4
114
146
  homepage: https://github.com/dirtyhenry/kids
115
147
  licenses:
116
148
  - MIT