mirror of
https://github.com/urbit/shrub.git
synced 2024-11-24 04:58:08 +03:00
remove old /web directory
This commit is contained in:
Will Hanlen
parent
5c458203e1
commit
ef3ba0b5a2
@ -1,276 +0,0 @@
|
||||
customElements.define('a-i-r',
|
||||
class extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
//
|
||||
return ["closed", "hawks"];
|
||||
}
|
||||
constructor() {
|
||||
//
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::slotted(*) {
|
||||
overflow: auto;
|
||||
}
|
||||
:host {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
grid-template-columns: 230px auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"btn main"
|
||||
"nav main";
|
||||
}
|
||||
:host(.closed) {
|
||||
grid-template-columns: 50px auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"btn main"
|
||||
". main";
|
||||
}
|
||||
:host(.closed) #nav {
|
||||
display: none;
|
||||
}
|
||||
#nav {
|
||||
grid-area: nav;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
/*
|
||||
* grid display
|
||||
*
|
||||
*/
|
||||
main {
|
||||
display: grid;
|
||||
grid-area: main;
|
||||
overflow: hidden;
|
||||
padding-left: var(--sky-inner-gap);
|
||||
}
|
||||
#s0, #s1, #s2, #s3 {
|
||||
overflow: auto;
|
||||
}
|
||||
#button {
|
||||
grid-area: btn;
|
||||
height: fit-content;
|
||||
}
|
||||
#s0 {
|
||||
grid-area: s0;
|
||||
}
|
||||
#s1 {
|
||||
grid-area: s1;
|
||||
}
|
||||
#s2 {
|
||||
grid-area: s2;
|
||||
}
|
||||
#s3 {
|
||||
grid-area: s3;
|
||||
}
|
||||
main.open-0 {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas:
|
||||
".";
|
||||
}
|
||||
main.open-0 #s0,
|
||||
main.open-0 #s1,
|
||||
main.open-0 #s2,
|
||||
main.open-0 #s3 {
|
||||
display: none;
|
||||
}
|
||||
main.open-1 {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas:
|
||||
"s0";
|
||||
}
|
||||
main.open-1 #s0 {
|
||||
display: block;
|
||||
}
|
||||
main.open-1 #s1,
|
||||
main.open-1 #s2,
|
||||
main.open-1 #s3 {
|
||||
display: none;
|
||||
}
|
||||
main.open-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas:
|
||||
"s0 s1";
|
||||
}
|
||||
main.open-2 #s0,
|
||||
main.open-2 #s1 {
|
||||
display: block;
|
||||
}
|
||||
main.open-2 #s2,
|
||||
main.open-2 #s3 {
|
||||
display: none;
|
||||
}
|
||||
main.open-3 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"s0 s1"
|
||||
"s0 s2";
|
||||
}
|
||||
main.open-3 #s0,
|
||||
main.open-3 #s1,
|
||||
main.open-3 #s2 {
|
||||
display: block;
|
||||
}
|
||||
main.open-3 #s3 {
|
||||
display: none;
|
||||
}
|
||||
main.open-4 {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"s0 s1 s1"
|
||||
"s0 s2 s3";
|
||||
}
|
||||
main.open-4 #s0,
|
||||
main.open-4 #s1,
|
||||
main.open-4 #s2,
|
||||
main.open-4 #s3 {
|
||||
display: block;
|
||||
}
|
||||
/*
|
||||
* gaps
|
||||
*
|
||||
*/
|
||||
main.open-1 #s0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
main.open-2 #s0,
|
||||
main.open-3 #s0,
|
||||
main.open-4 #s0 {
|
||||
padding-right: var(--sky-inner-gap);
|
||||
}
|
||||
main.open-1 #s1,
|
||||
main.open-2 #s1 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
main.open-3 #s1,
|
||||
main.open-4 #s1 {
|
||||
padding-bottom: var(--sky-inner-gap);
|
||||
}
|
||||
main.open-1 #s2,
|
||||
main.open-2 #s2,
|
||||
main.open-3 #s2 {
|
||||
padding-right: 0;
|
||||
}
|
||||
main.open-4 #s2 {
|
||||
padding-right: var(--sky-inner-gap);
|
||||
}
|
||||
/*
|
||||
* mobile
|
||||
*
|
||||
*/
|
||||
@media (max-width: 900px) {
|
||||
:host {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"btn";
|
||||
}
|
||||
:host(.closed) {
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"btn";
|
||||
}
|
||||
button {
|
||||
height: min-content;
|
||||
}
|
||||
:host(.closed) main {
|
||||
display: none;
|
||||
}
|
||||
:host(:not(.closed)) main {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"s0";
|
||||
}
|
||||
#nav {
|
||||
--rem: 24px;
|
||||
}
|
||||
main {
|
||||
padding: 0;
|
||||
}
|
||||
main #s0 {
|
||||
display: block;
|
||||
padding: 0;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
main #s1 {
|
||||
display: none !important;
|
||||
}
|
||||
main #s2 {
|
||||
display: none !important;
|
||||
}
|
||||
main #s3 {
|
||||
display: none !important;
|
||||
}
|
||||
:host(.closed) #nav {
|
||||
display: flex;
|
||||
}
|
||||
:host(:not(.closed)) #nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<slot name="button" id="button">
|
||||
<button
|
||||
style="border: 2px solid var(--b3);"
|
||||
onclick="this.getRootNode().host.dispatchEvent(new CustomEvent('sky-open', {bubbles:true, composed: true}))"
|
||||
>
|
||||
~
|
||||
</button>
|
||||
</slot>
|
||||
<slot id="nav" name="nav"></slot>
|
||||
<main>
|
||||
<slot name="s0" id="s0"></slot>
|
||||
<slot name="s1" id="s1"></slot>
|
||||
<slot name="s2" id="s2"></slot>
|
||||
<slot name="s3" id="s3"></slot>
|
||||
</main>
|
||||
<slot id="default" style="display: none;"></slot>
|
||||
`
|
||||
}
|
||||
get hawks() {
|
||||
return parseInt(this.getAttribute("hawks") || "0");
|
||||
}
|
||||
qs(sel) {
|
||||
return this.shadowRoot.querySelector(sel);
|
||||
}
|
||||
gid(id) {
|
||||
return this.shadowRoot.getElementById(id);
|
||||
}
|
||||
connectedCallback() {
|
||||
this.addEventListener("sky-open", (e) => {
|
||||
this.toggleAttribute("closed");
|
||||
})
|
||||
}
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
//
|
||||
if (name === "closed") {
|
||||
this.classList.toggle("closed");
|
||||
} else if (name === "hawks") {
|
||||
this.qs("main").className = `open-${this.hawks}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,26 +0,0 @@
|
||||
customElements.define('atom-input',
|
||||
class extends HTMLInputElement {
|
||||
static get observedAttributes() {
|
||||
return ['value'];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
connectedCallback() {
|
||||
this.addEventListener("input", (e) => {
|
||||
this.mirrorValue();
|
||||
});
|
||||
this.mirrorValue();
|
||||
}
|
||||
mirrorValue() {
|
||||
if (this.type === 'date') {
|
||||
let d = this.value || "2000-01-01";
|
||||
let year = d.slice(0,4);
|
||||
let month = parseInt(d.slice(5,7));
|
||||
let date = parseInt(d.slice(8,10));
|
||||
this.setAttribute("value", `~${year}.${month}.${date}`);
|
||||
} else {
|
||||
this.setAttribute("value", this.value.trim());
|
||||
}
|
||||
}
|
||||
}, { extends: "input" })
|
||||
@ -1,24 +0,0 @@
|
||||
customElements.define('date-now',
|
||||
class extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['value'];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
connectedCallback() {
|
||||
setInterval(() => {
|
||||
let now = new Date();
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
let date = now.getDate();
|
||||
let hour = String(now.getHours()).padStart(2, '0');
|
||||
let min = String(now.getMinutes()).padStart(2, '0');
|
||||
let sec = String(now.getSeconds()).padStart(2, '0');
|
||||
this.setAttribute(
|
||||
"value",
|
||||
`~${year}.${month}.${date}..${hour}.${min}.${sec}`
|
||||
)
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
@ -1,707 +0,0 @@
|
||||
/** 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;
|
||||
--font-size: calc(4 * var(--1in));
|
||||
--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);
|
||||
}
|
||||
}
|
||||
* {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
/*
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--font-size: calc(1.3 * var(--font-size));
|
||||
}
|
||||
}
|
||||
*/
|
||||
body {
|
||||
font-family: var(--font);
|
||||
letter-spacing: var(--letter-spacing);
|
||||
line-height: 1;
|
||||
background-color: var(--b0);
|
||||
color: var(--f1);
|
||||
}
|
||||
button {
|
||||
border: inherit;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.bd0 {
|
||||
border: none;
|
||||
}
|
||||
.bd1 {
|
||||
border: 0.8px solid var(--b3);
|
||||
}
|
||||
.bd2 {
|
||||
border: 0.8px solid var(--f3);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: 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;
|
||||
}
|
||||
.prose summary {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
customElements.define('multiline-input',
|
||||
class extends HTMLTextAreaElement {
|
||||
static get observedAttributes() {
|
||||
return ['value'];
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
connectedCallback() {
|
||||
this.autocomplete = "off";
|
||||
this.style.resize = 'none';
|
||||
this.style.display = 'flex';
|
||||
|
||||
this.mirrorValue();
|
||||
this.adjustSize();
|
||||
this.addEventListener("input", (e) => {
|
||||
this.mirrorValue();
|
||||
this.adjustSize();
|
||||
});
|
||||
setTimeout(() => {this.adjustSize()}, 100);
|
||||
}
|
||||
mirrorValue() {
|
||||
let v = this.value.trimEnd();
|
||||
this.setAttribute("value", v);
|
||||
}
|
||||
adjustSize() {
|
||||
this.style.height = 'min-content';
|
||||
this.style.height = (this.scrollHeight+3)+'px';
|
||||
}
|
||||
}, { extends: "textarea" })
|
||||
@ -1,99 +0,0 @@
|
||||
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button, summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: inherit;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--f0);
|
||||
line-height: 1.1;
|
||||
font-feature-settings: normal;
|
||||
font-variation-settings: normal;
|
||||
min-height: 100%;
|
||||
}
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user