-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (124 loc) · 4.9 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
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="Demonstration for nasa-seached">
<style>
:root, html, body {
margin: 0;
padding: 0;
}
#demo {
margin: var(--ddd-spacing-2);
}
nasa-seached {
margin: var(--ddd-spacing-2);
border: var(--ddd-border-md);
border-radius: var(--ddd-radius-lg);
}
nasa-seached:hover {
box-shadow: var(--ddd-boxShadow-sm);
}
#example {
--nasa-seached-font-size: var(--ddd-font-size-l);
background-color: var(--ddd-accent-2);
color: var(--ddd-primary-17);
}
</style>
<title>nasa-seached</title>
</head>
<body>
<div id="demo">
<h1>nasa-seached</h1>
<!-- this is going to do whatever the tag's defaults are -->
<h2>Default</h2>
<nasa-seached></nasa-seached>
<h2>Slot usage</h2>
<nasa-seached data-accent="2" data-primary="17"><div>Sample slot content</div></nasa-seached>
<h2>Property usage</h2>
<nasa-seached id="example" title="Sample property title"></nasa-seached>
</div>
<script type="module" src="./nasa-seached.js"></script>
<!-- Take HAX, the Web and you further down the rabbit hole -->
<style>
#follow-the-white-rabbit {
margin: var(--ddd-spacing-4) auto 64px 16px;
background-color: var(--ddd-accent-4);
color: black;
}
#follow-the-white-rabbit[open] summary {
background-color: var(--ddd-accent-4) !important;
color: black;
}
#follow-the-white-rabbit[open] .content {
padding: 0 var(--ddd-spacing-4);
}
#follow-the-white-rabbit ul,
#follow-the-white-rabbit li {
padding: 0;
margin: 0;
}
#follow-the-white-rabbit li {
font-size: var(--ddd-font-size-xs);
list-style: none;
}
#follow-the-white-rabbit li strong,
#follow-the-white-rabbit li a {
padding: var(--ddd-spacing-2) var(--ddd-spacing-4);
color: black;
display: block;
font-weight: bold;
}
#follow-the-white-rabbit li:focus-within a,
#follow-the-white-rabbit li:hover a {
background-color: black;
color: yellow;
}
</style>
<details id="follow-the-white-rabbit" open>
<summary>How to Develop</summary>
<div class="content">
<p>
</p>
<p>
You can edit the current page by modifying <code>index.html</code><br />
To edit your <strong>nasa-seached</strong> tag, modify <code>src/nasa-seached.js</code>.
This file contains all the HTML, CSS and JavaScript used to render your elements above!
</p>
<p>
Web components are easy to follow once you get used to their pattern.
Below are links to help on your journey. Good luck, we need you!
</p>
<ul>
<li><a href="https://haxtheweb.org/documentation/ddd" target="_blank">🧑🎨 Learn DDD HAX Design system</a></li>
<li><a href="https://lit.dev/playground/" target="_blank" rel="nofollow">🔥 Learn Lit</a></li>
<li><a href="https://hax.psu.edu" target="_blank">🧙 HAX The Web @ Penn State</a></li>
</ul>
<h2>Join and Share HAX</h2>
<ul>
<li><a href="https://github.com/haxtheweb/issues/issues" target="_blank" rel="nofollow">🔮 Ideas to HAX Harder, Better, Faster, Stronger</a></li>
<li><a href="https://bit.ly/hax-the-linkedin" target="_blank" rel="nofollow">👔 Share on LinkedIn</a></li>
<li><a href="https://bit.ly/hax-the-x" target="_blank" rel="nofollow">🧵 Tweet on X</a></li>
<li><a href="https://bit.ly/hax-discord" target="_blank" rel="nofollow">💬 Join Community</a></li>
</ul>
<h2>Learn the languages and tools</h2>
<ul>
<li><a href="https://w3schools.com" target="_blank" rel="nofollow">🌐 Learn HTML</a></li>
<li><a href="https://web.dev/learn/css/" target="_blank" rel="nofollow">🎨 Learn CSS</a></li>
<li><a href="http://Javascript.info" target="_blank" rel="nofollow">💻 Learn JavaScript (JS)</a></li>
<li><a href="https://gitimmersion.com" target="_blank" rel="nofollow">🦺 Learn Git / Github</a></li>
<li><a href="https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/" target="_blank" rel="nofollow">📦 Learn NPM</a></li>
<li><a href="http://learnux.io" target="_blank" rel="nofollow">📐 Learn UX / UI development</a></li>
</ul>
<h2>Find purpose and inspiration</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=eC7xzavzEKY" target="_blank" rel="nofollow">🐟 This is Water - David Foster Wallace</a></li>
<li><a href="https://www.youtube.com/watch?v=kYfNvmF0Bqw" target="_blank" rel="nofollow">🏗️ Secrets of Life - Steve Jobs</a></li>
<li><strong>💡 <em>Never. Stop. Innovating.</em></strong></li>
</ul>
</div>
</details>
</body>
</html>