About etc

.vscode/settings.json

@@ -1,18 +1,18 @@
 {
   "workbench.colorCustomizations": {
-    "activityBar.background": "#2f7c47",
-    "activityBar.activeBorder": "#422c74",
+    "activityBar.background": "#368e52",
+    "activityBar.activeBorder": "#c7bae5",
     "activityBar.foreground": "#e7e7e7",
     "activityBar.inactiveForeground": "#e7e7e799",
-    "activityBarBadge.background": "#422c74",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "titleBar.activeBackground": "#215732",
-    "titleBar.inactiveBackground": "#21573299",
+    "activityBarBadge.background": "#c7bae5",
+    "activityBarBadge.foreground": "#15202b",
+    "titleBar.activeBackground": "#28693d",
+    "titleBar.inactiveBackground": "#28693d99",
     "titleBar.activeForeground": "#e7e7e7",
     "titleBar.inactiveForeground": "#e7e7e799",
-    "statusBar.background": "#215732",
-    "statusBarItem.hoverBackground": "#2f7c47",
+    "statusBar.background": "#28693d",
+    "statusBarItem.hoverBackground": "#368e52",
     "statusBar.foreground": "#e7e7e7"
   },
-  "peacock.color": "#215732"
+  "peacock.color": "#28693d"
 }

components/foot.js

@@ -4,7 +4,15 @@ import css from "./foot.scss";
 export default props => {
   return (
     <div className={css.foot}>
-      <Link href="/"><a>Home</a></Link> <Link href="/about"><a>About</a></Link>
+      <div className={css.mid}>
+        <Link href="/">
+          <a>Home</a>
+        </Link>{" "}
+        <Link href="/about">
+          <a>About</a>
+        </Link>
+      </div>
+      <div className={css.sub}>Made with Love <img src={"/icons/favorite-7.svg"} /></div>
     </div>
   );
 };

components/foot.scss

@@ -1,10 +1,11 @@
 .foot {
-  font-size: 1.5em;
   color: white;
   min-height: 100px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-top: 1em;
 
   a {
     color: white;
@@ -16,7 +17,21 @@
     text-decoration: underline;
   }
 
-  .fleuron {
-    font-size: 1.5em;
+  .mid {
+    margin-bottom: 0.7em;
+  }
+
+  .sub {
+    display: flex;
+    align-items: center;
+    font-size: 0.7em;
+    color: dimgray;
+    margin-bottom: 2em;
+
+    img {
+      filter: invert(0.4);
+      height: 0.9em;
+      padding-left: 8px;
+    }
   }
 }

components/heading.scss

@@ -1,6 +1,6 @@
 .root {
   color: white;
-  padding: 0.5rem 2rem;
+  padding: 0.5rem 1rem;
   display: flex;
   align-items: center;
 
@@ -17,7 +17,6 @@
 }
 
 .branding {
-  font-size: 2em;
 
   img {
     max-height: 2.5rem;

components/layout.js

@@ -3,7 +3,7 @@ import css from "./layout.scss";
 import { useStoreState } from "easy-peasy";
 
 import Heading from "../components/heading";
-import Search from "../components/search"
+import Search from "../components/search";
 import Foot from "../components/foot";
 
 const Layout = props => {
@@ -17,7 +17,12 @@ const Layout = props => {
           content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
         /> */}
         <meta name="viewport" content="width=768"></meta>
-        <link rel="icon" href="/favicon.ico" />
+        {/* <link rel="icon" href="/favicon.ico" /> */}
+        <link
+          rel="icon"
+          type="image/png"
+          href="/icons/favorite-7-240.png"
+        />
         <link rel="stylesheet" href="/css/normalize.css"></link>
       </Head>
 

components/layout.scss

@@ -28,7 +28,7 @@
 :global {
   html {
     height: 100%;
-    font-size: 16px;
+    font-size: 32px;
   }
 
   body {
@@ -40,10 +40,6 @@
     background-color: black;
   }
 
-  footer {
-
-  }
-
   h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
   }
@@ -93,4 +89,8 @@
     content: "❧";
     content: "&";
   }
+
+  .invert {
+    filter: invert(1);
+  }
 }

components/quotation.scss

@@ -1,15 +1,13 @@
 @import "../sass/breakpoints.scss";
 
 .quotation {
-  padding-top: 3em;
-  padding-bottom: 3em;
+
 
   blockquote {
     text-align: center;
-    max-width: 1024px;
+    max-width: 960px;
     margin: auto;
-    padding: 16px;
-    font-size: 2em;
+    padding: 1em;
 
     // @include for-size(tablet-portrait-up) {
     //   font-size: 1.3rem;

components/search.js

@@ -3,7 +3,9 @@ import css from "./search.scss";
 export default props => {
   return (
     <div className={css.root}>
-      <form><input type="search" placeholder="Search..."></input></form>
+      <form method="get" action="/search">
+        <input type="search" placeholder="Search..." name="query"></input>
+      </form>
     </div>
   );
-};
+};

components/search.scss

@@ -9,10 +9,9 @@
   }
 
   input[type=search] {
-    font-size: 2em;
     width: 100%;
     height: 100%;
     border: none;
-    padding: 0rem 2rem;
+    padding: 0rem 1rem;
   }
 }

pages/about.js

@@ -0,0 +1,12 @@
+import Layout from "../components/layout";
+import css from "./about.scss";
+
+const About = props => {
+  return (
+    <Layout title={"About — Quoke"}>
+      <div className={css.about}>About</div>
+    </Layout>
+  );
+};
+
+export default About;

pages/index.js

@@ -33,7 +33,7 @@ const Home = props => {
           </div>
         ))}
 
-        <div>
+        <div className={css.pagination}>
           <Link href="/page/[page]" as="/page/2">
             <a>Next &gt;</a>
           </Link>

pages/index.scss

@@ -4,27 +4,9 @@
   .quote {
     margin-bottom: 2em;
     text-align: left;
-    font-size: 2em;
   }
-}
-
-.quotes-root {
-  font-size: 14px;
-  display: flex;
-  justify-content: center;
-  margin-left: 16px;
-  margin-right: 16px;
-}
 
-.topic-link {
-  a {
-    margin-right: 6px;
-    margin-bottom: 6px;
-    text-decoration: none;
-    // font-weight: bold;
-    padding: 4px 8px;
-    // background-color: #333;
-    display: inline-block;
-    border: 1px solid #333;
+  .pagination {
+    text-align: center;
   }
 }

pages/page/[page].js

@@ -36,7 +36,7 @@ const Pagination = props => {
           </div>
         ))}
 
-        <div>
+        <div className={css.pagination}>
           {page === "2" ? (
             <Link href="/">
               <a>&lt; Previous</a>

pages/quote/[slug].scss

@@ -1,13 +1,4 @@
 .root {
-  width: 100%;
-
-    .title {
-    padding: 2em 2em;
-  }
-  .info {
-    text-align: center;
-    font-size: 0.7em;
-    margin-top: 1.5em;
-    margin-bottom: 1.5em;
-  }
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
 }