Merge branch 'develop'

phocks · Nov 20, 2019 · d135129 · d135129 · vercel · Nov 20, 2019
2 parents 503766f + 93c6652
commit d135129
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 122 deletions.
diff --git a/components/info.scss b/components/info.scss
@@ -1,5 +1,5 @@
 .root {
-  text-align: right;
+  // text-align: right;
   font-size: 12px;
   color: #505050;
 }
diff --git a/components/layout.js b/components/layout.js
@@ -18,12 +18,11 @@ const Layout = props => {
           content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
         />
         <link rel="icon" href="/favicon.ico" />
-        <link rel="stylesheet" type="text/css" href="/css/normalize.css"></link>
+        <link rel="stylesheet" href="/css/normalize.css"></link>
       </Head>
 
       <div className={css.container}>
         {/* <Heading /> */}
-        <p></p>
         {children}
         {/* <Footer /> */}
       </div>

diff --git a/components/layout.scss b/components/layout.scss
@@ -2,21 +2,17 @@
 
 .container {
   min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 
 :global {
   html {
     height: 100%;
+    overflow: hidden;
   }
   body {
     margin: 0;
     height: 100%;
     font-family: "Roboto", sans-serif;
-    // font-family: "IM Fell English", serif;
-    // font-family: 'Montserrat', sans-serif;
     line-height: 1.5;
     color: #404040;
   }
@@ -38,34 +34,4 @@
   #__next {
     height: 100%;
   }
-  main {
-    min-height: 100%;
-    flex: 1;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    padding-left: 36px;
-    padding-right: 16px;
-    display: flex;
-    justify-content: center;
-  }
-  main.mid {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  main.article {
-    display: flex;
-    justify-content: center;
-  }
-  main section {
-    max-width: 590px;
-    width: 100%;
-    font-size: 20px;
-    // position: relative;
-  }
-  main.center {
-    display: flex;
-    justify-content: center;
-  }
 }
diff --git a/components/quotation.js b/components/quotation.js
@@ -1,24 +1,26 @@
 import css from "./quotation.scss";
-import Link  from "next/link"
+import Link from "next/link";
 
 const Quotation = props => {
   const { quote } = props;
   return (
     <div className={css.root}>
-      <h2 className={css.quotationMark}>
-        <Link href="/quote/[slug]" as={"/quote/" + quote.slug}>
-          <a>&ldquo;</a>
-        </Link>
-      </h2>
-      <p className={css.text}>{quote.text}</p>
-      <small>
-        <div className={css.citation}>
-          <p className={css.author}>
-            &mdash;{quote.author}
-            {props.source && <em className={css.source}>, {quote.source}</em>}
-          </p>
-        </div>
-      </small>
+      <div className={css.container}>
+        {/* <h2 className={css.quotationMark}>
+          <Link href="/quote/[slug]" as={"/quote/" + quote.slug}>
+            <a>&ldquo;</a>
+          </Link>
+        </h2> */}
+        <p className={css.text}>{quote.text}</p>
+        <small>
+          <div className={css.citation}>
+            <p className={css.author}>
+              &mdash;{quote.author}
+              {props.source && <em className={css.source}>, {quote.source}</em>}
+            </p>
+          </div>
+        </small>
+      </div>
     </div>
   );
 };

diff --git a/components/quotation.scss b/components/quotation.scss
@@ -1,15 +1,21 @@
 .root {
+  display: flex;
   font-family: "IM Fell English", serif;
-  position: relative;
+  font-size: 20px;
+  margin-left: 16px;
+  margin-right: 16px;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.container {
+  max-width: 590px;
 }
 
 .quotationMark {
-  position: absolute;
-  left: -25px;
-  top: -2px;
   margin: 0;
 
   a {
     text-decoration: none;
   }
-}
+}
diff --git a/components/title.js b/components/title.js
@@ -1 +1,10 @@
-import css from "./title.scss"
+import css from "./title.scss";
+
+export default props => {
+  const { text } = props;
+  return (
+    <div className={css.root}>
+      <div className={css.title}>{text}</div>
+    </div>
+  );
+};
diff --git a/components/title.scss b/components/title.scss
@@ -0,0 +1,14 @@
+.root {
+  display: flex;
+  justify-content: center;
+  margin-left: 16px;
+  margin-right: 16px;
+  margin-top: 32px;
+}
+
+.title {
+  max-width: 590px;
+  flex: 1;
+  font-weight: bold;
+  font-size: 28px;
+}
diff --git a/pages/index.js b/pages/index.js
@@ -8,6 +8,7 @@ import absoluteUrl from "next-absolute-url";
 
 import Quotation from "../components/quotation";
 import Info from "../components/info";
+import Title from "../components/title";
 
 import css from "./index.scss";
 
@@ -16,18 +17,12 @@ const Home = props => {
   setTitle("Quoke");
 
   return (
-    <>
-      <center>
-        <h2>quoke</h2>
-      </center>
-      <main className={css.root}>
-        <section>
-          <Quotation quote={props.randomQuote} />
-          <hr />
-          <Info quote={props.randomQuote} />
-        </section>
-      </main>
-    </>
+    <div className={css.root}>
+      <Title text="/quoke" />
+      <Quotation quote={props.randomQuote} />
+      <hr />
+      {/* <Info quote={props.randomQuote} /> */}
+    </div>
   );
 };
 

diff --git a/pages/index.scss b/pages/index.scss
@@ -1,4 +1,3 @@
 .root {
-  display: flex;
-  justify-content: center;
+
 }
diff --git a/pages/login.js b/pages/login.js
@@ -4,6 +4,8 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 import { useStoreActions } from "easy-peasy";
 
+import css from "./login.scss"
+
 const Login = props => {
   const router = useRouter();
   const [userMessage, setUserMessage] = useState();
@@ -52,51 +54,16 @@ const Login = props => {
             name="username"
             placeholder="Username"
             required
-            className="btn"
+            className={css.input}
           />
           <input
             type="password"
             name="password"
             placeholder="Password"
             required
-            className="btn"
+            className={css.input}
           />
-          <input type="submit" value="Login" className="btn" />
-          {/* <div>
-            <TextField
-              id="username"
-              name="username"
-              label="Username"
-              margin="normal"
-              variant="filled"
-              required
-              className={classes.textField}
-            />
-          </div>
-          <div>
-            <TextField
-              id="password"
-              name="password"
-              type="password"
-              label="Password"
-              margin="normal"
-              variant="filled"
-              required
-              className={classes.textField}
-              
-            />
-          </div>
-
-          <div className="button-container">
-            <Button
-              type="submit"
-              variant="contained"
-              color="default"
-              fullWidth={false}
-            >
-              Login
-            </Button>
-          </div> */}
+          <input type="submit" value="Login" className={css.input} />
         </form>
         <p>
           <small>
@@ -110,7 +77,7 @@ const Login = props => {
       </main>
       <style jsx>
         {`
-          .btn {
+          .input {
             width: 100%;
             max-width: 480px;
             padding: 12px;
@@ -124,15 +91,6 @@ const Login = props => {
             text-decoration: none;
             background: none;
           }
-           {
-            /* .button-container {
-            display: flex;
-            justify-content: flex-end;
-          }
-          .button-container button {
-            margin: 3px;
-          } */
-          }
         `}
       </style>
     </>

diff --git a/pages/login.scss b/pages/login.scss
@@ -0,0 +1,14 @@
+.input {
+  width: 100%;
+  max-width: 480px;
+  padding: 12px;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  margin: 5px 0;
+  opacity: 0.85;
+  display: block;
+  font-size: 17px;
+  line-height: 20px;
+  text-decoration: none;
+  background: none;
+}
diff --git a/pages/register.js b/pages/register.js
@@ -55,7 +55,7 @@ const Register = props => {
       <main className={"mid"}>
         {userMessage && <div>{userMessage}</div>}
         <form action="/api/register" method="post" onSubmit={handleSubmit}>
-          <input type="text" name="username" placeholder="Username" required />
+          <input type="text" name="username" placeholder="Username" minLength="3" required />
           <input type="email" name="email" placeholder="Email" required />
           <input
             type="password"