1 files changed, 345 insertions, 63 deletions

diff --git a/css/index.css b/css/index.css
index 9f5b7a9..9b58692 100644
--- a/css/index.css
+++ b/css/index.css
@@ -18,6 +18,7 @@
     --red-dark: #7d0425;
     --red-bright: #ff77a8;
     --yellow: #ffa300;
+    --blue: #0000ff;
     --white: #fff1e8;
 
     --spacing: 4px;
@@ -28,12 +29,10 @@ html {
 }
 
 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%);
 }
 
@@ -51,7 +50,7 @@ button {
     isolation: isolate;
 }
 
-@keyframes bounce {
+@keyframes scroll {
     from {
         background-position: 0 0;
     }
@@ -61,16 +60,6 @@ button {
     }
 }
 
-@keyframes scroll {
-    from {
-        transform: translateX(0);
-    }
-
-    to {
-        transform: translateX(var(--translate-amount));
-    }
-}
-
 #desktop {
     border-bottom: 1px solid var(--white);
     flex-grow: 1;
@@ -89,7 +78,7 @@ button {
 #netpunk,
 #netpunk_descender {
     pointer-events: none;
-    width: 45vw;
+    width: 25em;
     display: block;
     position: absolute;
     right: 0;
@@ -97,7 +86,7 @@ button {
 }
 
 #netpunk {
-    z-index: 3;
+    z-index: -1;
 }
 
 #netpunk_descender {
@@ -115,37 +104,19 @@ button {
     left: 50%;
     top: 50%;
     z-index: 1;
-    opacity: 0.075;
+    opacity: 0.1;
     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");
+#bg.reverse {
     --translate-amount: -32px;
+    background-image: url("/assets/bg_bottom.svg");
 }
 
-/* #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%);
@@ -169,26 +140,33 @@ nav button {
 
 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);
+    position: relative;
+    max-width: 10vw;
+    z-index: 5;
+    display: flex;
+    gap: var(--spacing);
+}
 
+nav > ul > li > button > div {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+nav > ul > li > button > img {
+    height: 1em;
+    width: 1em;
 }
 
 nav > div {
@@ -213,7 +191,6 @@ nav > div {
     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;
 }
 
@@ -235,36 +212,62 @@ nav > div {
     flex-direction: column;
     align-items: center;
     border-left: 2px solid var(--red-dark);
+    width: 10%;
 }
 
 .window {
     background-color: black;
     border-radius: 4px;
-    border: 1px solid var(--red-bright);
+    border: 2px 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;
+    box-sizing: border-box;
+    padding: 6px;
+    gap: 6px;
+    --grab-region-size: 8px;
+}
+
+.window.hidden {
+    opacity: 0;
+    pointer-events: none;
+    visibility: none;
 }
 
 .window .titlebar {
-    padding: 6px;
     color: var(--white);
     user-select: none;
     cursor: grab;
     display: flex;
+    text-shadow: var(--red-bright) 1px 1px 0;
+    gap: calc(var(--spacing) * 2);
+}
+
+.window.maximized .titlebar {
+    cursor: default;
 }
 
 .window .titlebar > .title {
     flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
+}
+
+.window .titlebar > img {
+    pointer-events: none;
+    height: 1em;
+    width: 1em;
 }
 
 .window .titlebar > .buttons {
     display: flex;
     gap: var(--spacing);
+    cursor: default;
 }
 
 .window .titlebar button {
@@ -284,18 +287,30 @@ nav > div {
     display: block;
 }
 
+.window.dragging {
+    will-change: top, left;
+}
+
 .window.dragging > .titlebar{
     cursor: grabbing;
 }
 
 .window .content {
-    padding: 6px;
-    padding-top: 0;
     height: 100%;
+    display: flex;
+    justify-content: center;
+    overflow: hidden auto;
 }
 
-.window textarea {
+.window .content > img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+}
+
+.window .text_content {
     background-color: var(--white);
+    padding: var(--spacing);
     margin: 0;
     border: none;
     border-radius: 0;
@@ -305,14 +320,57 @@ nav > div {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    white-space: pre-wrap;
+    flex-direction: column;
+    overflow-y: auto;
+    font-size: 1.25rem;
+    line-height: 1.1;
+}
+
+p,
+.link {
+    margin-top: var(--spacing);
+}
+
+h1::before {
+    content: "# "
+}
+
+h2::before {
+    content: "## "
 }
 
-.window textarea:focus-visible {
+h3::before {
+    content: "### "
+}
+
+blockquote, .credit {
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+.credit::before {
+    content: "- "
+}
+
+.window .text_content ol {
+    list-style: decimal inside;
+}
+
+.window .text_content li {
+    padding-left: var(--spacing);
+}
+
+.window .text_content:focus-visible {
     outline: none;
     box-shadow: inset var(--red-bright) 0 0 0 1px;
 }
 
+.window .text_content ::selection,
+.window .text_content ::-moz-selection {
+    background-color: var(--red);
+    color: var(--white);
+}
+
 .window .external_warning {
     color: var(--white);
     background-color: var(--red-dark);
@@ -321,14 +379,17 @@ nav > div {
     flex-direction: column;
     align-items: center;
     gap: var(--spacing);
-    min-width: max-content;
+    width: max-content;
+    overflow: hidden;
 }
 
-.window .external_warning a {
+.window .external_warning a,
+.window .text_content a {
     color: var(--red);
 }
 
-.window .external_warning a:hover {
+.window .external_warning a:hover,
+.window .text_content a:hover {
     color: var(--red-bright);
 }
 
@@ -339,14 +400,235 @@ nav > div {
     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); */
+.side_v {
+    position: absolute;
+    height: var(--grab-region-size);
+    width: calc(100% - 4px);
+    transform: translate(-2px, var(--y));
+    cursor: row-resize;
+    user-select: none;
+}
+
+.side_h {
+    height: calc(100% - 4px);
+    position: absolute;
+    width: var(--grab-region-size);
+    transform: translate(var(--x), -2px);
+    cursor: col-resize;
+    user-select: none;
+}
+
+.corner {
+    position: absolute;
+    height: var(--grab-region-size);
+    width: var(--grab-region-size);
+    transform: translate(var(--x), var(--y));
+    user-select: none;
+}
+
+.n {
+    --y: calc(-100% + 2px);
+    top: 0;
+}
+
+.e {
+    --x: calc(100% - 2px);
+    right: 0;
+}
+
+.s {
+    --y: calc(100% - 2px);
+    bottom: 0;
+
+}
+
+.w {
+    --x: calc(-100% + 2px);
+    left: 0;
+}
+
+.n.e {
+    cursor: ne-resize;
+}
+
+.n.w {
+    cursor: nw-resize;
+}
+
+.s.e {
+    cursor: se-resize;
+}
+
+.s.w {
+    cursor: sw-resize;
+}
+
+.icon_list {
+    display: flex;
     height: 100%;
+    flex-direction: column;
+    gap: var(--spacing);
+    flex-wrap: wrap;
+    width: min-content;
 }
 
-.icon_grid > div {
-    aspect-ratio: 1 / 1;
+.icon_list > button {
+    display: flex;
+    flex-direction: column;
+    text-shadow: black 1px 1px 0;
+    color: var(--white);
+    max-width: 3.5em;
+    align-items: center;
+    border: none;
+    padding: 0;
+}
+
+.icon_list > button:focus-visible {
+    outline: none;
+}
+
+.icon_list .name {
+    overflow-wrap: anywhere;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow-y: hidden;
+    height: 2em;
+}
+
+
+.icon_list > button.focused > .name {
+    overflow-y: visible;
+    position: relative;
+    width: 100%;
+    -webkit-line-clamp: unset;
+}
+
+.icon_list > button > .name > div {
+    width: 100%;
+}
+
+.icon_list > button.focused > .name > div {
+    box-shadow: var(--red) 0 0 0 4px, var(--red-dark) 0 0 0 5px;
+    background-color: var(--red);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.icon_list .icon {
+    height: 3.5em;
+    width: 3.5em;
+    padding: calc(var(--spacing) * 2);
+    box-sizing: border-box;
+}
+
+.icon_list .icon > img {
+    width: 100%;
+    height: 100%;
+}
+
+#start_menu {
+    position: absolute;
+    z-index: 9999;
+    background-color: var(--red);
+    bottom: 0;
+    left: 0;
+    border: var(--red) solid 2px;
+    border-radius: 4px 4px 0 0;
+    border-bottom: 0;
+    font-size: 1.1em;
+    color: var(--white);
+    max-width: 20em;
+    max-height: 50vh;
+    display: flex;
+    flex-direction: column;
+    text-shadow: black 1px 1px 0;
+}
+
+#start_menu_content {
+    background-color: black;
+    display: flex;
+    flex-grow: 1;
+}
+
+#start_menu_content > div {
+    padding: 6px 12px;
+    font-size: 0.9em;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+}
+
+#start_menu_content > div > ul  {
+    list-style: "- " inside;
+}
+
+#start_menu_content > ul {
+    background-color: black;
+    gap: var(--spacing);
+    display: flex;
+    flex-direction: column;
+    padding: 6px 12px;
+    background-color: var(--red-dark);
+    white-space: nowrap;
+}
+
+#start_menu a {
+    color: var(--white);
+}
+
+#start_menu a:hover {
+    color: white;
+}
+
+#start_menu_content > ul a {
+    text-decoration: none;
+}
+
+#profile {
+    display: flex;
+    padding: calc(var(--spacing) * 2);
+    gap: calc(var(--spacing) * 2);
+    font-size: 1em;
+    align-items: center;
+    background-image: linear-gradient(to bottom, var(--red) 0%, var(--red-dark) 100%)
+}
+
+#profile > img {
+    width: 3em;
+    height: 3em;
+    padding: 2px;
+    background-color: var(--red-dark);
+    border-radius: 4px;
+}
+
+#footer {
+    padding: 6px 12px;
+    text-align: end;
+    background-image: linear-gradient(to bottom, var(--red) 0%, var(--red-dark) 100%)
+}
+
+::selection,
+::-moz-selection {
+    background-color: var(--blue);
+}
+
+pre > code {
+    white-space: pre;
+    font-family: monospace;
+    font-size: 1rem;
+}
+
+.link a::before {
+    content: "[";
+}
+
+.link a::after {
+    content: "]";
+}
+
+iframe {
+    width: 100%; 
+    height: 100%;
 }