Styling improvements on About page; might need to switch to FlexBox f…

…or simple responsive rendering
shortedapp · Aug 22, 2018 · 12a9576 · 12a9576
1 parent 3ff01a1
commit 12a9576
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 34 deletions.
diff --git a/src/components/AppViewWrapper/style.js b/src/components/AppViewWrapper/style.js
@@ -5,8 +5,9 @@ export const Wrapper = styled.div`
     justify-content: center;
     align-items: center;
     width: 100%;
+    margin: 20px auto;
     flex-direction: column;
-    max-width: ${props => (props.maxWidth ? props.maxWidth : 5000)}px;
+    max-width: 1200px;
     min-height: 280px;
     justify-content: center;
     background-image: ${props => `url(${props.background})`};

diff --git a/src/views/aboutpage/components/AboutHeader/style.js b/src/views/aboutpage/components/AboutHeader/style.js
@@ -40,11 +40,10 @@ export const HeroButtonWrapper = styled.a`
 export const Wrapper = styled.div`
     display: grid;
     grid-gap: 20px;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 2fr 3fr;
     grid-template-areas: 'hero-title hero-image';
-    margin-right: 100px;
-    margin-left: 100px;
-    margin-top: 250px;
+    margin: 250px 20px;
+    max-width: 1200px;
     opacity: ${props => props.opacity};
     transition: ${props => `${props.duration}ms ease-in-out`};
     transition-property: opacity, transform;
@@ -53,55 +52,47 @@ export const Wrapper = styled.div`
 
 export const HeroWrapper = styled.div`
     grid-area: hero-image;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
     width: 100%;
 `;
 export const HeroTitleWrapper = styled.div`
     grid-area: hero-title;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 3fr 1fr 1fr;
-    grid-template-areas:
-        'hero-title'
-        'hero-description'
-        'todo'
-        'hero-button';
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    font-family: Avenir Next, sans-serif;
     .hero-title {
-        margin-top: 50%;
         display: flex;
         flex-direction: column;
         .header-1 {
-            display: flex;
-            flex-direction: column;
             text-align: center;
-            justify-content: center;
-            vertical-align: middle;
-            grid-area: hero-title;
-            float: left;
-            font-size: 70px;
+            font-size: 50px;
             font-weight: bold;
-            font-family: Avenir Next, sans-serif;
+            @media (min-width: 1200px) {
+                font-size: 70px;
+            }
         }
         .header-2 {
-            display: flex;
-            flex-direction: column;
             text-align: center;
-            justify-content: center;
-            vertical-align: middle;
-            grid-area: hero-title;
-            font-size: 75px;
-            font-family: Avenir Next, sans-serif;
+            font-size: 55px;
+            @media (min-width: 1200px) {
+                font-size: 75px;
+            }
             font-weight: bold;
             color: #282fc3;
             float: left;
         }
     }
     .hero-description {
-        display: flex;
-        flex-direction: column;
-        grid-area: hero-description;
         font-weight: 300;
-        font-size: 30px;
-        font-family: Avenir Next, sans-serif;
+        font-size: 20px;
+        @media (min-width: 1200px) {
+            font-size: 30px;
+        }
     }
     .hero-button {
         grid-area: hero-button;