-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (218 loc) · 9.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steady Viewport</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 10 100 100%22><text y=%22.9em%22 font-size=%2290%22>⛰</text></svg>">
<!-- Not recommended for production, but this page is just for demonstrational purposes anyways. -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Made creating this page a lot easier. -->
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<!-- `steady-viewport` must be included here at the top of `<body>`. -->
<script src="index.js"></script>
<!-- "viewport" and "layout" are the only two features that can currently be enabled. -->
<script>steady(["viewport", "layout"]);</script>
<div id="top-before" class="z-30" data-steady="top-before"></div>
<div id="top-sticky" class="sticky top-0 z-20" data-steady="top-sticky"></div>
<div id="page-before" class="z-10" data-steady="page-before"></div>
<div id="page" data-steady="page">
<teleport to="#top-before">
<demo-section-top name="Top Before" color="purple">
<template #snippet-mobile>
data-steady="top"
</template>
<template #snippet-desktop>
<div id="top-before" data-steady="top"> ...content... </div>
</template>
<template #note>
This purple section represents content placed at the top of the document <b>before</b> sticky content.
</template>
</demo-section-top>
<divider color="black"></divider>
</teleport>
<teleport to="#top-sticky">
<demo-section-top name="Top Sticky" color="blue">
<template #snippet-mobile>
data-steady="sticky"
</template>
<template #snippet-desktop>
<div id="top-sticky" data-steady="sticky"> ...content... </div>
</template>
<template #note>
This blue section represents content placed at the top of the document that should <b>stick</b>, such as a <b>navbar</b>.
</template>
</demo-section-top>
<divider color="black"></divider>
</teleport>
<teleport to="#page-before">
<demo-section-top name="Page Before" color="green">
<template #snippet-mobile>
data-steady="top"
</template>
<template #snippet-desktop>
<div id="page-before" data-steady="top"> ...content... </div>
</template>
<template #note>
This green section represents content placed at the top of the page.
</template>
</demo-section-top>
<divider color="black"></divider>
</teleport>
<!-- Demonstration of `--th`. -->
<div class="relative flex flex-col justify-center items-center
h-[var(--th)] px-4 bg-gray-100 text-gray-600 text-sm text-center">
<span class="absolute top-2 left-2 px-1 py-[1px] rounded
bg-gray-400 text-xs text-white font-bold uppercase">Page Content</span>
<height-tag>height: var(--th);</height-tag>
<h1 class="landscape:hidden md:landscape:block mb-4 text-xl sm:text-4xl font-bold">
⛰ <m>steady-viewport</m> Demo
</h1>
<p class="landscape:hidden md:landscape:block md:text-lg">
Minimal page structure showcasing the layout features of <m>steady-viewport</m>.
</p>
<p class="max-w-2xl mt-4">
This "top height" hero section is sized using the <m>--th</m> CSS variable for pixel-perfect height. Its height is simply <m>--vh</m> minus the height of any children of the <m><body></m> element marked with the <m>data-steady="<b>top</b>"</m> or <m>data-steady="<b>sticky</b>"</m> attributes.
</p>
<a href="https://github.com/AaronBeaudoin/steady-viewport"
class="landscape:hidden md:landscape:block mt-4 font-bold underline">
Go To GitHub Repository
</a>
</div>
<!-- Demonstration of `--ph`. -->
<divider color="gray"></divider>
<div class="relative flex flex-col justify-center items-center
h-[var(--ph)] px-4 text-gray-500 text-sm text-center">
<height-tag>height: var(--ph);</height-tag>
<p class="max-w-2xl">This "page height" section is sized using the <m>--ph</m> CSS variable for pixel-perfect height. Its height is simply <m>--vh</m> minus the height of any children of the <m><body></m> element marked with the <m>data-steady="<b>sticky</b>"</m> attribute.</p>
<p class="max-w-2xl mt-4">If you are on a mobile device and the height appears to be too short, remember that if your URL navigation bar or some other UI element has shrunk then there will be a bit of extra vertical space that was intentionally ignored by <m>--vh</m>.</p>
</div>
<!-- Demonstration of `--bh`. -->
<divider color="gray"></divider>
<div class="relative flex flex-col justify-center items-center
h-[var(--bh)] px-4 bg-gray-100 text-gray-600 text-sm text-center">
<height-tag>height: var(--bh);</height-tag>
<p class="max-w-2xl">This "bottom height" section is sized using the <m>--bh</m> CSS variable for pixel-perfect height. Its height is simply <m>--vh</m> minus the height of any children of the <m><body></m> element marked with the <m>data-steady="<b>bottom</b>"</m> or <m>data-steady="<b>sticky</b>"</m> attributes.</p>
</div>
<teleport to="#page-after">
<divider color="black"></divider>
<demo-section-top name="Page After" color="orange">
<template #snippet-mobile>
data-steady="bottom"
</template>
<template #snippet-desktop>
<div id="page-after" data-steady="bottom"> ...content... </div>
</template>
<template #note>
This orange section represents content placed at the bottom of the page.
</template>
</demo-section-top>
</teleport>
<teleport to="#bottom-sticky">
<divider color="black"></divider>
<demo-section-top name="Bottom Sticky" color="pink">
<template #snippet-mobile>
data-steady="sticky"
</template>
<template #snippet-desktop>
<div id="bottom-sticky" data-steady="sticky"> ...content... </div>
</template>
<template #note>
This pink section represents content placed at the bottom of the document that should <b>stick</b>, such as a cookie or promotional banner.
</template>
</demo-section-top>
</teleport>
<teleport to="#bottom-after">
<divider color="black"></divider>
<demo-section-top name="Bottom After" color="teal">
<template #snippet-mobile>
data-steady="bottom"
</template>
<template #snippet-desktop>
<div id="bottom-after" data-steady="bottom"> ...content... </div>
</template>
<template #note>
This teal section represents content placed at the bottom of the document <b>after</b> sticky content.
</template>
</demo-section-top>
</teleport>
</div>
<div id="page-after" class="z-10" data-steady="page-after"></div>
<div id="bottom-sticky" class="sticky bottom-0 z-20" data-steady="bottom-sticky"></div>
<div id="bottom-after" class="z-30" data-steady="bottom-after"></div>
<script>
let DemoSectionTop = {
template: "#template-demo-section-top",
props: ["name", "color"],
data: _ => ({
styles: {
root: {
purple: "bg-purple-200 text-purple-900",
blue: "bg-blue-200 text-blue-900",
green: "bg-green-200 text-green-900",
orange: "bg-orange-200 text-orange-900",
pink: "bg-pink-200 text-pink-900",
teal: "bg-teal-200 text-teal-900"
},
tag: {
purple: "bg-purple-500",
blue: "bg-blue-500",
green: "bg-green-500",
orange: "bg-orange-500",
pink: "bg-pink-500",
teal: "bg-teal-500"
}
}
})
};
</script>
<script type="text/html" id="template-demo-section-top">
<div class="flex items-center px-2 py-2 text-xs" :class="styles.root[color]">
<span class="px-1 py-[1px] rounded text-white font-bold uppercase"
:class="styles.tag[color]">{{ name }}</span>
<span class="sm:hidden ml-3 font-mono">
<slot name="snippet-mobile"></slot>
</span>
<span class="hidden sm:inline ml-3 font-mono">
<slot name="snippet-desktop"></slot>
</span>
<span class="grow hidden 2xl:inline mr-1 text-right">
<slot name="note"></slot>
</span>
</div>
</script>
<script>
let Divider = {
template: `<div class="h-[2px]" :class="styles[color]"></div>`,
props: ["color"],
data: _ => ({
styles: {
"black": "bg-black",
"gray": "bg-gray-300"
}
})
};
</script>
<script>
let Monospace = {
template: `<span class="font-mono whitespace-nowrap"><slot></slot></span>`
};
</script>
<script>
let HeightTag = {
template: `<div class="absolute top-0 right-0 px-1 py-0.5 rounded-bl-md bg-yellow-100 text-yellow-600 text-xs font-mono font-bold"><slot></slot></div>`
};
</script>
<script>
let app = Vue.createApp({});
app.component("demo-section-top", DemoSectionTop);
app.component("divider", Divider);
app.component("m", Monospace);
app.component("height-tag", HeightTag);
app.mount("#page");
</script>
</body>
</html>