refactor: change layout

jnjcomu · Dec 28, 2019 · fcc132a · fcc132a
1 parent 3aa8ddb
commit fcc132a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -8,15 +8,15 @@ class Navbar extends React.Component {
       <Nav>
         <Brand>JnJ Communications</Brand>
         <div>
-          <ul>
+          <ItemWrapper>
             <Item>Introduce</Item>
             <Link to="/stacks">
               <Item>What we used</Item>
             </Link>
             <Link to="/products">
               <Item>What we made</Item>
             </Link>
-          </ul>
+          </ItemWrapper>
         </div>
       </Nav>
     )
@@ -32,6 +32,10 @@ const Nav = styled.nav`
   display: flex;
   justify-content: flex-end;
   align-items: center;
+
+  @media (max-width: 1100px) {
+    justify-content: center;
+  }
 `
 
 const Brand = styled.h1`
@@ -43,6 +47,16 @@ const Brand = styled.h1`
   letter-spacing: -1px;
   margin: 0;
   cursor: default;
+
+  @media (max-width: 1100px) {
+    position: unset;
+  }
+`
+
+const ItemWrapper = styled.ul`
+  @media (max-width: 1100px) {
+    display: none;
+  }
 `
 
 const Item = styled.span`

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -26,7 +26,7 @@ class Home extends React.Component {
             </Button>
           </ButtonWrapper>
         </IdentityWrapper>
-        <Illust
+        <IllustBox
           src={DeveloperIllust}
           alt="Thingking Code"
         />
@@ -48,8 +48,13 @@ const Container = styled.div`
   flex-wrap: wrap;
 `
 
-const Illust = styled.img`
+const IllustBox = styled.img`
   height: 37rem;
+
+  @media (max-width: 900px) {
+    width: 100%;
+    height: auto;
+  }
 `
 
 const IdentityWrapper = styled.div`

diff --git a/src/pages/Products.js b/src/pages/Products.js
@@ -114,7 +114,7 @@ const Container = styled.div`
 `
 
 const Image = styled.img`
-  width: 25rem;
+  width: 50vw;
 
   @media (max-width: 805px) {
     display: none;

diff --git a/src/pages/Stacks.js b/src/pages/Stacks.js
@@ -153,7 +153,7 @@ const Container = styled.div`
 `
 
 const Image = styled.img`
-  width: 25rem;
+  width: 30rem;
 
   @media (max-width: 690px) {
     display: none;