-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
105 lines (99 loc) · 4.54 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
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MultiMedium</title>
<script src="https://code.jquery.com/pep/0.3.0/pep.js" integrity="sha384-N5/H2Rqjj4diop/pmXEM2QA3OLIBRgkOqdTsYaLfqA0jYACBbb/xmL4kPRXzYcW1" crossorigin="anonymous"></script>
<script>
if (typeof PointerEventsPolyfill == 'undefined') {
document.write('<script src="demo/lib/pep.js"><\/script>');
}
</script>
<style>
h1 {
text-align: center;
font-size: 4em;
margin: 0;
padding: 0.7cm;
color: white;
background: rgb(66, 0, 33);
color: rgb(255, 182, 216);
border-bottom: 0.1em dotted white;
}
p {
font-size: 1em;
margin: 0.4cm;
padding: 0.3cm;
word-spacing: 0.3em; /* TODO: apply this only to handwritten text */
}
body,
.multi-medium-input {
background: white;
color: #444;
}
main,
.multi-medium-input {
font-family: sans-serif;
max-width: 70em;
margin: 0 auto;
}
body {
margin: 0;
margin-bottom: calc(150px + 2.4em);
}
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
text-align: center;
}
.multi-medium-input {
height: 150px;
position: fixed;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 0.4cm;
box-shadow: 0 0 50px #fff;
border: 1px dashed rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
.multi-medium-edit-mode .multi-medium-word {
cursor: pointer;
}
.multi-medium-word:focus {
outline: none;
border-radius: 3px;
box-shadow: 0 0 2px 3px #FFFFFF, 0 0 4px 5px #FFC7C7, 0 0 100px 5px #FF77BB;
z-index: 1;
}
</style>
<h1>MultiMedium</h1>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ligula, tristique ac velit non, imperdiet mattis massa. Sed ullamcorper tempus luctus. Fusce sem nunc, pulvinar vitae leo a, condimentum maximus purus. Nunc augue felis, tincidunt porttitor magna ut, ultrices maximus ex. Maecenas convallis feugiat felis eu commodo. Vestibulum lacinia convallis leo. Nulla et libero ex. Curabitur sit amet leo laoreet, imperdiet felis eu, blandit nunc. Suspendisse et varius felis. Duis ut venenatis justo. Etiam lacinia velit nec odio tristique maximus vel ut sapien.
</p>
<p>
Duis eu pulvinar odio. Fusce interdum tempus elit, vitae aliquet metus dictum dignissim. Nulla euismod lacinia enim sed vulputate. Nam facilisis dapibus enim, nec tincidunt eros venenatis ac. Etiam porttitor tempor mauris, non pharetra nulla ultrices eu. In congue dui ut volutpat lobortis. In commodo imperdiet mauris eu dictum. Etiam rutrum leo id urna pharetra, sit amet condimentum libero feugiat. Sed molestie ligula finibus massa mattis condimentum. Donec nec scelerisque urna. Donec hendrerit aliquam massa, eget commodo nisi semper sit amet. Sed semper justo id odio laoreet, in vehicula justo consequat.
</p>
<p>
Ut scelerisque nulla non ante viverra, sit amet mattis justo blandit. Etiam condimentum sit amet ex vitae ultrices. Ut sed efficitur ligula, id molestie odio. Aenean sodales lobortis orci. Morbi felis ex, maximus eu ligula ac, venenatis malesuada arcu. Suspendisse potenti. Mauris porta fermentum risus, in vulputate ipsum. Integer elit nisi, sodales vitae aliquam a, porttitor quis tortor. Nunc interdum, ante varius sollicitudin lobortis, purus risus rhoncus est, eget rhoncus felis tellus nec dolor. Vivamus scelerisque, ligula sit amet pretium fringilla, ex mauris congue nibh, a sollicitudin mauris felis vitae erat. Etiam volutpat dignissim orci ut facilisis.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam fringilla, justo vel faucibus convallis, turpis urna consequat massa, quis tincidunt sem augue et felis. Proin mi urna, egestas non odio id, consequat sodales enim. Quisque a est ac ligula placerat dignissim. Integer sollicitudin varius laoreet. Phasellus ut mollis neque, et maximus nisl. Morbi id congue augue. Donec finibus magna augue, eu vulputate lectus venenatis eu. Vivamus quis elementum leo.
</p>
<p>
Nulla facilisi. Vestibulum gravida consectetur justo nec tristique. Proin pharetra, massa eget commodo feugiat, diam magna tempus risus, ut rhoncus massa nunc efficitur ante. Integer lectus felis, aliquam vel risus vitae, aliquet cursus nisl. Curabitur facilisis auctor magna quis pellentesque. Integer sollicitudin sit amet turpis a convallis. Nulla sodales accumsan efficitur. Donec a ligula suscipit, accumsan magna ut, dapibus velit.
</p>
</main>
<footer>
<p>Source code is <a href="https://github.com/multiism/multi-medium">on GitHub!</a></p>
</footer>
<script src="multi-medium.js"></script>
<script src="demo/demo.js"></script>