fundamental 0.2.4 → 0.3.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 +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: {}
|