fundamental 0.2.4 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +48 -20
- data/_includes/bio.html +33 -0
- data/_includes/bio.svg +14 -0
- data/_layouts/default.html +3 -0
- metadata +5 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a743a4401ee396fd1932bcb8e90a4774fb40510c
|
|
4
|
+
data.tar.gz: d139ab715643578794f54bf80024176b0300c9be
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bb131bed2f9b92a05ff35b99d0320c7253f05924f0c4e851cbab64a27136c49898bb489880885e3bb1edeca069849f85ab468dcbb944e6f9d843ed8146206dba
|
|
7
|
+
data.tar.gz: c7601323c298e81f7049c755eadc1d05ee3259299ab5b0303b57f75c4331c07579e1ca1462551d56c89e748685af5d155da17929fd27ed8dae4c1b2bbe393cc5
|
data/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://badge.fury.io/rb/fundamental)
|
|
4
4
|
|
|
5
|
+
See latest changes in [changelog.md])(https://github.com/theomjones/fundamental/blob/master/changelog.md))
|
|
6
|
+
|
|
5
7
|
Fundamental is a clean, fully responsive, lightweight Jekyll theme for blogging. No frameworks, no JavaScript. It uses system fonts, so no external stylesheets are loaded. The CSS is just 2Kb gzipped.
|
|
6
8
|
|
|
7
9
|
View the [demo here](https://blog.theomjones.com).
|
|
@@ -15,6 +17,7 @@ View the [demo here](https://blog.theomjones.com).
|
|
|
15
17
|
- Automatic header navigation
|
|
16
18
|
- Syntax highlighting
|
|
17
19
|
- Social Buttons
|
|
20
|
+
- Bio Section
|
|
18
21
|
|
|
19
22
|
|
|
20
23
|
|
|
@@ -98,39 +101,64 @@ enabled:
|
|
|
98
101
|
whatsapp: true
|
|
99
102
|
```
|
|
100
103
|
|
|
104
|
+
##### Bio Section
|
|
105
|
+
|
|
106
|
+
You can copy this code into your `config.yml` file. `enabled` can be set to either true or false (as per plugins). You can then edit the fields how you like. The `img_url` can be linked to any image, locally or remote, `false` === a default icon which inherits the colour from `socialBtnsColor`.
|
|
107
|
+
|
|
108
|
+
bio:
|
|
109
|
+
enabled: true
|
|
110
|
+
heading: 'Your bio title'
|
|
111
|
+
subheading: 'Your bio subheading'
|
|
112
|
+
img_url: false #put a url to an image in here or use the icon with false.
|
|
113
|
+
body: >
|
|
114
|
+
In this blog I'm documenting my ever evolving knowledge in
|
|
115
|
+
making things for the web. I'll touch on topics like UI, UX,
|
|
116
|
+
JavaScript, CSS and any other technologies I come across.
|
|
117
|
+
|
|
118
|
+
This appears as a slide out menu from a fixed circular icon in the bottom right corner.
|
|
119
|
+
|
|
101
120
|
#### Layouts
|
|
102
|
-
For blog posts use the `post` layout (this is already set as default via config file, unless changed.) For normal pages use the `page` layout. Naturally, the
|
|
121
|
+
For blog posts use the `post` layout (this is already set as default via config file, unless changed.) For normal pages use the `page` layout. Naturally, the home layout is used for the home page which is where the post-loop (blog) lives. All of these layouts inherit from the `default` layout, which contains the head and footer includes.
|
|
103
122
|
|
|
104
123
|
The other layouts are for the `jekyll-archives` plugin.
|
|
105
124
|
|
|
106
125
|
###### File Structure
|
|
107
126
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
127
|
+
├── _layouts
|
|
128
|
+
│ ├── archive.html
|
|
129
|
+
│ ├── default.html
|
|
130
|
+
| ├── home.html
|
|
131
|
+
│ ├── month.html
|
|
132
|
+
│ ├── page.html
|
|
133
|
+
│ ├── post.html
|
|
134
|
+
| ├── site-archive.html
|
|
135
|
+
│ └── tag_page.html
|
|
117
136
|
|
|
118
137
|
|
|
119
138
|
---
|
|
120
139
|
|
|
121
140
|
#### Includes
|
|
122
|
-
The includes are fairly self explanatory aside from info/item. `info.html` is the post information include in the `post` layout. Item is the blog item that gets outputted on the homepage. `tag-cloud.html` is the
|
|
141
|
+
The includes are fairly self explanatory aside from info/item. `info.html` is the post information include in the `post` layout. Item is the blog item that gets outputted on the homepage. `tag-cloud.html` is the recurrent tag list you see on the homepage/throughout the sites pages.
|
|
142
|
+
There's a few svg includes as well that are just buttons/icons.
|
|
123
143
|
######File structure
|
|
124
144
|
|
|
125
145
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
146
|
+
├── _includes
|
|
147
|
+
│ ├── bio.html
|
|
148
|
+
│ ├── bio.svg
|
|
149
|
+
│ ├── breadcrumbs.html
|
|
150
|
+
│ ├── comments.html
|
|
151
|
+
│ ├── facebook.svg
|
|
152
|
+
│ ├── footer.html
|
|
153
|
+
│ ├── head.html
|
|
154
|
+
│ ├── header.html
|
|
155
|
+
│ ├── info.html
|
|
156
|
+
│ ├── item.html
|
|
157
|
+
│ ├── messenger.svg
|
|
158
|
+
│ ├── share.html
|
|
159
|
+
│ ├── tag-cloud.html
|
|
160
|
+
│ ├── twitter.svg
|
|
161
|
+
│ └── whatsapp.svg
|
|
134
162
|
|
|
135
163
|
|
|
136
164
|
---
|
|
@@ -156,7 +184,7 @@ To overwrite these files, add one with the equivalent name to your `_sass` direc
|
|
|
156
184
|
|
|
157
185
|
###### Variables
|
|
158
186
|
|
|
159
|
-
The first file to customise would be `_variables.scss`, you're probably best copying it from the repo and editing it. You can overwrite any of these variables with your own. There are four palette variables:
|
|
187
|
+
The first file to customise would be `_variables.scss`, you're probably best [copying it from the repo](https://github.com/theomjones/fundamental/blob/master/_sass/_variables.scss) and editing it. You can overwrite any of these variables with your own. There are four palette variables:
|
|
160
188
|
|
|
161
189
|
- `$base: #f5f2f2;` - the body background colour.
|
|
162
190
|
- `$textColor: #444;`
|
data/_includes/bio.html
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<a id="about-link" style="font-size: 2rem; position: fixed; right: 20px; z-index: 3; transition: transform 0.2s linear; bottom: 20px; color: #444">{% if site.bio.img_url %}<img class="avatar" style="box-shadow: -1px 2px 2px 0 rgba(20, 20, 20, .5); max-height: 50px; border-radius: 50%;" src="{{site.bio.img_url}}"/>{% else %}{% include bio.svg %}{% endif %}</a>
|
|
2
|
+
|
|
3
|
+
<div id="info" style="height: 100vh; width: 500px; max-width: 100%; transform: translateX(535px); transition: transform 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); background: white; position: fixed; top: 0; right: 0; box-shadow: 2px 2px 4px 1px rgba(20, 20, 20, .5);">
|
|
4
|
+
<div class="container" style="max-width: 85%">
|
|
5
|
+
<h1 style="margin-bottom: 1rem;">{{site.bio.heading}}</h1>
|
|
6
|
+
<h5 style="margin: 0">{{site.bio.subheading}}</h5>
|
|
7
|
+
<p style="line-height: 1.7;">{{site.bio.body}}</p>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<script type="text/javascript">
|
|
12
|
+
const link = document.getElementById('about-link');
|
|
13
|
+
const infoPanel = document.getElementById('info');
|
|
14
|
+
const main = document.getElementsByTagName('main')[0];
|
|
15
|
+
link.onclick = () => {
|
|
16
|
+
link.classList.toggle('open');
|
|
17
|
+
if (link.classList.contains('open')) {
|
|
18
|
+
infoPanel.style.transform = 'translateX(0)';
|
|
19
|
+
link.style.transform = 'rotate(180deg)';
|
|
20
|
+
} else {
|
|
21
|
+
infoPanel.style.transform = 'translateX(535px)';
|
|
22
|
+
link.style.transform = 'rotate(0)';
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
if (!link.classList.contains('open')){
|
|
27
|
+
main.onclick = () => {
|
|
28
|
+
infoPanel.style.transform = 'translateX(535px)';
|
|
29
|
+
link.classList.toggle('open');
|
|
30
|
+
link.style.transform = 'rotate(0)';
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
</script>
|
data/_includes/bio.svg
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
|
+
<defs>
|
|
3
|
+
<path d="M28 52C14.193 52 3 40.807 3 27S14.193 2 28 2s25 11.193 25 25-11.193 25-25 25zm0-25c2.644 0 4.787-2.143 4.787-4.787S30.644 17.426 28 17.426s-4.787 2.143-4.787 4.787S25.356 27 28 27zm.133 2.66c-7.402 0-9.707 4.787-9.707 4.787v2.393H37.84v-2.393s-2.305-4.787-9.707-4.787z" id="b"/>
|
|
4
|
+
<filter y="-8%" filterUnits="objectBoundingBox" id="a">
|
|
5
|
+
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
|
6
|
+
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
|
|
7
|
+
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/>
|
|
8
|
+
</filter>
|
|
9
|
+
</defs>
|
|
10
|
+
<g fill="none" fill-rule="evenodd">
|
|
11
|
+
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
|
|
12
|
+
<use fill="{{site.socialBtnsColor}}" xlink:href="#b"/>
|
|
13
|
+
</g>
|
|
14
|
+
</svg>
|
data/_layouts/default.html
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: fundamental
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Theo M Jones
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-08-
|
|
11
|
+
date: 2017-08-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -89,6 +89,8 @@ extra_rdoc_files: []
|
|
|
89
89
|
files:
|
|
90
90
|
- LICENSE.txt
|
|
91
91
|
- README.md
|
|
92
|
+
- _includes/bio.html
|
|
93
|
+
- _includes/bio.svg
|
|
92
94
|
- _includes/breadcrumbs.html
|
|
93
95
|
- _includes/comments.html
|
|
94
96
|
- _includes/facebook.svg
|
|
@@ -122,7 +124,7 @@ files:
|
|
|
122
124
|
- _sass/_variables.scss
|
|
123
125
|
- assets/images/logo.svg
|
|
124
126
|
- assets/main.scss
|
|
125
|
-
homepage:
|
|
127
|
+
homepage: https://github.com/theomjones/fundamental
|
|
126
128
|
licenses:
|
|
127
129
|
- MIT
|
|
128
130
|
metadata: {}
|