You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.6 KiB
51 lines
1.6 KiB
2 years ago
|
global css @root ff:Arial c:white/87 bg:black/85
|
||
|
|
global css a c:indigo5 c@hover:indigo6
|
||
|
|
global css body m:0 d:flex ja:center h:100vh
|
||
|
|
|
||
|
|
tag app-counter
|
||
|
|
count = 0
|
||
|
|
<self @click=count++> "Count is {count}"
|
||
|
|
|
||
|
|
# css without a selector applies to the enclosing element
|
||
|
|
css d:inline-block user-select:none cursor:pointer fs:6 bg:gray9
|
||
|
|
p:2.5 5 m:6 bd:1px solid transparent rd:4 tween:border-color 250ms
|
||
|
|
bc@hover:indigo5
|
||
|
|
|
||
|
|
tag app
|
||
|
|
|
||
|
|
# inline styles with square brackets
|
||
|
|
<self[max-width:1280px m:0 auto p:2rem ta:center]>
|
||
|
|
|
||
|
|
# this css applies to nested svg elements and not parents
|
||
|
|
css img h:23 p:1.5em
|
||
|
|
transition:transform 250ms, filter 250ms
|
||
|
|
@hover transform:scale(1.1)
|
||
|
|
filter:drop-shadow(0 0 4em red5)
|
||
|
|
|
||
|
|
<a href="https://imba.io" target="_blank">
|
||
|
|
<img.wing src="https://raw.githubusercontent.com/imba/branding-imba/master/yellow-wing-logo/imba.svg">
|
||
|
|
<a href="https://vitejs.dev" target="_blank">
|
||
|
|
<img src="https://raw.githubusercontent.com/imba/branding-imba/master/misc/vite.svg">
|
||
|
|
css filter@hover:drop-shadow(0 0 4em white7)
|
||
|
|
<a href="https://imba.io" target="_blank">
|
||
|
|
<[d:inline-block transform:rotateY(180deg)]>
|
||
|
|
<img.wing src="https://raw.githubusercontent.com/imba/branding-imba/master/yellow-wing-logo/imba.svg">
|
||
|
|
|
||
|
|
<h1[c:yellow4 fs:3.2em lh:1.1]> "Imba + Vite"
|
||
|
|
|
||
|
|
<app-counter>
|
||
|
|
|
||
|
|
css p c:warm1 ws:pre
|
||
|
|
css a td:none
|
||
|
|
<p>
|
||
|
|
"Check out our documentation at "
|
||
|
|
<a href="https://imba.io" target="_blank"> "Imba.io"
|
||
|
|
"."
|
||
|
|
<p>
|
||
|
|
"Take the free Imba course on "
|
||
|
|
<a href="https://scrimba.com/learn/imba/intro-co3bc40f5b6a7b0cffda32113" target="_blank">
|
||
|
|
"Scrimba.com"
|
||
|
|
"."
|
||
|
|
|
||
|
|
imba.mount <app>
|