jekylldark 0.4.3
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 +7 -0
- data/LICENSE +674 -0
- data/README.md +71 -0
- data/_includes/analytics.html +9 -0
- data/_includes/footer.html +53 -0
- data/_includes/head.html +5 -0
- data/_includes/header.html +21 -0
- data/_includes/sidebar.html +57 -0
- data/_layouts/default.html +30 -0
- data/_layouts/page.html +9 -0
- data/_layouts/post.html +11 -0
- data/_sass/components/_elementstyle.scss +156 -0
- data/_sass/components/_footer.scss +71 -0
- data/_sass/components/_form.scss +34 -0
- data/_sass/components/_gist.scss +45 -0
- data/_sass/components/_layout.scss +148 -0
- data/_sass/components/_navbar.scss +54 -0
- data/_sass/components/_sidebar.scss +30 -0
- data/_sass/components/_table.scss +73 -0
- data/_sass/jekylldark.scss +49 -0
- data/assets/css/style.scss +4 -0
- data/assets/js/expandNav.js +20 -0
- metadata +107 -0
data/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# jekylldark
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/rb/jekylldark)
|
|
4
|
+
[](https://travis-ci.com/sutterj/jekylldark)
|
|
5
|
+
[](https://app.netlify.com/sites/jekylldark/deploys)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Add this line to your Jekyll site's `Gemfile`:
|
|
10
|
+
|
|
11
|
+
```ruby
|
|
12
|
+
gem "jekylldark"
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
And add this line to your Jekyll site's `_config.yml`:
|
|
16
|
+
|
|
17
|
+
```yaml
|
|
18
|
+
theme: jekylldark
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
And then execute:
|
|
22
|
+
|
|
23
|
+
```shell
|
|
24
|
+
$ bundle
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Or install it yourself as:
|
|
28
|
+
|
|
29
|
+
```shell
|
|
30
|
+
$ gem install jekylldark
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
A site demonstrating how to use the theme is available
|
|
36
|
+
[here](https://jekylldark.jacobsutter.com).
|
|
37
|
+
|
|
38
|
+
### Features
|
|
39
|
+
|
|
40
|
+
- Responsive layout
|
|
41
|
+
- Navbar with subnav dropdown
|
|
42
|
+
- Content area with styled HTML elements
|
|
43
|
+
- Sidebar featuring title, description, projects, posts, and other text content
|
|
44
|
+
- Footer featuring title, description, connect links with icons, and other text content
|
|
45
|
+
|
|
46
|
+
## Contributing
|
|
47
|
+
|
|
48
|
+
Bug reports and pull requests are welcome on GitHub at [sutterj/jekylldark/issues](https://github.com/sutterj/jekylldark/issues).
|
|
49
|
+
This project is intended to be a safe, welcoming space for collaboration, and
|
|
50
|
+
contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org)
|
|
51
|
+
code of conduct.
|
|
52
|
+
|
|
53
|
+
## Development
|
|
54
|
+
|
|
55
|
+
To set up your environment to develop this theme, run `bundle install`.
|
|
56
|
+
|
|
57
|
+
Your theme is setup just like a normal Jekyll site! To test your theme, run
|
|
58
|
+
`bundle exec jekyll serve` and open your browser at `http://localhost:4000`.
|
|
59
|
+
This starts a Jekyll server using your theme. Add pages, documents, data, etc.
|
|
60
|
+
like normal to test your theme's contents. As you make modifications to your
|
|
61
|
+
theme and to your content, your site will regenerate and you should see the
|
|
62
|
+
changes in the browser after a refresh, just like normal.
|
|
63
|
+
|
|
64
|
+
When your theme is released, only the files in `_layouts`, `_includes`, `_sass`
|
|
65
|
+
and `assets` tracked with Git will be bundled. To add a custom directory to your
|
|
66
|
+
theme-gem, please edit the regexp in `jekylldark.gemspec` accordingly.
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
The theme is available as open source under the terms of the
|
|
71
|
+
[GNU General Public License](https://opensource.org/licenses/GPL-3.0).
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
2
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google-analytics }}"></script>
|
|
3
|
+
<script>
|
|
4
|
+
window.dataLayer = window.dataLayer || [];
|
|
5
|
+
function gtag(){dataLayer.push(arguments);}
|
|
6
|
+
gtag('js', new Date());
|
|
7
|
+
|
|
8
|
+
gtag('config', '{{ site.google-analytics }}');
|
|
9
|
+
</script>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{% assign footerdata = site.data.footer %}
|
|
2
|
+
{% assign navs = site.data.navigation %}
|
|
3
|
+
<div class="footer-content">
|
|
4
|
+
<div class="footer-wrapper">
|
|
5
|
+
{% for footeritem in footerdata %}
|
|
6
|
+
{% if footeritem.header == "Connect" %}
|
|
7
|
+
<div class="footer-area">
|
|
8
|
+
<div class="footer-area2">
|
|
9
|
+
<div class="footer-header">
|
|
10
|
+
{{ footeritem.header }}
|
|
11
|
+
</div>
|
|
12
|
+
<ul class="footer-list">
|
|
13
|
+
{%- for connect in footeritem.social -%}
|
|
14
|
+
<li>
|
|
15
|
+
<i class="connect-img fab fa-{{ connect.image }}"></i><a class="footer-link" href="{{ connect.url }}">{{ connect.title }}</a>
|
|
16
|
+
</li>
|
|
17
|
+
{%- endfor -%}
|
|
18
|
+
</ul>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
{% elsif footeritem.header == "Title" %}
|
|
22
|
+
<div class="footer-area">
|
|
23
|
+
<div class="footer-area1">
|
|
24
|
+
<div class="footer-header">
|
|
25
|
+
{{ site.title }}
|
|
26
|
+
</div>
|
|
27
|
+
<p class="footer-paragraph">{{ site.full-description }}</p>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
{% else %}
|
|
31
|
+
<div class="footer-area">
|
|
32
|
+
<div class="footer-area3">
|
|
33
|
+
<div class="footer-header">
|
|
34
|
+
{{ footeritem.header }}
|
|
35
|
+
</div>
|
|
36
|
+
<p class="footer-paragraph">{{ footeritem.content }}</p>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
{% endif %}
|
|
40
|
+
{% endfor %}
|
|
41
|
+
<div class="footer-area4">
|
|
42
|
+
{% for nav in navs %}
|
|
43
|
+
{% if nav.subnavs %}
|
|
44
|
+
{% for subnav in nav.subnavs %}
|
|
45
|
+
<a class="footer-link" href="{{ site.baseurl }}{{ subnav.url }}">{{ subnav.title }}</a>
|
|
46
|
+
{% endfor %}
|
|
47
|
+
{% else %}
|
|
48
|
+
<a class="footer-link" href="{{ site.baseurl }}{{ nav.url }}">{{ nav.title }}</a>
|
|
49
|
+
{% endif %}
|
|
50
|
+
{% endfor %}
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<meta charset="utf-8">
|
|
2
|
+
<meta name="viewport" content="width=device-width">
|
|
3
|
+
<meta name="Description" content="{{ site.title-description }}">
|
|
4
|
+
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
|
|
5
|
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{% assign navs = site.data.navigation %}
|
|
2
|
+
<nav class="site-nav" id="navbar">
|
|
3
|
+
{% for nav in navs %}
|
|
4
|
+
{% if nav.subnavs %}
|
|
5
|
+
<div class="dropdown" id="navdrop">
|
|
6
|
+
<div class="dropdown-list" id="navlist">
|
|
7
|
+
{% for subnav in nav.subnavs %}
|
|
8
|
+
<a href="{{ site.baseurl }}{{ subnav.url }}">{{ subnav.title }}</a>
|
|
9
|
+
{% endfor %}
|
|
10
|
+
</div>
|
|
11
|
+
<a href="{{ site.baseurl }}{{ nav.url }}" class="dropdown-button">{{ nav.title }}</a>
|
|
12
|
+
</div>
|
|
13
|
+
{% else %}
|
|
14
|
+
<a href="{{ site.baseurl }}{{ nav.url }}">{{ nav.title }}</a>
|
|
15
|
+
{% endif %}
|
|
16
|
+
{% endfor %}
|
|
17
|
+
<a href="javascript:void(0);" aria-label="expand navbar" class="navbar-hamburger" onclick="expandNav()">
|
|
18
|
+
<i class="fas fa-bars"></i>
|
|
19
|
+
</a>
|
|
20
|
+
</nav>
|
|
21
|
+
<script src="/assets/js/expandNav.js" charset="utf-8"></script>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{% assign sidebardata = site.data.sidebar %}
|
|
2
|
+
{%- assign date_format = "%b %-d, %Y" -%}
|
|
3
|
+
<div class="site-title">
|
|
4
|
+
<h1>{{ site.title }}</h1>
|
|
5
|
+
<div class="sidebar-area">
|
|
6
|
+
{{ site.title-description }}
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="sidebar-content">
|
|
10
|
+
{% for sidebaritem in sidebardata %}
|
|
11
|
+
{% if sidebaritem.header == "Posts" %}
|
|
12
|
+
<div class="sidebar-area">
|
|
13
|
+
<h4>{{ sidebaritem.header }}</h4>
|
|
14
|
+
{%- if site.posts.size > 0 -%}
|
|
15
|
+
<ul class="sidebar-list">
|
|
16
|
+
{%- for post in site.posts -%}
|
|
17
|
+
<li>
|
|
18
|
+
<h6 class="sidebar-header">
|
|
19
|
+
{{ post.date | date: date_format }}: <a class="text-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
|
20
|
+
</h6>
|
|
21
|
+
</li>
|
|
22
|
+
{%- endfor -%}
|
|
23
|
+
</ul>
|
|
24
|
+
{%- endif -%}
|
|
25
|
+
</div>
|
|
26
|
+
<br>
|
|
27
|
+
{% elsif sidebaritem.header == "Featured Projects" %}
|
|
28
|
+
<div class="sidebar-area">
|
|
29
|
+
<h4>{{ sidebaritem.header }}</h4>
|
|
30
|
+
<ul class="sidebar-list">
|
|
31
|
+
{%- for project in sidebaritem.projects -%}
|
|
32
|
+
<li>
|
|
33
|
+
<h6 class="sidebar-header">
|
|
34
|
+
<a class="text-link" href="{{ project.url }}" rel="noopener" target="_blank">{{ project.name }}</a>
|
|
35
|
+
</h6>
|
|
36
|
+
</li>
|
|
37
|
+
{%- endfor -%}
|
|
38
|
+
</ul>
|
|
39
|
+
</div>
|
|
40
|
+
<br>
|
|
41
|
+
{% else %}
|
|
42
|
+
<div class="sidebar-area">
|
|
43
|
+
<h4>{{ sidebaritem.header }}</h4>
|
|
44
|
+
<ul class="sidebar-list">
|
|
45
|
+
{%- for content in sidebaritem.content -%}
|
|
46
|
+
<li>
|
|
47
|
+
<h6 class="sidebar-header">
|
|
48
|
+
{{ content.item }}
|
|
49
|
+
</h6>
|
|
50
|
+
</li>
|
|
51
|
+
{%- endfor -%}
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
<br>
|
|
55
|
+
{% endif %}
|
|
56
|
+
{% endfor %}
|
|
57
|
+
</div>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
{% if jekyll.environment == 'production' %}
|
|
5
|
+
{% include analytics.html %}
|
|
6
|
+
{% endif %}
|
|
7
|
+
{% include head.html %}
|
|
8
|
+
<title>{{ page.title }}</title>
|
|
9
|
+
</head>
|
|
10
|
+
<div class="site-wrapper">
|
|
11
|
+
<body class="site">
|
|
12
|
+
<div class="site-header">
|
|
13
|
+
<header>
|
|
14
|
+
{% include header.html %}
|
|
15
|
+
</header>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="site-sidebar">
|
|
18
|
+
{% include sidebar.html %}
|
|
19
|
+
</div>
|
|
20
|
+
<div class="site-content">
|
|
21
|
+
{{ content }}
|
|
22
|
+
</div>
|
|
23
|
+
<div class="site-footer">
|
|
24
|
+
<footer>
|
|
25
|
+
{% include footer.html %}
|
|
26
|
+
</footer>
|
|
27
|
+
</div>
|
|
28
|
+
</body>
|
|
29
|
+
</div>
|
|
30
|
+
</html>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
h1 {
|
|
2
|
+
font-size: 2em;
|
|
3
|
+
text-shadow: 2px 2px #000000;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
h2 {
|
|
7
|
+
font-size: 1.75em;
|
|
8
|
+
text-shadow: 2px 2px #000000;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
h3 {
|
|
12
|
+
font-size: 1.5em;
|
|
13
|
+
text-shadow: 2px 2px #000000;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
h4 {
|
|
17
|
+
font-size: 1.25em;
|
|
18
|
+
text-shadow: 2px 2px #000000;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
h5 {
|
|
22
|
+
font-size: 1em;
|
|
23
|
+
text-shadow: 2px 2px #000000;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
h6 {
|
|
27
|
+
font-size: 0.75em;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
p {
|
|
31
|
+
padding: 10px 0 10px 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
blockquote {
|
|
35
|
+
background-color: #4c4c4c;
|
|
36
|
+
border-left-color: #000000;
|
|
37
|
+
border-left-style: solid;
|
|
38
|
+
border-left-width: 6px;
|
|
39
|
+
padding: 20px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
body ol ol {
|
|
43
|
+
padding-left: 20px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
body ol ul {
|
|
47
|
+
padding-left: 20px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
body ul {
|
|
51
|
+
list-style: circle;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
body ul ul {
|
|
55
|
+
padding-left: 20px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
body ul ol {
|
|
59
|
+
padding-left: 20px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
figure {
|
|
63
|
+
background-color: #4c4c4c;
|
|
64
|
+
margin: 0 0 30px 0;
|
|
65
|
+
padding: 10px 20px 0 20px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
figcaption {
|
|
69
|
+
margin: 0 0 10px 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
a:link, a:visited {
|
|
73
|
+
color: #ffffff;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
a:hover, a:visited:hover {
|
|
77
|
+
color: #000000;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
img {
|
|
81
|
+
max-width: 100%;
|
|
82
|
+
padding: 10px 0 10px 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.left {
|
|
86
|
+
float: left;
|
|
87
|
+
margin-right: 20px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.right {
|
|
91
|
+
float: right;
|
|
92
|
+
margin-left: 20px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.center {
|
|
96
|
+
display: block;
|
|
97
|
+
margin-left:auto;
|
|
98
|
+
margin-right:auto;
|
|
99
|
+
padding-bottom: 1px;
|
|
100
|
+
text-align: center;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.small {
|
|
104
|
+
width: 200px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@media screen and (max-width: 500px) {
|
|
108
|
+
.small {
|
|
109
|
+
display: block;
|
|
110
|
+
float: none;
|
|
111
|
+
margin-left:auto;
|
|
112
|
+
margin-right:auto;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.medium {
|
|
117
|
+
width: 350px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@media screen and (max-width: 950px) {
|
|
121
|
+
.medium {
|
|
122
|
+
display: block;
|
|
123
|
+
float: none;
|
|
124
|
+
margin-left:auto;
|
|
125
|
+
margin-right:auto;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.large {
|
|
130
|
+
width: 500px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@media screen and (max-width: 1110px) {
|
|
134
|
+
.large {
|
|
135
|
+
display: block;
|
|
136
|
+
float: none;
|
|
137
|
+
margin-left:auto;
|
|
138
|
+
margin-right:auto;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.full {
|
|
143
|
+
display: block;
|
|
144
|
+
float: none;
|
|
145
|
+
margin-left:auto;
|
|
146
|
+
margin-right:auto;
|
|
147
|
+
width: 100%;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
code {
|
|
151
|
+
background-color: #4c4c4c;
|
|
152
|
+
border-radius: 2px;
|
|
153
|
+
font-family: monospace;
|
|
154
|
+
margin: 0 2px 0 2px;
|
|
155
|
+
padding: 2px 5px 2px 5px;
|
|
156
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
footer {
|
|
2
|
+
background-color: #333333;
|
|
3
|
+
bottom: -1;
|
|
4
|
+
left: 0;
|
|
5
|
+
position: absolute;
|
|
6
|
+
width: 100vw;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.footer-content {
|
|
10
|
+
color: #bababa;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.footer-area {
|
|
14
|
+
margin: 35px auto 0 40px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.footer-area1 {
|
|
18
|
+
margin-right: 40px
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.footer-area2 {
|
|
22
|
+
margin-right: 40px
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.footer-area3 {
|
|
26
|
+
margin-right: 40px
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.footer-area4 {
|
|
30
|
+
align-content: center;
|
|
31
|
+
font-size: 0.75em;
|
|
32
|
+
margin: 35px 0 10px 0;
|
|
33
|
+
text-align: center;
|
|
34
|
+
width: 100vw;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.footer-list {
|
|
38
|
+
list-style-type: none;
|
|
39
|
+
margin: 0;
|
|
40
|
+
padding: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.footer-header {
|
|
44
|
+
font-weight: bold;
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.footer-link {
|
|
49
|
+
font-size: 0.75em;
|
|
50
|
+
padding: 0 5px 0 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
a.footer-link:link, a.footer-link:visited {
|
|
54
|
+
color: #bababa;
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
a.footer-link:hover, a.footer-link:visited:hover {
|
|
59
|
+
color: #ffffff;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.connect-img {
|
|
63
|
+
margin: 5px 5px 5px 5px;
|
|
64
|
+
width: 20px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.footer-paragraph {
|
|
68
|
+
font-size: 0.75em;
|
|
69
|
+
padding: 0;
|
|
70
|
+
width: 150px;
|
|
71
|
+
}
|