bundler: init working version

This commit is contained in:
nym21
2025-06-14 20:17:49 +02:00
parent 65685c23e1
commit e9f362cc87
58 changed files with 5049 additions and 2239 deletions

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -12,7 +12,7 @@
/>
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="mobile-web-app-capable" content="yes" />
<script type="module" crossorigin src="/scripts/main.js"></script>
<script type="module" src="/scripts/main.js"></script>
<!-- ------ -->
<!-- Styles -->
@@ -281,7 +281,7 @@
@font-face {
font-family: "Geist mono";
src: url("./assets/fonts/geist_mono_var_1_4_01.woff2") format("woff2");
src: url("./assets/fonts/geist_mono_var_v1_5_0.woff2") format("woff2");
font-weight: 100 900;
font-display: block;
font-style: normal;
@@ -1103,6 +1103,268 @@
}
}
}
#charts {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
min-height: 0;
padding: var(--main-padding);
header {
flex-shrink: 0;
display: flex;
white-space: nowrap;
overflow-x: auto;
padding-bottom: 1rem;
margin-bottom: -2rem;
padding-left: var(--main-padding);
margin-left: var(--negative-main-padding);
padding-right: var(--main-padding);
margin-right: var(--negative-main-padding);
& > * {
flex: 1;
}
}
.chart {
flex: 1;
}
> .chart > legend,
> fieldset {
z-index: 20;
}
.lightweight-chart {
z-index: 40;
}
}
#table {
width: 100%;
display: flex;
flex-direction: column;
gap: 2rem;
padding: var(--main-padding);
> div {
display: flex;
font-size: var(--font-size-xs);
line--line-height: var(--line-height-xs);
font-weight: 450;
margin-left: var(--negative-main-padding);
margin-right: var(--negative-main-padding);
table {
z-index: 10;
border-top-width: 1px;
border-style: dashed !important;
/* width: 100%; */
line-height: var(--line-height-sm);
text-transform: uppercase;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
/* border: 3px solid purple; */
/* min-height: 100%; */
}
th {
font-weight: 600;
}
th,
td {
/* border-top: 1px; */
border-right: 1px;
border-bottom: 1px;
border-color: var(--off-color);
border-style: dashed !important;
padding: 0.25rem 0.75rem;
}
td {
text-transform: lowercase;
}
a {
margin: -0.2rem 0;
font-size: 1.2rem;
}
th:first-child {
padding-left: var(--main-padding);
}
th[scope="col"] {
position: sticky;
top: 0;
background-color: var(--background-color);
> div {
display: flex;
flex-direction: column;
padding-top: 0.275rem;
> div {
display: flex;
gap: 0.25rem;
text-transform: lowercase;
color: var(--off-color);
text-align: left;
&:first-child {
gap: 0.5rem;
}
&:last-child {
gap: 1rem;
}
> span {
width: 100%;
}
> button {
padding: 0 0.25rem;
margin: 0 -0.25rem;
font-size: 0.75rem;
line-height: 0;
}
}
}
&:first-child {
button {
display: none;
}
}
&:nth-child(2) {
button:nth-of-type(1) {
display: none;
}
}
&:last-child {
button:nth-of-type(2) {
display: none;
}
}
}
select {
margin-right: -4px;
/* width: 100%; */
}
tbody {
text-align: right;
}
> button {
padding: 1rem;
min-width: 10rem;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
border-top-width: 1px;
width: 100%;
border-bottom-width: 1px;
border-style: dashed !important;
> span {
text-align: left;
position: sticky;
top: 2rem;
left: 0;
right: 0;
}
}
}
}
#simulation {
min-height: 0;
width: 100%;
> div {
display: flex;
flex-direction: column;
gap: 2rem;
padding: var(--main-padding);
}
@media (max-width: 767px) {
overflow-y: auto;
> div:first-child {
border-bottom: 1px;
}
}
@media (min-width: 768px) {
display: flex;
flex-direction: column;
height: 100%;
flex-direction: row;
> div {
flex: 1;
overflow-y: auto;
padding-bottom: var(--bottom-area);
}
> div:first-child {
max-width: var(--default-main-width);
border-right: 1px;
}
}
header {
margin-bottom: 0.5rem;
}
> div:last-child {
display: flex;
flex-direction: column;
gap: 1.5rem;
overflow-x: hidden;
p {
text-wrap: pretty;
}
}
label {
> span {
display: block;
}
small {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
display: block;
}
}
.chart {
flex: none;
height: 400px;
.lightweight-chart {
margin-left: calc(var(--negative-main-padding) * 0.75);
fieldset {
margin-left: -0.5rem;
}
}
}
}
</style>
<!-- ------- -->
@@ -1113,7 +1375,7 @@
// @ts-check
const preferredColorSchemeMatchMedia = window.matchMedia(
"(prefers-color-scheme: dark)"
"(prefers-color-scheme: dark)",
);
const themeColor = window.document.createElement("meta");
@@ -1123,7 +1385,7 @@
/** @param {boolean} dark */
function updateThemeColor(dark) {
const theme = getComputedStyle(
window.document.documentElement
window.document.documentElement,
).getPropertyValue(dark ? "--black" : "--white");
themeColor.content = theme;
}
@@ -1133,7 +1395,7 @@
"change",
({ matches }) => {
updateThemeColor(matches);
}
},
);
if ("standalone" in window.navigator && !!window.navigator.standalone) {