Skip to content

Commit 7e2a61b

Browse files
gnatgnat
authored
Update example.html
1 parent c4f672c commit 7e2a61b

File tree

1 file changed

+64
-8
lines changed

1 file changed

+64
-8
lines changed

‎example.html

+64-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html>
33
<head>
44
<title>🌘 CSS Scope Inline Test Page</title>
5-
<script src="script.js"></script> <!-- ... or add as inline <script> ! -->
5+
<!-- ... or add as inline <script> ! -->
6+
<script src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js"></script>
67
<style>
78
*,*::before,*::after{ margin: 0; box-sizing: border-box; } /* Reset */
89
html {
@@ -15,7 +16,7 @@
1516
body {
1617
font-size: 2rem; /* 2rem = 20px in our setup. */
1718
}
18-
button {
19+
html button {
1920
font-size: 2rem;
2021
cursor: pointer;
2122
color: #fff;
@@ -77,28 +78,83 @@
7778
border-radius: 12px;
7879
margin: 4px 20px;
7980
}
80-
.this ol li:nth-child(2) { /* ✨ .this is an alias! */
81+
.this ol li[n1] { /* ✨ .this is an alias! */
8182
background: hsl(264 50% 50%);
8283
}
83-
.self ol li:nth-child(3) { /* ✨ .self is an alias! */
84+
.self ol li[n2] { /* ✨ .self is an alias! */
8485
background: hsl(264 80% 50%);
8586
}
86-
@keyframes \.me { /* ♻️ Looped animation @keyframes can be scoped using \ */
87+
@keyframes wat { /* ♻️ Looped animation @keyframes can be scoped using \ */
8788
0% { transform: translateY(0px); }
8889
50% { transform: translateY(20px); }
8990
100% { transform: translateY(0px); }
9091
}
9192
.me { animation: \.me 4s ease-in-out infinite; }
92-
h1, h2, h3 { font-size: 3rem; margin: 10px; } /* Normal global CSS works untouched! */
93+
h1, h2, h3 { font-size: 3rem; margin: 20px 0; } /* Plain CSS works untouched! */
9394
</style>
9495
<h1>🛸 Scoped style using .me</h1>
9596
<ol>
9697
<li>Use modern <span>Nested CSS</span>
97-
<li>👽 Using .this
98-
<li>💀 Using .self
98+
<li n1>👽 Using .this
99+
<li n2>💀 Using .self
99100
<li>⚡ Use live editing in the browser inspector to speed up your workflow, again!
100101
</ol>
101102
</div>
103+
102104
<button onClick="window.open('https://github.com/gnat/css-scope-inline/blob/main/example.html');" style="font-weight: bold; font-family: sans-serif;">🐱 View code for this page.</button>
105+
106+
<div>
107+
<style>
108+
.me { --color: hsl(264 80% 50%); font-family: sans-serif; margin: 20px }
109+
.me div { margin: 20px }
110+
.me div div ul { display: inline }
111+
.me div ul li { display: inline-block; width: 140px; text-align: center; background: #444; border-radius: 5px; padding: 10px; margin: 10px 10px }
112+
</style>
113+
<h2>Responsive Design 🔛 Resize the window!</h2>
114+
<div>
115+
<style>
116+
.me ul li[n1] { background: var(--color); }
117+
@media sm { .me ul li[n2] { background: var(--color); } }
118+
@media md { .me ul li[n3] { background: var(--color); } }
119+
@media lg { .me ul li[n4] { background: var(--color); } }
120+
@media xl { .me ul li[n5] { background: var(--color); } }
121+
@media xx { .me ul li[n6] { background: var(--color); } }
122+
</style>
123+
<div>Mobile First (<strong>above</strong> breakpoint)</div>
124+
<ul><li n1><strong>🟢 None</strong><li n2>sm<li n3>md<li n4>lg<li n5>xl<li n6>🏁 xx</ul>
125+
</div>
126+
<div>
127+
<style>
128+
.me ul li[n1] { background: var(--color); }
129+
@media xl- { .me ul li[n2] { background: var(--color); } }
130+
@media lg- { .me ul li[n3] { background: var(--color); } }
131+
@media md- { .me ul li[n4] { background: var(--color); } }
132+
@media sm- { .me ul li[n5] { background: var(--color); } }
133+
@media xs- { .me ul li[n6] { background: var(--color); } }
134+
</style>
135+
<div>Desktop First (<strong>below</strong> breakpoint)</div>
136+
<ul><li n6>🏁 xs-<li n5>sm-<li n4>md-<li n3>lg-<li n2>xl-<li n1><strong>🟢 None</strong></ul>
137+
<br />🟢 = No breakpoint. Default starting point.
138+
</div>
139+
<br />
140+
141+
<h2>HTMX Test</h2>
142+
<script src="https://unpkg.com/htmx.org@1.9.5"></script>
143+
<div>Swapped DOM elements are styled instantly when they arrive.</div>
144+
<button garlic hx-get="/example.html" hx-select="button[garlic]" hx-swap="afterend">
145+
<style>
146+
.me { margin: 4px; padding: 2px; min-width: 100px; background: hsl(264 80% 47%); border-bottom: 0.5rem solid hsl(264 80% 20%); }
147+
.me:hover { background: hsl(264 80% 60%); }
148+
</style>
149+
🧄
150+
</button>
151+
<button vampire hx-get="/example.html" hx-select="button[vampire]" hx-swap="afterend">
152+
<style>
153+
.me { margin: 4px; padding: 2px; min-width: 100px; background: hsl(150 80% 47%); border-bottom: 0.5rem solid hsl(150 80% 28%); }
154+
.me:hover { background: hsl(150 80% 60%); }
155+
</style>
156+
🧛
157+
</button>
158+
</div>
103159
</body>
104160
</html>

0 commit comments

Comments
 (0)