wip

src/components/Comics/ComicView.tsx

@@ -7,16 +7,18 @@ import {
   GridLeft,
   GridRight
 } from "../../utils/styles"
+import { MainButton } from "../../layouts/styles"
+import styled from "@emotion/styled"
 const ComicView = () => {
   const { firstCover, secondCover } = useStaticQuery(
     graphql`
       query {
-        firstCover: contentfulAsset(title: { regex: "g/Issue 1 Front/" }) {
+        firstCover: file(relativePath: { in: "IMG_0954.JPG" }) {
           id
-          title
-          createdAt
-          fluid {
-            ...GatsbyContentfulFluid
+          childImageSharp {
+            fluid {
+              ...GatsbyImageSharpFluid
+            }
           }
         }
         secondCover: contentfulAsset(title: { regex: "g/Issue 1/" }) {
@@ -31,32 +33,44 @@ const ComicView = () => {
     `
   )
   console.log(firstCover)
+  const Button = styled(MainButton)`
+    position: static;
+  `
   return (
     <Wrapper>
       <Container>
-        <TwoColumnGrid>
-          <GridLeft>
-            <Img fluid={firstCover.fluid} />
-          </GridLeft>
-          <GridRight>
+        {/* <TwoColumnGrid> */}
+        <GridLeft>
+          <Img fluid={firstCover.childImageSharp.fluid} />
+        </GridLeft>
+        {/* <GridRight>
             <Img fluid={secondCover.fluid} />
-          </GridRight>
-        </TwoColumnGrid>
-        <Paragraph>
-          The Fabulous life of Dare Dollz follows the crime-fighting adventures
-          of four young fashionable women working for a private detective
-          agency in Carnado City.
-        </Paragraph>
+          </GridRight> */}
+        {/* </TwoColumnGrid> */}
+        <Button>Download now</Button>
         <Paragraph>
-          Protecting themselves and the city that pays them is their primary
-          goal as well as keeping up their views on Open Book. Things start to
-          heat up for the girls when a new trap rapper 8 Figga rises in
-          popularity. 
+          The Dare Dollz live in the city of Coronado in the year 2050. Coronado
+          City is an affluent city leading the way in innovative technology. As
+          a result, the city consists of and attracts the wealthiest people,
+          known to set lifestyle trends the average person won't ever
+          experience. Xio, Paris, Chanel, and Bleu have no shortage of wealth or
+          beauty. They are the archetype of Coronado City. Known as social media
+          mavens, they constantly engage with their millions of followers
+          online. Broadcasting their lavish lifestyle of leisure days and
+          exciting nights full of entertainment to all their fans.
         </Paragraph>
         <Paragraph>
-          His influence on the youth is causing crimes to rise in the city that
-          they are paid to protect. And two things the dollz don’t play about is
-          their city or their money.
+          The Darek Knox Agency is known to be the most elite talent agency;
+          nothing and no one is average. The agency consists of extraordinary
+          talent and exceptional beauty. The girls are affectionately called
+          "Darek's Dolls," later coining the shortened version "Dare Dollz."
+          Darek Knox and his expansive team recruit the top students in
+          academia, athletics, and creativity at a young age to cultivate their
+          talents, making them masters of their craft. The Dare Dollz can be
+          quite the femme Fatales, a fusion of mind, muscle, and, to be frank, a
+          lot of seduction. Using these characteristics always gets the dollz
+          what they want. They can solve any problem for the right price! Just
+          remember that dollz are really expensive.
         </Paragraph>
       </Container>
     </Wrapper>

src/components/Comics/styles.ts

@@ -10,9 +10,17 @@ export const Wrapper = styled.p`
 `
 export const Paragraph = styled.p`
   font-size: 1.2rem;
-  line-height: 1.5;
+  line-height: 2.5rem;
   padding-top: 1rem;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: "Gunterz-Medium";
   /* padding-bottom: 1rem; */
+  @media (max-width: ${breakpoints.m}px) {
+    width: 100%;
+    line-height: 2rem;
+  }
 `
 export const ParagraphHeader = styled.p`
   background: linear-gradient(140deg, #1c24e9, #9acd32);

src/layouts/styles.ts

@@ -30,7 +30,30 @@ export const CartWrapper = styled.div`
     padding-top: 15px;
   }
 `
-
+export const MainButton = styled("a")`
+  background-color: #9fedff;
+  padding: 0.5rem 1rem;
+  border-width: 0.08em;
+  text-decoration: none;
+  color: black;
+  border-color: black;
+  position: fixed;
+  border-style: solid;
+  &:hover {
+    background-color: #01ff8f;
+  }
+  font-size: 2.5rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`
 export const Mobile = styled.div`
   height: 100%; /* 100% Full-height */
   width: 0; /* 0 width - change this with JavaScript */

src/pages/index.tsx

@@ -9,7 +9,7 @@ import "../css/typography.css"
 import Image from "gatsby-image"
 
 import { breakpoints } from "../utils/styles"
-import { Container, Wrapper } from "../layouts/styles"
+import { Container, MainButton, Wrapper } from "../layouts/styles"
 import { css } from "@emotion/react"
 
 export const Grid = styled.div`
@@ -43,30 +43,7 @@ export const Product = styled.div`
 const H1 = styled("h1")`
   font-size: 2.5rem;
 `
-const Button = styled("a")`
-  background-color: #9fedff;
-  padding: 0.5rem 1rem;
-  border-width: 0.08em;
-  text-decoration: none;
-  color: black;
-  border-color: black;
-  position: fixed;
-  border-style: solid;
-  &:hover {
-    background-color: #01ff8f;
-  }
-  font-size: 2.5rem;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-`
+
 const ImgHover = styled(Image)<{
   hover: boolean
 }>`
@@ -131,7 +108,7 @@ const IndexPage = () => {
       />
       <Wrapper>
         <H1>Daredollz</H1>
-        <Button href="/home">Enter</Button>
+        <MainButton href="/home">Enter</MainButton>
 
         <ImgHover
           fluid={doll5.childImageSharp.fluid}