ello-jekyll-vcard-theme 0.0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +24 -0
- data/README.md +105 -0
- data/_includes/footer.html +2 -0
- data/_includes/google-analytics.html +9 -0
- data/_includes/head.html +11 -0
- data/_layouts/default.html +11 -0
- data/_sass/base.scss +14 -0
- data/_sass/color.scss +36 -0
- data/_sass/componets/contact-box.scss +371 -0
- data/_sass/helpers.scss +7 -0
- data/_sass/mixins.scss +58 -0
- data/assets/css/main.scss +16 -0
- data/assets/js/animation.js +5 -0
- metadata +126 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 60a1dddbf6eca043b3f155539e46a89343012524b4f3402e2440bed3444bfd36
|
4
|
+
data.tar.gz: f02b36c0bd8b11bad0f89aebc8944be06ecc3db91bb0a90da8f47f4282639627
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 7b91dca8588c5dab8fc1f5d6db1d086a8cfccc97f7545b5cf9bac1558ac41c881144a87946b5474533011cc0573fbba814192538bd8e5d016a5d9fe34584a22f
|
7
|
+
data.tar.gz: ae67bf298635dbbb675dc2c2ba698ef027b5e2c087c267b2042fd50a19ab61fb0ac9e5a9d5178bb8c39ea49f68797963bb90bb2cc2887228db88c6028d720d85
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2019 by Randall (https://ran-dall.github.io)
|
4
|
+
|
5
|
+
ORIGINAL WORK - Contact Box
|
6
|
+
Copyright (c) 2019 by Aaron Taylor (https://codepen.io/BeanBaag/pen/dzyGpM) [and Riccardo Cavallo (https://dribbble.com/richox)]
|
7
|
+
|
8
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
9
|
+
of this software and associated documentation files (the "Software"), to deal
|
10
|
+
in the Software without restriction, including without limitation the rights
|
11
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
12
|
+
copies of the Software, and to permit persons to whom the Software is
|
13
|
+
furnished to do so, subject to the following conditions:
|
14
|
+
|
15
|
+
The above copyright notice and this permission notice shall be included in
|
16
|
+
all copies or substantial portions of the Software.
|
17
|
+
|
18
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
19
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
20
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
21
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
22
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
23
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
24
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,105 @@
|
|
1
|
+
# ELLO 👋 JEKYLL: A Jekyll vCard Theme
|
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 live).
|
4
|
+
|
5
|
+
Based on a [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).
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your Jekyll site's `Gemfile`:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem "ello-jekyll-vcard-theme"
|
13
|
+
```
|
14
|
+
|
15
|
+
And add this line to your Jekyll site's `_config.yml`:
|
16
|
+
|
17
|
+
```yaml
|
18
|
+
theme: ello-jekyll-vcard-theme
|
19
|
+
```
|
20
|
+
|
21
|
+
And then execute:
|
22
|
+
|
23
|
+
$ bundle
|
24
|
+
|
25
|
+
Or install it yourself as:
|
26
|
+
|
27
|
+
$ gem install jekyll-vcard-theme
|
28
|
+
|
29
|
+
## Usage
|
30
|
+
|
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
|
+
### TL;DR
|
34
|
+
|
35
|
+
Use `main.yaml` to update the information on the `contact-box` with whatever you wish to display in the `content-box` area. Use `details.yaml` to list all the profiles you want to link to from your site.
|
36
|
+
|
37
|
+
#### `main.yaml`
|
38
|
+
- `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.
|
39
|
+
|
40
|
+
- `message` - The secondary message displayed on the mid-section of the `contact-box.`
|
41
|
+
|
42
|
+
- `cta-button` - The call-to-action message displayed on the button, which is then displayed in the `contact-box`.
|
43
|
+
|
44
|
+
- `cta-title` - The message displayed when the `contact-box` is active.
|
45
|
+
|
46
|
+
#### `details.yaml`
|
47
|
+
- `name` - Your name (only required if you're using the `site.data.details.name` variable)
|
48
|
+
|
49
|
+
- `avatar` - Your GitHub avatar. Reference the [`jekyll-avatar` repo](https://github.com/benbalter/jekyll-avatar) for more information on how to use.
|
50
|
+
|
51
|
+
- `contact` - Enter your information in the following format:
|
52
|
+
- `profile` - Name of the Network, which will be displayed
|
53
|
+
- `network` - Slug (short-name) of the Network, which is used to assign styles. See note below.
|
54
|
+
- `user-id` - Your User-ID on the Network, which will be displayed as a subtitle.
|
55
|
+
- `link` - Link to your profile on Network, which will be linked to the box.
|
56
|
+
- `icon` - Link from [Font-Awesome Icon Library](https://fontawesome.com/icons), which will be displayed.
|
57
|
+
|
58
|
+
#### Note about STYLES
|
59
|
+
Currently **ONLY** the following Networks are supported (#HEX included):
|
60
|
+
|
61
|
+
* email: `#A3AAAE` - `iCloud's color`
|
62
|
+
* s(ecure)-email: `#0091FF` - `Criptext's color`
|
63
|
+
* headmaster: `#ff5555` - `Headmaster's Color (...my Medium publication)`
|
64
|
+
* work: `#bd93f9` - `Conjured's Color (...where I work)`
|
65
|
+
* google: `#4285f4`
|
66
|
+
* keybase: `#4c8eff`
|
67
|
+
* github: `#6e5494`
|
68
|
+
* gitlab: `#fc6d26`
|
69
|
+
* bitbucket: `#205081`
|
70
|
+
* medium: `#00ab6c`
|
71
|
+
* dribbble: `#ea4c89`
|
72
|
+
* behance: `#1769ff`
|
73
|
+
* telegram: `#0088CC`
|
74
|
+
* linkedin: `#0077B5`
|
75
|
+
* angellist: `#000`
|
76
|
+
* facebook: `#3b5998`
|
77
|
+
* twitter: `#1da1f2`
|
78
|
+
|
79
|
+
In order to add more Networks, you must also add the network in `_sass/componets/contact-box.scss`. Starting on **`line 261`**, you should see the currently supported Networks listed. You can add the network anywhere you desire in the following format...
|
80
|
+
|
81
|
+
```
|
82
|
+
&.<slug-from-details-yaml> {
|
83
|
+
@include icon-styles($<network-variable-from-details-yaml>)
|
84
|
+
}
|
85
|
+
```
|
86
|
+
|
87
|
+
You are more than welcome to add more with [Jekyll's overide 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
|
+
|
89
|
+
|
90
|
+
## Contributing
|
91
|
+
|
92
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/ran-dall/ello-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
93
|
+
|
94
|
+
## Development
|
95
|
+
|
96
|
+
To set up your environment to develop this theme, run `bundle install`.
|
97
|
+
|
98
|
+
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
99
|
+
|
100
|
+
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
|
101
|
+
To add a custom directory to your theme-gem, please edit the regexp in `vcard.gemspec` accordingly.
|
102
|
+
|
103
|
+
## License
|
104
|
+
|
105
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
2
|
+
<script>
|
3
|
+
window['ga-disable-{{ site.google_analytics }}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
|
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>
|
data/_includes/head.html
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
<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
|
+
{%- seo -%}
|
6
|
+
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
|
7
|
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
8
|
+
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
9
|
+
{%- include google-analytics.html -%}
|
10
|
+
{%- endif -%}
|
11
|
+
</head>
|
data/_sass/base.scss
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
/* =============================================================================
|
2
|
+
Base
|
3
|
+
============================================================================= */
|
4
|
+
|
5
|
+
*, *:before, *:after {
|
6
|
+
margin: 0;
|
7
|
+
padding: 0;
|
8
|
+
box-sizing: border-box;
|
9
|
+
}
|
10
|
+
|
11
|
+
body {
|
12
|
+
background: $bg-color;
|
13
|
+
font-family: 'Bungee', cursive;
|
14
|
+
}
|
data/_sass/color.scss
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
/* =============================================================================
|
2
|
+
COLORS
|
3
|
+
============================================================================= */
|
4
|
+
|
5
|
+
// Page Background
|
6
|
+
$bg-color: #44475a;
|
7
|
+
// Contact Box Background
|
8
|
+
$color-1: #282a36;
|
9
|
+
// CTA Text and Active Title Background
|
10
|
+
$color-2: #6272a4;
|
11
|
+
// CTA Button Background
|
12
|
+
$color-3: #86E2D5;
|
13
|
+
|
14
|
+
$white: #f8f8f2;
|
15
|
+
$black: #282a36;
|
16
|
+
|
17
|
+
// Social media
|
18
|
+
|
19
|
+
$email: #A3AAAE; // iCloud's color
|
20
|
+
$s-email: #0091FF; // Criptext's color
|
21
|
+
$headmaster: #ff5555;
|
22
|
+
$work: #bd93f9;
|
23
|
+
$google: #4285f4;
|
24
|
+
$keybase: #4c8eff;
|
25
|
+
$github: #6e5494;
|
26
|
+
$gitlab: #fc6d26;
|
27
|
+
$rubygems: #e9573f;
|
28
|
+
$bitbucket: #205081;
|
29
|
+
$medium: #00ab6c;
|
30
|
+
$dribbble: #ea4c89;
|
31
|
+
$behance: #1769ff;
|
32
|
+
$telegram: #0088CC;
|
33
|
+
$linkedin: #0077B5;
|
34
|
+
$angellist: #000;
|
35
|
+
$facebook: #3b5998;
|
36
|
+
$twitter: #1da1f2;
|
@@ -0,0 +1,371 @@
|
|
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
|
+
}
|
data/_sass/helpers.scss
ADDED
data/_sass/mixins.scss
ADDED
@@ -0,0 +1,58 @@
|
|
1
|
+
/* =============================================================================
|
2
|
+
MIXINS
|
3
|
+
============================================================================= */
|
4
|
+
// Contact Icon Mixin
|
5
|
+
@mixin icon-styles($network) {
|
6
|
+
.icon {
|
7
|
+
@extend %icon;
|
8
|
+
color: $network;
|
9
|
+
}
|
10
|
+
|
11
|
+
.content {
|
12
|
+
h1 {
|
13
|
+
color: $network;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// Drop Shadow Mixin
|
19
|
+
@mixin drop-shadow($r,$g,$b,$a) {
|
20
|
+
-webkit-box-shadow: 1px 1px 4px 4px rgba($r,$g,$b,$a);
|
21
|
+
box-shadow: 1px 1px 4px 4px rgba($r,$g,$b,$a);
|
22
|
+
}
|
23
|
+
|
24
|
+
@mixin animation($animation) {
|
25
|
+
-webkit-animation: #{$animation};
|
26
|
+
-moz-animation: #{$animation};
|
27
|
+
-o-animation: #{$animation};
|
28
|
+
animation: #{$animation};
|
29
|
+
}
|
30
|
+
|
31
|
+
@mixin keyframes($keyframes) {
|
32
|
+
@-webkit-keyframes #{$keyframes} { @content; }
|
33
|
+
@-moz-keyframes #{$keyframes} { @content; }
|
34
|
+
@-o-keyframes #{$keyframes} { @content; }
|
35
|
+
@keyframes #{$keyframes} { @content; }
|
36
|
+
}
|
37
|
+
|
38
|
+
@mixin transform($transform) {
|
39
|
+
-webkit-transform: $transform;
|
40
|
+
-moz-transform: $transform;
|
41
|
+
-ms-transform: $transform;
|
42
|
+
-o-transform: $transform;
|
43
|
+
transform: $transform;
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin transition($transition) {
|
47
|
+
-webkit-transition: #{$transition};
|
48
|
+
-moz-transition: #{$transition};
|
49
|
+
-o-transition: #{$transition};
|
50
|
+
transition: #{$transition};
|
51
|
+
}
|
52
|
+
|
53
|
+
@mixin transition-delay($transition-delay) {
|
54
|
+
-webkit-transition-delay: #{$transition-delay};
|
55
|
+
-moz-transition-delay: #{$transition-delay};
|
56
|
+
-o-transition-delay: #{$transition-delay};
|
57
|
+
transition-delay: #{$transition-delay};
|
58
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
---
|
2
|
+
# this ensures Jekyll reads the file to be transformed into CSS later
|
3
|
+
# only Main files contain this front matter, not partials.
|
4
|
+
---
|
5
|
+
// Fonts
|
6
|
+
@import url('https://fonts.googleapis.com/css?family=Bungee|Permanent+Marker&display=swap');
|
7
|
+
// Colors
|
8
|
+
@import 'color';
|
9
|
+
// Helpers
|
10
|
+
@import 'helpers';
|
11
|
+
// Mixins
|
12
|
+
@import 'mixins';
|
13
|
+
// Base
|
14
|
+
@import 'base';
|
15
|
+
// Componets
|
16
|
+
@import 'componets/contact-box';
|
metadata
ADDED
@@ -0,0 +1,126 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: ello-jekyll-vcard-theme
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1.2
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Randall
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2019-06-07 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: jekyll
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: jekyll-avatar
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: jekyll-seo-tag
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - ">="
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '0'
|
48
|
+
type: :runtime
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - ">="
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '0'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: jemoji
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - ">="
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '0'
|
62
|
+
type: :runtime
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - ">="
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '0'
|
69
|
+
- !ruby/object:Gem::Dependency
|
70
|
+
name: bundler
|
71
|
+
requirement: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - ">="
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '0'
|
76
|
+
type: :development
|
77
|
+
prerelease: false
|
78
|
+
version_requirements: !ruby/object:Gem::Requirement
|
79
|
+
requirements:
|
80
|
+
- - ">="
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: '0'
|
83
|
+
description:
|
84
|
+
email: ran.dall@icloud.com
|
85
|
+
executables: []
|
86
|
+
extensions: []
|
87
|
+
extra_rdoc_files: []
|
88
|
+
files:
|
89
|
+
- LICENSE.txt
|
90
|
+
- README.md
|
91
|
+
- _includes/footer.html
|
92
|
+
- _includes/google-analytics.html
|
93
|
+
- _includes/head.html
|
94
|
+
- _layouts/default.html
|
95
|
+
- _sass/base.scss
|
96
|
+
- _sass/color.scss
|
97
|
+
- _sass/componets/contact-box.scss
|
98
|
+
- _sass/helpers.scss
|
99
|
+
- _sass/mixins.scss
|
100
|
+
- assets/css/main.scss
|
101
|
+
- assets/js/animation.js
|
102
|
+
homepage: https://github.com/ran-dall/ello-jekyll
|
103
|
+
licenses:
|
104
|
+
- MIT
|
105
|
+
metadata: {}
|
106
|
+
post_install_message:
|
107
|
+
rdoc_options: []
|
108
|
+
require_paths:
|
109
|
+
- lib
|
110
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
111
|
+
requirements:
|
112
|
+
- - ">="
|
113
|
+
- !ruby/object:Gem::Version
|
114
|
+
version: '0'
|
115
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
116
|
+
requirements:
|
117
|
+
- - ">="
|
118
|
+
- !ruby/object:Gem::Version
|
119
|
+
version: '0'
|
120
|
+
requirements: []
|
121
|
+
rubygems_version: 3.0.3
|
122
|
+
signing_key:
|
123
|
+
specification_version: 4
|
124
|
+
summary: Ello is a simple animated Jekyll vCard theme by Randall, optimized for use
|
125
|
+
with GitHub Pages (but can be used wherever Jekyll can live).
|
126
|
+
test_files: []
|