a few minor fixes

flippont · Oct 19, 2024 · 1ee4819 · 1ee4819
1 parent 7071cd5
commit 1ee4819
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 28 deletions.
diff --git a/src/functions.js b/src/functions.js
@@ -233,13 +233,13 @@ function drawBGCanvas() {
             image.src = countriesFlags[Math.floor(Math.random() * (countriesFlags.length - 1))].normal;
             image.crossOrigin = "anonymous"
             image.onload = () => {
-                ctx.drawImage(image, i * (canvas.width / 20), j * (( canvas.width / 20 ) / 1.5), canvas.width / 20, ( canvas.width / 20 ) / 1.5 );        
+                ctx.drawImage(image, i * (canvas.width / 10), j * (( canvas.width / 10 ) / 1.5), canvas.width / 20, ( canvas.width / 20 ) / 1.5 );        
                 loadArray.push(i,j)
                 if(loadArray.length == 200) { // This is a programming sin if I've ever seen one
                     var imageDataURL = canvas.toDataURL();
                     //set the dynamic image as the background
-                    document.body.style.background = 
-                    "url('"+imageDataURL+"') repeat";
+                    var style = document.body.style;
+                    style.setProperty("--background", "url('"+imageDataURL+"') repeat");
                 }
             }
         }

diff --git a/src/init.js b/src/init.js
@@ -11,8 +11,8 @@ let schoolName = 'The Highschool Dublin'
 let loadArray = []
 
 const canvas = document.createElement("canvas")
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
+canvas.width = window.innerWidth / 2;
+canvas.height = (window.innerWidth / 2) / 1.5;
 let ctx = canvas.getContext("2d");
 
 const content = document.getElementById("content");

diff --git a/style.css b/style.css
@@ -1,14 +1,34 @@
 * {
     box-sizing: border-box;
 }
+:root {
+    --background: #fff;
+    --white: #fff;
+    --black: #000;
+    --bdgray: #ddd;
+    --bggray: #eee;
+}
 body {
     margin: auto;
     font-family: 'Arial', sans-serif;
-    color: black;
+    color: var(--black);
     overflow: auto;
     overflow-x: hidden;
     min-height: 100vh;
-    font-size: 13px;
+    font-size: 13px;      
+    width: 100%;
+    height: 100%;
+}
+body:before {
+    content: ' ';
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: inherit;
+    height: inherit;
+    opacity: 0.6;
+    background: var(--background);
 }
 #preview {
     width: 350px;
@@ -22,7 +42,7 @@ body {
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
-    background-color: #fff;
+    background-color: var(--white);
 }
 
 input {
@@ -32,8 +52,8 @@ input {
     padding-left: 15px;
     padding-right: 15px;
     line-height: 22px;
-    border: 1px solid #DDD;
-    background: #EEE;
+    border: 1px solid var(--bdgray);
+    background: var(--bdgray);
     border-radius: 4px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
@@ -51,7 +71,7 @@ input[type="file"] {
     text-align: left;
     box-sizing: border-box;
     width: 100%;
-    padding: 50px;
+    padding: 20px;
     height: auto;
     left: 50%;
     margin:auto;
@@ -63,8 +83,8 @@ input[type="file"] {
     margin-top: -60%;
 }
 textarea {
-    border: 1px solid #DDD;
-    background: #EEE;
+    border: 1px solid var(--bdgray);
+    background: var(--bdgray);
     border-radius: 4px;
     width: calc(100% - 10px);
     padding: 10px;
@@ -73,24 +93,24 @@ textarea {
     font-size: 13px;
 }
 .empty {
-    border: 1px solid #DDD;
+    border: 1px solid var(--bdgray);
     border-radius: 4px;
     height: 100px;
     padding: 20px;
     width: 100%;
     text-align: center;
 }
 button {
-    background: #fff;
+    background: var(--white);
     position: relative;
     cursor: pointer;
     min-height: 34px;
     margin-left: 10px;
     padding-left: 10px;
     padding-right: 10px;
     line-height: 22px;
-    border: 1px solid #DDD;
-    background: #EEE;
+    border: 1px solid var(--bdgray);
+    background: var(--bdgray);
     border-radius: 4px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
@@ -135,11 +155,11 @@ button:hover {
     margin-top: 0px;
 }
 .crest {
-    background: #fff;
+    background: var(--white);
     cursor: pointer;
     padding: 10px;
-    border: 1px solid #DDD;
-    background: #EEE;
+    border: 1px solid var(--bdgray);
+    background: var(--bdgray);
     border-radius: 4px;
     width: 100%;
     display: block;
@@ -153,8 +173,8 @@ select {
     background-position-x: -50px;
     cursor: pointer;
     box-shadow: none;
-    border: 1px solid #DDD;
-    background: #EEE;
+    border: 1px solid var(--bdgray);
+    background: var(--bdgray);
     border-radius: 4px;
     font-family: Arial, Helvetica, sans-serif;
     appearance: none;
@@ -195,8 +215,8 @@ select {
 }
 .innerCont {
     position: absolute;
-    background: #fff;
-    border: 1px solid #DDD;
+    background: var(--white);
+    border: 1px solid var(--bdgray);
     align-items: center;
     justify-content: center;
     margin-bottom: 10px;
@@ -252,7 +272,7 @@ summary {
 }
 
 hr {
-    border: 1px solid #DDD;       
+    border: 1px solid var(--bdgray);       
     border-bottom: none;
 }
 .leftButton {
@@ -267,14 +287,14 @@ hr {
     border-radius: 0 4px 4px 0;
 }
 .active {
-    background: #ddd;
+    background: var(--bdgray);
 }
 
 #content {
     user-select: none;
     grid-gap: 10px;
     width: 100%;
-    padding: 50px;
+    padding: 20px;
 }
 .grid {
     grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
@@ -324,7 +344,7 @@ hr {
         height: auto;
         text-align: center;
         overflow: visible;
-        background: #000;
+        background: var(--black);
         display: block;
     }
     .flag {