-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (88 loc) · 6.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<link rel="stylesheet" href="styles.css?version=2">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="h-container">
<h1>ovah's testing board</h1>
<h2>Welcome to ovah's testing board! This is mostly for personal use but feel free to use any of the templates here.</h2>
</div>
<div class="content-main">
<div class="warning">
This is an example of a very important warning!
</div>
<div class="tooltip">
This is an example of a somewhat important tooltip!
</div>
<div class="text-main">
<p>This is just some normal text that uses spans for fancy <span style="color:aqua">highlighting</span>.</p>
</div>
<div class="subtext">
This is some subtext!
</div>
<div class="text-main">
<p>This is standard text that is long enough to wrap to a second line, this also helps find how much spacing/padding/margin we need. This is standard text that is long enough to wrap to a second line, this also helps find how much spacing/padding/margin we need.</p>
</div>
<div class="textbox-main">
<p>
This text has been locked inside of a box and can't figure out how it's going to escape!
</p>
</div>
<div class="ordered-list">
<ol>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit id nunc id lacinia. Cras fringilla convallis massa quis tristique. Maecenas faucibus odio dui, a imperdiet ex ullamcorper vel. Vivamus ornare est non dictum accumsan. Mauris ultrices sodales dictum. Nunc ullamcorper risus justo. Nunc interdum eu sapien sed convallis.
<div class="warning">
This is an example of a very important warning!
</div>
</li>
<li>
Praesent augue orci, lobortis at elementum in, fermentum vel arcu. Aliquam nec ex non eros hendrerit rutrum nec at libero. Ut lacinia ligula arcu, et malesuada arcu tempor nec. Curabitur quis gravida felis, eu auctor augue. Suspendisse diam lorem, tincidunt eget auctor vel, consectetur id arcu. Nam et ex ut sem dapibus commodo. Nunc molestie elit dictum ante imperdiet, at dictum orci cursus. Aliquam erat volutpat. Suspendisse consequat consectetur eleifend. Suspendisse potenti. Proin consectetur interdum lacus, id sodales augue gravida et. Vestibulum pulvinar id nisl eget vehicula. Aenean pellentesque mollis placerat. Suspendisse congue urna magna, interdum sagittis mauris gravida eget. Etiam ultrices molestie dolor a pharetra. Donec tristique dictum quam ut cursus.
</li>
<li>
Aenean eget urna tellus. Maecenas euismod hendrerit nisl nec dignissim. Donec et mollis orci, vel porta nunc. In leo magna, finibus id nisl in, tristique lobortis neque. Etiam facilisis, enim eu lobortis porta, eros purus consectetur erat, vitae tempor quam magna ac sem. Morbi ac velit pretium, auctor elit eu, accumsan felis. Proin consequat nibh hendrerit turpis blandit pellentesque.
</li>
<li>
Donec ornare est nec leo dictum, vel viverra purus maximus. Nullam scelerisque laoreet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sed efficitur neque, vel pharetra lacus. In hac habitasse platea dictumst. Nam vel tortor in lectus ullamcorper elementum. Nulla facilisi. Pellentesque feugiat luctus maximus. Proin sed vulputate sem. Vestibulum maximus nunc et urna mattis, eu ultrices leo tristique. Vestibulum dolor neque, semper at consectetur quis, rutrum ut augue. Cras pellentesque est tempor dolor faucibus, a imperdiet turpis congue. Mauris a commodo mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam mollis ligula et maximus placerat. Quisque a risus ut diam convallis semper.
<div class="textbox-main">
<p>
Curabitur scelerisque ante sit amet massa cursus, vel accumsan purus placerat. Etiam orci quam, mattis et pellentesque ut, egestas eu sapien. Pellentesque a iaculis risus, quis ullamcorper justo. Praesent lacinia sollicitudin orci et blandit. Pellentesque sed lacus facilisis, porttitor turpis quis, eleifend sem. Phasellus malesuada, diam ut auctor dignissim, lectus velit aliquam enim, a tincidunt est nibh vel ligula. Vestibulum non sapien nec erat accumsan consequat ut quis nisi.
</p>
</div>
</li>
</ol>
</div>
</div>
<script>
// Get the main text and SVG elements
const mainText = document.getElementById('main-text');
const verticalLine = document.getElementById('vertical-line');
const horizontalLine = document.getElementById('horizontal-line');
const footnoteText = document.getElementById('footnote-text');
window.onload = function() {
// Get the width of the main text
const textWidth = mainText.getBBox().width;
// Calculate the center of the main text
const textCenterX = textWidth / 2;
// Adjust the vertical line to the center of the main text
verticalLine.setAttribute('x1', textCenterX);
verticalLine.setAttribute('x2', textCenterX);
verticalLine.setAttribute('y1', 28);
verticalLine.setAttribute('y2', 48);
// Adjust the horizontal line, it will be at the bottom of the vertical line
horizontalLine.setAttribute('x1', textCenterX);
horizontalLine.setAttribute('x2', textCenterX + 25); // extending to the right
horizontalLine.setAttribute('y1', 48);
horizontalLine.setAttribute('y2', 48);
// Adjust the footnote text to align with the center of the main text
footnoteText.setAttribute('x', textCenterX + 30);
footnoteText.setAttribute('y', 52);
};
</script>
</body>
</html>