jekflix 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE +22 -0
- data/README.md +125 -0
- data/_includes/author.html +87 -0
- data/_includes/comments.html +30 -0
- data/_includes/date.html +4 -0
- data/_includes/extra-css.html +0 -0
- data/_includes/extra-js.html +0 -0
- data/_includes/footer.html +91 -0
- data/_includes/head.html +97 -0
- data/_includes/header.html +27 -0
- data/_includes/links.html +9 -0
- data/_includes/loader.html +31 -0
- data/_includes/logo.html +3 -0
- data/_includes/menu.html +6 -0
- data/_includes/minutes-to-read.html +9 -0
- data/_includes/modal.html +35 -0
- data/_includes/new-post-tag.html +6 -0
- data/_includes/pagination-home.html +14 -0
- data/_includes/pagination-post.html +21 -0
- data/_includes/progress-bar.html +8 -0
- data/_includes/read-icon.html +3 -0
- data/_includes/recommendation.html +30 -0
- data/_includes/search.html +7 -0
- data/_includes/share.html +11 -0
- data/_includes/stats.html +12 -0
- data/_includes/subscription.html +1 -0
- data/_includes/svg-icons.html +1 -0
- data/_includes/time-bar.html +8 -0
- data/_includes/toc.html +1 -0
- data/_layouts/404.html +18 -0
- data/_layouts/author.html +68 -0
- data/_layouts/category.html +71 -0
- data/_layouts/compress.html +8 -0
- data/_layouts/contact.html +94 -0
- data/_layouts/default.html +17 -0
- data/_layouts/home.html +187 -0
- data/_layouts/main.html +28 -0
- data/_layouts/message-sent.html +18 -0
- data/_layouts/minimal.html +18 -0
- data/_layouts/page.html +11 -0
- data/_layouts/post.html +154 -0
- data/_layouts/search.html +15 -0
- data/_layouts/tags.html +38 -0
- data/_sass/_animations.scss +65 -0
- data/_sass/_author.scss +91 -0
- data/_sass/_elements.scss +3 -0
- data/_sass/_footer.scss +98 -0
- data/_sass/_form.scss +69 -0
- data/_sass/_functions.scss +3 -0
- data/_sass/_header.scss +150 -0
- data/_sass/_hero.scss +108 -0
- data/_sass/_highlight.scss +140 -0
- data/_sass/_home.scss +218 -0
- data/_sass/_icons.scss +45 -0
- data/_sass/_include-media.scss +569 -0
- data/_sass/_menu.scss +90 -0
- data/_sass/_mixins.scss +51 -0
- data/_sass/_modal.scss +154 -0
- data/_sass/_no-js.scss +9 -0
- data/_sass/_normalize.scss +238 -0
- data/_sass/_pagination.scss +90 -0
- data/_sass/_post.scss +722 -0
- data/_sass/_search.scss +138 -0
- data/_sass/_share.scss +37 -0
- data/_sass/_staff.scss +38 -0
- data/_sass/_theme.scss +7 -0
- data/_sass/_typo.scss +7 -0
- data/_sass/_variables.scss +24 -0
- data/_sass/jekflix.scss +1 -0
- data/_sass/main.scss +25 -0
- data/_sass/preview.scss +310 -0
- metadata +199 -0
data/_layouts/main.html
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: compress
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="{{ site.language }}" class="no-js">
|
|
7
|
+
{% include head.html %}
|
|
8
|
+
<body class="main-page has-push-menu">
|
|
9
|
+
{% include svg-icons.html %}
|
|
10
|
+
{% include header.html %}
|
|
11
|
+
<section class="content">
|
|
12
|
+
{{ content }}
|
|
13
|
+
</section>
|
|
14
|
+
{% include footer.html %}
|
|
15
|
+
<script>
|
|
16
|
+
if (window.netlifyIdentity) {
|
|
17
|
+
window.netlifyIdentity.on("init", function(user) {
|
|
18
|
+
if (!user) {
|
|
19
|
+
window.netlifyIdentity.on("login", function() {
|
|
20
|
+
document.location.href = "/admin/";
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
28
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<style type="text/css" media="screen">
|
|
6
|
+
.container {
|
|
7
|
+
margin: 0px auto;
|
|
8
|
+
max-width: 600px;
|
|
9
|
+
text-align: center;
|
|
10
|
+
padding-top: 60px;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
|
|
14
|
+
<div class="container">
|
|
15
|
+
<img src="/assets/img/message.gif" width="540" alt="{{ site.translations.contact.after_send.title | default: 'Message sent!' }}">
|
|
16
|
+
<p><strong>{{ site.translations.contact.after_send.title | default: "Message sent!" }}</strong></p>
|
|
17
|
+
<p>{{ site.translations.contact.after_send.message | default: "Thank you for sending me a message. I'm going to answer ASAP." }}</p>
|
|
18
|
+
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: compress
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!DOCTYPE html>
|
|
6
|
+
<html lang="{{ site.language }}" class="no-js">
|
|
7
|
+
{% include head.html %}
|
|
8
|
+
<body class="has-push-menu">
|
|
9
|
+
{% include svg-icons.html %}
|
|
10
|
+
{% include header.html %}
|
|
11
|
+
<section class="post">
|
|
12
|
+
<article id="post" class="post-content fullwidth" role="main">
|
|
13
|
+
{{ content }}
|
|
14
|
+
</article>
|
|
15
|
+
</section>
|
|
16
|
+
{% include footer.html %}
|
|
17
|
+
</body>
|
|
18
|
+
</html>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="{{ site.language }}" class="no-js">
|
|
3
|
+
{% include head.html %}
|
|
4
|
+
<body class="has-push-menu">
|
|
5
|
+
{% include minutes-to-read.html %}
|
|
6
|
+
{% include svg-icons.html %}
|
|
7
|
+
{% include header.html %}
|
|
8
|
+
|
|
9
|
+
<section class="post {% if site.two_columns_layout %}two-columns{% else %}one-column{% endif %}">
|
|
10
|
+
<article role="article" class="post-content">
|
|
11
|
+
<p class="post-info">
|
|
12
|
+
{% if page.date %}
|
|
13
|
+
<svg class="icon-calendar" id="date"><use xlink:href="#icon-calendar"></use></svg>
|
|
14
|
+
<time class="date" datetime="{{ page.date | date_to_xmlschema }}">
|
|
15
|
+
{% include date.html date=page.date %}
|
|
16
|
+
</time>
|
|
17
|
+
{% endif %}
|
|
18
|
+
<svg id="clock" class="icon-clock"><use xlink:href="#icon-clock"></use></svg>
|
|
19
|
+
<span>{{ minutesText }}</span>
|
|
20
|
+
</p>
|
|
21
|
+
<h1 class="post-title">{{ page.title }}</h1>
|
|
22
|
+
<p class="post-subtitle">{{ page.subtitle }}</p>
|
|
23
|
+
|
|
24
|
+
{% if page.image and paginator.activated == nil %}
|
|
25
|
+
<img src="{{ page.image }}" alt="Featured image" class="post-cover">
|
|
26
|
+
{% endif %}
|
|
27
|
+
|
|
28
|
+
{% include pagination-post.html progressBar=true %}
|
|
29
|
+
|
|
30
|
+
{% include toc.html %}
|
|
31
|
+
|
|
32
|
+
{{ content }}
|
|
33
|
+
|
|
34
|
+
{% include pagination-post.html %}
|
|
35
|
+
</article>
|
|
36
|
+
|
|
37
|
+
{% if site.two_columns_layout %}
|
|
38
|
+
<aside class="see-also">
|
|
39
|
+
<h2>{{ site.translations.text.see_also | default: "See also" }}</h2>
|
|
40
|
+
<ul>
|
|
41
|
+
{% assign next_posts = site.posts | where_exp:"post","post.is_generated != true" | where_exp:"post","post.path != page.path" %}
|
|
42
|
+
{% assign shuffled_array = next_posts | shuffle %}
|
|
43
|
+
{% for post in shuffled_array limit:3 %}
|
|
44
|
+
<li>
|
|
45
|
+
<a href="{{ post.url | prepend: site.baseurl }}">
|
|
46
|
+
{% if post.optimized_image %}
|
|
47
|
+
<img src="{{ post.optimized_image }}">
|
|
48
|
+
{% elsif post.image %}
|
|
49
|
+
<img src="{{ post.image }}">
|
|
50
|
+
{% else %}
|
|
51
|
+
<img src="/assets/img/off.jpg">
|
|
52
|
+
{% endif %}
|
|
53
|
+
<h3>{{ post.title }}</h3>
|
|
54
|
+
</a>
|
|
55
|
+
</li>
|
|
56
|
+
{% endfor %}
|
|
57
|
+
</ul>
|
|
58
|
+
</aside>
|
|
59
|
+
{% endif %}
|
|
60
|
+
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<!-- Add time bar only for pages without pagination -->
|
|
64
|
+
{% if paginator.activated == nil and site.show_time_bar == true %}
|
|
65
|
+
{% include time-bar.html %}
|
|
66
|
+
{% include recommendation.html %}
|
|
67
|
+
{% endif %}
|
|
68
|
+
|
|
69
|
+
<!-- Show modal if the post is the last one -->
|
|
70
|
+
{% if paginator.is_last and site.show_modal_on_finish_post %}
|
|
71
|
+
{% include modal.html title="You made it!" subtitle="Why don't you try another?" %}
|
|
72
|
+
{% endif %}
|
|
73
|
+
|
|
74
|
+
<!-- Show modal before user leaves the page -->
|
|
75
|
+
{% if site.show_modal_on_exit %}
|
|
76
|
+
{% include modal.html title="Don't go yet!" subtitle="You may also like..." closed=true showOnExit=true %}
|
|
77
|
+
{% endif %}
|
|
78
|
+
|
|
79
|
+
{% include subscription.html %}
|
|
80
|
+
{% include share.html %}
|
|
81
|
+
{% include author.html %}
|
|
82
|
+
{% include comments.html %}
|
|
83
|
+
{% include footer.html %}
|
|
84
|
+
|
|
85
|
+
{% assign author = site.authors | where: "name", post.author | first %}
|
|
86
|
+
|
|
87
|
+
{% assign author_urls = '' %}
|
|
88
|
+
{% if author.github_username %}
|
|
89
|
+
{% assign author_urls = author_urls | append: '"https://github.com/' | append: author.github_username | append: '",' %}
|
|
90
|
+
{% endif %}
|
|
91
|
+
{% if author.facebook_username %}
|
|
92
|
+
{% assign author_urls = author_urls | append: '"https://www.facebook.com/' | append: author.facebook_username | append: '",' %}
|
|
93
|
+
{% endif %}
|
|
94
|
+
{% if author.twitter_username %}
|
|
95
|
+
{% assign author_urls = author_urls | append: '"https://twitter.com/' | append: author.twitter_username | append: '",' %}
|
|
96
|
+
{% endif %}
|
|
97
|
+
{% if author.medium_username %}
|
|
98
|
+
{% assign author_urls = author_urls | append: '"https://medium.com/@' | append: author.medium_username | append: '",' %}
|
|
99
|
+
{% endif %}
|
|
100
|
+
{% if author.instagram_username %}
|
|
101
|
+
{% assign author_urls = author_urls | append: '"https://www.instagram.com/' | append: author.instagram_username | append: '",' %}
|
|
102
|
+
{% endif %}
|
|
103
|
+
{% if author.linkedin_username %}
|
|
104
|
+
{% assign author_urls = author_urls | append: '"https://www.linkedin.com/in/' | append: author.linkedin_username | append: '",' %}
|
|
105
|
+
{% endif %}
|
|
106
|
+
|
|
107
|
+
<script type="application/ld+json">
|
|
108
|
+
{
|
|
109
|
+
"@context": "http://schema.org",
|
|
110
|
+
"@type": "BlogPosting",
|
|
111
|
+
"name": "{{ page.title }}",
|
|
112
|
+
"headline": "{{ page.subtitle }}",
|
|
113
|
+
"description": "{{ page.description }}",
|
|
114
|
+
"image": "{{ page.image }}",
|
|
115
|
+
"url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}",
|
|
116
|
+
"articleBody": "{{ content | strip_html | xml_escape | textilize }}",
|
|
117
|
+
"wordcount": "{{ content | number_of_words }}",
|
|
118
|
+
"inLanguage": "{{ site.language }}",
|
|
119
|
+
"dateCreated": "{{ page.date | date: '%Y-%m-%d/' }}",
|
|
120
|
+
"datePublished": "{{ page.date | date: '%Y-%m-%d/' }}",
|
|
121
|
+
"dateModified": "{{ page.date | date: '%Y-%m-%d/' }}",
|
|
122
|
+
"author": {
|
|
123
|
+
"@type": "Person",
|
|
124
|
+
"name": "{{ author.display_name }}",
|
|
125
|
+
{% if author.photo %}
|
|
126
|
+
"image": "{{ author.photo }}",
|
|
127
|
+
{% else %}
|
|
128
|
+
"image": {{ "/assets/img/user.jpg" | prepend: site.baseurl | prepend: site.url }},
|
|
129
|
+
{% endif %}
|
|
130
|
+
"jobTitle": "{{ author.position }}",
|
|
131
|
+
"url": "{{ author.url | prepend: site.baseurl | prepend: site.url }}",
|
|
132
|
+
"sameAs": [
|
|
133
|
+
{{ author_urls | split: "," | join: "," }}
|
|
134
|
+
]
|
|
135
|
+
},
|
|
136
|
+
"publisher": {
|
|
137
|
+
"@type": "Organization",
|
|
138
|
+
"name": "{{ site.name }}",
|
|
139
|
+
"url": "{{ site.url }}{{site.baseurl}}/",
|
|
140
|
+
"logo": {
|
|
141
|
+
"@type": "ImageObject",
|
|
142
|
+
"url": "{{ site.url }}{{site.baseurl}}/assets/img/blog-image.png",
|
|
143
|
+
"width": "600",
|
|
144
|
+
"height": "315"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"mainEntityOfPage": "True",
|
|
148
|
+
"genre": "{{ page.category }}",
|
|
149
|
+
"articleSection": "{{ page.category }}",
|
|
150
|
+
"keywords": [{{ page.tags | join: '","' | append: '"' | prepend: '"' }}]
|
|
151
|
+
}
|
|
152
|
+
</script>
|
|
153
|
+
</body>
|
|
154
|
+
</html>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
---
|
|
3
|
+
[
|
|
4
|
+
{% assign posts = site.posts | where_exp:"post","post.is_generated != true" %}
|
|
5
|
+
{% assign date_format = site.date_format | default: "%m/%d/%Y" %}
|
|
6
|
+
{% for post in posts %}
|
|
7
|
+
{
|
|
8
|
+
"title" : "{{ post.title | escape }}",
|
|
9
|
+
"tags" : "{{ post.tags | array_to_sentence_string }}",
|
|
10
|
+
"categories" : "{{ post.category }}",
|
|
11
|
+
"url" : "{{ site.baseurl }}{{ post.url }}",
|
|
12
|
+
"date" : "{{ post.date | date: date_format }}"
|
|
13
|
+
} {% unless forloop.last %},{% endunless %}
|
|
14
|
+
{% endfor %}
|
|
15
|
+
]
|
data/_layouts/tags.html
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: minimal
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% assign date_format = site.date_format | default: "%m/%d/%Y" %}
|
|
6
|
+
|
|
7
|
+
<div class="tags">
|
|
8
|
+
{% assign tags_list = site.tags %}
|
|
9
|
+
{% if tags_list.first[0] == null %}
|
|
10
|
+
{% for tag in tags_list %}
|
|
11
|
+
<a href="#{{ tag | slugify }}">#{{ tag }}</a>
|
|
12
|
+
{% endfor %}
|
|
13
|
+
{% else %}
|
|
14
|
+
{% for tag in tags_list %}
|
|
15
|
+
<a href="#{{ tag[0] | slugify }}">#{{ tag[0] }}</a>
|
|
16
|
+
{% endfor %}
|
|
17
|
+
{% endif %}
|
|
18
|
+
{% assign tags_list = nil %}
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
{% for tag in site.tags %}
|
|
22
|
+
<a class="post-anchor" id="{{ tag[0] | slugify }}"></a>
|
|
23
|
+
<div class="tag-title">
|
|
24
|
+
<span>#{{ tag[0] }}</span>
|
|
25
|
+
</div>
|
|
26
|
+
<ul class="post-list">
|
|
27
|
+
{% assign pages_list = tag[1] %}
|
|
28
|
+
{% for post in pages_list reversed %}
|
|
29
|
+
{% if post.title != null and post.is_generated != true %}
|
|
30
|
+
{% if group == null or group == post.group %}
|
|
31
|
+
<li><a href="{{ site.url }}{{ post.url }}">{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: date_format }}</time></a></li>
|
|
32
|
+
{% endif %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
{% endfor %}
|
|
35
|
+
{% assign pages_list = nil %}
|
|
36
|
+
{% assign group = nil %}
|
|
37
|
+
</ul>
|
|
38
|
+
{% endfor %}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
.flex-grid article {
|
|
2
|
+
opacity: 0;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.flex-grid article.shown {
|
|
6
|
+
opacity: 1;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.flex-grid article.animate {
|
|
10
|
+
animation: moveUp 0.65s;
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@keyframes moveUp {
|
|
15
|
+
from {
|
|
16
|
+
transform: translateY(200px);
|
|
17
|
+
}
|
|
18
|
+
to {
|
|
19
|
+
transform: translateY(0);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes shake {
|
|
24
|
+
2%,
|
|
25
|
+
18% {
|
|
26
|
+
transform: translate3d(-1px, 0, 0);
|
|
27
|
+
}
|
|
28
|
+
4%,
|
|
29
|
+
16% {
|
|
30
|
+
transform: translate3d(2px, 0, 0);
|
|
31
|
+
}
|
|
32
|
+
6%,
|
|
33
|
+
10%,
|
|
34
|
+
14% {
|
|
35
|
+
transform: translate3d(-4px, 0, 0);
|
|
36
|
+
}
|
|
37
|
+
8%,
|
|
38
|
+
12% {
|
|
39
|
+
transform: translate3d(4px, 0, 0);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes zoomIn {
|
|
44
|
+
50% {
|
|
45
|
+
transform: translate(-50%, -50%) scale(1.1);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@keyframes pulse {
|
|
50
|
+
0% {
|
|
51
|
+
transform: scale(0.8);
|
|
52
|
+
}
|
|
53
|
+
100% {
|
|
54
|
+
transform: scale(1);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes fadeIn {
|
|
59
|
+
from {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
}
|
|
62
|
+
to {
|
|
63
|
+
opacity: 1;
|
|
64
|
+
}
|
|
65
|
+
}
|
data/_sass/_author.scss
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
.author {
|
|
2
|
+
background: $lightGray;
|
|
3
|
+
display: table;
|
|
4
|
+
width: 100%;
|
|
5
|
+
padding: rem(40px) 0;
|
|
6
|
+
margin: rem(40px) 0;
|
|
7
|
+
|
|
8
|
+
@include media(">=sm") {
|
|
9
|
+
padding: rem(50px) 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.details {
|
|
13
|
+
margin: auto;
|
|
14
|
+
max-width: rem(800px);
|
|
15
|
+
padding: 0 rem(20px);
|
|
16
|
+
|
|
17
|
+
@include media("<sm") {
|
|
18
|
+
text-align: center;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
svg {
|
|
23
|
+
@include size(25, 25);
|
|
24
|
+
margin-right: rem(10px);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a {
|
|
28
|
+
fill: darken($lightGray, 30%);
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
border: none;
|
|
31
|
+
transition: all 0.3s;
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
fill: $themeColor;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
img {
|
|
39
|
+
width: rem(150px);
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
display: block;
|
|
42
|
+
margin: auto;
|
|
43
|
+
|
|
44
|
+
@include media(">=sm") {
|
|
45
|
+
width: rem(180px);
|
|
46
|
+
float: left;
|
|
47
|
+
margin-right: 3.125rem;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.def {
|
|
52
|
+
color: gray;
|
|
53
|
+
font-size: rem(18px);
|
|
54
|
+
@include mainFont(300);
|
|
55
|
+
margin: rem(10px);
|
|
56
|
+
|
|
57
|
+
@include media(">=sm") {
|
|
58
|
+
margin: 0;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.name {
|
|
63
|
+
margin: 0;
|
|
64
|
+
|
|
65
|
+
a {
|
|
66
|
+
@include mainFont();
|
|
67
|
+
text-decoration: none;
|
|
68
|
+
color: black;
|
|
69
|
+
font-size: rem(30px);
|
|
70
|
+
|
|
71
|
+
@include media(">=sm") {
|
|
72
|
+
font-size: rem(45px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
color: $texts;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.desc {
|
|
82
|
+
@include mainFont(300);
|
|
83
|
+
margin: rem(10px);
|
|
84
|
+
font-size: rem(16px);
|
|
85
|
+
line-height: rem(25px);
|
|
86
|
+
|
|
87
|
+
@include media(">=sm") {
|
|
88
|
+
font-size: rem(18px);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
data/_sass/_footer.scss
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
.comments {
|
|
2
|
+
@include center(rem(800px));
|
|
3
|
+
padding: 0 rem(20px);
|
|
4
|
+
|
|
5
|
+
h3 {
|
|
6
|
+
margin: 0 0 rem(30px);
|
|
7
|
+
font-size: rem(30px);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
footer {
|
|
12
|
+
@include center(rem(800px));
|
|
13
|
+
border-top: 1px solid darken($accentDark, 10%);
|
|
14
|
+
background: $accentDark;
|
|
15
|
+
padding: rem(20px) rem(25px);
|
|
16
|
+
margin-top: rem(50px);
|
|
17
|
+
margin-bottom: rem(120px);
|
|
18
|
+
@include mainFont(300);
|
|
19
|
+
|
|
20
|
+
@include media(">=sm") {
|
|
21
|
+
margin-top: rem(100px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
p {
|
|
25
|
+
text-decoration: none;
|
|
26
|
+
color: $primaryDark;
|
|
27
|
+
font-size: rem(16px);
|
|
28
|
+
line-height: rem(25px);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
span {
|
|
32
|
+
font-weight: 700;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
svg {
|
|
36
|
+
@include size(28, 28);
|
|
37
|
+
display: inline-block;
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
margin-right: rem(10px);
|
|
40
|
+
|
|
41
|
+
@include media(">=sm") {
|
|
42
|
+
margin-right: rem(20px);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&.love {
|
|
46
|
+
@include size(20, 20);
|
|
47
|
+
fill: $themeColor;
|
|
48
|
+
margin-top: rem(-2px);
|
|
49
|
+
margin-left: rem(3px);
|
|
50
|
+
margin-right: rem(3px);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
a {
|
|
55
|
+
display: inline-block;
|
|
56
|
+
fill: #808080;
|
|
57
|
+
transition: all 0.3s ease;
|
|
58
|
+
text-decoration: none;
|
|
59
|
+
color: #808080;
|
|
60
|
+
|
|
61
|
+
&:hover {
|
|
62
|
+
fill: $themeColor;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&.creator:hover {
|
|
66
|
+
text-decoration: underline;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
ul {
|
|
71
|
+
padding: 0;
|
|
72
|
+
list-style-type: none;
|
|
73
|
+
|
|
74
|
+
li {
|
|
75
|
+
margin-bottom: rem(10px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
a {
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
font-size: rem(15px);
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
text-decoration: underline;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.main-page {
|
|
90
|
+
footer {
|
|
91
|
+
background: $primaryDark;
|
|
92
|
+
border-top: 1px solid lighten($primaryDark, 10%);
|
|
93
|
+
|
|
94
|
+
p {
|
|
95
|
+
color: $accentDark;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
data/_sass/_form.scss
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
.contact-form {
|
|
2
|
+
@include mainFont();
|
|
3
|
+
padding: rem(10px);
|
|
4
|
+
|
|
5
|
+
fieldset {
|
|
6
|
+
border: none;
|
|
7
|
+
font-weight: normal;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
input[type="text"],
|
|
11
|
+
input[type="email"],
|
|
12
|
+
textarea {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
outline: none;
|
|
15
|
+
display: block;
|
|
16
|
+
color: #333333;
|
|
17
|
+
width: 100%;
|
|
18
|
+
padding: 7px;
|
|
19
|
+
border: none;
|
|
20
|
+
border-bottom: 1px solid #ddd;
|
|
21
|
+
margin-bottom: 10px;
|
|
22
|
+
font-family: inherit;
|
|
23
|
+
font-size: rem(18px);
|
|
24
|
+
height: rem(45px);
|
|
25
|
+
|
|
26
|
+
&.has-error {
|
|
27
|
+
border-color: #f04242;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
textarea {
|
|
32
|
+
height: rem(200px);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
span {
|
|
36
|
+
display: block;
|
|
37
|
+
font-size: rem(14px);
|
|
38
|
+
color: #f04242;
|
|
39
|
+
padding-bottom: rem(10px);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
button[type="submit"] {
|
|
43
|
+
display: block;
|
|
44
|
+
padding: rem(14px) rem(39px) rem(14px) rem(39px);
|
|
45
|
+
color: #ffffff;
|
|
46
|
+
background: $themeColor;
|
|
47
|
+
font-size: rem(18px);
|
|
48
|
+
width: 100%;
|
|
49
|
+
border: 1px solid darken($themeColor, 30%);
|
|
50
|
+
border-width: 1px 1px 3px;
|
|
51
|
+
margin-top: rem(50px);
|
|
52
|
+
margin-bottom: rem(10px);
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
transition: all 0.3s;
|
|
55
|
+
outline: none;
|
|
56
|
+
|
|
57
|
+
&:hover {
|
|
58
|
+
background: darken($themeColor, 20%);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@include media(">=sm") {
|
|
62
|
+
padding: rem(19px) rem(39px) rem(18px) rem(39px);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[v-cloak] {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
}
|