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.
123 lines
2.9 KiB
123 lines
2.9 KiB
global css
|
|
html, body m:0 p:0
|
|
body ff:mono bgc:gray9 mt:80px mt@portrait: 0
|
|
a c:violet6 td:none td@hover:underline
|
|
.active filter:brightness(130%)
|
|
.activated bgc:violet3
|
|
.disabled, .disabled@hover filter:grayscale(100%)
|
|
.zoomed scale:1.05
|
|
.button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none cursor:pointer
|
|
.button@hover, .button.active bxs:md filter:hue-rotate(5deg) mb:0px pt:12px td:none
|
|
.button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block
|
|
.bordered p:2.5px bw:1.5px c:violet9
|
|
.night filter:invert(20%)
|
|
.gradient
|
|
bg:linear-gradient(to right,violet7,blue6,violet7)
|
|
fw:normal
|
|
-webkit-background-clip:text
|
|
-webkit-text-fill-color:transparent
|
|
|
|
tag App
|
|
css
|
|
d:vcc mx:auto my:50px bgc:white p:40px pb:60px rd:5px maw:1024px of:auto
|
|
@lt-xs m:0 px:0 rd:0
|
|
|
|
<self.night=R.param('night') .zoomed=R.param('zoomed')>
|
|
<param-preview>
|
|
<h2.gradient> "pro-router-imba2: Imba2 integration with pro-router"
|
|
<[d:flex flw:wrap w:100% jc:space-between]>
|
|
<app-menu>
|
|
<pro-router[mx:40px]>
|
|
###
|
|
<pro-ref view="b" params={ project: 2}> "b/project/2"
|
|
<pro-ref-f view="c" params={ book: 3}> "c/book/3"
|
|
|
|
<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)>
|
|
###
|
|
|
|
tag app-menu
|
|
<self[d:flex fld:row flw@lt-xs:wrap mx:auto mb: 50px jc:center]>
|
|
<pro-ref.button view=v> v.toUpperCase! for v in R.views
|
|
|
|
tag param-preview
|
|
<self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}"
|
|
|
|
tag imba-code < pre
|
|
prop file
|
|
prop url
|
|
css
|
|
&.no-code code.content p:0
|
|
code d:block bd:0 rd:0 bgc:gray8
|
|
&.file bgc:amber3
|
|
&.content c:gray3
|
|
&.url bgc:gray3
|
|
.url bgc:white c:gray7 rd:full p:4px
|
|
<self[bgc:gray1 bd:1.1px solid gray3 fs:larger bxs:md]>
|
|
<code.file> file if file
|
|
<code.url><.url> url if url
|
|
<slot name='live'>
|
|
<code.content><slot>
|
|
tag code-inline < imba-code
|
|
css
|
|
d:inline
|
|
code d:inline-block
|
|
|
|
tag c-el
|
|
css d:inline c:gray3
|
|
tag c-op < c-el
|
|
css c:white fw:bold
|
|
tag c-fl < c-el
|
|
css c:purple5
|
|
tag c-c < c-el
|
|
css c:blue3
|
|
tag c-com < c-el
|
|
css c:gray5
|
|
<self>
|
|
"# "
|
|
<slot>
|
|
tag c-str < c-el
|
|
<self> "'{<[c:amber6 d:inline]><slot>}'"
|
|
global css .c-br c:amber4 d:inline
|
|
|
|
tag c-tag < c-el
|
|
<self[c:white]>
|
|
"<"
|
|
<[c:blue4 d:inline]><slot>
|
|
">"
|
|
|
|
tag c-tag-def < c-el
|
|
<self[c:blue4]>
|
|
"tag "
|
|
<[c:green5 d:inline]><slot>
|
|
tag c-let < c-el
|
|
<self[c:blue4]>
|
|
"let "
|
|
<c-el><slot>
|
|
|
|
tag pro-tip
|
|
<self[bgc:gray0 p:15px]>
|
|
<[c:violet7 fw:bold txs:amber4 bdb:1.5px solid violet4]> "PRO TIP: "
|
|
<slot>
|
|
|
|
global def Goto(target)
|
|
R.go(location.href)
|
|
target.scrollIntoView!
|
|
|
|
global css
|
|
.c-list
|
|
bgc:yellow1 py:30px mb:60px w:fit-content
|
|
li pr: 35px
|
|
li@hover cursor:pointer
|
|
ul fw:bold
|
|
li li fw:normal c:blue6
|
|
li li@hover c:blue4
|
|
|
|
tag content-list < ul
|
|
<self.c-list><slot>
|
|
|
|
import './views/home.imba'
|
|
import './views/installation.imba'
|
|
import './views/usage.imba'
|
|
import './views/choosing-router-style.imba'
|
|
|
|
imba.mount <App>
|