ello-jekyll-vcard-theme 0.0.1.2 → 0.0.1.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 +4 -4
- data/README.md +87 -10
- data/_includes/footer.html +1 -1
- data/_includes/head.html +14 -8
- data/_includes/hidden.html +19 -0
- data/_layouts/default.html +7 -7
- data/_sass/base.scss +4 -0
- data/_sass/color.scss +4 -1
- data/_sass/components/contact-box.scss +318 -0
- data/_sass/helpers.scss +7 -0
- data/assets/css/main.scss +1 -1
- data/assets/js/animation.js +1 -1
- metadata +6 -5
- data/_sass/componets/contact-box.scss +0 -371
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 18a907abb08e8a94fc9f57766e40ec9b070798fb7729547b7363f12227d49d6d
|
|
4
|
+
data.tar.gz: 38a33c4d74bd3527b589d5edec08fc45d7a83c2e8acda53e5963a56e280ce31a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0116bb9512fc966ce743f824693086740f1fc74c022e7ed0fc87bd0515b38f1f59223225654aad08840e8b29cfaae157e98a2115d635014bc8cf68d555b4c516
|
|
7
|
+
data.tar.gz: 8b4fb2bce9c7726f3af7d65d574b09881a79cc6f6bdd28cfe0ae1fb26be2304ff1e5c725313cd6ea69fe52bd65b7300400b92e2663d4d4067a410820af167d28
|
data/README.md
CHANGED
|
@@ -1,9 +1,25 @@
|
|
|
1
|
-
# ELLO 👋 JEKYLL: A Jekyll
|
|
1
|
+
# ELLO 👋 JEKYLL: A vCard-style Jekyll Theme
|
|
2
2
|
|
|
3
|
-
Ello is a simple animated Jekyll vCard theme by [Randall](https://ran-dall.github.io), optimized for use with GitHub Pages (but can be used wherever Jekyll can
|
|
3
|
+
Ello is a simple animated Jekyll vCard-style theme by [Randall](https://ran-dall.github.io), optimized for use with GitHub Pages (but can be used wherever Jekyll can be installed).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Utilizing this theme you can create a simple vCard-style web site with embedded `h-card` and `Schema` data; which can then serve as a centralized location with all your contact data.
|
|
6
6
|
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
Both the CSS and JS have been [cache-busted](https://ultimatecourses.com/blog/cache-busting-jekyll-github-pages).
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
###### Base Theme Demo: https://ran-dall.github.io/ello-jekyll/
|
|
14
|
+
|
|
15
|
+
###### RubyGems page: https://rubygems.org/gems/ello-jekyll-vcard-theme
|
|
16
|
+
|
|
17
|
+
> You can also look my personal GitHub Pages site, which uses this theme but has several modifications.
|
|
18
|
+
>
|
|
19
|
+
> ###### My GitHub Pages site: https://ran-dall.github.io/
|
|
20
|
+
> ###### My GitHub Pages site repo: https://github.com/ran-dall/ran-dall.github.io
|
|
21
|
+
|
|
22
|
+
---
|
|
7
23
|
## Installation
|
|
8
24
|
|
|
9
25
|
Add this line to your Jekyll site's `Gemfile`:
|
|
@@ -24,15 +40,63 @@ And then execute:
|
|
|
24
40
|
|
|
25
41
|
Or install it yourself as:
|
|
26
42
|
|
|
27
|
-
$ gem install jekyll-vcard-theme
|
|
43
|
+
$ gem install ello-jekyll-vcard-theme
|
|
28
44
|
|
|
29
45
|
## Usage
|
|
30
46
|
|
|
31
|
-
If you install this theme as a gem, you'll be required to make your own `index.html`, `_data/main.yaml`, and `data/details.yaml` files. You can use the files included in this repository (which are originally came from my [GitHub Pages site](https://ran-dall.github.io)) as working example of what's required.
|
|
32
|
-
|
|
33
47
|
### TL;DR
|
|
34
48
|
|
|
35
|
-
Use `main.yaml` to update the information on the `contact-box` with whatever you wish to display
|
|
49
|
+
Use `main.yaml` to update the information on the `contact-box` area with whatever you wish to display.
|
|
50
|
+
|
|
51
|
+
Use `details.yaml` to list all the profiles you want to link to from your site. Currently, there can be up to 24 contact links; but it's something you can modify [on **line 216**](https://github.com/ran-dall/ello-jekyll/blob/42535e1874e0d0987e0926b241d9bb91525464d3/_sass/componets/contact-box.scss#L216).
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
If you install this theme as a `remote-theme` for GitHub Pages or as a gem (GitHub Pages or not), you'll be required to make your own `index.html`, `_data/main.yaml`, and `data/details.yaml` files. You can use the files included in this repository (which initially came from my [GitHub Pages site](https://ran-dall.github.io)) as a working example of what's required.
|
|
56
|
+
|
|
57
|
+
###### GitHub Pages
|
|
58
|
+
|
|
59
|
+
If you plan on using this theme on GitHub Pages, it is prefered you use is as a 'remote theme.' To do so, you must declare `ello-jekyll-vcard-theme` in your `_config.yaml` file as a `remote-theme` as described in [this blog post](https://github.blog/2017-11-29-use-any-theme-with-github-pages/).
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
#### [`h-card` Mircoformat2](microformats.org/wiki/h-card)
|
|
64
|
+
|
|
65
|
+
The `h-card` Mircoformat2 format is a simple specification which updates the `hcard` Microformat specification, [which focused on bringing `vCards` to the web.](https://hcardcreator.com/articles/what-hcard-vcard-microformats) Aside from publishing information about a person, [when combined with `XFN`](http://microformats.org/wiki/xfn-to-foaf), `h-card` has some of the basic functionality required to declare relationships to achieve [social-network-portability](http://microformats.org/wiki/hcard-supporting-user-profiles).
|
|
66
|
+
|
|
67
|
+
The `details.yaml` file, has an assigned `h-card` area embedded with the specific `h-card` options in each `contact` entry.
|
|
68
|
+
|
|
69
|
+
##### Specification Details:
|
|
70
|
+
|
|
71
|
+
- http://microformats.org/wiki/h-card
|
|
72
|
+
- The `h-card` web page
|
|
73
|
+
- http://microformats.org/wiki/hcard
|
|
74
|
+
- The `hcard` web page
|
|
75
|
+
|
|
76
|
+
##### Verification Sample:
|
|
77
|
+
|
|
78
|
+
- https://indiewebify.me/validate-h-card/?url=https%3A%2F%2Fran-dall.github.io%2Fello-jekyll%2F
|
|
79
|
+
- https://pin13.net/mf2/?url=https%3A%2F%2Fran-dall.github.io%2Fello-jekyll%2F
|
|
80
|
+
|
|
81
|
+
##### Extra Resources:
|
|
82
|
+
|
|
83
|
+
- http://microformats.org/wiki/microformats2
|
|
84
|
+
- The `microformats2` web page
|
|
85
|
+
- https://developer.mozilla.org/en-US/docs/Web/HTML/microformats
|
|
86
|
+
- Mozilla's knowledge base article describing microformats
|
|
87
|
+
- http://microformats.org/wiki/hcard-supporting-user-profiles
|
|
88
|
+
- A page about`hcard`'s `social-network-portability` features
|
|
89
|
+
- https://stackoverflow.com/questions/25840618/social-media-profiles-in-h-card-html-microformats
|
|
90
|
+
- An experimental idea to implement Social Media Network names into `h-card`
|
|
91
|
+
- http://xmlns.com/foaf/spec/
|
|
92
|
+
- The `FOAF` web page
|
|
93
|
+
- http://microformats.org/wiki/xfn-to-foaf
|
|
94
|
+
- Information on XFN to FOAF
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
#### `./favicon.png`
|
|
99
|
+
If you wish to display a Favicon, you may do so by simply adding a `.png` image to the root of the site.
|
|
36
100
|
|
|
37
101
|
#### `main.yaml`
|
|
38
102
|
- `hi` - The main message displayed on the top of the `contact-box.` In the example provided, I'm using a secondary `site.data.details.name` variable to input my name; which can be further modified in the `details.yaml` file.
|
|
@@ -54,11 +118,18 @@ Use `main.yaml` to update the information on the `contact-box` with whatever you
|
|
|
54
118
|
- `user-id` - Your User-ID on the Network, which will be displayed as a subtitle.
|
|
55
119
|
- `link` - Link to your profile on Network, which will be linked to the box.
|
|
56
120
|
- `icon` - Link from [Font-Awesome Icon Library](https://fontawesome.com/icons), which will be displayed.
|
|
121
|
+
- `h-card`
|
|
122
|
+
- `class` - a `h-card` formatted class
|
|
123
|
+
- `secondary-class` - a `h-card` formatted secondary class or value
|
|
124
|
+
- `rel` - can be used to add XFN `rel` attributes
|
|
125
|
+
|
|
126
|
+
#### `includes/hidden.html`
|
|
127
|
+
**It's important to note that Google strongly discourages hidden data**, but in case you do want to embed some extra info; you may do so by adding it to the `includes/hidden.html` file. You can see the example file that's included in this repo for a working example.
|
|
57
128
|
|
|
58
129
|
#### Note about STYLES
|
|
59
130
|
Currently **ONLY** the following Networks are supported (#HEX included):
|
|
60
131
|
|
|
61
|
-
*
|
|
132
|
+
* icloud: `#A3AAAE` - `iCloud's color`
|
|
62
133
|
* s(ecure)-email: `#0091FF` - `Criptext's color`
|
|
63
134
|
* headmaster: `#ff5555` - `Headmaster's Color (...my Medium publication)`
|
|
64
135
|
* work: `#bd93f9` - `Conjured's Color (...where I work)`
|
|
@@ -76,7 +147,7 @@ Currently **ONLY** the following Networks are supported (#HEX included):
|
|
|
76
147
|
* facebook: `#3b5998`
|
|
77
148
|
* twitter: `#1da1f2`
|
|
78
149
|
|
|
79
|
-
|
|
150
|
+
To add more Networks, you must also add the network in `_sass/components/contact-box.scss`. [On **`line 262`**](https://github.com/ran-dall/ello-jekyll/blob/42535e1874e0d0987e0926b241d9bb91525464d3/_sass/componets/contact-box.scss#L262), you should see the top of the currently supported Networks listed. You can add the network anywhere you desire in the following format...
|
|
80
151
|
|
|
81
152
|
```
|
|
82
153
|
&.<slug-from-details-yaml> {
|
|
@@ -84,7 +155,9 @@ In order to add more Networks, you must also add the network in `_sass/componets
|
|
|
84
155
|
}
|
|
85
156
|
```
|
|
86
157
|
|
|
87
|
-
|
|
158
|
+
Currently, there can be up to 24 contact links; but it's something you can modify [on **line 216**](https://github.com/ran-dall/ello-jekyll/blob/42535e1874e0d0987e0926b241d9bb91525464d3/_sass/componets/contact-box.scss#L216).
|
|
159
|
+
|
|
160
|
+
You are more than welcome to add more with [Jekyll's override feature for Gem themes](https://jekyllrb.com/docs/themes/#overriding-theme-defaults) and/or contribute the modification to [this theme's GitHub repository](https://github.com/ran-dall/ello-jekyll).
|
|
88
161
|
|
|
89
162
|
|
|
90
163
|
## Contributing
|
|
@@ -103,3 +176,7 @@ To add a custom directory to your theme-gem, please edit the regexp in `vcard.ge
|
|
|
103
176
|
## License
|
|
104
177
|
|
|
105
178
|
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
This theme was based on an original [Dribbble](https://dribbble.com/shots/2723297-Contact-Me-UI-Animation) by [Riccardo Cavallo](https://dribbble.com/richox) and a [CodePen](https://codepen.io/BeanBaag/pen/dzyGpM) by [Aaron Taylor](https://twitter.com/beanbaag).
|
data/_includes/footer.html
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
2
|
-
<script src="{{
|
|
2
|
+
<script src="{{ site.baseurl }}/assets/js/animation.js?{{ site.time | date: '%s%N' }}"></script>
|
data/_includes/head.html
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
+
|
|
1
2
|
<head>
|
|
2
|
-
<meta charset="utf-8">
|
|
3
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
3
|
{%- seo -%}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<!-- Favicon -->
|
|
8
|
+
<link rel="shortcut icon" type="image/png" href="favicon.png">
|
|
9
|
+
<!-- Style sheet -->
|
|
10
|
+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css?{{ site.time | date: '%s%N' }}">
|
|
11
|
+
<!-- Font Awesome -->
|
|
12
|
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
|
13
|
+
<!-- Google Analytics -->
|
|
14
|
+
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
|
15
|
+
{%- include google-analytics.html -%}
|
|
16
|
+
{%- endif -%}
|
|
11
17
|
</head>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- Hidden Data -->
|
|
2
|
+
<data style="display: none;">
|
|
3
|
+
<data id="age" value="29"></data>
|
|
4
|
+
<time class="dt-bday" datetime="1990-01-18"></time>
|
|
5
|
+
<data class="p-gender-identity"><span class="p-sex">M</span></data>
|
|
6
|
+
<data class="p-language" value="en_US"></data>
|
|
7
|
+
<data class="p-language" value="en_GB"></data>
|
|
8
|
+
<data class="p-language" value="en_PI"></data>
|
|
9
|
+
<data class="p-language" value="es_LA"></data>
|
|
10
|
+
<data class="p-language" value="es_CL"></data>
|
|
11
|
+
<data class="p-language" value="es_CO"></data>
|
|
12
|
+
<data class="p-language" value="es_ES"></data>
|
|
13
|
+
<data class="p-language" value="es_MX"></data>
|
|
14
|
+
<data class="p-language" value="es_VE"></data>
|
|
15
|
+
<data class="p-language" value="fb_LT"></data>
|
|
16
|
+
<data class="p-relationship-status">Married</data>
|
|
17
|
+
<data class="p-interested-in">Women</data>
|
|
18
|
+
<data class="p-dietary-preference">Ask my wife</data>
|
|
19
|
+
</data>
|
data/_layouts/default.html
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
{%- include head.html -%}
|
|
5
|
+
|
|
6
|
+
<body>
|
|
7
|
+
{{ content }}
|
|
8
|
+
|
|
9
|
+
{%- include footer.html -%}
|
|
10
|
+
</body>
|
|
11
11
|
</html>
|
data/_sass/base.scss
CHANGED
data/_sass/color.scss
CHANGED
|
@@ -14,9 +14,12 @@ $color-3: #86E2D5;
|
|
|
14
14
|
$white: #f8f8f2;
|
|
15
15
|
$black: #282a36;
|
|
16
16
|
|
|
17
|
+
//GPG
|
|
18
|
+
$gpg: #ff79c6;
|
|
19
|
+
|
|
17
20
|
// Social media
|
|
18
21
|
|
|
19
|
-
$
|
|
22
|
+
$icloud: #A3AAAE; // iCloud's color
|
|
20
23
|
$s-email: #0091FF; // Criptext's color
|
|
21
24
|
$headmaster: #ff5555;
|
|
22
25
|
$work: #bd93f9;
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
/* =============================================================================
|
|
2
|
+
CONTACT BOX
|
|
3
|
+
============================================================================= */
|
|
4
|
+
|
|
5
|
+
.contact-area {
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100vh;
|
|
8
|
+
position: absolute;
|
|
9
|
+
}
|
|
10
|
+
.contact {
|
|
11
|
+
position: relative;
|
|
12
|
+
max-width: 500px;
|
|
13
|
+
padding: 40px 20px;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
margin: 0 auto;
|
|
16
|
+
z-index: 1;
|
|
17
|
+
@media (min-width: 1024px) {
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 50%;
|
|
20
|
+
left: 50%;
|
|
21
|
+
@include transform(translate(-50%, -50%));
|
|
22
|
+
}
|
|
23
|
+
main {
|
|
24
|
+
float: left;
|
|
25
|
+
width: 100%;
|
|
26
|
+
position: relative;
|
|
27
|
+
section {
|
|
28
|
+
border-radius: 5px;
|
|
29
|
+
float: left;
|
|
30
|
+
width: 100%;
|
|
31
|
+
background-color: $color-1;
|
|
32
|
+
.content {
|
|
33
|
+
float: left;
|
|
34
|
+
width: 100%;
|
|
35
|
+
padding: 20px 30px 50px 30px;
|
|
36
|
+
position: relative;
|
|
37
|
+
text-align: center;
|
|
38
|
+
@media (min-width: 414px) {
|
|
39
|
+
text-align: left;
|
|
40
|
+
}
|
|
41
|
+
img {
|
|
42
|
+
display: inline-block;
|
|
43
|
+
width: 140px;
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
@media (min-width: 414px) {
|
|
46
|
+
float: left;
|
|
47
|
+
width: 30%;
|
|
48
|
+
margin-right: 10%;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
aside {
|
|
52
|
+
float: left;
|
|
53
|
+
width: 100%;
|
|
54
|
+
color: $white;
|
|
55
|
+
margin-top: 10px;
|
|
56
|
+
@media (min-width: 414px) {
|
|
57
|
+
width: 60%;
|
|
58
|
+
}
|
|
59
|
+
h1 {
|
|
60
|
+
font-family: 'Permanent Marker', cursive;
|
|
61
|
+
font-weight: 100;
|
|
62
|
+
font-size: 22px;
|
|
63
|
+
margin-bottom: 10px;
|
|
64
|
+
}
|
|
65
|
+
p {
|
|
66
|
+
font-size: 14px;
|
|
67
|
+
letter-spacing: .5px;
|
|
68
|
+
line-height: 160%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.top-title {
|
|
74
|
+
float: left;
|
|
75
|
+
width: 100%;
|
|
76
|
+
background-color: $color-2;
|
|
77
|
+
max-height: 0px;
|
|
78
|
+
border-bottom-left-radius: 5px;
|
|
79
|
+
border-bottom-right-radius: 5px;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
@include transition(all .55s);
|
|
82
|
+
&.active {
|
|
83
|
+
max-height: 100px;
|
|
84
|
+
@include transition(all 1.3s);
|
|
85
|
+
p {
|
|
86
|
+
@include transform(scale(1));
|
|
87
|
+
transition-delay: .2s;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
p {
|
|
91
|
+
padding: 15px 30px;
|
|
92
|
+
color: $white;
|
|
93
|
+
font-size: 16px;
|
|
94
|
+
display: inline-block;
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
text-transform: uppercase;
|
|
97
|
+
letter-spacing: .5px;
|
|
98
|
+
@include transition(all .3s);
|
|
99
|
+
@include transform(scale(0));
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
button {
|
|
103
|
+
position: absolute;
|
|
104
|
+
bottom: 0;
|
|
105
|
+
right: 50%;
|
|
106
|
+
background-color: $color-3;
|
|
107
|
+
color: $color-2;
|
|
108
|
+
border: 0;
|
|
109
|
+
width: 200px;
|
|
110
|
+
height: 48px;
|
|
111
|
+
text-align: center;
|
|
112
|
+
border-radius: 30px;
|
|
113
|
+
font-size: 16px;
|
|
114
|
+
letter-spacing: .5px;
|
|
115
|
+
text-transform: uppercase;
|
|
116
|
+
margin-bottom: -24px;
|
|
117
|
+
margin-right: -100px;
|
|
118
|
+
@include transition(all .4s);
|
|
119
|
+
transition-delay: .1s;
|
|
120
|
+
outline: none;
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
z-index: 10;
|
|
123
|
+
font-family: inherit;
|
|
124
|
+
font-weight: 200;
|
|
125
|
+
@include drop-shadow(95, 111, 155, 0.46);
|
|
126
|
+
span {
|
|
127
|
+
opacity: 1;
|
|
128
|
+
@include transition(opacity .2s);
|
|
129
|
+
transition-delay: .4s;
|
|
130
|
+
display: block;
|
|
131
|
+
width: 200px;
|
|
132
|
+
float: left;
|
|
133
|
+
padding: 15px 0px;
|
|
134
|
+
}
|
|
135
|
+
svg {
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: 50%;
|
|
138
|
+
left: 50%;
|
|
139
|
+
@include transform(translate(-50%, -50%));
|
|
140
|
+
opacity: 0;
|
|
141
|
+
@include transition(all .4s);
|
|
142
|
+
path {
|
|
143
|
+
fill: $color-2;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
&.active {
|
|
147
|
+
margin-right: 0;
|
|
148
|
+
right: 20px;
|
|
149
|
+
width: 65px;
|
|
150
|
+
height: 65px;
|
|
151
|
+
margin-bottom: -32.5px;
|
|
152
|
+
text-indent: 100%;
|
|
153
|
+
white-space: nowrap;
|
|
154
|
+
overflow: hidden;
|
|
155
|
+
border-radius: 65px;
|
|
156
|
+
@include drop-shadow(95, 111, 155, 0.46);
|
|
157
|
+
span {
|
|
158
|
+
opacity: 0;
|
|
159
|
+
transition-delay: 0s;
|
|
160
|
+
width: 200px;
|
|
161
|
+
}
|
|
162
|
+
svg {
|
|
163
|
+
opacity: 1;
|
|
164
|
+
transition-delay: .5s;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
nav {
|
|
170
|
+
float: left;
|
|
171
|
+
width: 100%;
|
|
172
|
+
overflow-x: hidden;
|
|
173
|
+
overflow-y: scroll;
|
|
174
|
+
max-height: 0px;
|
|
175
|
+
@include transition(all .5s);
|
|
176
|
+
overflow: auto;
|
|
177
|
+
-ms-overflow-style: none;
|
|
178
|
+
/* IE 11 */
|
|
179
|
+
scrollbar-width: none;
|
|
180
|
+
/* Firefox 64 */
|
|
181
|
+
filter: drop-shadow(0 0 0.30rem #bd93f9);
|
|
182
|
+
&::-webkit-scrollbar {
|
|
183
|
+
width: 0 !important
|
|
184
|
+
}
|
|
185
|
+
&.active {
|
|
186
|
+
max-height: 600px;
|
|
187
|
+
@include transition(all 1s);
|
|
188
|
+
a {
|
|
189
|
+
opacity: 1;
|
|
190
|
+
@include transform(translateY(0px));
|
|
191
|
+
@include transition(all .7s); // Control for Contact Boxes
|
|
192
|
+
@for $i from 1 through 24 {
|
|
193
|
+
&:nth-of-type(#{$i}) {
|
|
194
|
+
// Delay the animation. Delay increases as items loop.
|
|
195
|
+
transition-delay: $i * (.20s);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
.scroll {
|
|
201
|
+
text-align: center;
|
|
202
|
+
margin-top: .5rem;
|
|
203
|
+
margin-bottom: -.5rem;
|
|
204
|
+
filter: drop-shadow(0 0 0.10rem #282a36);
|
|
205
|
+
color: #f8f8f2;
|
|
206
|
+
opacity: 0.65;
|
|
207
|
+
}
|
|
208
|
+
a {
|
|
209
|
+
float: left;
|
|
210
|
+
width: 100%;
|
|
211
|
+
margin-top: 18px;
|
|
212
|
+
background-color: $white;
|
|
213
|
+
padding: 18px 20px;
|
|
214
|
+
border-radius: 5px;
|
|
215
|
+
text-decoration: none;
|
|
216
|
+
@include transition(all .3s);
|
|
217
|
+
opacity: 0;
|
|
218
|
+
@include transform(translateY(-10px));
|
|
219
|
+
position: relative;
|
|
220
|
+
@media (min-width: 414px) {
|
|
221
|
+
padding: 18px 30px;
|
|
222
|
+
}
|
|
223
|
+
.arrow {
|
|
224
|
+
position: absolute;
|
|
225
|
+
right: 15px;
|
|
226
|
+
top: 50%;
|
|
227
|
+
@include transform(translateY(-50%));
|
|
228
|
+
path {
|
|
229
|
+
fill: darken($white, 10%);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
&.headmaster {
|
|
233
|
+
@include icon-styles($headmaster)
|
|
234
|
+
}
|
|
235
|
+
&.work {
|
|
236
|
+
@include icon-styles($work)
|
|
237
|
+
}
|
|
238
|
+
&.icloud {
|
|
239
|
+
@include icon-styles($icloud)
|
|
240
|
+
}
|
|
241
|
+
&.s-email {
|
|
242
|
+
@include icon-styles($s-email)
|
|
243
|
+
}
|
|
244
|
+
&.google {
|
|
245
|
+
@include icon-styles($google)
|
|
246
|
+
}
|
|
247
|
+
&.keybase {
|
|
248
|
+
@include icon-styles($keybase)
|
|
249
|
+
}
|
|
250
|
+
&.github {
|
|
251
|
+
@include icon-styles($github)
|
|
252
|
+
}
|
|
253
|
+
&.gitlab {
|
|
254
|
+
@include icon-styles($gitlab)
|
|
255
|
+
}
|
|
256
|
+
&.rubygems {
|
|
257
|
+
@include icon-styles($rubygems)
|
|
258
|
+
}
|
|
259
|
+
&.bitbucket {
|
|
260
|
+
@include icon-styles($bitbucket)
|
|
261
|
+
}
|
|
262
|
+
&.medium {
|
|
263
|
+
@include icon-styles($medium)
|
|
264
|
+
}
|
|
265
|
+
&.dribbble {
|
|
266
|
+
@include icon-styles($dribbble)
|
|
267
|
+
}
|
|
268
|
+
&.behance {
|
|
269
|
+
@include icon-styles($behance)
|
|
270
|
+
}
|
|
271
|
+
&.telegram {
|
|
272
|
+
@include icon-styles($telegram)
|
|
273
|
+
}
|
|
274
|
+
&.linkedin {
|
|
275
|
+
@include icon-styles($linkedin)
|
|
276
|
+
}
|
|
277
|
+
&.angellist {
|
|
278
|
+
@include icon-styles($angellist)
|
|
279
|
+
}
|
|
280
|
+
&.facebook {
|
|
281
|
+
@include icon-styles($facebook)
|
|
282
|
+
}
|
|
283
|
+
&.twitter {
|
|
284
|
+
@include icon-styles($twitter)
|
|
285
|
+
}
|
|
286
|
+
.icon {
|
|
287
|
+
float: left;
|
|
288
|
+
width: 50px;
|
|
289
|
+
height: 50px;
|
|
290
|
+
border-radius: 50%;
|
|
291
|
+
overflow: hidden;
|
|
292
|
+
margin-right: 20px;
|
|
293
|
+
svg {
|
|
294
|
+
width: 100%;
|
|
295
|
+
height: 100%;
|
|
296
|
+
padding: 14px;
|
|
297
|
+
path {
|
|
298
|
+
fill: $white;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
.content {
|
|
303
|
+
h1 {
|
|
304
|
+
font-size: 20px;
|
|
305
|
+
font-weight: 400;
|
|
306
|
+
line-height: 160%;
|
|
307
|
+
letter-spacing: .4px;
|
|
308
|
+
}
|
|
309
|
+
span {
|
|
310
|
+
font-size: 14px;
|
|
311
|
+
color: $black;
|
|
312
|
+
display: block;
|
|
313
|
+
letter-spacing: .4px;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|
data/_sass/helpers.scss
CHANGED
|
@@ -5,3 +5,10 @@ HELPERS
|
|
|
5
5
|
text-align: center;
|
|
6
6
|
font-size: 2rem;
|
|
7
7
|
}
|
|
8
|
+
|
|
9
|
+
.nolink, .nolink:hover, .nolink:focus, .nolink:active, .nolink:visited {
|
|
10
|
+
color: inherit !important;
|
|
11
|
+
text-decoration: inherit !important;
|
|
12
|
+
cursor: inherit !important;
|
|
13
|
+
outline: none !important;
|
|
14
|
+
}
|
data/assets/css/main.scss
CHANGED
data/assets/js/animation.js
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ello-jekyll-vcard-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.1.
|
|
4
|
+
version: 0.0.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Randall
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-06-
|
|
11
|
+
date: 2019-06-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -91,10 +91,11 @@ files:
|
|
|
91
91
|
- _includes/footer.html
|
|
92
92
|
- _includes/google-analytics.html
|
|
93
93
|
- _includes/head.html
|
|
94
|
+
- _includes/hidden.html
|
|
94
95
|
- _layouts/default.html
|
|
95
96
|
- _sass/base.scss
|
|
96
97
|
- _sass/color.scss
|
|
97
|
-
- _sass/
|
|
98
|
+
- _sass/components/contact-box.scss
|
|
98
99
|
- _sass/helpers.scss
|
|
99
100
|
- _sass/mixins.scss
|
|
100
101
|
- assets/css/main.scss
|
|
@@ -121,6 +122,6 @@ requirements: []
|
|
|
121
122
|
rubygems_version: 3.0.3
|
|
122
123
|
signing_key:
|
|
123
124
|
specification_version: 4
|
|
124
|
-
summary: Ello is a simple animated Jekyll vCard theme by Randall, optimized
|
|
125
|
-
with GitHub Pages (but can be used wherever
|
|
125
|
+
summary: Ello is a simple animated Jekyll vCard style theme by Randall, optimized
|
|
126
|
+
for use with GitHub Pages (but can be used wherever).
|
|
126
127
|
test_files: []
|
|
@@ -1,371 +0,0 @@
|
|
|
1
|
-
/* =============================================================================
|
|
2
|
-
CONTACT BOX
|
|
3
|
-
============================================================================= */
|
|
4
|
-
|
|
5
|
-
.contact-area {
|
|
6
|
-
width: 100%;
|
|
7
|
-
height: 100vh;
|
|
8
|
-
position: absolute;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.contact {
|
|
12
|
-
position: relative;
|
|
13
|
-
max-width: 500px;
|
|
14
|
-
padding: 40px 20px;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
margin: 0 auto;
|
|
17
|
-
z-index: 1;
|
|
18
|
-
|
|
19
|
-
@media (min-width: 1024px) {
|
|
20
|
-
position: absolute;
|
|
21
|
-
top: 50%;
|
|
22
|
-
left: 50%;
|
|
23
|
-
@include transform(translate(-50%, -50%));
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
main {
|
|
27
|
-
float: left;
|
|
28
|
-
width: 100%;
|
|
29
|
-
position: relative;
|
|
30
|
-
|
|
31
|
-
section {
|
|
32
|
-
border-radius: 5px;
|
|
33
|
-
float: left;
|
|
34
|
-
width: 100%;
|
|
35
|
-
background-color: $color-1;
|
|
36
|
-
|
|
37
|
-
.content {
|
|
38
|
-
float: left;
|
|
39
|
-
width: 100%;
|
|
40
|
-
padding: 20px 30px 50px 30px;
|
|
41
|
-
position: relative;
|
|
42
|
-
text-align: center;
|
|
43
|
-
|
|
44
|
-
@media (min-width: 414px) {
|
|
45
|
-
text-align: left;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
img {
|
|
49
|
-
display: inline-block;
|
|
50
|
-
width: 140px;
|
|
51
|
-
border-radius: 50%;
|
|
52
|
-
|
|
53
|
-
@media (min-width: 414px) {
|
|
54
|
-
float: left;
|
|
55
|
-
width: 30%;
|
|
56
|
-
margin-right: 10%;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
aside {
|
|
61
|
-
float: left;
|
|
62
|
-
width: 100%;
|
|
63
|
-
color: $white;
|
|
64
|
-
margin-top: 10px;
|
|
65
|
-
|
|
66
|
-
@media (min-width: 414px) {
|
|
67
|
-
width: 60%;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
h1 {
|
|
71
|
-
font-family: 'Permanent Marker', cursive;
|
|
72
|
-
font-weight: 100;
|
|
73
|
-
font-size: 22px;
|
|
74
|
-
margin-bottom: 10px;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
p {
|
|
78
|
-
font-size: 14px;
|
|
79
|
-
letter-spacing: .5px;
|
|
80
|
-
line-height: 160%;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.title {
|
|
87
|
-
float: left;
|
|
88
|
-
width: 100%;
|
|
89
|
-
background-color: $color-2;
|
|
90
|
-
max-height: 0px;
|
|
91
|
-
border-bottom-left-radius: 5px;
|
|
92
|
-
border-bottom-right-radius: 5px;
|
|
93
|
-
overflow: hidden;
|
|
94
|
-
@include transition(all .55s);
|
|
95
|
-
|
|
96
|
-
&.active {
|
|
97
|
-
max-height: 100px;
|
|
98
|
-
@include transition(all 1.3s);
|
|
99
|
-
|
|
100
|
-
p {
|
|
101
|
-
@include transform(scale(1));
|
|
102
|
-
transition-delay: .2s;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
p {
|
|
107
|
-
padding: 15px 30px;
|
|
108
|
-
color: $white;
|
|
109
|
-
font-size: 16px;
|
|
110
|
-
display: inline-block;
|
|
111
|
-
font-weight: 500;
|
|
112
|
-
text-transform: uppercase;
|
|
113
|
-
letter-spacing: .5px;
|
|
114
|
-
@include transition(all .3s);
|
|
115
|
-
@include transform(scale(0));
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
button {
|
|
120
|
-
position: absolute;
|
|
121
|
-
bottom: 0;
|
|
122
|
-
right: 50%;
|
|
123
|
-
background-color: $color-3;
|
|
124
|
-
color: $color-2;
|
|
125
|
-
border: 0;
|
|
126
|
-
width: 200px;
|
|
127
|
-
height: 48px;
|
|
128
|
-
text-align: center;
|
|
129
|
-
border-radius: 30px;
|
|
130
|
-
font-size: 16px;
|
|
131
|
-
letter-spacing: .5px;
|
|
132
|
-
text-transform: uppercase;
|
|
133
|
-
margin-bottom: -24px;
|
|
134
|
-
margin-right: -100px;
|
|
135
|
-
@include transition(all .4s);
|
|
136
|
-
transition-delay: .1s;
|
|
137
|
-
outline: none;
|
|
138
|
-
overflow: hidden;
|
|
139
|
-
z-index: 10;
|
|
140
|
-
font-family: inherit;
|
|
141
|
-
font-weight: 200;
|
|
142
|
-
@include drop-shadow(95,111,155,0.46);
|
|
143
|
-
|
|
144
|
-
span {
|
|
145
|
-
opacity: 1;
|
|
146
|
-
@include transition(opacity .2s);
|
|
147
|
-
transition-delay: .4s;
|
|
148
|
-
display: block;
|
|
149
|
-
width: 200px;
|
|
150
|
-
float: left;
|
|
151
|
-
padding: 15px 0px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
svg {
|
|
155
|
-
position: absolute;
|
|
156
|
-
top: 50%;
|
|
157
|
-
left: 50%;
|
|
158
|
-
@include transform(translate(-50%, -50%));
|
|
159
|
-
opacity: 0;
|
|
160
|
-
@include transition(all .4s);
|
|
161
|
-
|
|
162
|
-
path {
|
|
163
|
-
fill: $color-2;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
&.active {
|
|
168
|
-
margin-right: 0;
|
|
169
|
-
right: 20px;
|
|
170
|
-
width: 65px;
|
|
171
|
-
height: 65px;
|
|
172
|
-
margin-bottom: -32.5px;
|
|
173
|
-
text-indent: 100%;
|
|
174
|
-
white-space: nowrap;
|
|
175
|
-
overflow: hidden;
|
|
176
|
-
border-radius: 65px;
|
|
177
|
-
@include drop-shadow(95,111,155,0.46);
|
|
178
|
-
|
|
179
|
-
span {
|
|
180
|
-
opacity: 0;
|
|
181
|
-
transition-delay: 0s;
|
|
182
|
-
width: 200px;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
svg {
|
|
186
|
-
opacity: 1;
|
|
187
|
-
transition-delay: .5s;
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
nav {
|
|
194
|
-
float: left;
|
|
195
|
-
width: 100%;
|
|
196
|
-
overflow-x: hidden;
|
|
197
|
-
overflow-y: scroll;
|
|
198
|
-
max-height: 0px;
|
|
199
|
-
@include transition(all .5s);
|
|
200
|
-
overflow: auto;
|
|
201
|
-
-ms-overflow-style: none; /* IE 11 */
|
|
202
|
-
scrollbar-width: none; /* Firefox 64 */
|
|
203
|
-
filter: drop-shadow(0 0 0.30rem #bd93f9);
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
&::-webkit-scrollbar { width: 0 !important }
|
|
207
|
-
|
|
208
|
-
&.active {
|
|
209
|
-
max-height: 600px;
|
|
210
|
-
@include transition(all 1s);
|
|
211
|
-
|
|
212
|
-
a {
|
|
213
|
-
opacity: 1;
|
|
214
|
-
@include transform(translateY(0px));
|
|
215
|
-
@include transition(all .7s);
|
|
216
|
-
// Control for Contact Boxes
|
|
217
|
-
@for $i from 1 through 24 {
|
|
218
|
-
&:nth-of-type(#{$i}) {
|
|
219
|
-
// Delay the animation. Delay increases as items loop.
|
|
220
|
-
transition-delay: $i * (.20s);
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.scroll {
|
|
227
|
-
text-align: center;
|
|
228
|
-
margin-top: .5rem;
|
|
229
|
-
margin-bottom: -.5rem;
|
|
230
|
-
filter: drop-shadow(0 0 0.10rem #282a36);
|
|
231
|
-
color: #f8f8f2;
|
|
232
|
-
opacity: 0.65;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
a {
|
|
236
|
-
float: left;
|
|
237
|
-
width: 100%;
|
|
238
|
-
margin-top: 18px;
|
|
239
|
-
background-color: $white;
|
|
240
|
-
padding: 18px 20px;
|
|
241
|
-
border-radius: 5px;
|
|
242
|
-
text-decoration: none;
|
|
243
|
-
@include transition(all .3s);
|
|
244
|
-
opacity: 0;
|
|
245
|
-
@include transform(translateY(-10px));
|
|
246
|
-
position: relative;
|
|
247
|
-
|
|
248
|
-
@media (min-width: 414px) {
|
|
249
|
-
padding: 18px 30px;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.arrow {
|
|
253
|
-
position: absolute;
|
|
254
|
-
right: 15px;
|
|
255
|
-
top: 50%;
|
|
256
|
-
@include transform(translateY(-50%));
|
|
257
|
-
|
|
258
|
-
path {
|
|
259
|
-
fill: darken($white, 10%);
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
&.headmaster {
|
|
264
|
-
@include icon-styles($headmaster)
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
&.work {
|
|
268
|
-
@include icon-styles($work)
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
&.email {
|
|
272
|
-
@include icon-styles($email)
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
&.s-email {
|
|
276
|
-
@include icon-styles($s-email)
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
&.google {
|
|
280
|
-
@include icon-styles($google)
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
&.keybase {
|
|
284
|
-
@include icon-styles($keybase)
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
&.github {
|
|
288
|
-
@include icon-styles($github)
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
&.gitlab {
|
|
292
|
-
@include icon-styles($gitlab)
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
&.rubygems {
|
|
296
|
-
@include icon-styles($rubygems)
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
&.bitbucket {
|
|
300
|
-
@include icon-styles($bitbucket)
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
&.medium {
|
|
304
|
-
@include icon-styles($medium)
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
&.dribbble {
|
|
308
|
-
@include icon-styles($dribbble)
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
&.behance {
|
|
312
|
-
@include icon-styles($behance)
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
&.telegram {
|
|
316
|
-
@include icon-styles($telegram)
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
&.linkedin {
|
|
320
|
-
@include icon-styles($linkedin)
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
&.angellist {
|
|
324
|
-
@include icon-styles($angellist)
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
&.facebook {
|
|
328
|
-
@include icon-styles($facebook)
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
&.twitter {
|
|
332
|
-
@include icon-styles($twitter)
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
.icon {
|
|
336
|
-
float: left;
|
|
337
|
-
width: 50px;
|
|
338
|
-
height: 50px;
|
|
339
|
-
border-radius: 50%;
|
|
340
|
-
overflow: hidden;
|
|
341
|
-
margin-right: 20px;
|
|
342
|
-
|
|
343
|
-
svg {
|
|
344
|
-
width: 100%;
|
|
345
|
-
height: 100%;
|
|
346
|
-
padding: 14px;
|
|
347
|
-
|
|
348
|
-
path {
|
|
349
|
-
fill: $white;
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
.content {
|
|
355
|
-
h1 {
|
|
356
|
-
font-size: 20px;
|
|
357
|
-
font-weight: 400;
|
|
358
|
-
line-height: 160%;
|
|
359
|
-
letter-spacing: .4px;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
span {
|
|
363
|
-
font-size: 14px;
|
|
364
|
-
color: $black;
|
|
365
|
-
display: block;
|
|
366
|
-
letter-spacing: .4px;
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
}
|