fix(www): Fix Intro styles.

Yikes. I definitely need to look over those pages when I'm updating my resume styles.
randytarampi · Aug 11, 2018 · f68225f · f68225f
1 parent a04a5e0
commit f68225f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/packages/www/public/views/main/intro.jsx b/packages/www/public/views/main/intro.jsx
@@ -8,36 +8,54 @@ import Link, {
     LinkedInLink,
     TelLink
 } from "@randy.tarampi/jsx/lib/components/link";
-import React from "react";
+import React, {Fragment} from "react";
 import {Col} from "react-materialize";
 
-const Intro = () =>
-    <RowBlock name="intro">
-        <Col className="block__bear" l={5} m={8} s={12} offset="m2">
-            <HelloBear/>
-        </Col>
-        <Col className="block__text" l={7} m={8} s={12} offset="m2">
-            <h2>
-                <span className="text">Hey!</span>
-            </h2>
-            <p>
+const IntroText = () =>
+    <Fragment>
+        <h2>
+            <span className="text">Hey!</span>
+        </h2>
+        <p>
                 <span className="text">I'm looking for work, but you probably knew that already because let's be real, you probably clicked through to here from my <Link
                     href="/resume">resume</Link> or my <LinkedInLink useBranding={false} text="LinkedIn"/>.</span>
-            </p>
-            <p>
+        </p>
+        <p>
                 <span className="text">If you're interested in my work check me out on <GitHubLink useBranding={false}
                                                                                                    text="GitHub"/>, look at where I've been on <InstagramLink
                     useBranding={false} text="Instagram"/> or peek in on what's going on in my life at my <BlogAppLink
                     text="blog"/>.</span>
-            </p>
-            <p>
+        </p>
+        <p>
                 <span className="text">
                     And if you're still interested after all that, shoot me an <EmailLink useBranding={false}
                                                                                           text="email"/> or <TelLink
                     useBranding={false} text="text"/> and let's have a chat!
                 </span>
-            </p>
-        </Col>
-    </RowBlock>;
+        </p>
+    </Fragment>;
+
+const Intro = () =>
+    <Fragment>
+        <RowBlock name="intro" className="intro--large hide-on-med-and-down">
+            <Col className="block__bear" l={5} m={8} s={12} offset="m2">
+                <HelloBear/>
+            </Col>
+            <Col className="block__text" l={7}>
+                <IntroText/>
+            </Col>
+        </RowBlock>
+        <RowBlock name="intro-responsive-bear" className="intro-responsive-bear hide-on-large-only">
+            <Col className="block__bear" l={5} m={8} s={12} offset="m2">
+                <HelloBear/>
+            </Col>
+        </RowBlock>
+        <RowBlock name="intro-responsive-text" className="intro-responsive-text hide-on-large-only">
+            <Col className="block__text" m={8} s={12} offset="m2">
+                <IntroText/>
+            </Col>
+        </RowBlock>
+    </Fragment>;
+
 
 export default Intro;
diff --git a/packages/www/styles/intro.scss b/packages/www/styles/intro.scss
@@ -0,0 +1,5 @@
+.intro-responsive-bear {
+    min-height: 112px;
+    margin-bottom: 0;
+    margin-top: 16px;
+}
diff --git a/packages/www/styles/style.scss b/packages/www/styles/style.scss
@@ -1,3 +1,4 @@
 @import "@randy.tarampi/css/styles/style";
 @import "jsonresume-theme-randytarampi/styles/resume/index";
 @import "layout";
+@import "intro";