spanish-quizzer

commit 8b7249f863129e5d811a05ebbdc86d7c9fd5d4ef
parent 291abf8f3b4c297c848d706c54292a28720773b6
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Tue, 13 Oct 2020 17:22:04 -0700

Improve noscript message.

Diffstat:
M
css/global.css
 | 
14
++++++++++----
M
css/home.css
 | 
2
+-
M
css/reference.css
 | 
2
+-
M
css/settings.css
 | 
3
+++
M
index.html
 | 
6
+++++-
M
reference.html
 | 
6
+++++-

6 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/css/global.css b/css/global.css
@@ -39,13 +39,19 @@ body {
     grid-template-columns: 1fr auto 1fr;
 }
 
+
+
+/******** Noscript styles ********/
 #jsError {
     grid-row: 2;
-    color: red;
-    font-weight: normal;
-    font-size: 20px;
-    text-align: center;
+    margin-top: 15px;
     margin-bottom: 10px;
+    text-align: center;
+}
+#jsError h1 {
+    margin-bottom: 5px;
+    font-size: 20px;
+    color: red;
 }
 
 
diff --git a/css/home.css b/css/home.css
@@ -1,5 +1,5 @@
 /* Header */
-#home h1 {
+#home h1:not(#jsError h1) {
     font-size: 20px;
     font-weight: bold;
     margin-top: 15px;
diff --git a/css/reference.css b/css/reference.css
@@ -4,7 +4,7 @@ main {
 }
 
 /* Heading */
-h1 {
+h1:not(#jsError h1) {
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 20px;
diff --git a/css/settings.css b/css/settings.css
@@ -4,6 +4,9 @@
     flex-direction: column;
     align-items: center;
 }
+#settings[hidden] {
+    display: none;
+}
 #settings h1 {
     font-size: 16px;
     font-weight: normal;
diff --git a/index.html b/index.html
@@ -25,7 +25,11 @@
 
             <main>
                 <noscript>
-                    <h1 id="jsError">You must have JavaScript enabled to run Spanish-Quizzer.</h1>
+                    <div id="jsError">
+                        <h1>You must have JavaScript enabled to run Spanish-Quizzer.</h1>
+                        <p>Spanish-Quizzer uses JavaScript to load vocab, apply filters, and check your answers.</p>
+                        <p>You can still view the <a href="vocab/">vocab sets</a>, but you can't use the Quizzer or the Reference Tables.</p>
+                    </div>
                 </noscript>
     
                 <div id="home" v-show="state === 'home'" hidden>
diff --git a/reference.html b/reference.html
@@ -21,7 +21,11 @@
         
             <main>
                 <noscript>
-                    <h1 id="jsError">You must have JavaScript enabled to run Spanish-Quizzer.</h1>
+                    <div id="jsError">
+                        <h1>You must have JavaScript enabled to run Spanish-Quizzer.</h1>
+                        <p>Spanish-Quizzer uses JavaScript to load vocab, apply filters, and check your answers.</p>
+                        <p>You can still view the <a href="vocab/">vocab sets</a>, but you can't use the Quizzer or the Reference Tables.</p>
+                    </div>
                 </noscript>
     
                 <h1 hidden>Reference Tables</h1>