Skip to content

Commit 9a0f23f

Browse files
antoniandreantoniandre
committed
Fix top bar, add scroll directive, cleanup.
1 parent 8be07ca commit 9a0f23f

File tree

5 files changed

+261
-237
lines changed

5 files changed

+261
-237
lines changed

‎src/app.vue‎

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ w-app(:class="{ ready }" v-scroll="onScroll")
2020
<script>
2121
import Documentation from '@/documentation'
2222
import TopBar from '@/documentation/top-bar'
23+
import '@/documentation/_base.scss'
2324
2425
export default {
2526
name: 'app',
@@ -37,39 +38,16 @@ export default {
3738
this.offsetTop = window.pageYOffset || document.documentElement.scrollTop
3839
this.goTopHidden = this.offsetTop < 200
3940
}
41+
},
42+
directives: {
43+
scroll: {
44+
inserted: (el, binding) => {
45+
const f = evt => {
46+
if (binding.value(evt, el)) window.removeEventListener('scroll', f)
47+
}
48+
window.addEventListener('scroll', f)
49+
}
50+
}
4051
}
4152
}
4253
</script>
43-
44-
<style lang="scss">
45-
$main-text: #888;
46-
47-
* {
48-
margin: 0;
49-
padding: 0;
50-
}
51-
52-
.main-content {
53-
max-width: 800px;
54-
height: 650px;
55-
}
56-
57-
// FOOTER
58-
//=================================================//
59-
footer {
60-
background: none;
61-
font-style: italic;
62-
color: $main-text;
63-
font-size: 0.9em;
64-
margin: 3em 0 5em;
65-
66-
i {
67-
font-size: 1.2em;
68-
vertical-align: text-bottom;
69-
transition: 1s ease-out;
70-
cursor: pointer;
71-
72-
&.heart:hover {animation: pulse 1.8s ease-out infinite;}
73-
}
74-
}
75-
</style>

‎src/documentation/_base.scss‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
@import './variables';
2+
@import './typography';
3+
4+
// Global.
5+
// --------------------------------------------------------
6+
* {
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
a {
12+
text-decoration: none;
13+
color: #ff5252;
14+
15+
&[name] {
16+
position: relative;
17+
top: -4em;
18+
display: block;
19+
}
20+
}
21+
22+
ul, ol {
23+
margin-top: 1em;
24+
padding-left: 1.3em;
25+
}
26+
27+
.code {font-family: monospace, sans-serif;}
28+
29+
p {margin-bottom: 16px;}
30+
31+
.ssh-pre {
32+
padding: 0.5em;
33+
margin: 1.5em 0;
34+
border: 1px solid $lighter-text;
35+
background-color: #f8f8f8;
36+
border-radius: 4px;
37+
display: block;
38+
box-shadow: none;
39+
}
40+
41+
.page__title {
42+
color: $primary;
43+
background-color: #fff;
44+
padding: 1.5em;
45+
display: inline-flex;
46+
align-items: center;
47+
}
48+
49+
.max-widthed, h2, h3, h4, p, .ssh-pre {
50+
max-width: $page-max-width;
51+
margin-left: auto !important;
52+
margin-right: auto !important;
53+
}
54+
55+
.pale-blue {color: #1471b8;}
56+
57+
.w-button {
58+
text-transform: uppercase;
59+
font-weight: 500;
60+
61+
&.size--md {
62+
height: 30px;
63+
padding-left: 12px;
64+
padding-right: 12px;
65+
}
66+
67+
&.secondary--bg {color: #fff;}
68+
}
69+
70+
.main-content {
71+
max-width: 800px;
72+
height: 650px;
73+
}
74+
75+
// Application.
76+
// --------------------------------------------------------
77+
.w-app {
78+
padding-top: 12em;
79+
overflow-x: hidden;
80+
}
81+
82+
.features {
83+
line-height: 1.8;
84+
padding-left: 2.2em;
85+
position: relative;
86+
87+
.w-icon {
88+
line-height: 0.8;
89+
position: absolute;
90+
left: 0;
91+
padding-top: 0.1em;
92+
}
93+
}
94+
95+
.coming-soon {
96+
font-style: italic;
97+
98+
.w-card__title {font-size: 1.2em;}
99+
.w-tag {margin: 2px 0;}
100+
}
101+
102+
.w-tag i.w-icon {
103+
position: relative;
104+
color: rgba(0, 0, 0, .25) !important;
105+
margin: 0 7px 0 -7px;
106+
}
107+
108+
.settings-list {
109+
li {padding: 20px 10px;}
110+
111+
li li {
112+
padding-top: 0;
113+
padding-bottom: 0;
114+
margin-left: 10px;
115+
margin-top: 10px;
116+
}
117+
118+
code {
119+
font-size: 1.1em;
120+
margin-right: 10px;
121+
margin-bottom: 10px;
122+
}
123+
}
124+
125+
// Footer.
126+
// --------------------------------------------------------
127+
footer {
128+
background: none;
129+
font-style: italic;
130+
color: $main-text;
131+
font-size: 0.9em;
132+
margin: 3em 0 5em;
133+
134+
i {
135+
font-size: 1.2em;
136+
vertical-align: text-bottom;
137+
transition: 1s ease-out;
138+
cursor: pointer;
139+
140+
&.heart:hover {animation: pulse 1.8s ease-out infinite;}
141+
}
142+
}
143+
144+
// Animations.
145+
// --------------------------------------------------------
146+
@keyframes pulse {
147+
0%, 20%, 30%, 35%, 45%, 100% {transform: scale(1);}
148+
25%, 40% {transform: scale(1.3);}
149+
}
150+
151+
.pulse {animation: pulse 1.5s infinite;}
152+
153+
// Media queries.
154+
// --------------------------------------------------------
155+
@media screen and (max-width: 1119px) {
156+
.max-widthed, h2, h3, h4, p, .ssh-pre {
157+
margin-left: 10px !important;
158+
margin-right: 10px !important;
159+
}
160+
}

‎src/documentation/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ $darker-text: #333;
66
$light-text: #ccc;
77
$lighter-text: #ddd;
88
// $light-link: #fff;
9-
$page-max-width: 1100px;
9+
$page-max-width: 1100px;

‎src/documentation/index.vue‎

Lines changed: 0 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -2510,133 +2510,3 @@ export default {
25102510
}
25112511
}
25122512
</script>
2513-
2514-
<style lang="scss">
2515-
@import './variables';
2516-
@import './typography';
2517-
2518-
// GLOBAL
2519-
//=================================================//
2520-
a {
2521-
text-decoration: none;
2522-
color: #ff5252;
2523-
2524-
&[name] {
2525-
position: relative;
2526-
top: -4em;
2527-
display: block;
2528-
}
2529-
}
2530-
2531-
ul, ol {
2532-
margin-top: 1em;
2533-
padding-left: 1.3em;
2534-
}
2535-
2536-
.code {font-family: monospace, sans-serif;}
2537-
2538-
p {margin-bottom: 16px;}
2539-
2540-
.ssh-pre {
2541-
padding: 0.5em;
2542-
margin: 1.5em 0;
2543-
border: 1px solid $lighter-text;
2544-
background-color: #f8f8f8;
2545-
border-radius: 4px;
2546-
display: block;
2547-
box-shadow: none;
2548-
}
2549-
2550-
.page__title {
2551-
color: $primary;
2552-
background-color: #fff;
2553-
padding: 1.5em;
2554-
display: inline-flex;
2555-
align-items: center;
2556-
}
2557-
2558-
.max-widthed, h2, h3, h4, p, .ssh-pre {
2559-
max-width: $page-max-width;
2560-
margin-left: auto !important;
2561-
margin-right: auto !important;
2562-
}
2563-
2564-
.pale-blue {color: #1471b8;}
2565-
2566-
.w-button {
2567-
text-transform: uppercase;
2568-
font-weight: 500;
2569-
2570-
&.size--md {
2571-
height: 30px;
2572-
padding-left: 12px;
2573-
padding-right: 12px;
2574-
}
2575-
2576-
&.secondary--bg {color: #fff;}
2577-
}
2578-
2579-
// APPLICATION
2580-
//=================================================//
2581-
.w-app {
2582-
padding-top: 12em;
2583-
overflow-x: hidden;
2584-
}
2585-
2586-
@keyframes pulse {
2587-
0%, 20%, 30%, 35%, 45%, 100% {transform: scale(1);}
2588-
25%, 40% {transform: scale(1.3);}
2589-
}
2590-
2591-
@media screen and (max-width: 1119px) {
2592-
.max-widthed, h2, h3, h4, p, .ssh-pre {
2593-
margin-left: 10px !important;
2594-
margin-right: 10px !important;
2595-
}
2596-
}
2597-
2598-
.features {
2599-
line-height: 1.8;
2600-
padding-left: 2.2em;
2601-
position: relative;
2602-
2603-
.w-icon {
2604-
line-height: 0.8;
2605-
position: absolute;
2606-
left: 0;
2607-
padding-top: 0.1em;
2608-
}
2609-
}
2610-
2611-
.coming-soon {
2612-
font-style: italic;
2613-
2614-
.w-card__title {font-size: 1.2em;}
2615-
.w-tag {margin: 2px 0;}
2616-
}
2617-
2618-
.w-tag i.w-icon {
2619-
position: relative;
2620-
color: rgba(0, 0, 0, .25) !important;
2621-
margin: 0 7px 0 -7px;
2622-
}
2623-
2624-
.settings-list {
2625-
li {padding: 20px 10px;}
2626-
2627-
li li {
2628-
padding-top: 0;
2629-
padding-bottom: 0;
2630-
margin-left: 10px;
2631-
margin-top: 10px;
2632-
}
2633-
2634-
code {
2635-
font-size: 1.1em;
2636-
margin-right: 10px;
2637-
margin-bottom: 10px;
2638-
}
2639-
}
2640-
2641-
.pulse {animation: pulse 1.5s infinite;}
2642-
</style>

0 commit comments

Comments
 (0)