Consolidate and upload changes from recent work

src/styles/global.scss

@@ -0,0 +1,194 @@
+body {
+  margin: 0;
+}
+
+.fullscreen-asset {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &:not(.active) {
+    display: none;
+  }
+
+  img,
+  video {
+    max-width: 80vw;
+    transform-origin: center;
+    transform: scale(var(--zoom));
+
+    &.active {
+      opacity: 0;
+    }
+  }
+
+  img:not(.move),
+  video:not(.move) {
+    transition: transform-origin 1s;
+  }
+
+  img.move,
+  video.move {
+    transform-origin: var(--x) var(--y);
+  }
+
+  .controlls {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    button {
+      padding: 0.5rem 0.6rem;
+
+      svg {
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+  }
+}
+
+.menu {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  padding: 0.5rem 0.6rem;
+
+  svg {
+    height: 2rem;
+    width: 2rem;
+  }
+}
+
+article > div {
+  clear: both;
+}
+
+.righties {
+  margin-top: -8px;
+  margin-left: 24px;
+  width: 33%;
+  float: right;
+  clear: both;
+}
+
+.lefties {
+  margin-top: -8px;
+  margin-right: 24px;
+  width: 33%;
+  float: left;
+  display: none;
+}
+
+#navbar {
+  z-index: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #121629;
+  position: fixed;
+  top: 0;
+  height: 100%;
+  margin-left: -8px;
+  padding: 1rem;
+
+  button {
+    border-radius: 16px;
+    scale: 0.9;
+
+    &:hover {
+      scale: 1.06;
+    }
+  }
+
+  a {
+    float: none;
+    display: block;
+    color: #eff0f3;
+    text-align: left;
+    padding: 8px 8px;
+    text-decoration: none;
+    font-size: 0.9em;
+
+    &:hover {
+      background: #eff0f3;
+      color: #121629;
+      cursor: pointer;
+    }
+  }
+}
+
+body.light-mode {
+  background-color: #eff0f3;
+  color: #2a2a2a;
+
+  .lefties,
+  .righties {
+    > * {
+      box-shadow: #eff0f3 0 0 1rem 1rem;
+    }
+  }
+
+  article p a {
+    text-align: justify;
+    text-decoration: underline;
+    color: #2a2a2a;
+  }
+  b {
+    color: #2a2a2a;
+
+    a {
+      color: #2a2a2a;
+    }
+  }
+  h3 {
+    color: #2a2a2a;
+  }
+  h1 {
+    color: #2a2a2a;
+  }
+  h2 {
+    color: #2a2a2a;
+  }
+  #navbar {
+    background-color: #b8c1ec;
+
+    a {
+      color: black;
+    }
+  }
+  // #sidenavbar {
+  //   background-color: #b8c1ec;
+
+  //   a {
+  //     color: black;
+  //   }
+  // }
+  button {
+    background-color: #b8c1ec;
+    color: black;
+  }
+
+  /*Raster Einstellungen*/
+  .raster > a {
+    background-color: #eff0f3;
+  }
+  a {
+    color: #2a2a2a;
+  }
+}
+
+@media (min-width: 960px) {
+  article {
+    max-width: 80vw;
+    margin: auto;
+  }
+}