together-theme 0.0.1 → 0.0.2

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: 3dbff3587b5cd776b74118b55ef44a9e37e43387dd1b7992683a76652400b7f7
4
- data.tar.gz: 5d3688f5010303857e8ff697aeb00dd413fe19b5cda4c92405300c50b71a62ff
3
+ metadata.gz: ecd17b5d71294c95a6db6d9ffa073583d67cd8e989eb9c39fb0bece451a693a3
4
+ data.tar.gz: 1a585c2a6f07f44d55b9cd8786f3f9a296c2913f069bb0554579e5b98b205aa5
5
5
  SHA512:
6
- metadata.gz: 07f0f4f80d63284790cb3102a0844a482e4781e2755fefaf81cb9a28daf4dab6de625dff86840608e5c26701fad6313b5fb394ce8cd6704de0bcd237d8618874
7
- data.tar.gz: 7b7f9adf9d52852df2aa9189f6919cdebdc466c4364d53d9b814da160f4bf1df4beebec93d917c6d753cbd6e93e64fdf30408b8050df23f07dbe63f4c452715e
6
+ metadata.gz: 8b2a1e44b7588b9d2ac9d00fd9381988ea8946352e96a50cf1d9dcb7de76542b64cd2ba221168e46bf2fcb36dcbfdecda4c666be23f079429f7186912788f0de
7
+ data.tar.gz: f78fafd8b8c232d251e47d593734d18c81affa16171524527a102148e7759dd44337075623cdb7f75cb9a7907d978e33f0880431250b69a636ddfe5a99f65463
data/.gitignore CHANGED
@@ -7,3 +7,4 @@ Gemfile.lock
7
7
  .DS_Store
8
8
  dist
9
9
  node_modules
10
+ *.gem
data/404.html ADDED
@@ -0,0 +1,9 @@
1
+ ---
2
+ layout: default
3
+ title: 404 – Page not found
4
+ permalink: 404.html
5
+ ---
6
+
7
+ Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
8
+
9
+ <a href="/">Head back home</a> to try finding it again.
data/_config.yml CHANGED
@@ -1,8 +1,49 @@
1
1
  title: Together
2
2
  description: This is the Together Theme for Jekyll. It's designed for a specific use case – telling a single story across multiple articles.
3
- baseurl: ""
3
+ base_url: ""
4
+
5
+ author:
6
+ name: Dallas Read
7
+
4
8
  markdown: kramdown
5
9
  permalink: /:title
10
+ exclude: ['*.gemspec']
6
11
  keep_files: ['assets/js/main.js']
7
- author:
8
- name: Dallas Read
12
+
13
+ together:
14
+ top_bar:
15
+ content: "Like this Jekll theme? Visit us on <a target=\"_blank\" href=\"https://github.com/dallasread/together-theme\">GitHub.</a>"
16
+ style:
17
+ default:
18
+ sans_serif: "'Avenir Next', Helvetica Neue, Helvetica, Arial, sans-serif"
19
+ serif: "Palatino, Times, serif"
20
+
21
+ bg_color: "#FBF7F0"
22
+ bg_emphasis: "#ddd"
23
+
24
+ text_color: "#222"
25
+ text_subtle: "#666"
26
+ text_supersubtle: "#999"
27
+ text_brilliant: "#000"
28
+ link_color: "red"
29
+
30
+ text_sm: "0.85rem"
31
+ text_md: "1rem"
32
+ text_lg: "1.25rem"
33
+ text_xl: "2rem"
34
+
35
+ emphasis: "bold"
36
+ padding: "0.5rem"
37
+ padding_lg: "1rem"
38
+ padding_xl: "2rem"
39
+ line_height: "1.6"
40
+
41
+ dark:
42
+ bg_color: "#030a1a"
43
+ bg_emphasis: "#121f3f"
44
+
45
+ text_color: "#bbb"
46
+ text_subtle: "#999"
47
+ text_supersubtle: "#494c58"
48
+ text_brilliant: "#eee"
49
+ link_color: "#59b6ee"
@@ -0,0 +1,21 @@
1
+ <aside>
2
+ {% if page.next.url %}
3
+ <p class="next-article">
4
+ Next:<br>
5
+ <a class="next" href="{{page.next.url}}">
6
+ {{page.next.title}}
7
+ </a>
8
+ </p>
9
+ {% elsif page.previous.url %}
10
+ <p class="previous-article">
11
+ Back:<br>
12
+ <a class="previous" href="{{page.previous.url}}">
13
+ {{page.previous.title}}
14
+ </a>
15
+ </p>
16
+ {% endif %}
17
+
18
+ <p>
19
+ {{site.description}}
20
+ </p>
21
+ </aside>
@@ -0,0 +1,40 @@
1
+ <style type="text/css">
2
+ :root {
3
+ --sans-serif: {{ site.together.style.default.sans_serif }};
4
+ --serif: {{ site.together.style.default.serif }};
5
+
6
+ --bg-color: {{ site.together.style.default.bg_color }};
7
+ --bg-emphasis: {{ site.together.style.default.bg_emphasis }};
8
+
9
+ --text-color: {{ site.together.style.default.text_color }};
10
+ --text-subtle: {{ site.together.style.default.text_subtle }};
11
+ --text-supersubtle: {{ site.together.style.default.text_supersubtle }};
12
+ --text-brilliant: {{ site.together.style.default.text_brilliant }};
13
+ --link-color: {{ site.together.style.default.link_color }};
14
+ --text-sm: {{ site.together.style.default.text_sm }};
15
+ --text-md: {{ site.together.style.default.text_md }};
16
+ --text-lg: {{ site.together.style.default.text_lg }};
17
+ --text-xl: {{ site.together.style.default.text_xl }};
18
+
19
+ --emphasis: {{ site.together.style.default.emphasis }};
20
+ --padding: {{ site.together.style.default.padding }};
21
+ --padding-lg: {{ site.together.style.default.padding_lg }};
22
+ --padding-xl: {{ site.together.style.default.padding_xl }};
23
+ --line-height: {{ site.together.style.default.line_height }};
24
+ }
25
+
26
+ {% if site.together.style.dark %}
27
+ @media (prefers-color-scheme: dark) {
28
+ :root {
29
+ {% if site.together.style.dark.bg_color %}--bg-color: {{ site.together.style.dark.bg_color }};{% endif %}
30
+ {% if site.together.style.dark.bg_color %}--bg-emphasis: {{ site.together.style.dark.bg_emphasis }};{% endif %}
31
+
32
+ {% if site.together.style.dark.bg_color %}--text-color: {{ site.together.style.dark.text_color }};{% endif %}
33
+ {% if site.together.style.dark.bg_color %}--text-subtle: {{ site.together.style.dark.text_subtle }};{% endif %}
34
+ {% if site.together.style.dark.bg_color %}--text-supersubtle: {{ site.together.style.dark.text_supersubtle }};{% endif %}
35
+ {% if site.together.style.dark.bg_color %}--text-brilliant: {{ site.together.style.dark.text_brilliant }};{% endif %}
36
+ {% if site.together.style.dark.bg_color %}--link-color: {{ site.together.style.dark.link_color }};{% endif %}
37
+ }
38
+ }
39
+ {% endif %}
40
+ </style>
@@ -0,0 +1,5 @@
1
+ {% if site.together.top_bar.content %}
2
+ <div class="top-bar">
3
+ <p>{{ site.together.top_bar.content }}</p>
4
+ </div>
5
+ {% endif %}
@@ -10,56 +10,18 @@
10
10
  {% if site.description %}<meta name="description" content="{{ site.description }}">{% endif %}
11
11
 
12
12
  <link rel="apple-touch-icon" href="{{ site.icon }}">
13
+ {% include style_variables.html %}
13
14
  <link rel="stylesheet" href="{{ '/assets/css/main.css' | absolute_url }}?{{ site.time | date: '%s%N' }}">
14
15
 
15
16
  <script type="text/javascript" src="{{ '/assets/js/main.js' | absolute_url }}?{{ site.time | date: '%s%N' }}"></script>
16
17
  </head>
17
18
  <body>
18
- <style type="text/css">
19
- :root {
20
- --sans-serif: 'Avenir Next', Helvetica Neue, Helvetica, Arial, sans-serif;
21
- --serif: Palatino, Times, serif;
22
-
23
- --bg-color: #FBF7F0;
24
- --bg-emphasis: #ddd;
25
-
26
- --text-color: #222;
27
- --text-subtle: #666;
28
- --text-supersubtle: #999;
29
- --text-brilliant: #000;
30
- --text-link: red;
31
- --text-sm: 0.85rem;
32
- --text-md: 1rem;
33
- --text-lg: 1.25rem;
34
- --text-xl: 2rem;
35
-
36
- --emphasis: bold;
37
- --padding: 0.5rem;
38
- --padding-lg: 1rem;
39
- --padding-xl: 2rem;
40
- --line-height: 1.6;
41
- }
42
-
43
- @media (prefers-color-scheme: dark) {
44
- :root {
45
- --bg-color: #030a1a;
46
- --bg-emphasis: #121f3f;
47
-
48
- --text-color: #bbb;
49
- --text-subtle: #999;
50
- --text-supersubtle: #494c58;
51
- --text-brilliant: #eee;
52
- --text-link: #59b6ee;
53
- }
54
- }
55
- </style>
56
-
19
+ {% include top_bar.html %}
57
20
  <div class="wrapper">
58
- <!-- <h1 style="text-align: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid red; font-size: 1.5rem; ">A Super Title</h1> -->
59
- <div class="container">
21
+ <article class="container">
60
22
  <div class="nav">
61
23
  <nav>
62
- <a href="{{ site.baseurl | absolute_url }}">
24
+ <a href="{{ site.base_url | absolute_url }}">
63
25
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
64
26
  <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
65
27
  </svg>
@@ -97,25 +59,12 @@
97
59
  </header>
98
60
 
99
61
  <main>
100
- {{ page.content }}
62
+ {{ content }}
101
63
  </main>
102
64
  </div>
103
65
 
104
66
  <div class="sidebar">
105
- <aside>
106
- {% if page.next.url %}
107
- <p class="next-article">
108
- Next:<br>
109
- <a class="next" href="{{page.next.url}}">
110
- {{page.next.title}}
111
- </a>
112
- </p>
113
- {% endif %}
114
-
115
- <p>
116
- {{site.description}}
117
- </p>
118
- </aside>
67
+ {% include sidebar.html %}
119
68
  </div>
120
69
  </div>
121
70
  </div>
@@ -2,9 +2,12 @@
2
2
  layout: default
3
3
  title: This is the Together Theme
4
4
  description: It's a theme for Jekyll a specific use case – telling a story across an array of articles. Hope you enjoy! 🎉
5
- order: 1
6
5
  ---
7
6
 
7
+ <div class="aspect-ratio">
8
+ <iframe src="https://www.youtube.com/embed/d0yGdNEWdn0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
9
+ </div>
10
+
8
11
  ## An H2 Header for you to see
9
12
 
10
13
  Paragraphs are separated by a blank line.
data/_sass/_article.scss CHANGED
@@ -1,126 +1,96 @@
1
- html, body {
2
- font-size: 21px;
3
- background: var(--bg-color);
4
- padding: var(--padding-xl);
5
- font-family: var(--serif);
6
- color: var(--text-color);
7
- -webkit-font-smoothing: antialiased;
8
- -moz-osx-font-smoothing: grayscale;
9
- }
10
-
11
- .wrapper {
12
- width: 100%;
13
- max-width: 1080px;
14
- margin: 0 auto;
15
- }
16
-
17
- header {
18
- margin-bottom: var(--padding-xl);
19
-
20
- h1 {
21
- font-size: var(--text-xl);
22
- font-weight: var(--emphasis);
23
- margin-bottom: var(--padding);
24
- }
25
-
26
- p {
27
- color: var(--text-subtle);
28
- line-height: var(--line-height);
29
- }
30
-
31
- .series {
32
- text-transform: uppercase;
33
- font-size: var(--text-sm);
34
- font-family: var(--sans-serif);
35
- margin-bottom: var(--padding-lg);
36
-
37
- .byline {
38
- margin-left: var(--padding-lg);
39
- padding-left: var(--padding-lg);
40
- border-left: 1px solid var(--text-subtle);
41
- }
42
- }
43
-
44
- .description {
45
- font-size: var(--text-lg);
46
- }
47
-
48
- a {
49
- color: var(--text-link);
1
+ article {
2
+ header a,
3
+ main a {
4
+ display: inline-block;
5
+ color: var(--link-color);
50
6
 
51
7
  &:hover {
52
8
  background: var(--bg-emphasis);
53
- padding: 2px 5px;
54
- margin: -2px -5px;
9
+ padding: 0px 5px;
10
+ margin: 0 -5px;
55
11
  border-radius: 3px;
56
12
  }
57
13
  }
58
- }
59
14
 
60
- nav {
61
- a {
62
- display: block;
63
- margin-bottom: var(--padding-lg);
64
- }
15
+ .aspect-ratio {
16
+ position: relative;
17
+ width: 100%;
18
+ padding-bottom: 56.25%;
65
19
 
66
- svg {
67
- width: var(--text-lg);
68
- color: var(--text-subtle);
20
+ iframe {
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ border: 0;
27
+ }
69
28
  }
70
- }
71
29
 
72
- main {
73
- line-height: var(--line-height);
30
+ header {
31
+ line-height: 1.3;
32
+ margin-bottom: var(--padding-xl);
74
33
 
75
- h1, h2, h3, h4, h5, h6 {
76
- padding-top: var(--padding);
77
- color: var(--text-brilliant);
78
- }
34
+ h1 {
35
+ font-size: var(--text-xl);
36
+ font-weight: var(--emphasis);
37
+ margin-bottom: var(--padding);
38
+ }
79
39
 
80
- h1, h2, h3, h4, h5, h6, p, ul, ol {
81
- margin-bottom: var(--padding);
82
- }
40
+ p {
41
+ color: var(--text-subtle);
42
+ line-height: var(--line-height);
43
+ }
83
44
 
84
- h2 {
85
- font-size: var(--text-lg);
86
- font-weight: var(--emphasis);
87
- }
45
+ .series {
46
+ font-size: var(--text-sm);
47
+ font-family: var(--sans-serif);
48
+ margin-bottom: var(--padding-lg);
49
+
50
+ .byline {
51
+ margin-left: var(--padding);
52
+ padding-left: var(--padding-lg);
53
+ border-left: 1px solid var(--text-supersubtle);
54
+ display: inline-block;
55
+ }
56
+ }
88
57
 
89
- ul {
90
- list-style: disc;
58
+ .description {
59
+ font-size: var(--text-lg);
60
+ }
91
61
  }
92
62
 
93
- ol {
94
- list-style: disc;
95
- }
63
+ main {
64
+ line-height: var(--line-height);
96
65
 
97
- li {
98
- margin-left: 25px;
99
- }
66
+ h1, h2, h3, h4, h5, h6 {
67
+ color: var(--text-brilliant);
68
+ padding-top: var(--padding-lg);
100
69
 
101
- a {
102
- color: var(--text-link);
70
+ &:first-child {
71
+ padding-top: 0;
72
+ }
73
+ }
103
74
 
104
- &:hover {
105
- background: var(--bg-emphasis);
106
- padding: 2px 5px;
107
- margin: -2px -5px;
108
- border-radius: 3px;
75
+ h1, h2, h3, h4, h5, h6, p, ul, ol, .aspect-ratio, blockquote {
76
+ margin-bottom: var(--padding-xl);
109
77
  }
110
- }
111
- }
112
78
 
113
- aside {
114
- font-family: var(--sans-serif);
115
- font-size: var(--text-sm);
116
- line-height: var(--line-height);
117
- color: var(--text-supersubtle);
79
+ h2 {
80
+ font-size: var(--text-lg);
81
+ font-weight: var(--emphasis);
82
+ }
118
83
 
119
- p {
120
- margin-bottom: var(--padding-xl);
121
- }
84
+ ul {
85
+ list-style: disc;
86
+ }
122
87
 
123
- a {
124
- color: var(--text-color);
88
+ ol {
89
+ list-style: disc;
90
+ }
91
+
92
+ li {
93
+ margin-left: 25px;
94
+ }
125
95
  }
126
96
  }
data/_sass/_layout.scss CHANGED
@@ -1,3 +1,19 @@
1
+ html, body {
2
+ font-size: 21px;
3
+ background: var(--bg-color);
4
+ font-family: var(--serif);
5
+ color: var(--text-color);
6
+ -webkit-font-smoothing: antialiased;
7
+ -moz-osx-font-smoothing: grayscale;
8
+ }
9
+
10
+ .wrapper {
11
+ width: 100%;
12
+ max-width: 1240px;
13
+ margin: 0 auto;
14
+ padding: var(--padding-xl);
15
+ }
16
+
1
17
  .container {
2
18
  display: flex;
3
19
  flex-direction: row;
@@ -6,8 +22,8 @@
6
22
  .nav {
7
23
  z-index: 1;
8
24
  position: sticky;
9
- top: 4rem;
10
- bottom: 4rem;
25
+ top: var(--padding-xl);
26
+ bottom: var(--padding-xl);
11
27
  margin-top: 0px;
12
28
  margin-bottom: 0px;
13
29
  height: 100%;
@@ -23,8 +39,8 @@
23
39
  .sidebar {
24
40
  display: block;
25
41
  position: sticky;
26
- top: 4rem;
27
- bottom: 4rem;
42
+ top: var(--padding-xl);
43
+ bottom: var(--padding-xl);
28
44
  height: 100%;
29
45
  overflow-y: auto;
30
46
  width: 25%;
data/_sass/_nav.scss ADDED
@@ -0,0 +1,16 @@
1
+ nav {
2
+ a {
3
+ display: block;
4
+ margin-bottom: 1.35rem;
5
+ color: var(--text-subtle);
6
+
7
+ &:hover {
8
+ background: none;
9
+ color: var(--text-brilliant);
10
+ }
11
+ }
12
+
13
+ svg {
14
+ width: var(--text-lg);
15
+ }
16
+ }
@@ -0,0 +1,14 @@
1
+ aside {
2
+ font-family: var(--sans-serif);
3
+ font-size: var(--text-sm);
4
+ line-height: var(--line-height);
5
+ color: var(--text-supersubtle);
6
+
7
+ p {
8
+ margin-bottom: var(--padding-xl);
9
+ }
10
+
11
+ a {
12
+ color: var(--text-color);
13
+ }
14
+ }
@@ -0,0 +1,13 @@
1
+ .top-bar {
2
+ width: 100%;
3
+ background: var(--link-color);
4
+ color: var(--bg-color);
5
+ padding: var(--padding);
6
+ text-align: center;
7
+ font-family: var(--sans-serif);
8
+ font-size: var(--text-sm);
9
+
10
+ a {
11
+ text-decoration: underline;
12
+ }
13
+ }
data/assets/css/main.scss CHANGED
@@ -8,3 +8,6 @@ $asset_url: '{{ '/assets' | absolute_url }}';
8
8
  @import "reset";
9
9
  @import "layout";
10
10
  @import "article";
11
+ @import "sidebar";
12
+ @import "nav";
13
+ @import "top_bar";
data/feed.json CHANGED
@@ -4,7 +4,7 @@ layout: null
4
4
  {
5
5
  "version": "https://jsonfeed.org/version/1",
6
6
  "title": "{{ site.title | xml_escape }}",
7
- "home_page_url": "{{ site.baseurl | absolute_url }}",
7
+ "home_page_url": "{{ site.base_url | absolute_url }}",
8
8
  "feed_url": "{{ "/feed.json" | absolute_url }}",
9
9
  "description": {{ site.description | jsonify }},
10
10
  "icon": "{{ site.icon | absolute_url }}",
@@ -30,4 +30,4 @@ layout: null
30
30
  {% endunless %}
31
31
  {% endfor %}
32
32
  ]
33
- }
33
+ }
data/feed.xml CHANGED
@@ -7,7 +7,7 @@ layout: null
7
7
  <channel>
8
8
  <title>{{ site.title | xml_escape }}</title>
9
9
  <description>{{ site.description | xml_escape }}</description>
10
- <link>{{ site.url }}{{ site.baseurl }}/</link>
10
+ <link>{{ site.url }}{{ site.base_url }}/</link>
11
11
  <atom:link href="{{ "/feed/index.xml" | absolute_url }}" rel="self" type="application/rss+xml"/>
12
12
  <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
13
13
  <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
data/index.html CHANGED
@@ -1,18 +1,16 @@
1
1
  ---
2
- title: Home
3
2
  layout: default
3
+ title: The Together Theme
4
4
  ---
5
5
 
6
- You are home! This page isn't done yet.
6
+ <div class="posts">
7
+ {% for post in site.posts reversed %}
8
+ <p class="post">
9
+ <a href="{{ post.url }}">
10
+ {{ post.title }}
11
+ </a><br>
7
12
 
8
- <br><br>
9
-
10
- <a href="/together-theme">
11
- What a time.
12
- </a>
13
-
14
- <!-- <ul class="post-list">
15
- {% for post in site.posts %}
16
- <a href="{{post.url}}">{{post.title}}</a>
13
+ {{ post.description }}
14
+ </p>
17
15
  {% endfor %}
18
- </ul> -->
16
+ </div>
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "together-theme"
5
- spec.version = "0.0.1"
5
+ spec.version = "0.0.2"
6
6
  spec.authors = ["Together"]
7
7
  spec.email = ["dallas@excitecreative.ca"]
8
8
 
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: together-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
4
+ version: 0.0.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Together
@@ -61,16 +61,23 @@ extra_rdoc_files: []
61
61
  files:
62
62
  - ".eslintrc.js"
63
63
  - ".gitignore"
64
+ - 404.html
64
65
  - Gemfile
65
66
  - README.md
66
67
  - _config.yml
68
+ - _includes/sidebar.html
69
+ - _includes/style_variables.html
70
+ - _includes/top_bar.html
67
71
  - _js/index.js
68
72
  - _layouts/default.html
69
73
  - _plugins/together.rb
70
74
  - _posts/2022-03-04-together-theme.md
71
75
  - _sass/_article.scss
72
76
  - _sass/_layout.scss
77
+ - _sass/_nav.scss
73
78
  - _sass/_reset.scss
79
+ - _sass/_sidebar.scss
80
+ - _sass/_top_bar.scss
74
81
  - about.md
75
82
  - assets/css/main.scss
76
83
  - assets/js/main.js