Making stuff work better, adding a floppy

assets/sass/pages/about.scss

@@ -17,11 +17,30 @@
     > .about-header {
       text-align: center;
     }
+
+    > .manifesto-container {
+      position: relative;
+      > .manifesto-floppy {
+        position: absolute;
+        right: -50px;
+        top: -20px;
+        width: 150px;
+        transform: rotate(5deg);
+      }
+    }
   }
 }
 
 @media (max-width: 800px) {
   .about-page > .about-content {
     width: 100%;
+
+    > .manifesto-container {
+      > .manifesto-floppy {
+        width: 75px;
+        top: -10px;
+        right: -20px;
+      }
+    }
   }
 }

assets/sass/pages/audio.scss

@@ -0,0 +1,42 @@
+.audio-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+  overflow: hidden;
+}
+
+.star {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: white;
+  border-radius: 50%;
+  animation: twinkle linear infinite;
+}
+
+.star.small {
+  width: 1px;
+  height: 1px;
+}
+
+.star.medium {
+  width: 2px;
+  height: 2px;
+}
+
+.star.large {
+  width: 3px;
+  height: 3px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}

assets/sass/partials/_floppy.scss

@@ -0,0 +1,104 @@
+.floppy-disk {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 2%;
+  position: relative;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  container-type: inline-size;
+  pointer-events: none;
+  clip-path: polygon(
+    0 0,
+    /* Top left */ 95% 0,
+    /* Top edge before diagonal */ 100% 5%,
+    /* Top right diagonal corner */ 100% 100%,
+    /* Bottom right */ 0 100% /* Bottom left */
+  );
+}
+
+.metal-shutter {
+  position: absolute;
+  top: 0px;
+  right: 0;
+  transform: translateX(-40%);
+  width: 50%;
+  height: 30%;
+  background: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #606060 100%);
+  border-radius: 5%;
+  border-top-left-radius: 0px;
+  box-shadow:
+    0 1cqw 2cqw rgba(0, 0, 0, 0.4),
+    inset 0 0.25cqw 0.5cqw rgba(255, 255, 255, 0.3);
+  z-index: 5;
+
+  &::before {
+    content: " ";
+    height: 100%;
+    top: 0px;
+    right: 0px;
+    left: -35%;
+    position: absolute;
+    border-bottom-left-radius: 5%;
+    box-shadow:
+      inset 0.5cqw 0 0.5cqw rgba(0, 0, 0, 0.5),
+      inset 0 -0.25cqw 0.5cqw rgba(255, 255, 255, 0.4);
+    z-index: 4;
+  }
+}
+
+.shutter-opening {
+  position: absolute;
+  top: 15%;
+  right: 10%;
+  transform: translateX(-50%);
+  width: 20%;
+  height: 70%;
+  background: #000;
+  border-radius: 5%;
+  box-shadow: inset 0 0.5cqw 1cqw rgba(0, 0, 0, 0.8);
+}
+
+.label {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 55%;
+  background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
+  border-radius: 2%;
+  overflow: hidden;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  font-family: "Caveat", cursive;
+  color: black;
+  font-size: clamp(0.7rem, 5cqw, 2rem);
+  font-weight: bold;
+}
+
+/* Yellow header on label */
+.label-header {
+  width: 100%;
+  height: 20%;
+  background: linear-gradient(180deg, #f4d03f 0%, #e1b700 100%);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+  padding: 2%;
+  text-align: center;
+}
+
+.label-lines {
+  padding: 5%;
+  display: flex;
+  flex-direction: column;
+  height: 80%;
+  box-sizing: border-box;
+  font-size: clamp(0.6rem, 4cqw, 1.5rem);
+}
+
+.label-line {
+  flex: 1;
+  width: 100%;
+  height: 1.5px;
+  border-bottom: 2px solid black;
+  opacity: 0.7;
+}

assets/sass/style.scss

@@ -6,10 +6,12 @@
 @import "partials/terminal";
 @import "partials/now-playing";
 @import "partials/lavalamp";
+@import "partials/floppy";
 
 @import "partials/content-screens";
 
 @import "pages/about";
+@import "pages/audio";
 
 @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap");