mirror of
https://github.com/urbit/shrub.git
synced 2025-01-06 04:07:23 +03:00
update styling to the feather design system
This commit is contained in:
Will Hanlen
parent
b5ced63745
commit
7bd3f693bf
@ -15,7 +15,7 @@
|
||||
/* ha-wk %js /web/ha-wk/js
|
||||
/* s-k-y %js /web/s-k-y/js
|
||||
/* a-i-r %js /web/a-i-r/js
|
||||
/* style-css %css /web/style/css
|
||||
/* feather-css %css /web/feather/css
|
||||
|%
|
||||
++ pave pave:neo
|
||||
++ ford ford:neo
|
||||
@ -812,7 +812,7 @@
|
||||
"""
|
||||
width=device-width,
|
||||
initial-scale=1.0,
|
||||
maximum-scale=1.0"
|
||||
maximum-scale=1.0
|
||||
"""
|
||||
;
|
||||
==
|
||||
@ -842,7 +842,7 @@
|
||||
;+ ;/
|
||||
"""
|
||||
const sharedStyles = new CSSStyleSheet();
|
||||
sharedStyles.replaceSync(`{(trip style-css)}`);
|
||||
sharedStyles.replaceSync(`{(trip feather-css)}`);
|
||||
document.adoptedStyleSheets = [sharedStyles];
|
||||
window.log=function()\{if(this.console)\{console.log(Array.prototype.slice.call(arguments));}};
|
||||
jQuery.fn.log=function (msg)\{console.log(msg, this); return this;};
|
||||
|
||||
12
pkg/arvo/neo/src/std/con/node-sky-settings.hoon
Normal file
12
pkg/arvo/neo/src/std/con/node-sky-settings.hoon
Normal file
@ -0,0 +1,12 @@
|
||||
/@ sky-settings
|
||||
/@ node
|
||||
/- _/manx-utils
|
||||
:- [%node %sky-settings]
|
||||
|= nod=node
|
||||
^- sky-settings
|
||||
%- ~(pre-fold manx-utils nod)
|
||||
|= [=marx x=(map @t @t)]
|
||||
=/ var (~(get by (malt a.marx)) %var)
|
||||
?~ var x
|
||||
%+ ~(put by x) (crip u.var)
|
||||
(crip (~(got by (malt a.marx)) %value))
|
||||
@ -1,11 +1,12 @@
|
||||
/@ sky
|
||||
/@ node
|
||||
/- _/manx-utils
|
||||
:- [%node %sky]
|
||||
|= nod=node
|
||||
^- sky
|
||||
:+ %system
|
||||
%+ turn c.nod
|
||||
|= =manx
|
||||
%- pave:neo
|
||||
(stab (crip (~(gut by (malt a.g.manx)) %here "/home")))
|
||||
(fall (slaw %ud (crip (~(gut by (malt a.g.nod)) %slots "0"))) 0)
|
||||
:_ (slav %ud (~(got manx-utils nod) %slots))
|
||||
%+ murn c.nod
|
||||
|= =manx
|
||||
=/ here (rush (~(got manx-utils manx) %here) stap)
|
||||
?~ here ~
|
||||
`(pave:neo u.here)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
||||
/@ sky
|
||||
/@ sky-settings
|
||||
:- [%sky %htmx]
|
||||
|= =sky
|
||||
|= =bowl:neo
|
||||
@ -6,66 +7,23 @@
|
||||
|^
|
||||
shell
|
||||
::
|
||||
++ theme-dark
|
||||
::
|
||||
%- trip
|
||||
'''
|
||||
:root {
|
||||
--b0: #222;
|
||||
--b1: #333;
|
||||
--b2: #444;
|
||||
--b3: #555;
|
||||
--be: #752;
|
||||
--b-success: #351;
|
||||
--f1: #ccc;
|
||||
--f2: #999;
|
||||
--f3: #777;
|
||||
--f4: #555;
|
||||
--f-error: #531;
|
||||
--f-success: lightgreen;
|
||||
--link: lightblue;
|
||||
--hover: 115%;
|
||||
}
|
||||
'''
|
||||
::
|
||||
++ theme-light
|
||||
::
|
||||
%- trip
|
||||
'''
|
||||
:root {
|
||||
--f1: #333;
|
||||
--f2: #555;
|
||||
--f3: #777;
|
||||
--f4: #999;
|
||||
--f-error: #953;
|
||||
--f-success: #351;
|
||||
--b0: #eee;
|
||||
--b1: #ccc;
|
||||
--b2: #bbb;
|
||||
--b3: #888;
|
||||
--b-error: #ca8;
|
||||
--b-success: #8c8;
|
||||
--link: blue;
|
||||
--hover: 87%;
|
||||
}
|
||||
'''
|
||||
::
|
||||
++ theme-system
|
||||
::
|
||||
++ map-to-css-tape
|
||||
|= m=(map @t @t)
|
||||
^- tape
|
||||
%- zing
|
||||
%+ turn ~(tap by m)
|
||||
|= [key=@t val=@t]
|
||||
"""
|
||||
{theme-light}
|
||||
@media (prefers-color-scheme: dark) \{
|
||||
{theme-dark}
|
||||
}
|
||||
--{(trip key)}: {(trip val)};
|
||||
"""
|
||||
::
|
||||
++ shell
|
||||
=/ theme theme.sky
|
||||
=/ colors
|
||||
?: =(theme %light) theme-light
|
||||
?: =(theme %dark) theme-dark
|
||||
theme-system
|
||||
::
|
||||
=/ settings
|
||||
^- (unit sky-settings)
|
||||
=/ s (~(get by kids.bowl) /settings)
|
||||
?~ s ~
|
||||
:- ~
|
||||
!< sky-settings
|
||||
q.u.s
|
||||
;s-k-y.wf.hf(open "", hawks "{<slots.sky>}")
|
||||
;*
|
||||
=< p
|
||||
@ -86,6 +44,15 @@
|
||||
==
|
||||
==
|
||||
==
|
||||
;style: {colors}
|
||||
;style
|
||||
;+ ;/
|
||||
?~ settings
|
||||
""
|
||||
"""
|
||||
html \{
|
||||
{(map-to-css-tape u.settings)}
|
||||
}
|
||||
"""
|
||||
==
|
||||
==
|
||||
--
|
||||
|
||||
209
pkg/arvo/neo/src/std/con/sky-settings-htmx.hoon
Normal file
209
pkg/arvo/neo/src/std/con/sky-settings-htmx.hoon
Normal file
@ -0,0 +1,209 @@
|
||||
/@ sky-settings
|
||||
:- [%sky-settings %htmx]
|
||||
|= settings=sky-settings
|
||||
|= =bowl:neo
|
||||
^- manx
|
||||
|^
|
||||
;div.wf.p-page
|
||||
;form.fc.g5.mw-page.ma
|
||||
=label "Settings"
|
||||
=hx-post "/neo/hawk{(en-tape:pith:neo here.bowl)}?stud=sky-settings"
|
||||
=hx-swap "none"
|
||||
;+ script
|
||||
;+ typography
|
||||
;+ (colors "light")
|
||||
;+ (colors "dark")
|
||||
;+ style
|
||||
;div.frw.g2
|
||||
;button.p3.br1.b1.hover
|
||||
=onclick "document.body.removeAttribute('style')"
|
||||
=hx-get "/neo/hawk{(en-tape:pith:neo here.bowl)}"
|
||||
=hx-select "ha-wk"
|
||||
;span: Reset
|
||||
==
|
||||
;button.p3.br1.b1.hover.loader
|
||||
;span.loaded: Save
|
||||
;span.loading: ---
|
||||
==
|
||||
==
|
||||
==
|
||||
==
|
||||
++ typography
|
||||
;div.fc.js.g2.ja.p2
|
||||
;label.fc.g1.mt1
|
||||
;span.s-1: Main font
|
||||
;select.br1
|
||||
=oninput "setCss('font', this.value); $(this).attr('value', this.value);"
|
||||
=value (trip (~(gut by settings) 'font' ''))
|
||||
=var "font"
|
||||
;*
|
||||
%+ turn
|
||||
:~
|
||||
"Urbit Sans"
|
||||
"Montserrat"
|
||||
"Verdana"
|
||||
"Gill Sans"
|
||||
"Helvetica Neue"
|
||||
"Open Sans"
|
||||
"Roboto"
|
||||
"Arial"
|
||||
"Futura"
|
||||
"PT Sans"
|
||||
==
|
||||
|= =tape
|
||||
;option(value tape): {tape}
|
||||
==
|
||||
==
|
||||
;label.fc.g1
|
||||
;span.s-1: Base size
|
||||
;input.br1.border
|
||||
=oninput "setCss('1in', this.value+'px'); $(this).attr('value', this.value);"
|
||||
=value (snip (snip (trip (~(gut by settings) '1in' ''))))
|
||||
=var "1in"
|
||||
=type "range"
|
||||
=min "2"
|
||||
=max "10"
|
||||
=step "0.1"
|
||||
;
|
||||
==
|
||||
==
|
||||
;label.fc.g1
|
||||
;span.s-1: Monospace font
|
||||
;select.br1
|
||||
=oninput "setCss('font-mono', `'$\{this.value}'`); $(this).attr('value', this.value);"
|
||||
=value (trip (~(gut by settings) 'font-mono' ''))
|
||||
=var "font-mono"
|
||||
;*
|
||||
%+ turn
|
||||
:~
|
||||
"Andale Mono"
|
||||
"Urbit Mono"
|
||||
"Courier New"
|
||||
"Monaco"
|
||||
"Spot Mono"
|
||||
==
|
||||
|= =tape
|
||||
;option(value tape): {tape}
|
||||
==
|
||||
==
|
||||
;label.fc.g1
|
||||
;span.s-1: Mono scale
|
||||
;input.br1.border
|
||||
=oninput "setCss('mono-scale', this.value); $(this).attr('value', this.value);"
|
||||
=value (trip (~(gut by settings) 'mono-scale' ''))
|
||||
=var "mono-scale"
|
||||
=type "range"
|
||||
=min "0.5"
|
||||
=max "1.2"
|
||||
=step "0.05"
|
||||
;
|
||||
==
|
||||
==
|
||||
;label.fc.g1
|
||||
;span.s-1: Letter spacing
|
||||
;input.br1.border
|
||||
=oninput "setCss('letter-spacing', this.value+'px'); $(this).attr('value', this.value);"
|
||||
=value (snip (snip (trip (~(gut by settings) 'letter-spacing' ''))))
|
||||
=var "letter-spacing"
|
||||
=type "range"
|
||||
=min "-1"
|
||||
=max "3"
|
||||
=step "0.001"
|
||||
;
|
||||
==
|
||||
==
|
||||
;label.fc.g1
|
||||
;span.s-1: Line Height
|
||||
;input.br1.border
|
||||
=oninput "setCss('line-height', this.value); $(this).attr('value', this.value);"
|
||||
=value (trip (~(gut by settings) 'line-height' ''))
|
||||
=var "line-height"
|
||||
=type "range"
|
||||
=min "1"
|
||||
=max "2"
|
||||
=step "0.1"
|
||||
;
|
||||
==
|
||||
==
|
||||
==
|
||||
++ color
|
||||
|= [mode=tape var=tape]
|
||||
=/ val (~(gut by settings) (crip "{mode}-{var}") '')
|
||||
;label.fr.af.js.g1.mono
|
||||
;span.fr.ac.je(style "width:5ch;"): {var}
|
||||
;input.grow.fc.ac.jc
|
||||
=oninput "setCss('{mode}-{var}', this.value); $(this).attr('value', this.value);"
|
||||
=var "{mode}-{var}"
|
||||
=type "color"
|
||||
=value (trip val)
|
||||
;
|
||||
==
|
||||
==
|
||||
++ colors
|
||||
|= [mode=tape]
|
||||
;div
|
||||
=class "sky-settings-{mode} frw g2 js p2"
|
||||
;div.fc.g1.ac.jc
|
||||
;*
|
||||
%+ turn
|
||||
:~
|
||||
"f-3"
|
||||
"f-2"
|
||||
"f-1"
|
||||
"f0"
|
||||
"f1"
|
||||
"f2"
|
||||
"f3"
|
||||
"f4"
|
||||
==
|
||||
|= =tape
|
||||
(color mode tape)
|
||||
==
|
||||
;div.fc.g1.ac.jc
|
||||
;*
|
||||
%+ turn
|
||||
:~
|
||||
"b-3"
|
||||
"b-2"
|
||||
"b-1"
|
||||
"b0"
|
||||
"b1"
|
||||
"b2"
|
||||
"b3"
|
||||
"b4"
|
||||
==
|
||||
|= =tape
|
||||
(color mode tape)
|
||||
==
|
||||
==
|
||||
++ script
|
||||
;script
|
||||
;+ ;/ %- trip
|
||||
'''
|
||||
function setCss(name, val) {
|
||||
document.body.style
|
||||
.setProperty('--'+name, val, 'important');
|
||||
}
|
||||
'''
|
||||
==
|
||||
++ style
|
||||
;style
|
||||
;+ ;/ %- trip
|
||||
'''
|
||||
.sky-settings-dark {
|
||||
display: none !important;
|
||||
}
|
||||
.sky-settings-light {
|
||||
display: flex !important;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sky-settings-dark {
|
||||
display: flex !important;
|
||||
}
|
||||
.sky-settings-light {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
'''
|
||||
==
|
||||
--
|
||||
67
pkg/arvo/neo/src/std/imp/sky-settings.hoon
Normal file
67
pkg/arvo/neo/src/std/imp/sky-settings.hoon
Normal file
@ -0,0 +1,67 @@
|
||||
/@ sky-settings
|
||||
|%
|
||||
++ state %sky-settings
|
||||
++ poke (sy %sky-settings ~)
|
||||
++ kids *kids:neo
|
||||
++ deps *deps:neo
|
||||
++ form
|
||||
^- form:neo
|
||||
|_ [=bowl:neo =ever:neo state-vase=vase *]
|
||||
++ poke
|
||||
|= [=stud:neo vax=vase]
|
||||
^- (quip card:neo vase)
|
||||
:- ~
|
||||
vax
|
||||
++ init
|
||||
|= vas=(unit vase)
|
||||
^- (quip card:neo vase)
|
||||
:- ~
|
||||
!>
|
||||
:*
|
||||
%- malt
|
||||
^- (list [@t @t])
|
||||
:~
|
||||
:- 'font' 'Urbit Sans'
|
||||
:- 'font-mono' 'Monaco'
|
||||
:- 'mono-scale' '0.8'
|
||||
:- 'letter-spacing' '0.024em'
|
||||
:- 'line-height' '1.4'
|
||||
:- '1in' '4px'
|
||||
::
|
||||
:- 'light-b-3' '#dd5522'
|
||||
:- 'light-b-2' '#ddaa33'
|
||||
:- 'light-b-1' '#55dd33'
|
||||
:- 'light-b0' '#dddddd'
|
||||
:- 'light-b1' '#cccccc'
|
||||
:- 'light-b2' '#bbbbbb'
|
||||
:- 'light-b3' '#aaaaaa'
|
||||
:- 'light-b4' '#999999'
|
||||
:- 'light-f-3' '#993311'
|
||||
:- 'light-f-2' '#aaaa22'
|
||||
:- 'light-f-1' '#339911'
|
||||
:- 'light-f0' '#111111'
|
||||
:- 'light-f1' '#333333'
|
||||
:- 'light-f2' '#444444'
|
||||
:- 'light-f3' '#555555'
|
||||
:- 'light-f4' '#777777'
|
||||
::
|
||||
:- 'dark-b-3' '#551111'
|
||||
:- 'dark-b-2' '#555511'
|
||||
:- 'dark-b-1' '#225511'
|
||||
:- 'dark-b0' '#222222'
|
||||
:- 'dark-b1' '#333333'
|
||||
:- 'dark-b2' '#444444'
|
||||
:- 'dark-b3' '#555555'
|
||||
:- 'dark-b4' '#666666'
|
||||
:- 'dark-f-3' '#ee7755'
|
||||
:- 'dark-f-2' '#ccbb33'
|
||||
:- 'dark-f-1' '#55cc33'
|
||||
:- 'dark-f0' '#eeeeee'
|
||||
:- 'dark-f1' '#cccccc'
|
||||
:- 'dark-f2' '#bbbbbb'
|
||||
:- 'dark-f3' '#aaaaaa'
|
||||
:- 'dark-f4' '#888888'
|
||||
==
|
||||
==
|
||||
--
|
||||
--
|
||||
@ -2,7 +2,12 @@
|
||||
|%
|
||||
++ state %sky
|
||||
++ poke (sy %sky ~)
|
||||
++ kids *kids:neo
|
||||
++ kids
|
||||
%- ~(gas by *kids:neo)
|
||||
:~
|
||||
:- [&/%settings |]
|
||||
[%sky-settings %sky-settings]
|
||||
==
|
||||
++ deps *deps:neo
|
||||
++ form
|
||||
^- form:neo
|
||||
@ -12,9 +17,14 @@
|
||||
^- (quip card:neo vase)
|
||||
?> =(%sky stud)
|
||||
=/ new (sky !<(sky vax))
|
||||
`!>(new)
|
||||
[~ !>(new)]
|
||||
++ init
|
||||
|= vas=(unit vase)
|
||||
`(need vas)
|
||||
^- (quip card:neo vase)
|
||||
:-
|
||||
:~ [(welp here.bowl /settings) %make %sky-settings ~ ~]
|
||||
==
|
||||
!>
|
||||
[~[~[%home]] 1]
|
||||
--
|
||||
--
|
||||
|
||||
4
pkg/arvo/neo/src/std/pro/sky-diff.hoon
Normal file
4
pkg/arvo/neo/src/std/pro/sky-diff.hoon
Normal file
@ -0,0 +1,4 @@
|
||||
$%
|
||||
[%theme mode=?(%light %dark) palette=(map @t @t)]
|
||||
[%hawks hawks=(list pith) slots=@]
|
||||
==
|
||||
1
pkg/arvo/neo/src/std/pro/sky-settings.hoon
Normal file
1
pkg/arvo/neo/src/std/pro/sky-settings.hoon
Normal file
@ -0,0 +1 @@
|
||||
,(map @t @t)
|
||||
@ -1,5 +1,4 @@
|
||||
$:
|
||||
theme=?(%light %dark %system)
|
||||
hawks=(list pith)
|
||||
slots=@
|
||||
slots=@ud
|
||||
==
|
||||
|
||||
@ -8,6 +8,7 @@ class extends HTMLElement {
|
||||
//
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.adoptedStyleSheets = [sharedStyles];
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
* {
|
||||
@ -145,9 +146,6 @@ class extends HTMLElement {
|
||||
button {
|
||||
background-color: var(--b1);
|
||||
color: var(--f1);
|
||||
margin: 8px;
|
||||
border: 1px solid var(--f4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
:host {
|
||||
@ -196,6 +194,7 @@ class extends HTMLElement {
|
||||
</style>
|
||||
<slot name="button">
|
||||
<button
|
||||
class="hover b1 bold s2"
|
||||
onclick="this.getRootNode().host.dispatchEvent(new CustomEvent('sky-open', {bubbles:true, composed: true}))"
|
||||
>
|
||||
~
|
||||
|
||||
751
pkg/arvo/web/feather.css
Normal file
751
pkg/arvo/web/feather.css
Normal file
@ -0,0 +1,751 @@
|
||||
/** feather.css
|
||||
* ~2024.4.6
|
||||
*
|
||||
* styling resets
|
||||
* and
|
||||
* utility classes
|
||||
*
|
||||
**/
|
||||
|
||||
:root {
|
||||
|
||||
/* --font: 'Urbit Sans';
|
||||
--font-mono: 'Monaco';
|
||||
--mono-scale: 0.8;
|
||||
--letter-spacing: 0.024em;
|
||||
--line-height: 1.4;
|
||||
*/
|
||||
|
||||
--0in: calc(0 * var(--1in));
|
||||
--1in: 4px;
|
||||
--2in: calc(2 * var(--1in));
|
||||
--3in: calc(3 * var(--1in));
|
||||
--4in: calc(4 * var(--1in));
|
||||
--5in: calc(5 * var(--1in));
|
||||
--6in: calc(6 * var(--1in));
|
||||
--7in: calc(7 * var(--1in));
|
||||
--8in: calc(8 * var(--1in));
|
||||
--9in: calc(9 * var(--1in));
|
||||
|
||||
--10in: calc(10 * var(--1in));
|
||||
--11in: calc(11 * var(--1in));
|
||||
--12in: calc(12 * var(--1in));
|
||||
--13in: calc(13 * var(--1in));
|
||||
--14in: calc(14 * var(--1in));
|
||||
--15in: calc(15 * var(--1in));
|
||||
--16in: calc(16 * var(--1in));
|
||||
--17in: calc(17 * var(--1in));
|
||||
--18in: calc(18 * var(--1in));
|
||||
--19in: calc(19 * var(--1in));
|
||||
|
||||
--20in: calc(20 * var(--1in));
|
||||
--21in: calc(21 * var(--1in));
|
||||
--22in: calc(22 * var(--1in));
|
||||
--23in: calc(23 * var(--1in));
|
||||
--24in: calc(24 * var(--1in));
|
||||
--25in: calc(25 * var(--1in));
|
||||
--26in: calc(26 * var(--1in));
|
||||
--27in: calc(27 * var(--1in));
|
||||
--28in: calc(28 * var(--1in));
|
||||
--29in: calc(29 * var(--1in));
|
||||
|
||||
--30in: calc(30 * var(--1in));
|
||||
--31in: calc(31 * var(--1in));
|
||||
--32in: calc(32 * var(--1in));
|
||||
--33in: calc(33 * var(--1in));
|
||||
--34in: calc(34 * var(--1in));
|
||||
--35in: calc(35 * var(--1in));
|
||||
--36in: calc(36 * var(--1in));
|
||||
--37in: calc(37 * var(--1in));
|
||||
--38in: calc(38 * var(--1in));
|
||||
--39in: calc(39 * var(--1in));
|
||||
--40in: calc(40 * var(--1in));
|
||||
|
||||
|
||||
/* --light-b-3: #dd5522;
|
||||
--light-b-2: #ddaa33;
|
||||
--light-b-1: #55dd33;
|
||||
--light-b0: #dddddd;
|
||||
--light-b1: #cccccc;
|
||||
--light-b2: #bbbbbb;
|
||||
--light-b3: #aaaaaa;
|
||||
--light-b4: #999999;
|
||||
--light-f-3: #993311;
|
||||
--light-f-2: #aaaa22;
|
||||
--light-f-1: #339911;
|
||||
--light-f0: #111111;
|
||||
--light-f1: #333333;
|
||||
--light-f2: #444444;
|
||||
--light-f3: #555555;
|
||||
--light-f4: #777777;
|
||||
|
||||
--dark-b-3: #551111;
|
||||
--dark-b-2: #555511;
|
||||
--dark-b-1: #225511;
|
||||
--dark-b0: #222222;
|
||||
--dark-b1: #333333;
|
||||
--dark-b2: #444444;
|
||||
--dark-b3: #555555;
|
||||
--dark-b4: #666666;
|
||||
--dark-f-3: #ee7755;
|
||||
--dark-f-2: #ccbb33;
|
||||
--dark-f-1: #55cc33;
|
||||
--dark-f0: #eeeeee;
|
||||
--dark-f1: #cccccc;
|
||||
--dark-f2: #bbbbbb;
|
||||
--dark-f3: #aaaaaa;
|
||||
--dark-f4: #888888;
|
||||
*/
|
||||
--b-3: var(--light-b-3);
|
||||
--b-2: var(--light-b-2);
|
||||
--b-1: var(--light-b-1);
|
||||
--b0: var(--light-b0);
|
||||
--b1: var(--light-b1);
|
||||
--b2: var(--light-b2);
|
||||
--b3: var(--light-b3);
|
||||
--b4: var(--light-b4);
|
||||
--f-3: var(--light-f-3);
|
||||
--f-2: var(--light-f-2);
|
||||
--f-1: var(--light-f-1);
|
||||
--f0: var(--light-f0);
|
||||
--f1: var(--light-f1);
|
||||
--f2: var(--light-f2);
|
||||
--f3: var(--light-f3);
|
||||
--f4: var(--light-f4);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--b-3: var(--dark-b-3);
|
||||
--b-2: var(--dark-b-2);
|
||||
--b-1: var(--dark-b-1);
|
||||
--b0: var(--dark-b0);
|
||||
--b1: var(--dark-b1);
|
||||
--b2: var(--dark-b2);
|
||||
--b3: var(--dark-b3);
|
||||
--b4: var(--dark-b4);
|
||||
--f-3: var(--dark-f-3);
|
||||
--f-2: var(--dark-f-2);
|
||||
--f-1: var(--dark-f-1);
|
||||
--f0: var(--dark-f0);
|
||||
--f1: var(--dark-f1);
|
||||
--f2: var(--dark-f2);
|
||||
--f3: var(--dark-f3);
|
||||
--f4: var(--dark-f4);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
form, a, input, p, li, ul, ol, div, button, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font), sans-serif;
|
||||
font-feature-settings: normal;
|
||||
font-variation-settings: normal;
|
||||
letter-spacing: var(--letter-spacing);
|
||||
line-height: 1;
|
||||
background-color: var(--b0);
|
||||
color: var(--f1);
|
||||
min-height: 100%;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font: inherit;
|
||||
}
|
||||
button, input, textarea, iframe {
|
||||
border: unset;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.break {
|
||||
word-break: break-word;
|
||||
}
|
||||
.action {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.hidden,
|
||||
.folded {
|
||||
display: none !important;
|
||||
}
|
||||
.jc {
|
||||
justify-content: center;
|
||||
}
|
||||
.jb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ja {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.js {
|
||||
justify-content: start;
|
||||
}
|
||||
.je {
|
||||
justify-content: end;
|
||||
}
|
||||
.js {
|
||||
justify-content: start;
|
||||
}
|
||||
.as {
|
||||
align-items: start;
|
||||
}
|
||||
.af {
|
||||
align-items: stretch;
|
||||
}
|
||||
.ae {
|
||||
align-items: end;
|
||||
}
|
||||
.ac {
|
||||
align-items: center;
|
||||
}
|
||||
.wfc {
|
||||
width: fit-content;
|
||||
}
|
||||
.wf {
|
||||
width: 100%;
|
||||
}
|
||||
.mw-page {
|
||||
max-width: 650px;
|
||||
}
|
||||
.hf {
|
||||
height: 100%;
|
||||
}
|
||||
.hfc {
|
||||
height: fit-content;
|
||||
}
|
||||
.mono {
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: calc(1em * var(--mono-scale));
|
||||
}
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.strike {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.pre {
|
||||
white-space: pre;
|
||||
}
|
||||
.pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.tl {
|
||||
text-align: left;
|
||||
}
|
||||
.tc {
|
||||
text-align: center;
|
||||
}
|
||||
.tr {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fcr {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.fr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.frw {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.basis-full {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.basis-half {
|
||||
flex-basis: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.basis-none {
|
||||
flex-basis: 0%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.z-2 {
|
||||
z-index: -20;
|
||||
}
|
||||
.z-1 {
|
||||
z-index: -10;
|
||||
}
|
||||
.z0 {
|
||||
z-index: 0;
|
||||
}
|
||||
.z1 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z2 {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.g0 {
|
||||
gap: 0;
|
||||
}
|
||||
.g1 {
|
||||
gap: 4px;
|
||||
}
|
||||
.g2 {
|
||||
gap: 8px;
|
||||
}
|
||||
.g3 {
|
||||
gap: 12px;
|
||||
}
|
||||
.g4 {
|
||||
gap: 16px;
|
||||
}
|
||||
.g5 {
|
||||
gap: 20px;
|
||||
}
|
||||
.g6 {
|
||||
gap: 24px;
|
||||
}
|
||||
.g7 {
|
||||
gap: 32px;
|
||||
}
|
||||
.g8 {
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.p-8 {
|
||||
padding: 32px 64px;
|
||||
}
|
||||
.p-7 {
|
||||
padding: 28px 56px;
|
||||
}
|
||||
.p-6 {
|
||||
padding: 24px 48px;
|
||||
}
|
||||
.p-5 {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 16px 32px;
|
||||
}
|
||||
.p-3 {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
.p-2 {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.p-1 {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.p0 {
|
||||
padding: 0;
|
||||
}
|
||||
.p1 {
|
||||
padding: 4px;
|
||||
}
|
||||
.p2 {
|
||||
padding: 8px;
|
||||
}
|
||||
.p3 {
|
||||
padding: 12px;
|
||||
}
|
||||
.p4 {
|
||||
padding: 16px;
|
||||
}
|
||||
.p5 {
|
||||
padding: 24px;
|
||||
}
|
||||
.p6 {
|
||||
padding: 30px;
|
||||
}
|
||||
.p7 {
|
||||
padding: 34px;
|
||||
}
|
||||
.p8 {
|
||||
padding: 38px;
|
||||
}
|
||||
.p-page {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 200px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
.ma {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mt1 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mt2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.mt3 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.m0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.o0 {
|
||||
opacity: 0%;
|
||||
}
|
||||
.o1 {
|
||||
opacity: 10%;
|
||||
}
|
||||
.o2 {
|
||||
opacity: 20%;
|
||||
}
|
||||
.o3 {
|
||||
opacity: 30%;
|
||||
}
|
||||
.o4 {
|
||||
opacity: 40%;
|
||||
}
|
||||
.o5 {
|
||||
opacity: 50%;
|
||||
}
|
||||
.o6 {
|
||||
opacity: 60%;
|
||||
}
|
||||
.o7 {
|
||||
opacity: 70%;
|
||||
}
|
||||
.o8 {
|
||||
opacity: 80%;
|
||||
}
|
||||
.o9 {
|
||||
opacity: 90%;
|
||||
}
|
||||
.o10 {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.scroll-y {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.scroll-x {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.scroll-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.loader {
|
||||
position: relative;
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.loader .loading {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
.htmx-request .loader .loading,
|
||||
.loader.htmx-request .loading {
|
||||
opacity: 1;
|
||||
}
|
||||
.loader .loaded {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
.htmx-request .loader .loaded,
|
||||
.loader.htmx-request .loaded {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.f-3 {
|
||||
color: var(--f-3);
|
||||
}
|
||||
.f-2 {
|
||||
color: var(--f-2);
|
||||
}
|
||||
.f-1 {
|
||||
color: var(--f-1);
|
||||
}
|
||||
.f0 {
|
||||
color: var(--f0);
|
||||
}
|
||||
.f1 {
|
||||
color: var(--f1);
|
||||
}
|
||||
.f2 {
|
||||
color: var(--f2);
|
||||
}
|
||||
.f3 {
|
||||
color: var(--f3);
|
||||
}
|
||||
.f4 {
|
||||
color: var(--f4);
|
||||
}
|
||||
|
||||
.b-3 {
|
||||
background-color: var(--b-3);
|
||||
}
|
||||
.b-2 {
|
||||
background-color: var(--b-2);
|
||||
}
|
||||
.b-1 {
|
||||
background-color: var(--b-1);
|
||||
}
|
||||
.b0 {
|
||||
background-color: var(--b0);
|
||||
}
|
||||
.b1 {
|
||||
background-color: var(--b1);
|
||||
}
|
||||
.b2 {
|
||||
background-color: var(--b2);
|
||||
}
|
||||
.b3 {
|
||||
background-color: var(--b3);
|
||||
}
|
||||
.b4 {
|
||||
background-color: var(--b4);
|
||||
}
|
||||
|
||||
.s-2 {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.s-1 {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.s0 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.s1 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
.s2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.s3 {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
.s4 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.s5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.s6 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.bd1 {
|
||||
border: 0.8px solid var(--f3);
|
||||
}
|
||||
.bd2 {
|
||||
border: 1px solid var(--f2);
|
||||
}
|
||||
.bd3 {
|
||||
border: 2px solid var(--f1);
|
||||
}
|
||||
/* deprecated */
|
||||
.border {
|
||||
border: 0.8px solid var(--f3);
|
||||
}
|
||||
|
||||
.br1 {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.br2 {
|
||||
border-radius: 6px;
|
||||
}
|
||||
.br3 {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
|
||||
input,
|
||||
select {
|
||||
outline: none;
|
||||
border-radius: 0;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
textarea {
|
||||
display: block;
|
||||
outline: none;
|
||||
resize: none;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.hover:hover {
|
||||
filter: invert(20%);
|
||||
}
|
||||
.toggled {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.hover.toggled:hover {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.active,
|
||||
.selected {
|
||||
filter: invert(10%);
|
||||
}
|
||||
.hover.active:hover,
|
||||
.hover.selected:hover {
|
||||
filter: invert(25%);
|
||||
}
|
||||
.numbered > *:before {
|
||||
content: counter(line);
|
||||
display: inline-block;
|
||||
border-right: 1px solid var(--f3);
|
||||
padding: 0 .5em;
|
||||
margin-right: .5em;
|
||||
color: var(--f3);
|
||||
min-width: 34px;
|
||||
text-align: right;
|
||||
}
|
||||
.numbered > * {
|
||||
display: block;
|
||||
counter-increment: line;
|
||||
}
|
||||
.prose {
|
||||
max-width: 650px;
|
||||
margin: auto;
|
||||
}
|
||||
.prose h1 {
|
||||
font-size: 1.45rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: 1.3rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.prose h3 {
|
||||
font-size: 1.15rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.prose h1, .prose h2, .prose h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
.prose p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
max-height: 350px;
|
||||
}
|
||||
.prose details {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.prose a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.prose blockquote {
|
||||
margin-left: 10px;
|
||||
border-left: 2px solid var(--b3);
|
||||
padding: 4px;
|
||||
padding-left: 12px;
|
||||
color: var(--f2);
|
||||
}
|
||||
.prose pre {
|
||||
font-family: var(--font-mono);
|
||||
font-size: calc(1em * var(--mono-scale));
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
.prose code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: calc(1em * var(--mono-scale));
|
||||
color: var(--f2);
|
||||
}
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
padding-left: 29px;
|
||||
line-height: calc(calc(1 + var(--line-height)) / 2);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.prose ul p,
|
||||
.prose ol p {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
.prose ul ul,
|
||||
.prose ol ul,
|
||||
.prose ul ol,
|
||||
.prose ol ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
summary {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -16,6 +16,8 @@ class extends HTMLElement {
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
font-size: 1rem !important;
|
||||
background-color: var(--b0);
|
||||
}
|
||||
section {
|
||||
position: sticky;
|
||||
@ -41,7 +43,7 @@ class extends HTMLElement {
|
||||
</style>
|
||||
<template id="button-template">
|
||||
<button
|
||||
class="b2 hover p1 br1 mono"
|
||||
class="b2 hover p1 br1"
|
||||
hx-target="closest ha-wk"
|
||||
hx-swap="innerHTML"
|
||||
slot="crumbs"
|
||||
@ -49,28 +51,28 @@ class extends HTMLElement {
|
||||
</button>
|
||||
</template>
|
||||
<section id="section" class="fc g2">
|
||||
<nav class="fr g1">
|
||||
<nav class="frw g1 ac">
|
||||
<button
|
||||
id="tree-btn"
|
||||
class="b2 hover p1 br1 mono f2"
|
||||
onclick="this.getRootNode().host.toggleAttribute('tree-open')"
|
||||
slot="crumbs"
|
||||
>
|
||||
z
|
||||
${this.iconFiles()}
|
||||
</button>
|
||||
<button
|
||||
class="b2 hover p1 br1 mono f2"
|
||||
onclick="this.getRootNode().host.toggleMore(event)"
|
||||
slot="crumbs"
|
||||
>
|
||||
#
|
||||
${this.iconMore()}
|
||||
</button>
|
||||
<div id="breadcrumbs">
|
||||
<slot id="btns" name="crumbs"></slot>
|
||||
</div>
|
||||
<div id="actions" class="f2">
|
||||
<button
|
||||
class="b2 hover p1 br1 mono"
|
||||
class="b2 hover p1 br1 mono hidden"
|
||||
onclick="this.getRootNode().host.clone(event)"
|
||||
slot="crumbs"
|
||||
>
|
||||
@ -81,24 +83,24 @@ class extends HTMLElement {
|
||||
onclick="this.getRootNode().host.raise(event)"
|
||||
slot="crumbs"
|
||||
>
|
||||
<
|
||||
${this.chevronLeft()}
|
||||
</button>
|
||||
<button
|
||||
class="b2 hover p1 br1 mono"
|
||||
onclick="this.getRootNode().host.drop(event)"
|
||||
slot="crumbs"
|
||||
>
|
||||
>
|
||||
${this.chevronRight()}
|
||||
</button>
|
||||
<button
|
||||
class="b2 hover p1 br1 mono"
|
||||
onclick="this.getRootNode().host.burry(event)"
|
||||
slot="crumbs"
|
||||
>
|
||||
_
|
||||
${this.iconClose()}
|
||||
</button>
|
||||
<button
|
||||
class="b2 hover p1 br1 mono"
|
||||
class="b2 hover p1 br1 mono hidden"
|
||||
onclick="this.getRootNode().host.suicide()"
|
||||
slot="crumbs"
|
||||
>
|
||||
@ -288,4 +290,55 @@ class extends HTMLElement {
|
||||
});
|
||||
par.dispatchEvent(event);
|
||||
}
|
||||
chevronLeft() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1rem"
|
||||
fill="currentColor"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>
|
||||
`
|
||||
}
|
||||
chevronRight() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1rem"
|
||||
fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>
|
||||
`
|
||||
}
|
||||
iconClose() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1rem"
|
||||
fill="currentColor">
|
||||
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
|
||||
`
|
||||
}
|
||||
iconMore() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1rem"
|
||||
fill="currentColor">
|
||||
<path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5
|
||||
23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33
|
||||
0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33
|
||||
0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>
|
||||
`
|
||||
}
|
||||
iconFiles() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1rem"
|
||||
fill="currentColor">
|
||||
<path d="M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z"/></svg>
|
||||
`
|
||||
}
|
||||
})
|
||||
|
||||
@ -16,15 +16,15 @@ class extends HTMLElement {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<a-i-r class="wf hf">
|
||||
<a-i-r class="wf hf b1">
|
||||
<nav slot="nav" class="wf hf scroll-y fc g2 p2">
|
||||
<button
|
||||
class="p2 tc hover br1 b1"
|
||||
onclick="this.getRootNode().host.newTab()"
|
||||
>
|
||||
+
|
||||
${this.iconAdd()}
|
||||
</button>
|
||||
<div class="fr g2">
|
||||
<div class="fr g2 hidden">
|
||||
<button
|
||||
class="p1 br1 b1 grow hover"
|
||||
onclick="this.getRootNode().host.cull()"
|
||||
@ -40,16 +40,16 @@ class extends HTMLElement {
|
||||
</div>
|
||||
<div id="tabs" class="fc g1 wf">
|
||||
<template id="tab-template">
|
||||
<div class="mono fr b1 br1" style="cursor: pointer;">
|
||||
<div class="frw b1 br1" style="cursor: pointer;">
|
||||
<button
|
||||
class="action p2 b1 hover br1 hidden"
|
||||
>+</button>
|
||||
<button
|
||||
class="action p2 b1 hover grow tl br1"
|
||||
class="action p2 b1 hover grow tl br1 break"
|
||||
></button>
|
||||
<button
|
||||
class="action p2 hover br1"
|
||||
>x</button>
|
||||
>${this.iconClose()}</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -221,11 +221,21 @@ class extends HTMLElement {
|
||||
sel.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.insertAdjacentElement("afterbegin", f);
|
||||
this.trueSlots();
|
||||
if (f.hasAttribute("slot")) {
|
||||
this.trueSlots();
|
||||
} else {
|
||||
this.grow();
|
||||
}
|
||||
})
|
||||
del.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
let cullp = f.hasAttribute("slot");
|
||||
f.suicide();
|
||||
if (cullp) {
|
||||
this.cull();
|
||||
} else {
|
||||
this.trueSlots();
|
||||
}
|
||||
})
|
||||
tabs.appendChild(tab);
|
||||
})
|
||||
@ -266,14 +276,32 @@ class extends HTMLElement {
|
||||
async syncTabs() {
|
||||
let frames = [...this.childNodes].filter(c => c.nodeName === 'HA-WK');
|
||||
let forms = frames.map(f => {
|
||||
return `
|
||||
<p here="${f.getAttribute('here')}"></p>
|
||||
`
|
||||
return `<p here="${f.getAttribute('here')}"></p>`
|
||||
})
|
||||
await fetch(`/neo/hawk/sky?stud=sky`, {
|
||||
method: 'POST',
|
||||
headers: {'content-type': 'text/html'},
|
||||
body: `<div slots="${this.hawks}">${forms.join("")}</div>`
|
||||
body: `<div slots="${this.hawks}">${forms.join("").trim()}</div>`
|
||||
})
|
||||
}
|
||||
iconClose() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1rem"
|
||||
fill="currentColor">
|
||||
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
|
||||
`
|
||||
}
|
||||
iconAdd() {
|
||||
return `
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
width="1.2rem"
|
||||
fill="currentColor">
|
||||
<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>
|
||||
`
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,463 +0,0 @@
|
||||
/** style.css
|
||||
* ~2024.4.6
|
||||
*
|
||||
* styling resets
|
||||
* and
|
||||
* utility classes
|
||||
*
|
||||
**/
|
||||
|
||||
:root {
|
||||
--x: 4px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
form, a, input, p, li, ul, ol, div, button, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 21px;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Urbit Sans';
|
||||
font-feature-settings: normal;
|
||||
font-variation-settings: normal;
|
||||
letter-spacing: 0.024em;
|
||||
line-height: 1;
|
||||
background-color: var(--b0);
|
||||
color: var(--f1);
|
||||
min-height: 100%;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font: inherit;
|
||||
}
|
||||
button, input, textarea, iframe {
|
||||
border: unset;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.break {
|
||||
word-break: break-word;
|
||||
}
|
||||
.action {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.hidden,
|
||||
.folded {
|
||||
display: none !important;
|
||||
}
|
||||
.jc {
|
||||
justify-content: center;
|
||||
}
|
||||
.jb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ja {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.js {
|
||||
justify-content: start;
|
||||
}
|
||||
.je {
|
||||
justify-content: end;
|
||||
}
|
||||
.js {
|
||||
justify-content: start;
|
||||
}
|
||||
.as {
|
||||
align-items: start;
|
||||
}
|
||||
.af {
|
||||
align-items: stretch;
|
||||
}
|
||||
.ae {
|
||||
align-items: end;
|
||||
}
|
||||
.ac {
|
||||
align-items: center;
|
||||
}
|
||||
.wfc {
|
||||
width: fit-content;
|
||||
}
|
||||
.wf {
|
||||
width: 100%;
|
||||
}
|
||||
.mw-page {
|
||||
max-width: 650px;
|
||||
}
|
||||
.hf {
|
||||
height: 100%;
|
||||
}
|
||||
.hfc {
|
||||
height: fit-content;
|
||||
}
|
||||
.mono {
|
||||
font-variation-settings: "xtab" 500;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.strike {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.pre {
|
||||
white-space: pre;
|
||||
}
|
||||
.pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
.tl {
|
||||
text-align: left;
|
||||
}
|
||||
.tc {
|
||||
text-align: center;
|
||||
}
|
||||
.tr {
|
||||
text-align: right;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.fc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.fcr {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.fr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.frw {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.basis-full {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.basis-half {
|
||||
flex-basis: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.basis-none {
|
||||
flex-basis: 0%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
.z-2 {
|
||||
z-index: -20;
|
||||
}
|
||||
.z-1 {
|
||||
z-index: -10;
|
||||
}
|
||||
.z0 {
|
||||
z-index: 0;
|
||||
}
|
||||
.z1 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z2 {
|
||||
z-index: 20;
|
||||
}
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.g1 {
|
||||
gap: 4px;
|
||||
}
|
||||
.g2 {
|
||||
gap: 8px;
|
||||
}
|
||||
.g3 {
|
||||
gap: 12px;
|
||||
}
|
||||
.g4 {
|
||||
gap: 16px;
|
||||
}
|
||||
.g5 {
|
||||
gap: 20px;
|
||||
}
|
||||
.g6 {
|
||||
gap: 24px;
|
||||
}
|
||||
.g7 {
|
||||
gap: 28px;
|
||||
}
|
||||
.p-1 {
|
||||
padding: 0px 4px;
|
||||
}
|
||||
.p0 {
|
||||
padding: 0;
|
||||
}
|
||||
.p1 {
|
||||
padding: 4px;
|
||||
}
|
||||
.p2 {
|
||||
padding: 8px;
|
||||
}
|
||||
.p3 {
|
||||
padding: 12px;
|
||||
}
|
||||
.p4 {
|
||||
padding: 16px;
|
||||
}
|
||||
.p-page {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 200px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.ma {
|
||||
margin: auto;
|
||||
}
|
||||
.scroll-y {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.scroll-x {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.scroll-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.loader {
|
||||
position: relative;
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.loader .loading {
|
||||
opacity: 0;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
.htmx-request .loader .loading,
|
||||
.loader.htmx-request .loading {
|
||||
opacity: 1;
|
||||
}
|
||||
.loader .loaded {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms;
|
||||
}
|
||||
.htmx-request .loader .loaded,
|
||||
.loader.htmx-request .loaded {
|
||||
opacity: 0;
|
||||
}
|
||||
.f1 {
|
||||
color: var(--f1);
|
||||
}
|
||||
.f2 {
|
||||
color: var(--f2);
|
||||
}
|
||||
.f3 {
|
||||
color: var(--f3);
|
||||
}
|
||||
.f-success {
|
||||
color: var(--f-success);
|
||||
}
|
||||
.f-error {
|
||||
color: var(--f-error);
|
||||
}
|
||||
.b0 {
|
||||
background-color: var(--b0);
|
||||
}
|
||||
.b1 {
|
||||
background-color: var(--b1);
|
||||
}
|
||||
.b2 {
|
||||
background-color: var(--b2);
|
||||
}
|
||||
.b3 {
|
||||
background-color: var(--b3);
|
||||
}
|
||||
.b-success {
|
||||
background-color: var(--b-success);
|
||||
}
|
||||
.b-error {
|
||||
background-color: var(--b-error);
|
||||
}
|
||||
.s-2 {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.s-1 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.s0 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.s1 {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
.s2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.s3 {
|
||||
font-size: 1.45em;
|
||||
}
|
||||
.s4 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.border {
|
||||
border: 1.2px solid var(--f3);
|
||||
}
|
||||
.border-2 {
|
||||
border: 1px solid var(--f4);
|
||||
}
|
||||
.br1 {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.br2 {
|
||||
border-radius: 6px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
outline: none;
|
||||
border-radius: 0;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
textarea {
|
||||
display: block;
|
||||
outline: none;
|
||||
resize: none;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.hover:hover {
|
||||
filter: invert(20%);
|
||||
}
|
||||
.toggled {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.hover.toggled:hover {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.active,
|
||||
.selected {
|
||||
filter: invert(10%);
|
||||
}
|
||||
.hover.active:hover,
|
||||
.hover.selected:hover {
|
||||
filter: invert(25%);
|
||||
}
|
||||
.numbered > *:before {
|
||||
content: counter(line);
|
||||
display: inline-block;
|
||||
border-right: 1px solid var(--f3);
|
||||
padding: 0 .5em;
|
||||
margin-right: .5em;
|
||||
color: var(--f3);
|
||||
min-width: 34px;
|
||||
text-align: right;
|
||||
}
|
||||
.numbered > * {
|
||||
display: block;
|
||||
counter-increment: line;
|
||||
}
|
||||
.prose h1 {
|
||||
font-size: 1.45rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.prose h2 {
|
||||
font-size: 1.3rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.prose h3 {
|
||||
font-size: 1.15rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.prose h1, .prose h2, .prose h3 {
|
||||
font-weight: bold;
|
||||
}
|
||||
.prose p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.prose img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
max-height: 350px;
|
||||
}
|
||||
.prose details {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.prose a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.prose mono {
|
||||
font-size: 1em;
|
||||
}
|
||||
.prose pre {
|
||||
font-variation-settings: "xtab" 500;
|
||||
font-size: 0.8em;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
.prose code {
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
padding-left: 19px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.prose ul p,
|
||||
.prose ol p {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.prose ul ul,
|
||||
.prose ol ul,
|
||||
.prose ul ol,
|
||||
.prose ol ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
summary {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user