chore: add biome for lint and format CSS and JS

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
-    "charliermarsh.ruff"
+    "charliermarsh.ruff",
+    "biomejs.biome"
   ]
 }

cardie/static/main/authentication.css

@@ -68,8 +68,13 @@ html {
 
     z-index: 0;
 
-    background: rgb(61,132,148);
-    background: linear-gradient(120deg, rgb(61, 84, 148) 9%, rgb(62, 34, 139) 47%, rgb(37, 210, 187) 91%); 
+    background: rgb(61, 132, 148);
+    background: linear-gradient(
+        120deg,
+        rgb(61, 84, 148) 9%,
+        rgb(62, 34, 139) 47%,
+        rgb(37, 210, 187) 91%
+    );
 }
 
 #authentication_privacypolicy {
@@ -84,4 +89,4 @@ html {
 #authentication_privacypolicy:hover {
     scale: 1.1;
     opacity: 1;
-}
+}

cardie/static/main/card.css

@@ -2,7 +2,7 @@
 
 .card_card {
     margin: 10px;
-    
+
     width: 600px;
     aspect-ratio: 1.75;
 
@@ -11,7 +11,8 @@
     display: block;
 }
 
-.card_card_front, .card_card_back {
+.card_card_front,
+.card_card_back {
     position: absolute;
     top: 0;
     width: 100%;
@@ -198,4 +199,4 @@
     border: none;
     background-color: none;
     color: rgb(64, 163, 255);
-}
+}

cardie/static/main/card_view.css

@@ -55,4 +55,4 @@ html {
 
 #cardview_bottom_owned {
     opacity: 0.8;
-}
+}

cardie/static/main/editor.css

@@ -177,26 +177,26 @@ html {
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
         border-radius: 20px;
-    
+
         aspect-ratio: 1;
         width: auto;
         height: 40%;
         max-height: 40%;
-    
+
         z-index: 3;
-    
+
         position: fixed;
         top: 50%;
         left: 50%;
         translate: -50% -50%;
-    
+
         padding: clamp(1.5vh, 15px, 1.5vw);
-    
+
         display: flex;
         flex-direction: column;
-    
+
         display: none; /* Keep hidden until needed */
-    
+
         /* Starting properties for animation */
         opacity: 0;
         scale: 0.8;
@@ -209,25 +209,25 @@ html {
     #editor-iconselector {
         background-color: var(--default-glass-background);
         backdrop-filter: var(--default-glass-blur);
-    
+
         aspect-ratio: 1;
         width: calc(100vw - 1.5vh);
         height: 100vh;
         max-height: 100vh;
-    
+
         z-index: 3;
-    
+
         position: fixed;
         top: 0px;
         left: 0px;
-    
+
         padding: clamp(1.5vh, 15px, 1.5vw);
-    
+
         display: flex;
         flex-direction: column;
-    
+
         display: none; /* Keep hidden until needed */
-    
+
         /* Starting properties for animation */
         opacity: 0;
         scale: 0.8;
@@ -270,9 +270,9 @@ html {
     justify-content: center;
     margin: clamp(0.8vh, 8px, 0.8vw);
 
-    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
-    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.75);
+    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75);
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.75);
 }
 
 .editor-iconselector-icon:hover {
@@ -338,21 +338,21 @@ html {
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
         border-radius: 20px;
-    
+
         z-index: 3;
-    
+
         position: fixed;
         top: 50%;
         left: 50%;
         translate: -50% -50%;
-    
+
         padding: clamp(2vh, 20px, 2vw);
-    
+
         display: flex;
         flex-direction: column;
-    
+
         display: none; /* Keep hidden until needed */
-    
+
         /* Starting properties for animation */
         opacity: 0;
         scale: 0.8;
@@ -371,21 +371,21 @@ html {
         border: var(--default-glass-border);
         backdrop-filter: var(--default-glass-blur);
         border-radius: 20px;
-    
+
         z-index: 3;
-    
+
         position: fixed;
         top: 50vh;
         left: 50vw;
         translate: -50% -50%;
-    
+
         padding: clamp(2vh, 20px, 2vw);
-    
+
         display: flex;
         flex-direction: column;
-    
+
         display: none; /* Keep hidden until needed */
-    
+
         /* Starting properties for animation */
         opacity: 0;
         scale: 0.8;
@@ -488,5 +488,4 @@ html {
 
     margin-left: clamp(1.5vh, 15px, 1.5vw);
     margin-right: clamp(1vh, 10px, 1vw);
-
-}
+}

cardie/static/main/editor_print.css

@@ -48,10 +48,10 @@
         min-height: 2in;
         max-width: 3.5in;
         max-height: 2in;
-
     }
 
-    .card_card_front, .card_card_back {
+    .card_card_front,
+    .card_card_back {
         position: unset;
         top: unset;
         border: 2px solid rgb(0, 0, 0);
@@ -67,7 +67,8 @@
         overflow: hidden;
     }
 
-    .card_card_back, .card_card_front {
+    .card_card_back,
+    .card_card_front {
         transform: rotateY(0);
     }
 
@@ -110,7 +111,7 @@
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(3, 1fr);
         grid-column-gap: 0.1in;
-        grid-row-gap: 0.1in; 
+        grid-row-gap: 0.1in;
     }
 
     #print_back_div {
@@ -120,8 +121,7 @@
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(3, 1fr);
         grid-column-gap: 0.1in;
-        grid-row-gap: 0.1in; 
-
+        grid-row-gap: 0.1in;
     }
 
     #print_front_div * {
@@ -131,4 +131,4 @@
     #print_back_div * {
         visibility: visible;
     }
-}
+}