Add files via upload

kyletimmermans · Jun 21, 2024 · c6d7055 · c6d7055
1 parent c561a14
commit c6d7055
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/app.js b/app.js
@@ -356,14 +356,14 @@ const verb = () => {
         fetchList.push("verb");
 
         let q = randomVerb(jsonVerb);
-        document.getElementById("question").innerHTML = q[2]+" ____ <b>"+q[0]
+        document.getElementById("question").innerHTML = q[2]+" <div id='nobreaks'>____</div> <b>"+q[0]
                                                         +"</b> (\""+q[4]+"\") ("
                                                         +q[1]+")";
         correctAnswer = q[3];
       });
   } else {  // If already fetched
     let q = randomVerb(jsonVerb);
-    document.getElementById("question").innerHTML = q[2]+" ____ <b>"+q[0]
+    document.getElementById("question").innerHTML = q[2]+" <div id='nobreaks'>____</div> <b>"+q[0]
                                                     +"</b> (\""+q[4]+"\") ("
                                                     +q[1]+")";
     correctAnswer = q[3];
@@ -649,14 +649,14 @@ const comparative = () => {
         fetchList.push("comp");
         let q = randomComparative(jsonCompare);
         document.getElementById("question").innerHTML = "<b>"+q[0]+"</b> (\""
-                                                        +q[1]+"\") → ____ (\""
+                                                        +q[1]+"\") → <div id='nobreaks'>____</div> (\""
                                                         +q[2]+"\")";
         correctAnswer = q[3];
       });
   } else {
     let q = randomComparative(jsonCompare);
     document.getElementById("question").innerHTML = "<b>"+q[0]+"</b> (\""
-                                                    +q[1]+"\") → ____ (\""
+                                                    +q[1]+"\") → <div id='nobreaks'>____</div> (\""
                                                     +q[2]+"\")";
     correctAnswer = q[3];
   }

diff --git a/index.html b/index.html
@@ -15,17 +15,24 @@
 	<script>if(window.innerWidth<=768){window.location.replace("/mobile/");}</script>
 	<script src="/app.js"></script>
 	<link rel="stylesheet" href="/main.css">
+
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
+
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 </head>
 
-<style>
-/* Putting this line in main.css breaks bootstrap color variables */
-body { background-color: rgb(46, 56, 66); }
+<style> 
+body {
+	background-color: rgb(46, 56, 66); /* Putting this line in main.css breaks bootstrap color variables */
+	font-family: "Roboto", sans-serif !important;
+}
 
-#centered-title { font-size: 2.92vw; }
+#centered-title { font-size: 2.95vw; }
 
-#question, #result { font-size: 2.64vw; }
+#question, #result { font-size: 2.75vw; }
 
 /* Big screens - Increase size of widgets, buttons, and modal */
 @media screen and (min-width: 1600px) and (min-height: 900px) {

diff --git a/main.css b/main.css
@@ -21,9 +21,18 @@
 	background-color: #9ceafa !important;
 }
 
+/* Prevent blank space in question from showing breaks */
+#nobreaks {
+	letter-spacing: -1px;
+	display: inline;
+}
+
 /* Center input box placeholder */
 ::placeholder { text-align: center; }
 ::-webkit-input-placeholder { text-align: center; }
 :-moz-placeholder { text-align: center; }
 ::-moz-placeholder { text-align: center; }
-:-ms-input-placeholder { text-align: center; }
+:-ms-input-placeholder { text-align: center; }
+
+::selection { background: rgba(13, 202, 240, 0.5) !important; }
+::-moz-selection { background: rgba(13, 202, 240, 0.5) !important; }
diff --git a/mobile/index.html b/mobile/index.html
@@ -15,13 +15,20 @@
 	<script>if(window.innerWidth>768){window.location.replace("/");}</script>
 	<script src="/app.js"></script>
 	<link rel="stylesheet" href="/main.css">
+
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
+
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 </head>
 
 <style>
-	/* Putting this line in main.css breaks bootstrap color variables */
-body { background-color: rgb(46, 56, 66); }
+body {
+	background-color: rgb(46, 56, 66); /* Putting this line in main.css breaks bootstrap color variables */
+	font-family: "Roboto", sans-serif !important;
+}
 
 #centered-title {
 	padding-top: 7vh;