r-jekyll-theme 0.1.4 → 0.1.5

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: 93db6bd0b20372bac113410a98c3e254445379a5d7212a971d0f1840e322f6d2
4
- data.tar.gz: 51b61243ce450c0e8bd71bbdb74bea18b2fa7e4622eac8488b70df3d33258236
3
+ metadata.gz: b6d94bac744e155e06f1eb4019075fb53557cb69916b570f382b9b38fb674285
4
+ data.tar.gz: 33f2957cda9196d02e9014131c4576cf0c2b9b39f63e28b5afbae5099094912f
5
5
  SHA512:
6
- metadata.gz: 6a5e3fcfec16a660f2f8b113b640a7e62cec669dd4c96a65ca607d258fe0260d4fc4d63e826b3c55c1912e38c653d641fe026633ff4dd5e2bb74ae2646f188d9
7
- data.tar.gz: 59623152fb870754dd27f5662c689e4f55dff2c493c0ef4e319efa1f9cab2fa70cffc6f4b440ee2b117c864d863faff4d937cb864673150dbcd01a2b84dd3eed
6
+ metadata.gz: 2a678a0f6723ef8937ce4411f570cccca25627b43424a1e7d6f7d2d178a927f702e624f7ae55fb8263fb1dceb038b32c53dc795040b9e10ca94e65645c00e76b
7
+ data.tar.gz: 6b888632a92f1aa9bb16cb10a347818f4460e70de7901dd7a11fa4dd9494bf83f5444ef1503ddc6d218b08a4a1fffc82cffb66477a426693071e96afa0b921d4
data/README.md CHANGED
@@ -1,14 +1,18 @@
1
1
  # r-jekyll-theme
2
+
2
3
  A simple red Jekyll theme with left navigation that's perfect for portfolios and resumes.
3
4
  See the [sample r-jekyll-theme implementation](https://rafalkaron.github.io/r-jekyll-theme).
4
5
 
5
6
  ## Installation
7
+
6
8
  You can install the github-remote or gem-based r-jekyll-theme. You can also fork the r-jekyll-theme GitHub repository.
7
9
 
8
10
  ### Preparing for the theme installation
11
+
9
12
  You need to create a directory for your Jekyll site and initialize a `Gemfile`.
10
13
 
11
14
  #### Before you begin
15
+
12
16
  Ensure that you have Ruby and Jekyll installed. See [Jekyll - Quickstart](https://jekyllrb.com/docs/).
13
17
 
14
18
  1. Create a directory in which you want to develop your Jekyll site.
@@ -16,62 +20,77 @@ Ensure that you have Ruby and Jekyll installed. See [Jekyll - Quickstart](https:
16
20
  **Result:** A `Gemfile` is created.
17
21
 
18
22
  ### Installing the github-remote-theme
23
+
19
24
  If you plan to deploy your Jekyll site to GitHub-Pages, use this installation method.
20
25
 
21
- 1. To the `Gemfile`, add:
26
+ 1. To the `Gemfile`, add:
27
+
22
28
  ```ruby
23
29
  gem "github-pages"
24
30
  gem "jekyll-remote-theme"
25
31
  ```
32
+
26
33
  2. In the site directory, create the `_config.yml` file.
27
34
  3. To the `_config.yml` file, add:
35
+
28
36
  ```yaml
29
37
  plugins:
30
38
  - jekyll-remote-theme
31
39
  remote_theme: rafalkaron/r-jekyll-theme@main
32
40
  ```
41
+
33
42
  4. Run `bundle`
34
43
 
35
44
  ### Installing the gem-based theme
45
+
36
46
  If you're into old school, use this installation method.
37
47
 
38
48
  1. To the `Gemfile`, add:
49
+
39
50
  ```ruby
40
51
  gem "github-pages"
41
52
  gem "r-jekyll-theme"
42
53
  ```
54
+
43
55
  2. In the site directory, create the `_config.yml` file.
44
56
  3. To the `_config.yml` file, add:
57
+
45
58
  ```yaml
46
59
  theme: r-jekyll-theme
47
60
  ```
61
+
48
62
  4. Run `bundle`
49
63
 
50
64
  ### Forking the theme GitHub repository
65
+
51
66
  If you want to heavily modify the template, use this installation method.
52
67
 
53
68
  1. Fork the [r-jekyll-theme](https://github.com/rafalkaron/r-jekyll-theme) repository.
54
69
  2. In the root directory of the forked repository, run `bundle`
55
70
 
56
71
  ## Configuration
72
+
57
73
  The r-jekyll-theme requires little configuration. You just need to add some content and fill in the `_config.yml` file with your site data and contact information.
58
74
 
59
75
  ### Adding content
76
+
60
77
  You add content by creating Markdown files in the root directory of your Jekyll site.
61
78
  **NOTE:** You should start adding your content by creating the `index.md` file.
62
79
 
63
80
  1. In the root directory of your Jekyll site, create a Markdown file.
64
81
  For example, create the `index.md` file.
65
82
  1. Open the file and add:
83
+
66
84
  ```markdown
67
85
  ---
68
- layout: default
86
+ layout: page
69
87
  title: Home
70
88
  order: "0"
71
89
  ---
72
90
  ```
91
+
73
92
  where:
74
- * `layout` is the site HTML template. Always use the `default` value.
93
+ * `layout` is the site HTML template. Always use the `page` value.
75
94
  * `title` is the page title that appears in the site navigation and in the web browser tab.
76
95
  * `order` is the position of the page link in the site navigation.
77
96
  1. Add Markdown (Kramdown) content.
@@ -80,23 +99,28 @@ For reference, see [content.md](https://raw.githubusercontent.com/rafalkaron/r-j
80
99
  1. Save the Markdown file.
81
100
 
82
101
  ### Configuring site metadata and contact info
102
+
83
103
  You configure site metadata and contact information by editing the `_confing.yml` file. For reference, see the default [_config.yml](https://raw.githubusercontent.com/rafalkaron/r-jekyll-theme/main/_config.yml).
84
104
 
85
105
  ### Styling
106
+
86
107
  You can override the default styling by creating the `main.scss` file in the `assets` directory.
87
108
 
88
109
  1. In the root directory of your Jekyll site, create the `assets` directory.
89
110
  2. In the `assets` directory, create and open the `main.scss` file.
90
111
  3. To the `main.scss` file, add:
112
+
91
113
  ```scss
92
114
  ---
93
115
  ---
94
116
  @import "r";
95
117
  ```
118
+
96
119
  5. Under the `@import "r";` rule, add your styling.
97
120
  4. Save the `main.scss` file.
98
121
 
99
122
  ### Previewing your site
123
+
100
124
  You can generate and preview your site locally before publishing it.
101
125
 
102
126
  1. Set up your development environment by running `bundle install`
@@ -105,6 +129,7 @@ You can generate and preview your site locally before publishing it.
105
129
  4. Add pages, documents, data, styling etc. For more information, see [Jekyll Home](https://jekyllrb.com/).
106
130
  **Info:** As you modify the theme or add content, your site should regenerate automatically in the web browser. However, to see any `_config.yml` updates, you need to restart the server.
107
131
  If your site does not regenerate automatically in the web browser, ensure that you have the following added to your `_config.yml` file:
132
+
108
133
  ```yaml
109
134
  livereload: true
110
- ```
135
+ ```
data/_includes/head.html CHANGED
@@ -14,5 +14,6 @@
14
14
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
15
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
16
16
  <link rel="icon" type="image/ico" href="/assets/favicon.svg">
17
- <link rel="stylesheet" href="/assets/main.css">
18
- </head>
17
+ <!-- For styles with static names... -->
18
+ <link href="{{ '/assets/main.css' | relative_url }}" rel="stylesheet">
19
+ </head>
@@ -1,4 +1,4 @@
1
- {%- assign default_paths = site.pages | where: "layout", "default" | sort: "order" | map: "path" -%}
1
+ {%- assign default_paths = site.pages | where: "layout", "page" | sort: "order" | map: "path" -%}
2
2
  {%- assign page_paths = site.header_pages | default: default_paths -%}
3
3
 
4
4
  <ul class="{{ page.title | slugify }}">
@@ -20,7 +20,7 @@
20
20
 
21
21
  {%- if page.layout == "post" -%}
22
22
  <style>
23
- a.blog {
23
+ div#toc-pages a.blog {
24
24
  text-decoration: underline;
25
25
  }
26
26
 
File without changes
data/_sass/r.scss CHANGED
@@ -6,10 +6,10 @@ html {
6
6
  -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
7
7
  }
8
8
 
9
- @media only screen and (min-width: 950px) {
9
+ @media only screen and (min-width: 1015px) {
10
10
  @import "r/layout/desktop";
11
11
  }
12
- @media only screen and (max-width: 950px) {
12
+ @media only screen and (max-width: 1015px) {
13
13
  @import "r/layout/mobile";
14
14
  }
15
15
  @media only print {
@@ -15,7 +15,6 @@ div#post-list-container {
15
15
  text-decoration-color: $primary-color;
16
16
  }
17
17
 
18
-
19
18
  div.post-excerpt {
20
19
  p {
21
20
  margin-top: $margin;
@@ -1,4 +1,4 @@
1
- /*** General - START */
1
+ /*** General - START */
2
2
  html {
3
3
  scroll-behavior: smooth;
4
4
  font-size: 62.5%;
@@ -7,8 +7,8 @@ html {
7
7
  * {
8
8
  font-family: $main-font;
9
9
  line-height: 1.6em;
10
- text-align: left;
11
10
  color: $text-dark;
11
+ text-align: left;
12
12
  font-size: 1.6rem;
13
13
  }
14
14
  .print {
@@ -30,20 +30,16 @@ body {
30
30
  main#page-content {
31
31
  margin: 0;
32
32
  }
33
-
34
33
  article {
35
34
  color: $text-dark;
36
35
  padding: 5rem 5rem;
37
36
  }
38
-
39
- div#post-list-container article{
37
+ div#post-list-container article {
40
38
  padding: 2.5rem 5rem;
41
39
  }
42
-
43
40
  div#post-list-container {
44
41
  margin-top: 2.5rem;
45
42
  }
46
-
47
43
  article + article,
48
44
  div#categories-container,
49
45
  div#tags-container {
@@ -91,8 +87,6 @@ a#site-logo {
91
87
 
92
88
  /* Navigation */
93
89
  nav#site-nav {
94
- display: flexbox;
95
- justify-content: flex-end;
96
90
  margin: 0;
97
91
  }
98
92
  div#site-nav-page {
@@ -120,16 +114,18 @@ div#toc-sections ul {
120
114
  div#toc-pages li {
121
115
  padding: 0 0.8rem;
122
116
  list-style: none;
117
+ text-align: right;
123
118
  }
124
119
  div#toc-sections li {
125
120
  padding: 0 0.8rem;
121
+ padding-bottom: 0.4em;
126
122
  list-style: none;
123
+ line-height: 1em;
124
+ text-align: right;
127
125
  }
128
-
129
126
  #toc-pages a.nav-link {
130
127
  font-weight: bold;
131
128
  font-size: 2.2rem;
132
-
133
129
  }
134
130
  #toc-sections a.nav-link {
135
131
  font-size: 1.4rem;
@@ -185,11 +181,9 @@ a.footer-link:hover,
185
181
  a.footer-link:active {
186
182
  text-decoration: underline;
187
183
  }
188
-
189
184
  a.footer-image-link {
190
185
  display: flex;
191
186
  }
192
-
193
187
  img.footer-icon {
194
188
  width: 2.8rem;
195
189
  height: 2.8rem;
@@ -202,6 +196,8 @@ img.footer-icon {
202
196
  header#site-header {
203
197
  display: flexbox;
204
198
  flex-direction: column;
199
+ justify-content: center;
200
+ text-align: center;
205
201
  }
206
202
  div#site-logo-container {
207
203
  float: none;
@@ -223,32 +219,44 @@ img.footer-icon {
223
219
  div#toc-pages ul {
224
220
  display: flex;
225
221
  justify-content: center;
222
+ flex-wrap: wrap;
223
+ text-align: center;
226
224
  }
227
225
  div#toc-sections ul {
228
226
  display: flex;
229
227
  justify-content: center;
228
+ flex-wrap: wrap;
229
+ text-align: center;
230
230
  }
231
231
  #toc-pages a.nav-link {
232
232
  font-weight: bold;
233
233
  font-size: 2.2rem;
234
+ text-align: center;
235
+ display: flex;
236
+ justify-content: center;
234
237
  }
235
238
  #toc-sections a.nav-link {
236
239
  font-size: 1.4rem;
240
+ text-align: center;
241
+ display: flex;
242
+ justify-content: center;
237
243
  }
238
244
  }
239
-
240
245
  /* iPhone 10-ish */
241
246
  @media only screen and (max-width: 450px) {
242
247
  html {
243
248
  font-size: 50%;
244
249
  }
245
-
246
250
  article,
251
+ div#post-list-container article.level-1,
247
252
  footer#site-footer {
248
253
  padding: 2.5rem 2.5rem;
249
254
  }
250
255
  header#site-header {
251
256
  padding: 2.5rem 1.7rem $margin 1.7rem;
252
257
  }
258
+ div#post-list-container {
259
+ margin: 0;
260
+ }
253
261
  }
254
262
  /*** Tall screens - END */
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: r-jekyll-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.4
4
+ version: 0.1.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - rafalkaron
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-01-31 00:00:00.000000000 Z
11
+ date: 2021-02-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -64,7 +64,7 @@ files:
64
64
  - _includes/print/print_button.html
65
65
  - _includes/toc/pages.html
66
66
  - _includes/toc/sections.html
67
- - _layouts/default.html
67
+ - _layouts/page.html
68
68
  - _layouts/post.html
69
69
  - _layouts/singlepage_dev.html
70
70
  - _sass/_variables.scss