ello-jekyll-vcard-theme 0.0.1.2 → 0.0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
}
|