code answer styling updates

package.json

@@ -23,8 +23,7 @@
     "redux": "^3.7.2",
     "redux-firestore": "^0.2.8",
     "redux-saga": "^0.16.0",
-    "reselect": "^3.0.1",
-    "reset-css": "^2.2.1"
+    "reselect": "^3.0.1"
   },
   "scripts": {
     "start": "NODE_PATH=src react-scripts start",

public/index.html

@@ -33,7 +33,9 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div class="container">
+      <div id="root"></div>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/components/Answer/Answer.component.js

@@ -68,7 +68,7 @@ export default class Answer extends PureComponent {
 
         const content = (
             <div className={containerClasses}>
-                <span className={`Answer__question-number`}>
+                <span className={`Answer__question-number`} aria-hidden={true}>
                     {letterMap[answerNumber]}
                 </span>
                 {onChange && (

src/components/Answer/Answer.css

@@ -8,6 +8,18 @@
     transition: border-color .2s;
 }
 
+@media (max-width: 600px) {
+    .Answer {
+        padding: 16px
+    }
+}
+
+@media (max-width: 600px) {
+    .Answer__text {
+        font-size: 1.4rem;
+    }
+}
+
 .Answer.--theme-blue-outline {
     border-color: var(--blue)
 }
@@ -26,7 +38,7 @@
     position: absolute;
     top: 4px;
     left: 4px;
-    font-size: .625rem;
+    font-size: 1rem;
     line-height: 1;
     text-transform: uppercase;
     color: #B3B3B3;

src/components/CodeFigure/CodeFigure.css

@@ -1,10 +1,13 @@
+.CodeFigure {
+    overflow-x: auto;
+}
+
 .CodeFigure > pre {
     margin: 0;
 }
 
 .CodeFigure .hljs {
     display: block;
-    overflow-x: auto;
     background: #2b2b2b;
     padding: 20px 15px;
     border-radius: 5px;

src/components/Completed/CompletedHeader/CompletedHeader.css

@@ -10,14 +10,14 @@
 
 .CompletedHeader__title {
     color: var(--very-dark-blue);
-    font-size: 2rem;
+    font-size: 3.2rem;
     line-height: 1.3;
     margin-bottom: 40px;
     font-weight: 900;
 }
 
 .CompletedHeader__coding-strength {
-    font-size: 1.5rem;
+    font-size: 2.4rem;
     line-height: 1.3;
     margin-bottom: 20px;
 }

src/components/Completed/CompletedResultsList/CompletedResultsList.css

@@ -49,7 +49,7 @@
 .CompletedResultsList__feedback-title,
 .CompletedResultsList__answer-title {
     font-weight: 700;
-    font-size: .8rem;
+    font-size: 1.3rem;
     margin-bottom: 4px;
 }
 

src/components/Completed/Results/Results.css

@@ -1,5 +1,5 @@
 .Results__title {
-    font-size: 2rem;
+    font-size: 3.2rem;
     color: var(--dark-gray);
     margin-bottom: 40px;
     font-weight: 900

src/components/EmailCapture/EmailCapture/EmailCapture.css

@@ -17,7 +17,7 @@
     color: var(--very-dark-blue);
     font-weight: 800;
     text-align: center;
-    font-size: 2rem;
+    font-size: 3.2rem;
     margin-bottom: 10px;
 }
 

src/components/NameCapture/NameCapture/NameCapture.css

@@ -15,7 +15,7 @@
 
 .NameCapture__title {
     text-align: center;
-    font-size: 2rem;
+    font-size: 3.2rem;
     margin-bottom: 40px;
 }
 

src/components/Question/Question.component.js

@@ -15,7 +15,7 @@ export default class Question extends PureComponent {
         const { question } = this.props;
 
         return (
-            <div className={`Question`}>
+            <div className={`Question`} aria-hidden={true}>
                 <Markdown>{question}</Markdown>
             </div>
         );

src/components/Quiz/Quiz.css

@@ -1,43 +1,32 @@
-.Quiz {
-
-}
-
 .Quiz__content-container {
-    padding: 0 225px;
     display: flex;
     justify-content: center;
 }
 
-@media (max-width: 900px) {
-    .Quiz__content-container {
-        padding: 0 150px;
-    }
-}
-
 @media (max-width: 600px) {
     .Quiz__content-container {
-        padding: 0 75px;
+        display: block;
     }
 }
 
 .Quiz__title {
-    font-size: 1.5rem;
+    font-size: 2.4rem;
     line-height: 1;
     color: var(--very-dark-blue);
     font-weight: 700;
-    padding: 35px 20px;
+    padding: 35px 0;
     margin-bottom: 20px;
 }
 
 @media (max-width: 600px) {
     .Quiz__title {
-        font-size: 1.2rem;
-        padding: 25px 20px;
+        font-size: 2rem;
+        padding: 25px 0;
     }
 }
 
 .Quiz__progress-indicator {
     position: absolute;
     top: 0;
-    right: 20px;
+    right: 0;
 }

src/components/QuizProgressIndicator/QuizProgressIndicator.css

@@ -6,18 +6,24 @@
     justify-content: center;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1050px) {
     .QuizProgressIndicator {
         transform: scale(.67);
         transform-origin: 100% 0;
         transition: transform .25s;
     }
 }
 
+
+@media (max-width: 960px) {
+    .QuizProgressIndicator {
+        transform: scale(.5);
+    }
+}
+
 @media (max-width: 600px) {
     .QuizProgressIndicator {
-        transform: scale(.3);
-        transform-origin: 100% 0;
+        transform: scale(.4);
     }
 }
 
@@ -46,8 +52,8 @@
     position: relative;
     color: var(--dark-gray);
     font-weight: 100;
-    font-size: 32px;
-    line-height: 32px;
+    font-size: 3.2rem;
+    line-height: 3.2rem;
 }
 
 .QuizProgressIndicator .QuizProgressIndicator__total-answers {

src/components/QuizQuestion/QuizQuestion.component.js

@@ -42,7 +42,7 @@ export default class QuizQuestion extends PureComponent {
 
         const active = userAnswers.length + 1 === questionNumber;
 
-        const fieldsetClasses = classNames({
+        const questionClasses = classNames(`QuizQuestion`, {
             [`visuallyhidden`]: !active,
         });
 
@@ -51,13 +51,14 @@ export default class QuizQuestion extends PureComponent {
         });
 
         return (
-            <fieldset className={fieldsetClasses}>
-                <div className={`QuizQuestion`}>
-                    {questionNumber === 1 && (
-                        <p
-                            className={`QuizQuestion__introduction`}
-                        >{`Thanks ${name}! Let's get started...`}</p>
-                    )}
+            <div className={questionClasses}>
+                {questionNumber === 1 && (
+                    <p
+                        className={`QuizQuestion__introduction`}
+                    >{`Thanks ${name}! Let's get started...`}</p>
+                )}
+                <fieldset>
+                    <legend className={`visuallyhidden`}>{question}</legend>
                     <div className={`QuizQuestion__question`}>
                         <Question question={question} />
                     </div>
@@ -89,8 +90,8 @@ export default class QuizQuestion extends PureComponent {
                             {`Continue`}
                         </ActionButton>
                     </div>
-                </div>
-            </fieldset>
+                </fieldset>
+            </div>
         );
     }
 }

src/components/QuizQuestion/QuizQuestion.css

@@ -6,15 +6,15 @@
 
 .QuizQuestion__introduction {
     margin-bottom: 40px;
-    font-size: 2rem;
+    font-size: 3.2rem;
     color: var(--very-dark-blue);
     line-height: 1.2;
     font-weight: 700;
     text-align: center;
 }
 
 .QuizQuestion__question {
-    margin-bottom: 40px;
+    margin-bottom: 24px;
     text-align: center;
 }
 
@@ -24,37 +24,34 @@
     }
 }
 
-
 @media (max-width: 600px) {
     .QuizQuestion__question {
         margin-bottom: 20px;
     }
 }
 
-
-
 .QuizQuestion__question p {
-    font-size: 2rem;
+    font-size: 3.2rem;
 }
 
 @media (max-width: 900px) {
     .QuizQuestion__question p {
-        font-size: 1.6rem;
+        font-size: 2.5rem;
     }
 }
 
 
 @media (max-width: 600px) {
     .QuizQuestion__question p {
-        font-size: 1.4rem;
+        font-size: 2.2rem;
     }
 }
 
 
 .QuizQuestion__code-figure {
     display: flex;
     justify-content: center;
-    margin: 20px 0;
+    margin-bottom: 24px;
 }
 
 
@@ -73,6 +70,7 @@
 
 .QuizQuestion__answers-list > li {
     margin: 0;
+    overflow-x: auto;
 }
 
 .QuizQuestion__answers-list.--grid {

src/components/TextInput/TextInput.css

@@ -6,13 +6,12 @@
     box-sizing: border-box;
     width: 100%;
     border: 2px solid #F1F1F1;
-    height: 56px;
-    font-size: 1rem;
-    line-height: 56px;
+    font-size: 1.6rem;
+    line-height: 1;
     background-color: #F7F7F7;
     border-radius: 5px;
     transition: border-color .2s;
-    padding: 0 20px;
+    padding: 20px;
     display: block;
 }
 

src/index.css

@@ -10,8 +10,6 @@
 }
 
 body {
-    margin: 0;
-    padding: 0;
     font-family: 'Lato', sans-serif;
 }
 
@@ -55,6 +53,10 @@ p + p {
     margin-top: 20px
 }
 
+fieldset {
+    min-width: 0;
+}
+
 .visuallyhidden {
     position: absolute;
     overflow: hidden;

src/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "reset-css";
 import "./index.css";
 
 import { Provider } from "react-redux";

src/store/quiz/quiz.actions.js

@@ -58,6 +58,8 @@ function* addAnswer() {
 
     yield put(setSelectedAnswerAction());
 
+    yield call(window.scrollTo, 0,0);
+
     if (answers.length === questions.length) {
         yield put(setStateAction(`emailCapture`));
     }

src/store/quiz/quiz.reducer.js

@@ -13,8 +13,8 @@ export default createReducer(
         state: `nameCapture`,
         selectedAnswer: null,
         answers: [],
-        email: `[email protected]`,
-        name: `Dan`,
+        email: ``,
+        name: ``,
     },
     {
         [setStateAction().type]: (st, { state }) => ({