init

1 files changed, 352 insertions, 0 deletions

diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..9f5b7a9
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,352 @@
+@font-face {
+    font-family: "Scientifica";
+    src: url("/assets/scientifica.ttf");
+}
+
+@font-face {
+    font-family: "Nintendo DS BIOS";
+    src: url("/assets/Nintendo-DS-BIOS.ttf");
+}
+
+@font-face {
+    font-family: "Cozette Vector";
+    src: url("/assets/cozette_vector.woff2");
+}
+
+:root {
+    --red: #ff0047;
+    --red-dark: #7d0425;
+    --red-bright: #ff77a8;
+    --yellow: #ffa300;
+    --white: #fff1e8;
+
+    --spacing: 4px;
+}
+
+html {
+    overflow: hidden;
+}
+
+body {
+    /* font-family: "Cozette Vector"; */
+    font-family: "Nintendo DS BIOS";
+    margin: 0;
+    height: 100vh;
+    font-size: 1.2rem;
+    /* background-color: var(--red-dark); */
+    background-image: linear-gradient(26.57deg, var(--red-dark) 0%, var(--red) 100%);
+}
+
+button {
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    background-color: transparent;
+}
+
+#root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    isolation: isolate;
+}
+
+@keyframes bounce {
+    from {
+        background-position: 0 0;
+    }
+    
+    to {
+        background-position: var(--translate-amount) 0;
+    }
+}
+
+@keyframes scroll {
+    from {
+        transform: translateX(0);
+    }
+
+    to {
+        transform: translateX(var(--translate-amount));
+    }
+}
+
+#desktop {
+    border-bottom: 1px solid var(--white);
+    flex-grow: 1;
+    padding: 1em;
+    overflow: hidden;
+    position: relative;
+    z-index: 2;
+}
+
+#desktop::after {
+    position: absolute;
+    border-bottom: 1px solid var(--white);
+    z-index: 3;
+}
+
+#netpunk,
+#netpunk_descender {
+    pointer-events: none;
+    width: 45vw;
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+#netpunk {
+    z-index: 3;
+}
+
+#netpunk_descender {
+    background-image: url("/assets/netpunk_descender.png");
+    height: calc(100% + 5px); /* yellow + white borders + some margin for safety */
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+#bg {
+    /*                   cos(26.57deg)        sin(26.57deg) */
+    width: calc(100vw *  0.89438856 + 100vh * 0.44729084);
+    height: calc(100vh * 0.89438856 + 100vw * 0.44729084);
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    opacity: 0.075;
+    transform: translate(-50%, -50%) rotate(26.57deg);
+}
+
+#bg.bounce > div {
+    animation: scroll linear infinite, bounce infinite cubic-bezier(0.2, 0, 0, 1.0);
+    animation-duration: 4s, calc(60s / 130);
+}
+
+#bg > div {
+    width: calc(100% + 32px);
+    height: 100%;
+    background-image: url("/assets/bg_top.svg");
+    animation: scroll linear infinite;
+    animation-duration: 4s;
+    --translate-amount: 32px;
+}
+
+#bg.reverse > div {
+    background-image: url("/assets/bg_bottom.svg");
+    --translate-amount: -32px;
+}
+
+/* #desktop > div { */
+/*     animation: bounce infinite cubic-bezier(0.2, 0, 0, 1.0); */
+/*     animation-duration: calc(60s / 130); */
+/*     background-color: black; */
+/*     width: 4px; */
+/*     height: 4px; */
+/* } */
+
+nav {
+    z-index: 2;
+    background-image: linear-gradient(to bottom, var(--red) 0%, var(--red) 50%, black 50%, black 100%);
+    display: flex;
+    color: var(--white);
+    gap: calc(var(--spacing) * 2);
+    text-shadow: black 1px 1px 0;
+    border-top: 2px solid var(--yellow);
+    position: relative;
+}
+
+nav img {
+    width: 1lh;
+    height: 1lh;
+    display: block;
+}
+
+nav button {
+    text-shadow: inherit;
+}
+
+nav > ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+    gap: var(--spacing);
+    align-items: center;
+    padding: 6px;
+}
+
+nav > ul > li {
+    margin: 0;
+    list-style: none;
+}
+
+
+nav > ul > li > button {
+    padding: var(--spacing) calc(var(--spacing) + 0.3em);
+    background-color: transparent;
+    border-radius: 0.6em;
+    border: 2px solid var(--red-dark);
+
+}
+
+nav > div {
+    position: relative;
+    display: flex;
+}
+
+#start > div {
+    height: 50%;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+    position: relative;
+}
+
+#start > div > div {
+    position: absolute;
+    height: 200%;
+    width: 200%;
+    bottom: 0;
+    right: 0;
+    border-right: 2px solid var(--red-dark);
+    border-top: 2px solid var(--red-dark);
+    border-top-right-radius: 9999px;
+    box-sizing: border-box;
+    /* box-shadow: inset #fff6 -1px 1px 0px; */
+    box-shadow: inset var(--yellow) -1px 1px 0px;
+}
+
+#start > button {
+    display: flex;
+    background-color: transparent;
+    border: none;
+    padding: calc(var(--spacing) * 1.5);
+    font-size: 1.2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing);
+}
+
+#time {
+    padding: var(--spacing);
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    border-left: 2px solid var(--red-dark);
+}
+
+.window {
+    background-color: black;
+    border-radius: 4px;
+    border: 1px solid var(--red-bright);
+    border-top-color: var(--white);
+    box-shadow: black 0 -2px;
+    overflow: hidden;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 4;
+}
+
+.window .titlebar {
+    padding: 6px;
+    color: var(--white);
+    user-select: none;
+    cursor: grab;
+    display: flex;
+}
+
+.window .titlebar > .title {
+    flex: 1;
+}
+
+.window .titlebar > .buttons {
+    display: flex;
+    gap: var(--spacing);
+}
+
+.window .titlebar button {
+    height: 1em;
+    border-radius: 4px;
+    border: 1px solid var(--white);
+    padding: var(--spacing);
+    box-sizing: border-box;
+}
+
+.window .titlebar button:hover {
+    background-color: #fff1e830;
+}
+
+.window .titlebar button img {
+    height: calc(1em - 2 * (var(--spacing) + 1px));
+    display: block;
+}
+
+.window.dragging > .titlebar{
+    cursor: grabbing;
+}
+
+.window .content {
+    padding: 6px;
+    padding-top: 0;
+    height: 100%;
+}
+
+.window textarea {
+    background-color: var(--white);
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    resize: none;
+    font: inherit;
+    caret-color: var(--yellow);
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    white-space: pre-wrap;
+}
+
+.window textarea:focus-visible {
+    outline: none;
+    box-shadow: inset var(--red-bright) 0 0 0 1px;
+}
+
+.window .external_warning {
+    color: var(--white);
+    background-color: var(--red-dark);
+    padding: var(--spacing);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing);
+    min-width: max-content;
+}
+
+.window .external_warning a {
+    color: var(--red);
+}
+
+.window .external_warning a:hover {
+    color: var(--red-bright);
+}
+
+.window .external_warning > button {
+    border: none;
+    background-color: var(--red);
+    border-radius: 0.6em;
+    padding: var(--spacing) calc(var(--spacing) + 0.3em);
+}
+
+.icon_grid {
+    display: grid;
+    grid-template-rows: repeat(10, 1fr);
+    /* grid-template-columns: repeat(, 1fr); */
+    /* grid-template-columns: repeat(10, 1fr); */
+    height: 100%;
+}
+
+.icon_grid > div {
+    aspect-ratio: 1 / 1;
+}