a Svelte layout (not flex)

from the Japanese Hell scroll

I am researching for a new layout:

.container { 

flex-flow: column wrap;

column|row        items stack across|down

wrap|nowrap        items dont|do squish into the first line

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;

this does for an item what you may also do to all items via .container { align-content: $those }

    so I guess you could make things cling to the ceiling, float in the middle, then sit on the floor...

I might have missed something there...

What I really want is a big left+right division,

and for the insides of those two panes to be bigger than the gap, in a gap-conscious way

it is easy to scroll a pane around I believe...

Putting things in panes (ie, the above flex scheme) is probably not A-conomical.

All the A.3 should be at the same level, be positioned absolutely.

I just want 2-pane layout... So I need a draggable handle...

Rearrangable list of things This is not quite it and doesn't show the source with the all the guts in.

Scalable-movable box Again doesn't show the source, seems to collapse into the top left corner.

abandoning the research

I opt for the classic absolute bicameral:

With a DJknob to adjust their sizes.

let sizer = 50

</script>

<div class="mi fathandle" style="left:0%;width:{sizer}%;">

<div>

<span on:click={() => more = !more}>{#if more}no {/if}more?</span>

{#if more}

<BigGroup>

<CompileLite />

<Diring t="Direr" />

<PlayDramatics />

</BigGroup>

{/if}

<button on:click={() => overdub()}> req! </button>

<button on:click={() => bang()}> ✴ </button>

<span>

<Savable C={save} t='Codestate' {resume}/>

</span>

</div>

<div>

<BigGroup>

<p>{b}</p>

<Codemirror {code} bind:this={cm} on:kommit={kommit} />

{#if look}<Coning t="Le-look" C={look} style=display:block />{/if}

</BigGroup>

</div>

<span style="position:fixed; top:1em; right: min(calc(100% - {sizer}%), calc(100% - 2rem)); z-index:500">

<Knob bind:value={sizer} min=0 max=100 step=2 size="2rem" />

</span>

</div>

<div class="mi" style="left:{sizer}%;width:{100-sizer}%;">

{#if graph}

<BigGroup>

<Graph {graph} />

</BigGroup>

{/if}

</div>

<style>

.mi {

position:absolute;

height:100%;

width:50%;

overflow:scroll;

}

div {

display:block;

}

span {

display:inline-block;

}

</style>

And elsewhere my usual copper-handling:

::-webkit-scrollbar {

width: 1.5em;

}

::-webkit-scrollbar-thumb {

border-radius: 1em;

background: url(copper_anodes.jpg);

//box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-track {

//box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 1em;

}

.fathandle::-webkit-scrollbar-thumb {

width: 3.14em;

border-radius: 0.8em;

overflow: scroll;

}

.fathandle::-webkit-scrollbar {

width: 3.14em;

height: 0.5em;

border-radius: 0.8em;

overflow: scroll;

}

biggroup {

border: 1em solid salmon;

border-radius: 5em;

display: block;

max-width: calc(100% - 2em);

border-left-width:0.2em;

border-right:none;

}

Your copper_anodes.jpg:

Note this:

   right: min(calc(100% - {sizer}%), calc(100% - 2rem));

The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.

Places the adjuster knob on the middle fathandle.

And here's the modernisation project itself!