jekyll-theme-experiment 0.1.1 → 1.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.
- checksums.yaml +4 -4
- data/README.md +137 -0
- data/_includes/header.html +2 -2
- data/_includes/portfolio.html +2 -2
- data/_layouts/home.html +4 -4
- data/_layouts/page.html +5 -1
- data/_layouts/post.html +1 -1
- data/_sass/experiment/modules/_project_portafolio.scss +1 -7
- data/_sass/experiment.scss +1 -3
- data/assets/main.scss +2 -5
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9c9ec0115495d781e432797814236b4f585ce5fa
|
|
4
|
+
data.tar.gz: 62b774a9ae61709d834db461790cc9557b5c8ff8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 82b2931fd0d6e21bf756286f7aac1772e03bfe30a4783a290a1a67bb5f179cf7416c385b5ed2ae75f52749f338a78807ad08984eedadc19a3a52f0d7c223d4b4
|
|
7
|
+
data.tar.gz: b36c98a19298584d81b2aeeded73edf3f144efa2c916602edef621227ff1bacdfbf7f790730004dc6043bc900fd90bed41a876818b12963c36faa7afa3fa781a
|
data/README.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# jekyll-theme-experiment
|
|
2
|
+
|
|
3
|
+
Since I started using [Jekyll](https://jekyllrb.com/) I have wanted to make a theme, so I have decided to create it to publish my portfolio.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Made with :love: by @anxhe
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
You will need to have installed [ruby](https://www.ruby-lang.org/en/documentation/installation/).
|
|
12
|
+
|
|
13
|
+
Then, in a bash terminal execute the following commands:
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
gem install bundler jekyll
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
- Create a new Jekyll site (by running the `jekyll new` command), Jekyll installs a site that uses a gem-based theme called Minima.
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
jekyll new <your-blog-name>
|
|
25
|
+
cd <your-blog-name>
|
|
26
|
+
```
|
|
27
|
+
- Now we have to replace the `minima` gem with `jekyll-theme-experiment` in `Gemfile`, as follows:
|
|
28
|
+
|
|
29
|
+
```diff
|
|
30
|
+
# Gemfile
|
|
31
|
+
- gem "minima", "~> 2.0"
|
|
32
|
+
+ gem 'jekyll-theme-experiment'
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
- Then run:
|
|
36
|
+
|
|
37
|
+
`bundle install`
|
|
38
|
+
|
|
39
|
+
- Next, we need to replace `minima` theme key in `_config.yml` as follows:
|
|
40
|
+
|
|
41
|
+
```yml
|
|
42
|
+
# _config.yml
|
|
43
|
+
theme: jekyll-theme-experiment
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
- Each section and content is customizable via `_config.yml` file:
|
|
47
|
+
|
|
48
|
+
Replace the sample data with your own:
|
|
49
|
+
|
|
50
|
+
```yml
|
|
51
|
+
|
|
52
|
+
title: Your awesome title
|
|
53
|
+
description: >- # this means to ignore newlines until "baseurl:"
|
|
54
|
+
Write an awesome description for your new site here. You can edit this
|
|
55
|
+
line in _config.yml. It will appear in your document head meta (for
|
|
56
|
+
Google search results) and in your feed.xml site description.
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
jekyll-theme-experiment allows you to customize the following sections in the main layout:
|
|
60
|
+
|
|
61
|
+
- about
|
|
62
|
+
- portfolio
|
|
63
|
+
- tools
|
|
64
|
+
|
|
65
|
+
Add the following sample data to try it:
|
|
66
|
+
|
|
67
|
+
```yml
|
|
68
|
+
theme_jekyll-theme-experiment:
|
|
69
|
+
about:
|
|
70
|
+
avatar: https://robohash.org/experiment-avatar.png?size=300x300
|
|
71
|
+
|
|
72
|
+
portfolio: # optional
|
|
73
|
+
title: Portfolio
|
|
74
|
+
# Depending of the number of projects, you will need to update $projects
|
|
75
|
+
# variable in a sass file. e.g.
|
|
76
|
+
# _sass/main.scss
|
|
77
|
+
#
|
|
78
|
+
projects:
|
|
79
|
+
- name: Jekyll Theme experiment
|
|
80
|
+
link: http://example.com
|
|
81
|
+
github: https://github.com/anxhe/jekyll-theme-experiment
|
|
82
|
+
img_relative_url: /assets/example.png
|
|
83
|
+
|
|
84
|
+
tools: # optional
|
|
85
|
+
- relative_url: /assets/icons/bitbucket/bitbucket-original.svg
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
By default, jekyll generates a couple markdown files, we'll need to make
|
|
89
|
+
a few changes:
|
|
90
|
+
|
|
91
|
+
- Update `index.md` adding `title: home` to yaml's frontmatter
|
|
92
|
+
- Delete `about.md`, as this theme uses similar in the home layout.
|
|
93
|
+
- If you pretend use this site for blogging, you'll need to create a `blog.md` file with the following contents:
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
```md
|
|
98
|
+
---
|
|
99
|
+
layout: blog
|
|
100
|
+
title: blog
|
|
101
|
+
permalink: /blog/
|
|
102
|
+
---
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Now we're ready, start the server:
|
|
106
|
+
|
|
107
|
+
```sh
|
|
108
|
+
bundle exec jekyll serve
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Finally, open http://127.0.0.1:4000/ in the browser, and that's it, feel free to poke around.
|
|
112
|
+
|
|
113
|
+
## Customize navigation links
|
|
114
|
+
|
|
115
|
+
**Taken from minima theme**
|
|
116
|
+
|
|
117
|
+
This allows you to set which pages you want to appear in the navigation area and configure order of the links. For instance, to only link to the about and the portfolio page, add the following to your `_config.yml`:
|
|
118
|
+
|
|
119
|
+
```yml
|
|
120
|
+
header_pages:
|
|
121
|
+
- about.md
|
|
122
|
+
- portfolio.md
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## Contributing
|
|
126
|
+
|
|
127
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/anxhe/jekyll-theme-experiment/issues. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
|
128
|
+
|
|
129
|
+
## Credits
|
|
130
|
+
|
|
131
|
+
- [Jekyll](https://github.com/jekyll/jekyll) and [Minima](https://github.com/jekyll/minima) - Thanks to their creators and contributors
|
|
132
|
+
- [Vitaly Rubtsov](https://dribbble.com/Vitwai) for inspiration on his [hamburguer menu animation](https://dribbble.com/shots/2293621-Hamburger-Menu-Animation)
|
|
133
|
+
- [Luis Manuel](https://scotch.io/@lmgonzalves) for his implementation of the above hamburger menu on [this tutorial](https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css)
|
|
134
|
+
|
|
135
|
+
## License
|
|
136
|
+
|
|
137
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/_includes/header.html
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<nav class="navbar">
|
|
2
|
-
{% assign default_paths = site.
|
|
2
|
+
{% assign default_paths = site.html_pages | map: "path" %}
|
|
3
3
|
{% assign page_paths = site.header_pages | default: default_paths %}
|
|
4
4
|
|
|
5
5
|
<div class="navbar-item">
|
|
6
6
|
{% for path in page_paths %}
|
|
7
|
-
{% assign my_page = site.
|
|
7
|
+
{% assign my_page = site.html_pages | where: "path", path | first %}
|
|
8
8
|
{% if my_page.title %}
|
|
9
9
|
<a class="{% if page.url == my_page.url %}active{% endif %}" href="{{ my_page.url | relative_url }}">
|
|
10
10
|
{{ my_page.title | escape }}
|
data/_includes/portfolio.html
CHANGED
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
</div>
|
|
20
20
|
</label>
|
|
21
21
|
<nav class="nav">
|
|
22
|
-
<a class="nav-item" href="{{ project.link }}"><i class="fas fa-link"></i></a>
|
|
23
|
-
<a class="nav-item" href="{{ project.github }}"><i class="fab fa-github-alt"></i></a>
|
|
22
|
+
<a class="nav-item" href="{{ project.link }}" target="_blank"><i class="fas fa-link"></i></a>
|
|
23
|
+
<a class="nav-item" href="{{ project.github }}" target="_blank"><i class="fab fa-github-alt"></i></a>
|
|
24
24
|
</nav>
|
|
25
25
|
</div>
|
|
26
26
|
</div>
|
data/_layouts/home.html
CHANGED
|
@@ -5,11 +5,11 @@ layout: default
|
|
|
5
5
|
<div class="l-wrap l-around">
|
|
6
6
|
<div class="l-content information-box">
|
|
7
7
|
<hr class="hr-decorator">
|
|
8
|
-
{% if site.
|
|
9
|
-
<h1>{{ site.
|
|
8
|
+
{% if site.title %}
|
|
9
|
+
<h1>{{ site.title }}</h1>
|
|
10
10
|
{% endif %}
|
|
11
|
-
{% if site.
|
|
12
|
-
<h3>{{ site.
|
|
11
|
+
{% if site.description %}
|
|
12
|
+
<h3>{{ site.description }}</h3>
|
|
13
13
|
{% endif %}
|
|
14
14
|
</div>
|
|
15
15
|
{% if site.theme_jekyll-theme-experiment.about.avatar %}
|
data/_layouts/page.html
CHANGED
data/_layouts/post.html
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
$transition-duration: 0.5s;
|
|
2
2
|
$transition-delay: 0.05s;
|
|
3
|
+
$items: 2;
|
|
3
4
|
|
|
4
5
|
.item-container-project {
|
|
5
6
|
background-color: $background-color;
|
|
@@ -197,13 +198,6 @@ $transition-delay: 0.05s;
|
|
|
197
198
|
letter-spacing: -7px;
|
|
198
199
|
}
|
|
199
200
|
|
|
200
|
-
// Adjusting from the fourth element onwards
|
|
201
|
-
&:nth-child(n + 4) {
|
|
202
|
-
letter-spacing: -8px;
|
|
203
|
-
margin-top: -7px;
|
|
204
|
-
opacity: 0;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
201
|
// Getting the lines for the hamburger menu icon
|
|
208
202
|
&:before {
|
|
209
203
|
position: absolute;
|
data/_sass/experiment.scss
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
@charset "utf-8";
|
|
2
2
|
|
|
3
3
|
// Define defaults for each variable.
|
|
4
|
-
|
|
5
4
|
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
6
5
|
$base-font-size: 16px !default;
|
|
7
6
|
$base-font-weight: 400 !default;
|
|
@@ -29,13 +28,12 @@ $on-phone: 400px !default;
|
|
|
29
28
|
$on-palm: 600px !default;
|
|
30
29
|
$on-laptop: 800px !default;
|
|
31
30
|
|
|
32
|
-
|
|
33
31
|
// Import partials.
|
|
34
32
|
@import
|
|
35
33
|
"experiment/reset",
|
|
36
34
|
"experiment/syntax-highlighting",
|
|
37
35
|
"experiment/layout",
|
|
38
|
-
//
|
|
36
|
+
//components
|
|
39
37
|
"experiment/modules/information-box",
|
|
40
38
|
"experiment/modules/navbar",
|
|
41
39
|
"experiment/modules/avatar",
|
data/assets/main.scss
CHANGED
|
@@ -2,10 +2,7 @@
|
|
|
2
2
|
# Only the main Sass file needs front matter (the dashes are enough)
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
//
|
|
6
|
-
$projects:
|
|
7
|
-
|
|
8
|
-
// Configure number of links inside each project
|
|
9
|
-
$items: 4;
|
|
5
|
+
// Number of projects inside of portfolio
|
|
6
|
+
$projects: {{ site.theme_jekyll-theme-experiment.portfolio.projects | size | default: 0 }};
|
|
10
7
|
|
|
11
8
|
@import "experiment";
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-experiment
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Angelina Moreno Robledo
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-02-
|
|
11
|
+
date: 2018-02-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -60,6 +60,7 @@ extensions: []
|
|
|
60
60
|
extra_rdoc_files: []
|
|
61
61
|
files:
|
|
62
62
|
- LICENSE.txt
|
|
63
|
+
- README.md
|
|
63
64
|
- _includes/footer.html
|
|
64
65
|
- _includes/head.html
|
|
65
66
|
- _includes/header.html
|