Skip to content

Commit e080b24

Browse files
author
Matthieu Oger
committed
Refactor tutorial
1 parent dff7bf9 commit e080b24

File tree

7 files changed

+219
-119
lines changed

7 files changed

+219
-119
lines changed

‎_includes/components/tutorial/footer.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<footer class="tutorial-footer">
2+
<p>
3+
© 2016 Pixelnest Studio — we craft <strong>games</strong> and <strong>apps</strong>
4+
</p>
5+
</footer>

‎_includes/components/tutorial/header.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<header class="tutorial-header">
2+
<nav class="trilogy">
3+
4+
<div class"tutorial-header__back trilogy__pane">
5+
<a href="/">
6+
◇ Back to Pixelnest
7+
</a>
8+
</div>
9+
10+
<div class="tutorial-header__reference trilogy__pane">
11+
{% if page.tutorial.link and page.tutorial.name %}
12+
{% if page.tutorial.show_label == nil or page.tutorial.show_label == true %}
13+
Tutorial:
14+
<a href="{{ page.tutorial.link }}">
15+
{{ page.tutorial.name }}
16+
</a>
17+
{% else %}
18+
<a href="{{ page.tutorial.link }}">
19+
{{ page.tutorial.name }}
20+
</a>
21+
{% endif %}
22+
{% endif %}
23+
</div>
24+
25+
<div class="tutorial-header__social trilogy__pane trilogy__pane--right">
26+
<a href="http://twitter.com/pixelnest/">
27+
Follow us on Twitter
28+
</a>
29+
</div>
30+
31+
</nav>
32+
</header>

‎_includes/components/tutorial/pager.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="pager {{ include.class }}">
2+
3+
<section class="pager__previous">
4+
{% if page.links.previous %}
5+
<a href="{{ page.links.previous }}" class="pager__link">
6+
← <span>Prev.</span>
7+
</a>
8+
{% else %}
9+
◇ Start
10+
{% endif %}
11+
</section>
12+
13+
<section class="pager__all">
14+
{% if page.links.summary %}
15+
<a href="{{ page.links.summary | remove: 'index.html' }}" class="pager__link">
16+
Summary
17+
</a>
18+
{% endif %}
19+
</section>
20+
21+
<section class="pager__next">
22+
{% if page.links.next %}
23+
<a href="{{ page.links.next }}" class="pager__link">
24+
<span>Next</span> →
25+
</a>
26+
{% else %}
27+
End ◆
28+
{% endif %}
29+
</section>
30+
31+
</div>

‎_includes/components/tutorial/promotion-header.html

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{% if page.show_promotion != nil %}
22

3-
<!-- Steredenn -->
4-
{% if page.show_promotion == 'steredenn' %}
5-
<div class="promotion-header">
6-
Our game — <a href="http://steredenn.pixelnest.io/">Steredenn</a> — is <a href="http://steredenn.pixelnest.io/#buy">available</a> on PC/Mac/Linux!
7-
</div>
8-
{% endif %}
3+
{% if page.show_promotion == 'steredenn' %}
4+
<div class="promotion-header promotion-header--steredenn">
5+
<a href="http://steredenn.pixelnest.io/">Steredenn</a> — our game — is <a href="http://steredenn.pixelnest.io/#buy">available</a> on PC/Mac/Linux and Xbox One!
6+
</div>
7+
{% endif %}
98

109
{% endif %}

‎_includes/components/tutorial/promotion.html

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
{% if page.show_promotion != nil %}
22

3-
<!-- BulletML for Unity promotion -->
4-
{% if page.show_promotion == 'bulletml-for-unity' %}
5-
<div class="promotion">
6-
We have created a plugin called <em>"BulletML for Unity"</em> which allows you to create fantastic patterns for your shooter. Interested? <a href="/work/bulletml-for-unity/">Read more here.</a>
7-
</div>
8-
{% endif %}
3+
{% if page.show_promotion == 'bulletml-for-unity' %}
4+
<p class="promotion promotion--text">
5+
We have created a plugin called <em>"BulletML for Unity"</em> which allows you to create fantastic patterns for your shooter. Interested? <a href="/work/bulletml-for-unity/">Read more here.</a>
6+
</p>
7+
{% endif %}
98

10-
<!-- Steredenn -->
11-
{% if page.show_promotion == 'steredenn' %}
12-
<div class="promotion-image">
13-
<a href="http://steredenn.pixelnest.io" target="_BLANK">
14-
<img src="/work/steredenn/-img/banner.png" title="Steredenn" alt="Steredenn" />
15-
<p>click to get more information about our roguelike/shmup!</p>
16-
</a>
17-
</div>
18-
{% endif %}
9+
{% if page.show_promotion == 'steredenn' %}
10+
<figure class="promotion promotion--image">
11+
<a href="http://steredenn.pixelnest.io" target="_BLANK">
12+
<img src="/work/steredenn/-img/banner.png" title="Steredenn" alt="Steredenn" />
13+
<figcaption>Click to get more information about our roguelike/shmup!</figcaption>
14+
</a>
15+
</figure>
16+
{% endif %}
1917

2018
{% endif %}

‎_layouts/tutorial.html

+23-98
Original file line numberDiff line numberDiff line change
@@ -5,121 +5,46 @@
55

66
<div class="page" id="page">
77
{% include components/tutorial/promotion-header.html %}
8-
9-
<header class="page-header">
10-
<nav>
11-
<!-- menu -->
12-
<section class"page-back">
13-
<a href="/">◇ Back to Pixelnest</a>
14-
</section>
15-
16-
<section class="page-ref">
17-
{% if page.tutorial.link and page.tutorial.name %}
18-
{% if page.tutorial.show_label == nil or page.tutorial.show_label == true %}
19-
Tutorial: <a href="{{ page.tutorial.link }}">{{ page.tutorial.name }}</a>
20-
{% else %}
21-
<a href="{{ page.tutorial.link }}">{{ page.tutorial.name }}</a>
22-
{% endif %}
23-
{% endif %}
24-
</section>
25-
26-
<!-- twitter -->
27-
<section class="page-link">
28-
<a href="http://twitter.com/pixelnest">follow us on twitter</a>
29-
</section>
30-
</nav>
31-
</header>
8+
{% include components/tutorial/header.html %}
329

3310
<div class="page-content">
34-
3511
{% if !page.links %}
36-
<div class="pager">
37-
<section class="pager__previous">
38-
{% if page.links.previous %}
39-
<a href="{{ page.links.previous }}" class="pager__link">
40-
← <span>Prev.</span>
41-
</a>
42-
{% else %}
43-
◇ Start
44-
{% endif %}
45-
</section>
46-
47-
<section class="pager__all">
48-
{% if page.links.summary %}
49-
<a href="{{ page.links.summary | remove: 'index.html' }}" class="pager__link">
50-
Summary
51-
</a>
52-
{% endif %}
53-
</section>
54-
55-
<section class="pager__next">
56-
{% if page.links.next %}
57-
<a href="{{ page.links.next }}" class="pager__link">
58-
<span>Next</span> →
59-
</a>
60-
{% else %}
61-
End ◆
62-
{% endif %}
63-
</section>
64-
</div>
12+
{% include components/tutorial/pager.html class="pager--top" %}
6513
{% endif %}
6614

67-
<!-- post layout -->
6815
<article class="entry">
69-
<h2 class="entry__title">
70-
<a href="{{ page.url | remove: 'index.html' }}" title="{{ page.title }}">{{ page.title }}</a>
71-
</h2>
16+
<header class="entry__header">
17+
<h1 class="entry__title">
18+
<a href="{{ page.url | remove: 'index.html' }}">
19+
{{ page.title }}
20+
</a>
21+
</h1>
7222

73-
{% if page.subtitle %}
74-
<h3 class="entry__subtitle">
75-
{{ page.subtitle }}
76-
</h3>
77-
{% endif %}
23+
{% if page.subtitle %}
24+
<h2 class="entry__subtitle">
25+
{{ page.subtitle }}
26+
</h2>
27+
{% endif %}
28+
</header>
7829

7930
{% if page.show_metadata == nil or page.show_metadata == true %}
80-
<aside class="entry__metadata">
81-
{% include components/author.html %}
31+
<aside class="entry__metadata">
32+
{% include components/author.html %}
8233

83-
<section class="entry__infos">
84-
<p>
34+
<footer class="entry__date">
8535
{{ page.date | date: "%d %b. %Y" | downcase }}
86-
</p>
87-
</section>
88-
</aside>
36+
</footer>
37+
</aside>
8938
{% endif %}
9039

91-
<section class="entry__content">
40+
<div class="entry__content">
9241
{{ content }}
93-
</section>
42+
</div>
9443
</article>
95-
<!-- end post layout -->
96-
97-
<div class="pager pager--bottom-separator pager--em">
98-
<section class="pager__older">
99-
{% if page.links.previous %}
100-
<a href="{{ page.links.previous }}" title="Previous chapter">← Prev.</a>
101-
{% endif %}
102-
</section>
103-
104-
{% if page.links.summary %}
105-
<section class="pager__ref">
106-
<a href="{{ page.links.summary | remove: 'index.html' }}" title="Summary">Summary</a>
107-
</section>
108-
{% endif %}
109-
110-
<section class="pager__newer">
111-
{% if page.links.next %}
112-
<a href="{{ page.links.next }}" title="Next chapter">Next →</a>
113-
{% endif %}
114-
</section>
115-
</div>
11644

45+
{% include components/tutorial/pager.html class="pager--bottom" %}
11746
{% include components/tutorial/promotion.html %}
11847
</div>
11948

120-
<footer class="page-footer">
121-
<p class="credits__desc">
122-
© 2016 pixelnest.io - we craft <strong>games</strong> and <strong>apps</strong>
123-
</p>
124-
</footer>
49+
{% include components/tutorial/footer.html %}
12550
</div>

‎_sass/components/_tutorial.scss

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@charset "UTF-8";
2+
3+
// -------------------------------------------------------
4+
// Global.
5+
// -------------------------------------------------------
6+
7+
.tutorial-header,
8+
.promotion {
9+
a {
10+
@extend %link;
11+
}
12+
}
13+
14+
// -------------------------------------------------------
15+
// Header.
16+
// -------------------------------------------------------
17+
18+
.tutorial-header {
19+
padding: 8px;
20+
21+
background: $pxn-white;
22+
23+
font-size: 1.6rem;
24+
}
25+
26+
.tutorial-header__back {
27+
}
28+
29+
.tutorial-header__reference {
30+
}
31+
32+
.tutorial-header__social {
33+
}
34+
35+
// -------------------------------------------------------
36+
// Footer.
37+
// -------------------------------------------------------
38+
39+
.tutorial-footer {
40+
@include font-title;
41+
42+
padding-bottom: 16px;
43+
44+
color: $pxn-medium;
45+
46+
font-size: 1.8rem;
47+
48+
text-align: center;
49+
}
50+
51+
// -------------------------------------------------------
52+
// Promotion Header.
53+
// -------------------------------------------------------
54+
55+
.promotion-header {
56+
padding: 8px;
57+
58+
color: white;
59+
background: $dragon;
60+
61+
font-size: 1.6rem;
62+
63+
text-align: center;
64+
65+
a {
66+
color: white;
67+
border-bottom: 1px dotted $pxn-light;
68+
}
69+
70+
a:hover {
71+
border-bottom: 1px solid;
72+
}
73+
}
74+
75+
// -------------------------------------------------------
76+
// Promotion.
77+
// -------------------------------------------------------
78+
79+
.promotion {
80+
}
81+
82+
.promotion--text {
83+
}
84+
85+
.promotion--image {
86+
figure {
87+
}
88+
89+
img {
90+
max-width: 100%;
91+
92+
opacity: 0.8;
93+
94+
transition: opacity 300ms ease-out;
95+
96+
&:hover {
97+
opacity: 1;
98+
}
99+
}
100+
101+
figcaption {
102+
font-size: 1.4rem;
103+
104+
text-align: center;
105+
}
106+
}
107+
108+
// -------------------------------------------------------
109+
// Page.
110+
// -------------------------------------------------------

0 commit comments

Comments
 (0)