-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
157 lines (147 loc) · 5.25 KB
/
demo.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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Inner vh</title>
<style>
.vh {
--height: 100vh;
--color: blue;
}
.innerVh {
--height: calc(var(--innerVh, 1vh) * 100);
--color: green;
}
h1 {
margin: 0;
padding: 1em;
position: absolute;
top: 0;
left: 6rem;
bottom: 0;
writing-mode: vertical-lr;
text-align: center;
font-family: sans-serif;
}
body {
margin: 0;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
min-height: 100vh;
}
.vh,
.innerVh {
width: 50%;
position: relative;
}
.vh::before,
.innerVh::before {
content: '';
float: left;
background-color: #cccccc;
border-top: var(--height) solid var(--color);
border-right: 6rem solid transparent;
}
.vh::after,
.innerVh::after {
position: absolute;
left: calc(6rem - 2.5em);
bottom: 0.5em;
content: '';
width: 2em;
height: 2em;
border-radius: 50%;
background-color: var(--color);
}
.dummyContent {
padding: 1em;
}
</style>
</head>
<body>
<section class="vh">
<h1>vh</h1>
</section>
<section class="innerVh">
<h1>innerVh</h1>
</section>
<section class="dummyContent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in tellus
mi. Fusce nec ornare sem, eget scelerisque nulla. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Fusce dolor ipsum, gravida ut
diam convallis, faucibus sollicitudin lectus. Integer ultrices tincidunt
risus a dictum. Cras pulvinar faucibus risus vel aliquam. Phasellus vel
nisi nisl. Aliquam erat volutpat. Vivamus pellentesque lacus sit amet
velit iaculis sagittis. Vestibulum at nulla quis eros commodo commodo.
In commodo accumsan libero, placerat faucibus justo gravida eget. Donec
vitae ullamcorper nunc. Nullam finibus augue quis tortor fringilla, eget
imperdiet nulla hendrerit.
</p>
<p>
Praesent tellus massa, efficitur euismod finibus eget, tincidunt eget
felis. Sed suscipit dui vel gravida consectetur. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vivamus volutpat ligula mi, non luctus leo sollicitudin eu. Nullam quis
dapibus neque. Nulla facilisi. Pellentesque aliquam interdum enim,
ornare congue ante ullamcorper eu. Proin ac urna tincidunt, vehicula
augue rhoncus, ultricies diam. Praesent massa tortor, consequat in magna
sed, pellentesque varius ligula. Donec et molestie est. Quisque rhoncus
congue nunc, ac feugiat velit vulputate vehicula. Quisque vitae dolor et
leo finibus consequat tristique at risus. Vestibulum et convallis arcu.
Sed condimentum dolor ac eros imperdiet mollis. Nunc augue lectus,
commodo a posuere eu, euismod quis nisi. Mauris vel tortor et justo
faucibus lobortis ut at turpis.
</p>
<p>
Maecenas erat urna, malesuada in tincidunt et, imperdiet et nisi. Fusce
mattis pulvinar arcu, a tempor turpis scelerisque varius. Donec
tincidunt fermentum ipsum a feugiat. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis
imperdiet augue, et porttitor lectus vestibulum eu. Curabitur fermentum
tellus in nisi lacinia congue. Proin feugiat neque ut nunc laoreet
porta. Mauris vitae accumsan sapien, ut finibus ex. Pellentesque et est
vel felis tempor bibendum. Quisque ac libero tempus, imperdiet justo ac,
euismod diam. Nunc tempor aliquam laoreet. In quam ligula, accumsan sed
sodales a, convallis id est.
</p>
<p>
Donec pretium varius malesuada. Ut pretium sem a nisl sollicitudin
gravida. Phasellus accumsan scelerisque eros, eget pulvinar arcu egestas
ut. Mauris vel lacinia nulla. Nullam iaculis lectus in interdum
tincidunt. Praesent aliquet consequat sem, ac luctus urna fermentum ut.
Etiam eu consequat diam. Morbi hendrerit tortor id mauris pellentesque,
eget dictum est aliquam. Quisque vulputate odio consequat dignissim
pulvinar. Pellentesque pulvinar congue odio sit amet ultrices. Nullam
placerat, libero ut tempus pharetra, urna felis suscipit lorem, vel
tincidunt mi tortor ac odio. Praesent dui elit, cursus nec tristique
imperdiet, elementum nec turpis. Donec aliquet pharetra turpis efficitur
efficitur. Mauris vel risus a lacus dictum ultricies nec ac augue.
</p>
<p>
Aenean bibendum felis a mi placerat, sit amet faucibus dui tempor.
Pellentesque ullamcorper hendrerit ligula. Mauris tristique ornare
ipsum, vel euismod est pulvinar semper. Fusce nibh mi, accumsan at
turpis a, faucibus cursus felis. Pellentesque lacinia, justo non
ultricies elementum, dui justo luctus urna, sed lacinia purus nisl non
metus. Nullam blandit ligula quis condimentum scelerisque. Donec commodo
justo ligula, vel pharetra sapien tincidunt quis. Donec rhoncus tempor
hendrerit.
</p>
</section>
<script type="module">
import('./dist/index.es.js')
.catch((error) =>
import('https://unpkg.com/inner-vh@latest/dist/index.es.js')
)
.then((library) => {
const { innerVh } = library
innerVh()
})
</script>
</body>
</html>