spanish-quizzer

commit 4020e72f24b518fa6ed2c1d6906d8e3939f4c21d
parent abf953109a63ed3b47d1777ba0c08c0ccd1fca2f
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Wed,  3 Mar 2021 18:55:38 -0800

Improve font and icon sizes for mobile devices

Diffstat:
M
css/app.css
 | 
4
+---
M
css/filtersPage.css
 | 
23
++++++-----------------
M
css/global.css
 | 
23
++++++++++++++++++++++-
M
css/quizzer.css
 | 
8
+++++---
M
index.html
 | 
2
+-
M
js/filtersPage.js
 | 
4
----

6 files changed, 35 insertions(+), 29 deletions(-)
diff --git a/css/app.css b/css/app.css
@@ -3,7 +3,6 @@
     text-align: center;
 }
 .home main h1 {
-    font-size: 20px;
     font-weight: bold;
     margin-top: 15px;
     margin-bottom: 5px;
@@ -14,11 +13,10 @@
     justify-content: center;
 }
 .home main button {
-    width: 150px;
+    width: 175px;
     height: 50px;
     line-height: 50px;
     margin: 10px;
-    font-size: 15px;
 }
 @media only screen and (max-width: 550px) {
     .home main div {
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -4,53 +4,43 @@
     flex-direction: column;
     align-items: center;
 }
-.filtersInput h1 {
-    font-size: 16px;
-    font-weight: normal;
-    margin-bottom: 10px;
-}
-.filtersInput h2 {
-    font-size: 20px;
-}
 
 /* Filter */
 .filter {
     width: max-content;
-
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
     box-shadow: 0 0 15px var(--border-color);
-
     margin: 5px auto;
     padding: 5px;
     border-radius: 5px;
 }
 .filter select {
-    height: 22px;
+    vertical-align: middle;
 }
 
 /* Conjugation settings on mobile devices */
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 700px) {
     .verbSettings .filter {
         width: 100%;
         margin: 10px auto;
     }
     .verbSettings .filter select, .verbSettings .filter button {
         width: 100%;
-        height: 30px;
+        height: 35px;
         margin: 3px 0px;
     }
 }
 
 /* Vocab settings on mobile devices */
-@media only screen and (max-width: 375px) {
+@media only screen and (max-width: 450px) {
     .vocabSettings .filter {
         width: 100%;
         margin: 10px auto;
     }
     .vocabSettings .filter select, .vocabSettings .filter button {
         width: 100%;
-        height: 30px;
+        height: 35px;
         margin: 3px 0px;
     }
 }
@@ -60,7 +50,6 @@
 /******** settings-input component ********/
 .settingsInput h2 {
     text-align: center;
-    font-size: 20px;
     margin-bottom: 5px;
 }
 .settingsInput div {
@@ -92,7 +81,6 @@
 .settingButtons button {
     width: 100px;
     height: 40px;
-    font-size: 18px;
 }
 .settingButtons button:first-child {
     margin-right: 10px;
@@ -108,6 +96,7 @@
         width: 100%;
     }
     .settingButtons button {
+        font-size: 18px;
         width: 100%;
         height: 50px;
     }
diff --git a/css/global.css b/css/global.css
@@ -60,13 +60,18 @@ header img {
 }
 #jsError h1 {
     margin-bottom: 5px;
-    font-size: 20px;
     color: red;
 }
 
 
 
 /******** Other elements ********/
+h1, h2 {
+    font-size: 20px;
+}
+button:not(.icon) {
+    font-size: 15px;
+}
 button:not(.icon), input, select {
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
@@ -112,3 +117,19 @@ body.dark {
 .dark a {
     color: #0080ff;
 }
+
+
+
+/******** Mobile devices ********/
+@media only screen and (max-width: 800px) {
+    h1, h2 {
+        font-size: 25px;
+    }
+    select, input, button:not(.icon) {
+        font-size: 16px;
+    }
+    main button.icon img {
+        height: 35px;
+        width: 35px;
+    }
+}
diff --git a/css/quizzer.css b/css/quizzer.css
@@ -45,8 +45,8 @@
     justify-content: center;
 }
 .quizzerButtons button {
-    width: 75px;
-    height: 25px;
+    width: 85px;
+    height: 30px;
 }
 .quizzerButtons button:first-child {
     margin-right: 10px;
@@ -83,12 +83,14 @@
         width: 100%;
         padding: 0px;
     }
+    .quizzerProgress {
+        font-size: 20px;
+    }
     .quizzerInput {
         height: 35px;
     }
     .quizzerButtons button {
         height: 50px;
-        font-size: 18px;
         width: 100%;
     }
 }
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8"/>
         <title>Spanish-Quizzer</title>
         <meta name="description" content="Quiz yourself on Spanish vocabulary and conjugations through a free and highly customizable web interface.">
-        <meta name="viewport" content="width=device-width, user-scalable=no"/>
+        <meta name="viewport" content="width=device-width">
         <link rel="icon" type="image/png" href="images/favicon-32.png">
         <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
         <link rel="stylesheet" href="css/global.css">
diff --git a/js/filtersPage.js b/js/filtersPage.js
@@ -213,8 +213,6 @@ let filterInput = Vue.component("filterInput", {
     template: `
         <div class="filtersInput" ref="container">
             <div class="verbSettings" v-show="category === 'verbs'">
-                <h1>Choose your settings and then click start.</h1>
-
                 <h2>
                     Verb Filters
                     <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
@@ -249,8 +247,6 @@ let filterInput = Vue.component("filterInput", {
 
 
             <div class="vocabSettings" v-show="category === 'vocab'">
-                <h1>Choose your settings and then click start.</h1>
-
                 <h2>
                     Vocabulary Filters
                     <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>