-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (183 loc) · 12.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Primo" />
<title>webonix.org by AJ Mercer</title><!-- HEAD_svelte-1t7ohez_START --><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8"><link rel="icon" type="image/png" sizes="32x32" href="https://webonix.org"><link rel="preconnect" href="https://fonts.bunny.net"><meta name="description" content="Exploring the wonderful world of cfml"><style>/* Reset & standardize default styles */
@import url("https://unpkg.com/@primo-app/primo@1.3.64/reset.css") layer;
/* Design tokens (apply to components) */
:root {
/* Custom theme options */
--color-accent: #004700;
/* Base values */
--box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
--border-radius: 0;
--border-color: #e0e1e1;
}
/* Root element (use instead of `body`) */
#page {
font-family: system-ui, sans-serif;
color: #111;
line-height: 1.5;
font-size: 1.125rem;
background: white;
}
/* Elements */
.section-container {
max-width: 1200px;
margin: 0 auto;
padding: 5rem 2rem;
}
a.link {
line-height: 1.3;
border-bottom: 2px solid var(--color-accent);
transform: translateY(-2px); /* move link back into place */
transition: var(--transition, 0.1s border);
}
a.link:hover {
border-color: transparent;
}
.heading {
font-size: 2.5rem;
line-height: 1.15;
}
.button {
color: white;
background: var(--color-accent, rebeccapurple);
border-radius: 0;
padding: 18px 24px;
transition: var(--transition, 0.1s box-shadow);
border: 0;
}
/* reset */
.button:hover {
box-shadow: 0 0 0 2px var(--color-accent, rebeccapurple);
}
.button.inverted {
background: transparent;
color: var(--color-accent, rebeccapurple);
}
/* Content Section */
.content {
max-width: 900px;
margin: 0 auto;
padding: 3rem 2rem;
}
.content p {
margin-bottom: 1rem;
line-height: 1.5;
}
.content img {
width: 100%;
margin: 2rem 0;
box-shadow: var(--box-shadow);
border-radius: var(--border-radius);
}
.content a.link {
line-height: 1.3;
font-weight: 500;
border-bottom: 2px solid var(--color-accent);
transform: translateY(-2px); /* move link back into place */
transition: var(--transition, 0.1s border);
}
.content a.link:hover {
border-color: transparent;
}
.content h1 {
font-size: 3rem;
font-weight: 500;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.content h2 {
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 1rem;
}
.content h3 {
font-size: 2rem;
font-weight: 500;
margin-bottom: 1rem;
}
.content ul {
list-style: disc;
padding: 0.5rem 0;
padding-left: 1.25rem;
}
.content ol {
list-style: decimal;
padding: 0.5rem 0;
padding-left: 1.25rem;
}
.content blockquote {
padding: 2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border-left: 5px solid var(--color-accent);
}
</style><!-- HEAD_svelte-1t7ohez_END -->
<style>header.svelte-19bt6nw.svelte-19bt6nw{color:white;background-size:cover;display:grid;gap:20rem}.section-container.svelte-19bt6nw.svelte-19bt6nw{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:1rem;padding-bottom:1rem}.logo.svelte-19bt6nw.svelte-19bt6nw{font-size:1.5rem;font-weight:600;line-height:1.2}.desktop-nav.svelte-19bt6nw.svelte-19bt6nw{display:none;align-items:center;justify-content:space-between;width:100%}.desktop-nav.svelte-19bt6nw nav.svelte-19bt6nw{display:flex;gap:2rem}.desktop-nav.svelte-19bt6nw nav a.link.svelte-19bt6nw{border-color:transparent;transition:border-color 0.1s;font-size:0.95rem}.desktop-nav.svelte-19bt6nw nav a.link.svelte-19bt6nw:hover,.desktop-nav.svelte-19bt6nw nav a.link .active.svelte-19bt6nw{border-color:initial}@media(min-width: 800px){.desktop-nav.svelte-19bt6nw.svelte-19bt6nw{display:flex
}}.mobile-nav.svelte-19bt6nw.svelte-19bt6nw{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:500}@media(min-width: 800px){.mobile-nav.svelte-19bt6nw.svelte-19bt6nw{display:none
}}.headline.svelte-19bt6nw.svelte-19bt6nw{font-size:clamp(2rem, 10vw, 3.5rem);max-width:800px;padding-bottom:2rem;line-height:1.1}#popup.svelte-19bt6nw.svelte-19bt6nw{color:#222;font-size:1.25rem;display:grid;gap:1rem;position:absolute;text-align:center;background-color:var(--background-color, white);box-shadow:var(--box-shadow, 0px 4px 30px rgba(0, 0, 0, 0.1));border-radius:var(--border-radius);inset:0.5rem;bottom:initial;padding:2rem;z-index:1}#popup.svelte-19bt6nw button#close.svelte-19bt6nw{position:absolute;right:1rem;top:1rem}
.section-container.svelte-1qrna1o.svelte-1qrna1o{display:grid;gap:3rem}@media(min-width: 900px){.section-container.svelte-1qrna1o.svelte-1qrna1o{grid-template-columns:1.5fr 1fr;gap:8rem
}}header.svelte-1qrna1o.svelte-1qrna1o{display:flex;flex-direction:column;place-items:start start;gap:1.5rem}header.svelte-1qrna1o .heading.svelte-1qrna1o{line-height:1.1;margin-bottom:1rem}.content.svelte-1qrna1o.svelte-1qrna1o{padding:0;line-height:1.75}
.section-container.svelte-1twigpw.svelte-1twigpw{display:grid;gap:3rem}@media(min-width: 800px){.section-container.svelte-1twigpw.svelte-1twigpw{grid-template-columns:2fr 3fr;gap:20rem
}}.body.svelte-1twigpw.svelte-1twigpw{display:grid;place-content:flex-start;gap:1rem;padding:0}.body.svelte-1twigpw .social-links.svelte-1twigpw{display:grid;gap:1.5rem}.body.svelte-1twigpw .social-links .item.svelte-1twigpw{display:grid;line-height:1.6}.body.svelte-1twigpw .social-links .item .label.svelte-1twigpw{font-weight:600}.body.svelte-1twigpw .social-links .item a.svelte-1twigpw{display:flex;align-items:center;gap:0.75rem}form.svelte-1twigpw.svelte-1twigpw{display:grid;gap:1rem}form.svelte-1twigpw label.svelte-1twigpw{display:grid;gap:0.25rem}form.svelte-1twigpw label span.svelte-1twigpw{font-size:0.75rem;font-weight:500}form.svelte-1twigpw label input.svelte-1twigpw,form.svelte-1twigpw label textarea.svelte-1twigpw{padding:0.5rem;outline-color:transparent;transition:var(--transition, 0.1s outline-color);border:1.5px solid var(--border-color, #eee);border-radius:2px;font-size:0.9rem;font-weight:300}form.svelte-1twigpw label input.svelte-1twigpw:focus,form.svelte-1twigpw label textarea.svelte-1twigpw:focus{outline-color:var(--color-accent, rebeccapurple)}form.svelte-1twigpw .button.svelte-1twigpw{margin-top:1rem;place-self:start}
footer.svelte-u1zmy0.svelte-u1zmy0{background:#2b312b;color:white}.section-container.svelte-u1zmy0.svelte-u1zmy0{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4rem}.content.svelte-u1zmy0.svelte-u1zmy0{margin:initial;padding:0;line-height:1.1}.nav-items.svelte-u1zmy0.svelte-u1zmy0{display:flex;flex-wrap:wrap;gap:4rem}.nav-items.svelte-u1zmy0 ul.svelte-u1zmy0{display:grid;gap:0.5rem}.nav-items.svelte-u1zmy0 ul .link.svelte-u1zmy0{border-bottom:2px solid white}.nav-items.svelte-u1zmy0 ul .link.svelte-u1zmy0:hover{border-color:transparent}.nav-items.svelte-u1zmy0 h3.svelte-u1zmy0{font-weight:500;font-size:1.5rem;margin-bottom:1rem}</style>
</head>
<body id="page">
<div class="section" id="section-e1dcdc08"><header style="background-image:url('https://webonix.net/images/header/perth-city-crop.jpg')" role="img" aria-label="Perth, Western Australia" class="svelte-19bt6nw"><div class="section-container svelte-19bt6nw"><div class="desktop-nav svelte-19bt6nw"><a href="/" class="logo svelte-19bt6nw">webonix.org</a>
<nav class="svelte-19bt6nw"><a class="link svelte-19bt6nw" href="/about">About</a><a class="link svelte-19bt6nw" href="/mission">Mission</a><a class="link svelte-19bt6nw" href="/blog">Blog</a></nav></div>
<div class="mobile-nav svelte-19bt6nw"><a href="/" class="logo svelte-19bt6nw">webonix.org</a>
<button id="open" aria-label="Open mobile navigation"></button>
</div></div>
<div class="section-container svelte-19bt6nw"><h1 class="headline svelte-19bt6nw">"The more that you read, the more things you will know. The more that you learn, the more places you'll go." - Dr. Seuss</h1></div></header></div>
<div class="section" id="section-f8662a3f"><section class="section-container svelte-1qrna1o"><header class="svelte-1qrna1o"><h2 class="heading svelte-1qrna1o">This site is to share the things I learn, so I do not forget.</h2>
<a href="/blog" class="button">Blog</a></header>
<div class="content svelte-1qrna1o"><!-- HTML_TAG_START --><p>As <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://drkarl.com/">Dr Karl</a> says, "if you can not explain something, you do not understand it" .</p><p>So, hopefully, we can both learn something today.</p><!-- HTML_TAG_END --></div></section></div>
<div class="section" id="section-5d49f2f8"><section class="section-container svelte-1twigpw"><div class="body svelte-1twigpw"><h2 class="heading">Contact Me</h2>
<div class="description"><!-- HTML_TAG_START -->Tell me something I don't know<!-- HTML_TAG_END --></div>
<div class="social-links svelte-1twigpw"><div class="item svelte-1twigpw"><span class="label svelte-1twigpw">Email</span>
<a href="mailto:andrew@webonix.net" class="svelte-1twigpw">andrew@webonix.net</a>
</div><div class="item svelte-1twigpw"><span class="label svelte-1twigpw">Twitter / X</span>
<a href="https://x.com/webonix" class="svelte-1twigpw">@webonix</a>
</div></div></div>
<form class="svelte-1twigpw"><label class="svelte-1twigpw"><span class="svelte-1twigpw">Name</span>
<input type="text" placeholder="your name" class="svelte-1twigpw">
</label><label class="svelte-1twigpw"><span class="svelte-1twigpw">Email</span>
<input type="email" placeholder="you@some.where" class="svelte-1twigpw">
</label><label class="svelte-1twigpw"><span class="svelte-1twigpw">Message</span>
<textarea placeholder="go for it..." class="svelte-1twigpw"></textarea>
</label>
<button class="button svelte-1twigpw" type="submit">Submit</button></form></section></div>
<div class="section" id="section-7fa5202c"><footer class="svelte-u1zmy0"><div class="section-container svelte-u1zmy0"><div class="content svelte-u1zmy0"><!-- HTML_TAG_START --><h3 id="shoutoutsbr">Shoutouts <br></h3><!-- HTML_TAG_END --></div>
<div class="nav-items svelte-u1zmy0"><nav><h3 class="svelte-u1zmy0">Open Source</h3>
<ul class="svelte-u1zmy0"><li><a class="link svelte-u1zmy0" href="https://lucee.org">Lucee Server</a>
</li></ul>
</nav><nav><h3 class="svelte-u1zmy0">This site</h3>
<ul class="svelte-u1zmy0"><li><a class="link svelte-u1zmy0" href="https://primocms.org/">Primo CMS</a>
</li><li><a class="link svelte-u1zmy0" href="https://vercel.org/">Vercel</a>
</li><li><a class="link svelte-u1zmy0" href="https://github.com/">GitHub</a>
</li></ul>
</nav></div></div></footer></div>
<script type="module">
import('/_symbols/8fe3b892-e812-4d26-9c59-e901dc66acfa.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-5d49f2f8'),
hydrate: true,
props: {"heading":"Contact Me","subheading":"Tell me something I don't know","social":[{"link":{"url":"mailto:andrew@webonix.net","label":"andrew@webonix.net"},"label":"Email"},{"link":{"url":"https://x.com/webonix","label":"@webonix","active":false},"label":"Twitter / X"}],"inputs":[{"type":"text","label":"Name","placeholder":"your name"},{"type":"email","label":"Email","placeholder":"you@some.where"},{"type":"textarea","label":"Message","placeholder":"go for it..."}]}
})
})
.catch(e => console.error(e))
import('/_symbols/4f3d46b9-db36-4f45-acc5-b22381a5262c.js')
.then(({default:App}) => {
new App({
target: document.querySelector('#section-e1dcdc08'),
hydrate: true,
props: {"background":{"alt":"Perth, Western Australia","src":"https://webonix.net/images/header/perth-city-crop.jpg","url":"https://webonix.net/images/header/perth-city-crop.jpg","size":null},"headline":"\"The more that you read, the more things you will know. The more that you learn, the more places you'll go.\" - Dr. Seuss","logo":{"image":{"alt":"AJ Mercer","src":"https://tchydpipodfcfqsjjahc.supabase.co/storage/v1/object/public/images/8350c494-2e44-437f-a309-5b1bd3d285fd/1476328423000ajm-profile-photo.jpg","url":"https://tchydpipodfcfqsjjahc.supabase.co/storage/v1/object/public/images/8350c494-2e44-437f-a309-5b1bd3d285fd/1476328423000ajm-profile-photo.jpg","size":6},"title":"webonix.org"},"site_nav":[{"link":{"url":"/about","label":"About","active":false}},{"link":{"url":"/mission","label":"Mission","active":false}},{"link":{"url":"/blog","label":"Blog"}}]}
})
})
.catch(e => console.error(e))
</script>
</body>
</html>