kids 0.1.1 → 0.2.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.
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