From 56cf0b1f0318610b01b1283f4ff0a80bc53d17f5 Mon Sep 17 00:00:00 2001
From: "NullDev (Shadow)" <chris@nulldev.org>
Date: Tue, 14 Nov 2023 13:46:57 +0100
Subject: [PATCH] cleanup

---
 web/src/style.scss | 145 ++++++++++++++++++++++-----------------------
 1 file changed, 71 insertions(+), 74 deletions(-)

diff --git a/web/src/style.scss b/web/src/style.scss
index 95d9677..31d932c 100644
--- a/web/src/style.scss
+++ b/web/src/style.scss
@@ -8,6 +8,33 @@
     position: absolute;
     width: 100%;
     height: 100%;
+
+    > .description {
+        width: 40%;
+        text-align: right;
+        margin-right: 5em;
+        font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        color: #404040;
+        line-height: 1.5;
+
+        > .heading {
+            font-size: 3em;
+            font-weight: bold;
+            margin-bottom: 1.5em;
+        }
+    }
+}
+
+.logo {
+    width: 15%;
+
+    .logo-line {
+        fill: none;
+        stroke: #010101;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 18px;
+    }
 }
 
 .captcha-container {
@@ -28,37 +55,37 @@
     border-radius: 50%;
     width: 7em;
     height: 7em;
-}
 
-.load-complete {
-    -webkit-animation: none;
-    animation: none;
-    border-color: #000;
-    transition: border 500ms ease-out;
+    &.load-complete {
+        -webkit-animation: none;
+        animation: none;
+        border-color: #000;
+        transition: border 500ms ease-out;
+    }
 }
-  
+
 .checkmark {
     display: none;
-}
 
-.checkmark.draw::after {
-    animation-duration: 800ms;
-    animation-timing-function: ease;
-    animation-name: checkmark;
-    transform: scaleX(-1) rotate(135deg);
-}
+    &.draw::after {
+        animation-duration: 800ms;
+        animation-timing-function: ease;
+        animation-name: checkmark;
+        transform: scaleX(-1) rotate(135deg);
+    }
 
-.checkmark::after {
-    opacity: 1;
-    height: 3.5em;
-    width: 1.75em;
-    transform-origin: left top;
-    border-right: 3px solid #000;
-    border-top: 3px solid #000;
-    content: "";
-    left: 1.75em;
-    top: 3.5em;
-    position: absolute;
+    &::after {
+        opacity: 1;
+        height: 3.5em;
+        width: 1.75em;
+        transform-origin: left top;
+        border-right: 3px solid #000;
+        border-top: 3px solid #000;
+        content: "";
+        left: 1.75em;
+        top: 3.5em;
+        position: absolute;
+    }
 }
 
 .cross {
@@ -67,58 +94,28 @@
     position: absolute;
     top: 50%;
     left: 50%;
-}
-
-.cross::after, .cross::before {
-    content: '';
-    position: absolute;
-    width: 3px;
-    height: 5em;
-    background: #000;
-    top: 50%;
-    left: 50%;
-    margin-top: -2.5em;
-    margin-left: -1.5px;
-}
-
-.cross::after {
-    transform: rotate(90deg);
-}
-
-.cross.draw::after, .cross.draw::before {
-    animation-duration: 800ms;
-    animation-timing-function: ease;
-    animation-name: drawCross;
-}
-
-.description {
-    width: 40%;
-    text-align: right;
-    margin-right: 5em;
-    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    color: #404040;
-    line-height: 1.5;
-}
 
-.heading {
-    font-size: 3em;
-    font-weight: bold;
-    margin-bottom: 1.5em;
-}
+    &::after, &::before {
+        content: '';
+        position: absolute;
+        width: 3px;
+        height: 5em;
+        background: #000;
+        top: 50%;
+        left: 50%;
+        margin-top: -2.5em;
+        margin-left: -1.5px;
+    }
 
-.logo {
-    width: 15%;
-}
+    &::after {
+        transform: rotate(90deg);
+    }
 
-/*
-line for SVG logo
- */
-.logo-line {
-    fill: none;
-    stroke: #010101;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 18px;
+    &.draw::after, &.draw::before {
+        animation-duration: 800ms;
+        animation-timing-function: ease;
+        animation-name: drawCross;
+    }
 }
 
 @keyframes loader-spin {