jekflix 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|