futuro 0.2.7 → 0.2.8
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 +4 -4
- data/_includes/html/head.liquid +3 -3
- data/_includes/html/overlay/load.liquid +2 -1
- data/_includes/html/overlay/mobile.liquid +2 -2
- data/_includes/html/overlay/search.liquid +18 -14
- data/_layouts/demo.html +4 -0
- data/_sass/_area.scss +79 -1
- data/_sass/_bar.scss +9 -0
- data/_sass/_base.scss +65 -3
- data/_sass/_box.scss +7 -0
- data/_sass/_fonts.scss +0 -5
- data/_sass/_helpers.scss +42 -36
- data/_sass/_input.scss +9 -0
- data/_sass/_overlay.scss +29 -3
- data/_sass/_site.scss +19 -1
- data/_sass/_title.scss +65 -6
- data/_sass/_wrap.scss +52 -1
- data/_sass/futuro.scss +12 -0
- data/assets/js/footer.min.js +373 -1
- data/assets/js/header.min.js +19 -3
- metadata +3 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ce60c70fae89348e5de352d563eab7b02798a46572ce6a621b7e7dfa00673d79
|
|
4
|
+
data.tar.gz: eb06b722abc7e69b1c1792609a29e808430721232e27479838a554e3b19af844
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 396e7f94e7efd54bc8f2aeb52f3d486b67631c3eb967b20e8bc06b3f45f62b9ae62123262c2c66cd0313bbb6730ec755588b51736ada1e108632140238ac4731
|
|
7
|
+
data.tar.gz: 700a08f639c80ebdcc527fa03ed385eb16869e51f477feb34297d66832dd3fd5b1e71df673fb0f1d413fb32c59db188816ff515fca85f0d63c394c0f41a60402
|
data/_includes/html/head.liquid
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
4
4
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
5
|
<meta name="format-detection" content="telephone=no">
|
|
6
|
-
<link rel="icon" href="{{ "/assets/img/favicon.png?v=
|
|
6
|
+
<link rel="icon" href="{{ "/assets/img/favicon.png?v=1574868166224" | relative_url }}">
|
|
7
7
|
{% seo %}
|
|
8
8
|
{% feed_meta %}
|
|
9
|
-
<link rel="stylesheet" href="{{ "/assets/css/styles.css" | relative_url }}">
|
|
9
|
+
<link rel="stylesheet" href="{{ "/assets/css/styles.css?v=1574868166224" | relative_url }}">
|
|
10
10
|
{% include html/analytics.liquid %}
|
|
11
|
-
<script src="{{ "/assets/js/header.min.js" | relative_url }}"></script>
|
|
11
|
+
<script src="{{ "/assets/js/header.min.js?v=1574868166224" | relative_url }}"></script>
|
|
12
12
|
</head>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
<
|
|
3
|
-
<p class="copy
|
|
2
|
+
<h4 class="title _overlay --mobile">Too small</h4>
|
|
3
|
+
<p class="copy _overlay --mobile">Browser needs to be <strong class="width"></strong> wider!</p>
|
|
4
4
|
<div class="box _mobile">
|
|
5
5
|
<div class="bar _mobile"></div>
|
|
6
6
|
</div>
|
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
|
|
2
|
-
<div class="title
|
|
2
|
+
<div class="title _overlay-search">
|
|
3
3
|
<input class="input _text --search" type="text" placeholder="Search">
|
|
4
4
|
</div>
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
<ul class="block _results"></ul>
|
|
6
7
|
|
|
7
8
|
<script>
|
|
8
9
|
window.simpleJekyllSearch = new SimpleJekyllSearch({
|
|
9
10
|
searchInput: document.querySelector('.input.--search'),
|
|
10
|
-
resultsContainer: document.querySelector('.
|
|
11
|
+
resultsContainer: document.querySelector('.block._results'),
|
|
11
12
|
json: '/search.json',
|
|
12
13
|
searchResultTemplate:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
noResultsText:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
'<a href="/{url}" class="block _results-entry --{book}">
|
|
15
|
+
<h1>{title}</h1>
|
|
16
|
+
<div class="block _results-info">
|
|
17
|
+
<div class="block _results-dot"></div>
|
|
18
|
+
<h5>{url}</h5>
|
|
19
|
+
</div>
|
|
20
|
+
</a>',
|
|
21
|
+
noResultsText:
|
|
22
|
+
'<li class="block _results-entry --none">
|
|
23
|
+
<h1>No results found</h1>
|
|
24
|
+
</li>',
|
|
25
|
+
fuzzy: true,
|
|
26
|
+
limit: 5
|
|
27
|
+
});
|
|
24
28
|
</script>
|
data/_layouts/demo.html
CHANGED
data/_sass/_area.scss
CHANGED
|
@@ -1,9 +1,87 @@
|
|
|
1
1
|
|
|
2
|
+
%area {
|
|
3
|
+
|
|
4
|
+
&-page {
|
|
5
|
+
grid-template-columns: repeat(2,1fr);
|
|
6
|
+
background-color: white;
|
|
7
|
+
position: relative;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
display: grid;
|
|
10
|
+
height: 560px;
|
|
11
|
+
|
|
12
|
+
&.tag {
|
|
13
|
+
|
|
14
|
+
&-tree {
|
|
15
|
+
grid-template-rows: 60px 500px;
|
|
16
|
+
grid-template-columns: auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&-new {
|
|
20
|
+
grid-template-columns: 860px 140px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-custom {
|
|
24
|
+
grid-template-columns: 860px 140px;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
2
30
|
.area {
|
|
31
|
+
|
|
3
32
|
&._hero.--demo {
|
|
4
33
|
@extend %grid_default;
|
|
34
|
+
justify-content: center;
|
|
5
35
|
padding-bottom: 40px;
|
|
6
|
-
@extend %area_grid;
|
|
7
36
|
padding-top: 40px;
|
|
37
|
+
display: grid;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&._book {
|
|
41
|
+
height: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&._topbar {
|
|
45
|
+
border-bottom: 1px solid darken($smoke,10%);
|
|
46
|
+
grid-template-columns: 1fr auto 1fr;
|
|
47
|
+
background-color: white;
|
|
48
|
+
grid-auto-flow: column;
|
|
49
|
+
padding-right: 14px;
|
|
50
|
+
padding-left: 14px;
|
|
51
|
+
position: fixed;
|
|
52
|
+
display: grid;
|
|
53
|
+
height: 60px;
|
|
54
|
+
z-index: 4;
|
|
55
|
+
right: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
top: 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&.type {
|
|
61
|
+
|
|
62
|
+
&-page {
|
|
63
|
+
@extend %area-page;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&-chapter {
|
|
67
|
+
@extend %area-page;
|
|
68
|
+
color: white;
|
|
69
|
+
|
|
70
|
+
ul {
|
|
71
|
+
list-style: none;
|
|
72
|
+
display: grid;
|
|
73
|
+
grid-gap: 5px;
|
|
74
|
+
|
|
75
|
+
li {
|
|
76
|
+
@extend h5;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.book {
|
|
81
|
+
&-foo {
|
|
82
|
+
background-color: $foo;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
8
86
|
}
|
|
9
87
|
}
|
data/_sass/_bar.scss
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
.bar {
|
|
3
|
+
|
|
3
4
|
&._load {
|
|
4
5
|
animation: load_bg 1s steps(1) infinite;
|
|
5
6
|
background-color: red;
|
|
6
7
|
height: 20px;
|
|
7
8
|
width: 7%;
|
|
8
9
|
}
|
|
10
|
+
|
|
11
|
+
&._mobile {
|
|
12
|
+
background-color: $gun;
|
|
13
|
+
justify-self: center;
|
|
14
|
+
display: grid;
|
|
15
|
+
height: 20px;
|
|
16
|
+
width: 10%;
|
|
17
|
+
}
|
|
9
18
|
}
|
data/_sass/_base.scss
CHANGED
|
@@ -5,13 +5,15 @@
|
|
|
5
5
|
|
|
6
6
|
html {
|
|
7
7
|
box-sizing: border-box;
|
|
8
|
+
font-size: 62.5%;
|
|
8
9
|
height: 100%;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
body {
|
|
12
|
-
|
|
13
|
+
@extend %book;
|
|
14
|
+
letter-spacing: -0.05rem;
|
|
13
15
|
line-height: 1.3;
|
|
14
|
-
|
|
16
|
+
font-size: 18px;
|
|
15
17
|
height: 100%;
|
|
16
18
|
}
|
|
17
19
|
|
|
@@ -44,10 +46,70 @@ a {
|
|
|
44
46
|
color: inherit;
|
|
45
47
|
}
|
|
46
48
|
|
|
47
|
-
|
|
49
|
+
h4, h5, h3, h2, h6, h1, p, ul, ol {
|
|
48
50
|
margin: 0;
|
|
49
51
|
}
|
|
50
52
|
|
|
53
|
+
h1 {
|
|
54
|
+
@extend %bold;
|
|
55
|
+
font-size: 2.8rem;
|
|
56
|
+
|
|
57
|
+
+ p {
|
|
58
|
+
margin-top: 20px;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
h2 {
|
|
63
|
+
@extend %bold;
|
|
64
|
+
letter-spacing: -0.03em;
|
|
65
|
+
font-size: 16rem;
|
|
66
|
+
line-height: 1;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
h3 {
|
|
70
|
+
@extend %bold;
|
|
71
|
+
letter-spacing: -0.03em;
|
|
72
|
+
font-size: 7.2rem;
|
|
73
|
+
line-height: 1;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
h4 {
|
|
77
|
+
@extend %bold;
|
|
78
|
+
font-size: 4.8rem;
|
|
79
|
+
|
|
80
|
+
+ p {
|
|
81
|
+
margin-top: 20px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
h5 {
|
|
86
|
+
@extend %bold;
|
|
87
|
+
font-size: 2.1rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
h6 {
|
|
91
|
+
@extend %bold;
|
|
92
|
+
font-size: 1.8rem;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
p {
|
|
96
|
+
+ p {
|
|
97
|
+
margin-top: 20px;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
i, em {
|
|
102
|
+
@extend %book-italic;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
b, strong {
|
|
106
|
+
@extend %bold;
|
|
107
|
+
|
|
108
|
+
i, em {
|
|
109
|
+
@extend %bold-italic;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
51
113
|
svg {
|
|
52
114
|
display: block;
|
|
53
115
|
}
|
data/_sass/_box.scss
CHANGED
data/_sass/_fonts.scss
CHANGED
|
@@ -19,8 +19,3 @@
|
|
|
19
19
|
src: url('/assets/fonts/230883_3_0.eot');
|
|
20
20
|
src: url('/assets/fonts/230883_3_0.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/230883_3_0.woff') format('woff'), url('/assets/fonts/230883_3_0.ttf') format('truetype');
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
$book: 'FuturaBT-Book', "Helvetica Neue", sans-serif;
|
|
24
|
-
$bold: 'FuturaBT-Bold', "Helvetica Neue", sans-serif;
|
|
25
|
-
$italic: 'FuturaBT-BookItalic', "Helvetica Neue", sans-serif;
|
|
26
|
-
$bold-italic: 'FuturaBT-BoldItalic', "Helvetica Neue", sans-serif;
|
data/_sass/_helpers.scss
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
2
|
+
$foo : #000000;
|
|
3
|
+
$system : #6e46a0;
|
|
4
|
+
$brand : #ff8200;
|
|
5
|
+
$supply : #f00a0a;
|
|
6
|
+
$demo : #005a9b;
|
|
6
7
|
|
|
7
8
|
$generic : #fe5900;
|
|
8
9
|
$theatre : #019fc6;
|
|
@@ -25,7 +26,6 @@ $min640w : 'only screen and (min-width: 640px)';
|
|
|
25
26
|
$min768w : 'only screen and (min-width: 768px)';
|
|
26
27
|
$min1024w : 'only screen and (min-width: 1024px)';
|
|
27
28
|
|
|
28
|
-
|
|
29
29
|
@mixin zero($b:0,$r:0,$l:0,$t:0) {
|
|
30
30
|
bottom: $b;
|
|
31
31
|
right: $r;
|
|
@@ -73,15 +73,24 @@ $min1024w : 'only screen and (min-width: 1024px)';
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@keyframes load_title {
|
|
76
|
+
0% {
|
|
77
|
+
font-family: 'FuturaBT-Bold', 'Helvetica Neue', sans-serif;
|
|
78
|
+
letter-spacing: 0.03em;
|
|
79
|
+
text-transform: uppercase;
|
|
80
|
+
font-size: 4.6rem;
|
|
81
|
+
color: red;
|
|
82
|
+
}
|
|
76
83
|
33% {
|
|
84
|
+
font-family: 'FuturaBT-Book', 'Helvetica Neue', sans-serif;
|
|
85
|
+
letter-spacing: inherit;
|
|
77
86
|
text-transform: none;
|
|
78
|
-
font-size:
|
|
87
|
+
font-size: 4.6rem;
|
|
79
88
|
color: blue;
|
|
80
89
|
}
|
|
81
90
|
66% {
|
|
82
|
-
font-family:
|
|
83
|
-
font-
|
|
84
|
-
font-size:
|
|
91
|
+
font-family: 'FuturaBT-BookItalic', 'Helvetica Neue', sans-serif;
|
|
92
|
+
font-weight: normal;
|
|
93
|
+
font-size: 5.4rem;
|
|
85
94
|
color: black;
|
|
86
95
|
}
|
|
87
96
|
}
|
|
@@ -95,12 +104,6 @@ $min1024w : 'only screen and (min-width: 1024px)';
|
|
|
95
104
|
}
|
|
96
105
|
}
|
|
97
106
|
|
|
98
|
-
|
|
99
|
-
%area_grid {
|
|
100
|
-
justify-content: center;
|
|
101
|
-
display: grid;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
107
|
%grid {
|
|
105
108
|
|
|
106
109
|
&_default {
|
|
@@ -111,29 +114,12 @@ $min1024w : 'only screen and (min-width: 1024px)';
|
|
|
111
114
|
grid-template-columns: 40px minmax(240px,560px) 40px;
|
|
112
115
|
}
|
|
113
116
|
|
|
114
|
-
&
|
|
115
|
-
grid-template-columns: 40px minmax(240px,
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
%overlay {
|
|
120
|
-
display: none;
|
|
121
|
-
|
|
122
|
-
&_grid {
|
|
123
|
-
justify-content: center;
|
|
124
|
-
|
|
125
|
-
&.--open {
|
|
126
|
-
display: grid;
|
|
127
|
-
}
|
|
117
|
+
&_search {
|
|
118
|
+
grid-template-columns: 40px minmax(240px,480px) 40px;
|
|
128
119
|
}
|
|
129
120
|
|
|
130
|
-
&
|
|
131
|
-
|
|
132
|
-
@include center();
|
|
133
|
-
|
|
134
|
-
&.--open {
|
|
135
|
-
display: block;
|
|
136
|
-
}
|
|
121
|
+
&_load {
|
|
122
|
+
grid-template-columns: 40px minmax(240px,320px) 40px;
|
|
137
123
|
}
|
|
138
124
|
}
|
|
139
125
|
|
|
@@ -158,3 +144,23 @@ $min1024w : 'only screen and (min-width: 1024px)';
|
|
|
158
144
|
:focus {
|
|
159
145
|
outline: rgba(0,0,0,0);
|
|
160
146
|
}
|
|
147
|
+
|
|
148
|
+
%book {
|
|
149
|
+
font-family: 'FuturaBT-Book', 'Helvetica Neue', sans-serif;
|
|
150
|
+
font-weight: normal;
|
|
151
|
+
|
|
152
|
+
&-italic {
|
|
153
|
+
font-family: 'FuturaBT-BookItalic', 'Helvetica Neue', sans-serif;
|
|
154
|
+
font-weight: normal;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
%bold {
|
|
159
|
+
font-family: 'FuturaBT-Bold', 'Helvetica Neue', sans-serif;
|
|
160
|
+
font-weight: normal;
|
|
161
|
+
|
|
162
|
+
&-italic {
|
|
163
|
+
font-family: 'FuturaBT-BoldItalic', 'Helvetica Neue', sans-serif;
|
|
164
|
+
font-weight: normal;
|
|
165
|
+
}
|
|
166
|
+
}
|
data/_sass/_input.scss
CHANGED
|
@@ -7,6 +7,15 @@
|
|
|
7
7
|
padding: 10px;
|
|
8
8
|
border: none;
|
|
9
9
|
width: 100%;
|
|
10
|
+
|
|
11
|
+
&.--search {
|
|
12
|
+
@extend h4;
|
|
13
|
+
background: url('../img/search.svg') transparent no-repeat right top 8px;
|
|
14
|
+
letter-spacing: -0.03rem;
|
|
15
|
+
background-size: 42px;
|
|
16
|
+
padding: 0 60px 0 0;
|
|
17
|
+
line-height: 1;
|
|
18
|
+
}
|
|
10
19
|
}
|
|
11
20
|
|
|
12
21
|
&._email {
|
data/_sass/_overlay.scss
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
.overlay {
|
|
3
|
+
background-color: rgba($smoke,0.95);
|
|
4
|
+
justify-content: center;
|
|
3
5
|
padding-bottom: 100px;
|
|
4
6
|
padding-top: 100px;
|
|
5
7
|
overflow: scroll;
|
|
@@ -8,17 +10,41 @@
|
|
|
8
10
|
@include zero;
|
|
9
11
|
height: 100%;
|
|
10
12
|
width: 100%;
|
|
13
|
+
color: $gun;
|
|
11
14
|
z-index: 4;
|
|
12
15
|
|
|
16
|
+
&.--open {
|
|
17
|
+
display: grid;
|
|
18
|
+
}
|
|
19
|
+
|
|
13
20
|
&._load {
|
|
14
21
|
background-color: $smoke;
|
|
15
|
-
font-size: 54px;
|
|
16
|
-
color: $gun;
|
|
17
22
|
z-index: 5;
|
|
18
23
|
|
|
19
24
|
&.--demo {
|
|
20
|
-
@extend %overlay_grid;
|
|
21
25
|
@extend %grid_load;
|
|
22
26
|
}
|
|
23
27
|
}
|
|
28
|
+
|
|
29
|
+
&._mobile {
|
|
30
|
+
background-color: $smoke;
|
|
31
|
+
@extend %grid_load;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&._load {
|
|
35
|
+
@extend %grid_load;
|
|
36
|
+
z-index: 5;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&._about {
|
|
40
|
+
@extend %grid_overlay;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&._browse {
|
|
44
|
+
@extend %grid_overlay;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&._search {
|
|
48
|
+
@extend %grid_search;
|
|
49
|
+
}
|
|
24
50
|
}
|
data/_sass/_site.scss
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
|
|
2
|
+
%site {
|
|
3
|
+
&-setup {
|
|
4
|
+
grid-template-columns: 1fr 1000px 1fr;
|
|
5
|
+
padding-bottom: 100px;
|
|
6
|
+
padding-top: 100px;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
2
10
|
.site {
|
|
11
|
+
background-color: $smoke;
|
|
3
12
|
position: relative;
|
|
4
13
|
display: none;
|
|
5
14
|
z-index: 1;
|
|
@@ -9,6 +18,15 @@
|
|
|
9
18
|
}
|
|
10
19
|
|
|
11
20
|
&.--open {
|
|
12
|
-
display:
|
|
21
|
+
display: grid;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&._feed {
|
|
25
|
+
@extend %site-setup;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&._single {
|
|
29
|
+
@extend %site-setup;
|
|
30
|
+
// min-height: 100%;
|
|
13
31
|
}
|
|
14
32
|
}
|
data/_sass/_title.scss
CHANGED
|
@@ -1,12 +1,71 @@
|
|
|
1
1
|
|
|
2
|
+
@mixin RotateTitle( $origin : bottom left, $deg : -90deg ) {
|
|
3
|
+
transform-origin: $origin;
|
|
4
|
+
transform: rotate( $deg );
|
|
5
|
+
position: absolute;
|
|
6
|
+
}
|
|
7
|
+
|
|
2
8
|
.title {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
9
|
+
|
|
10
|
+
&._overlay {
|
|
11
|
+
|
|
12
|
+
&-load {
|
|
13
|
+
animation: load_title 1s steps(1) infinite;
|
|
14
|
+
max-width: 32rem;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&-about {
|
|
18
|
+
border-bottom: 2px solid $gun;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&-browse {
|
|
22
|
+
border-bottom: 2px solid $gun;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-search {
|
|
26
|
+
border-bottom: 2px solid $gun;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&._overlay {
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&._mobile {
|
|
7
36
|
text-align: center;
|
|
8
|
-
max-width: 320px;
|
|
9
37
|
font-size: 48px;
|
|
10
|
-
|
|
38
|
+
line-height: 1;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&._chapter {
|
|
42
|
+
&-title {
|
|
43
|
+
@include RotateTitle();
|
|
44
|
+
bottom: 56px;
|
|
45
|
+
left: 128px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&._page {
|
|
50
|
+
&-title {
|
|
51
|
+
@include RotateTitle();
|
|
52
|
+
bottom: 56px;
|
|
53
|
+
left: 128px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&-chapter {
|
|
57
|
+
@include RotateTitle( $origin : top right );
|
|
58
|
+
text-transform: capitalize;
|
|
59
|
+
right: 78px;
|
|
60
|
+
top: 56px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&-weight {
|
|
64
|
+
@include RotateTitle();
|
|
65
|
+
transform-origin: bottom left;
|
|
66
|
+
left: calc(100% - 58px);
|
|
67
|
+
text-align: right;
|
|
68
|
+
bottom: 56px;
|
|
69
|
+
}
|
|
11
70
|
}
|
|
12
71
|
}
|
data/_sass/_wrap.scss
CHANGED
|
@@ -7,18 +7,69 @@
|
|
|
7
7
|
|
|
8
8
|
.wrap {
|
|
9
9
|
|
|
10
|
+
&._book {
|
|
11
|
+
align-content: center;
|
|
12
|
+
display: grid;
|
|
13
|
+
height: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&._home {
|
|
17
|
+
height: 100%;
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&.type {
|
|
22
|
+
|
|
23
|
+
&-page {
|
|
24
|
+
@extend %wrap_grid;
|
|
25
|
+
@extend %text;
|
|
26
|
+
grid-column: 2 / 3;
|
|
27
|
+
display: grid;
|
|
28
|
+
|
|
29
|
+
+ .wrap.type-page {
|
|
30
|
+
margin-top: 20px;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-chapter {
|
|
35
|
+
@extend %wrap_grid;
|
|
36
|
+
@extend %text;
|
|
37
|
+
grid-column: 2 / 3;
|
|
38
|
+
display: grid;
|
|
39
|
+
|
|
40
|
+
+ .wrap.type-page {
|
|
41
|
+
margin-top: 20px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
10
46
|
&._hero.--demo {
|
|
11
47
|
@extend %wrap_grid;
|
|
12
48
|
@extend %text;
|
|
13
49
|
}
|
|
14
50
|
|
|
15
51
|
&._overlay {
|
|
52
|
+
@extend %wrap_grid;
|
|
53
|
+
align-self: center;
|
|
16
54
|
position: relative;
|
|
17
55
|
z-index: 2;
|
|
18
56
|
|
|
57
|
+
&.--load {
|
|
58
|
+
text-align: center;
|
|
59
|
+
grid-gap: 20px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.--mobile {
|
|
63
|
+
text-align: center;
|
|
64
|
+
grid-gap: 10px;
|
|
65
|
+
}
|
|
66
|
+
|
|
19
67
|
&.--demo {
|
|
20
68
|
align-self: center;
|
|
21
|
-
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&.--search {
|
|
72
|
+
grid-gap: 5px;
|
|
22
73
|
}
|
|
23
74
|
}
|
|
24
75
|
}
|