syled componenets

.next/build-manifest.json

@@ -16,21 +16,13 @@
       "static/runtime/webpack.js",
       "static/runtime/main.js"
     ],
-    "/character/[slug]": [
-      "static/runtime/webpack.js",
-      "static/runtime/main.js"
-    ],
     "/house/[name]": [
       "static/runtime/webpack.js",
       "static/runtime/main.js"
     ],
     "/index": [
       "static/runtime/webpack.js",
       "static/runtime/main.js"
-    ],
-    "/next/dist/pages/_error": [
-      "static/runtime/webpack.js",
-      "static/runtime/main.js"
     ]
   }
 }

.next/cache/autodll-webpack-plugin/package.json.hash

@@ -1 +1 @@
-{"name":"ASOIAF","version":"1.0.0","description":"","main":"index.js","dependencies":{"isomorphic-unfetch":"^3.0.0","lodash":"^4.17.15","next":"^9.0.2","now":"^15.8.7","react":"^16.8.6","react-dom":"^16.8.6","styled-components":"^4.3.2"},"devDependencies":{"babel-plugin-styled-components":"^1.10.6"},"scripts":{"dev":"next","build":"next build","start":"next start"},"keywords":[],"author":"","license":"ISC","readme":"ERROR: No README data found!","_id":"ASOIAF@1.0.0"}
+{"name":"ASOIAF","version":"1.0.0","description":"","main":"index.js","dependencies":{"isomorphic-unfetch":"^3.0.0","lodash":"^4.17.15","next":"^9.0.2","now":"^15.8.7","polished":"^3.4.1","react":"^16.8.6","react-dom":"^16.8.6","styled-components":"^4.3.2"},"devDependencies":{"babel-plugin-styled-components":"^1.10.6"},"scripts":{"dev":"next","build":"next build","start":"next start"},"keywords":[],"author":"","license":"ISC","readme":"ERROR: No README data found!","_id":"ASOIAF@1.0.0"}

.next/server/pages-manifest.json

@@ -1 +1 @@
-{"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/character/[slug]":"static/development/pages/character/[slug].js","/house/[name]":"static/development/pages/house/[name].js","/index":"static/development/pages/index.js","/next/dist/pages/_error":"static/development/pages/next/dist/pages/_error.js","/":"static/development/pages/index.js"}
+{"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/house/[name]":"static/development/pages/house/[name].js","/index":"static/development/pages/index.js","/":"static/development/pages/index.js"}

components/Character/index.jsx → components/CharacterLink/index.jsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 
-export const Character = ({ slug, name }) => (
+export const CharacterLink = ({ slug, children }) => (
   <>
     <Link href="/character/[slug]" as={`/character/${slug}`}>
-      <a>{name}</a>
+      {children}
     </Link>
   </>
 );

elements/CharacterCard.jsx

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { Card } from ".";
+import { CharacterLink } from "../components/CharacterLink";
+const anonymous = `https://themerkle.com/wp-content/uploads/2017/02/shutterstock_153830195.jpg`;
+const CharName = styled.h4`
+  font-size: 16px;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-weight: 700;
+  padding: 0 10px;
+  a {
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-decoration: none;
+  }
+`;
+
+const Avatar = styled.img.attrs(props => ({
+  src: props.src
+}))`
+  min-width: 100%;
+  min-height: 100%;
+  min-width: 100px;
+  max-height: 100px;
+  marginautoborder-raius: 50%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+`;
+const AvatarContainer = styled.div`
+  position: relative;
+  margin: auto;
+  margin-top: 10px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+`;
+
+const ColumnFlex = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Pointer = styled.a`
+  cursor: pointer;
+`;
+
+const NormalCard = Card("div");
+export default props => {
+  return (
+    <NormalCard mb={30}>
+      <CharacterLink {...props}>
+        <Pointer>
+          <ColumnFlex>
+            <AvatarContainer>
+              <Avatar src={props.image || anonymous} />
+            </AvatarContainer>
+            <CharName>{props.name}</CharName>
+          </ColumnFlex>
+        </Pointer>
+      </CharacterLink>
+    </NormalCard>
+  );
+};

elements/PageHeader.jsx

@@ -13,6 +13,7 @@ const AppHeader = styled.header`
   width: 100%;
   top: 0;
   left: 0;
+  z-index: 10;
 `;
 
 const Logo = styled.div`

elements/index.jsx

@@ -1,4 +1,5 @@
 import styled, { css, createGlobalStyle } from "styled-components";
+import { lighten } from "polished";
 
 export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
@@ -74,6 +75,18 @@ export const PageSection = styled.section`
     border-top: 3px solid #dfdfdf;
   }
 `;
+export const SectionTitle = styled.h4`
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 20px 0;
+  text-transform: capitalize;
+`;
+export const PageTitle = styled.h4`
+  font-size: 32px;
+  font-weight: 700;
+  margin: 15px 0;
+  text-transform: capitalize;
+`;
 
 export const Row = styled.div`
   display: flex;
@@ -89,18 +102,33 @@ export const Col = styled.div`
   max-width: ${props => (props.cols / 12) * 100}%;
 `;
 
-export const Label = styled.a`
+export const Label = styled.a.attrs(props => ({
+  color: props.theme[props.color || "secondary"] || props.theme.secondary
+}))`
   padding: 0 10px;
   height: 30px;
   font-size: 12px;
   border-radius: 3px;
-  border: 1px solid ${props => props.theme.secondary};
-  color: ${props => props.theme.secondary};
+  border: 1px solid ${props => props.color};
+  color: ${props => props.color};
   display: inline-flex;
   justify-content: center;
   align-items: center;
   margin: 5px;
-  background: #d3effe;
+  background: ${props => lighten(0.59, props.color)};
   cursor: pointer;
   text-decoration: none;
+  &:hover {
+    color: ${props => props.theme.colors.light};
+    background: ${props => props.color};
+  }
+`;
+
+export const Qoute = styled.blockquote`
+  border-radius: 2px;
+  background: ${props => lighten(0.05, props.theme.border)};
+  padding: 15px;
+  font-weight: 700;
+  font-size: 18px;
+  margin: 0 0 15px 0;
 `;

elements/theme.js

@@ -5,6 +5,7 @@ export default {
     warm: `#E76822`,
     light: `#FFFFFF`,
     cool: `#0068A0`,
+    green: `#16a177`,
     dark: `#262324`
   },
   get primary() {
@@ -13,6 +14,12 @@ export default {
   get secondary() {
     return this.colors.cool;
   },
+  get sub() {
+    return this.colors.warm;
+  },
+  get sucess() {
+    return this.colors.green;
+  },
   get border() {
     return this.colors.divider;
   }

package.json

@@ -8,6 +8,7 @@
     "lodash": "^4.17.15",
     "next": "^9.0.2",
     "now": "^15.8.7",
+    "polished": "^3.4.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-components": "^4.3.2"