feat: Updates styles to better support smaller screen mobile devices. C…

…loses #10
ajfisher · Jan 12, 2020 · 073c0be · 073c0be
1 parent a784bd7
commit 073c0be
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 53 deletions.
diff --git a/site/src/components/article.js b/site/src/components/article.js
@@ -3,14 +3,67 @@ import styled from 'styled-components';
 import { Location } from '@reach/router';
 import { graphql } from 'gatsby';
 
+import { device } from './devices';
+
+const StyledArticle = styled.article`
+  flex-grow: 1;
+  align-self: flex-start;
+  width: 100%;
+
+  @media only screen and ${device.large} {
+    flex-grow: 2;
+    max-width: 61%;
+
+    & section {
+      padding: 0 3rem;
+    }
+  }
+
+  & section h2, & section h3 {
+    box-shadow: 2rem 0 0 var(--base), -2rem 0 0 var(--base);
+    margin: 0;
+    margin-left: 2rem;
+    padding: 0px 0px 0.5rem;
+    box-decoration-break: clone;
+  }
+
+  & section p,
+  & section pre {
+    padding: 0 2rem;
+  }
+
+  & section p {
+    font-size: 2.2rem;
+  }
+
+  & section pre code {
+    font-size: 2rem;
+  }
+
+  & section blockquote {
+    margin: auto 0.2rem;
+    margin-right: 0;
+    padding: 0 1.6rem;
+    padding-right: 2rem;
+
+    & p {
+      padding: 0;
+    }
+  }
+
+  & section.attribution p {
+    font-size: 1.8rem;
+  }
+`;
+
 const Attribute = styled.p`
   font-size: 1.8rem;
 `;
 
 const Attribution = ({author, authorurl, featuredImageBy, featuredImageLink, title, pageurl}) => {
 
   return(
-    <>
+    <section className="attribution">
       {featuredImageBy && featuredImageLink &&
         <Attribute>
           Title image by <a href={featuredImageLink}>{featuredImageBy}</a>
@@ -25,20 +78,20 @@ const Attribution = ({author, authorurl, featuredImageBy, featuredImageLink, tit
       <Attribute>
         Permanent source for attribution: <a href={pageurl}>{pageurl}</a>.
       </Attribute>
-    </>
+    </section>
   );
 };
 
 const Article = ({children, featuredImageBy, featuredImageLink, title, url}) => {
 
   return(
-    <article>
+    <StyledArticle>
       {children}
       <Attribution title={title} author="ajfisher"
         authorurl="https://twitter.com/ajfisher" pageurl={url}
         featuredImageBy={featuredImageBy} featuredImageLink={featuredImageLink}
       />
-    </article>
+    </StyledArticle>
   );
 };
 

diff --git a/site/src/components/devices.js b/site/src/components/devices.js
@@ -1,13 +1,15 @@
 /* Used to specify the main breakpoints used for the site */
 
 const size = {
+  small: '401px',
   medium: '501px',
-  large: '768px',
+  large: '801px',
   wide: '1140px'
 };
 
 // I think the wide size is broken
 export const device = {
+  small: `(min-width: ${size.small})`,
   medium: `(min-width: ${size.medium})`,
   large: `(min-width: ${size.large})`,
   wide: `(min-width: ${size.wide})`

diff --git a/site/src/components/header.js b/site/src/components/header.js
@@ -59,11 +59,11 @@ const Container = styled.div`
 const Title = styled.h1`
   background-color: var(--base);
   padding: 1.5rem 2rem;
-  margin: 0rem 2rem;
+  margin: 0rem 5vw;
   color: var(--light-text-colour);
   min-height: 25vh;
   max-height: 35vh;
-  width: 67vw;
+  width: 60vw;
   border-radius: 0.2rem;
 
   @media only screen and ${device.medium} {
@@ -73,13 +73,14 @@ const Title = styled.h1`
 
   @media only screen and ${device.large} {
     /**min-height: 35rem;**/
+    margin: 0;
   }
 `;
 
 const Para = styled.p`
   color: var(--light-text-colour);
   /** clear: left; **/
-  padding: 0 2rem;
+  padding: 0 5vw;
   font-size: 2rem;
   margin: 1.5rem 0rem;
 

diff --git a/site/src/components/layout.js b/site/src/components/layout.js
@@ -1,29 +1,78 @@
 /** Core site layout **/
-import React from 'react'
+import React from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useStaticQuery, graphql } from 'gatsby';
 
 import Article from './article';
 import PostHeader from './header';
 import PostData from './postdata';
 
-const useSiteMetadata = () => {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-            author
-            siteURL
-          }
-        }
-      }
-    `,
-  );
-  return site.siteMetadata;
-};
+import { device } from './devices';
+
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  /** width: 90%; **/
+  /** margin: 0 5%; **/
+  box-sizing: border-box;
+
+  @media only screen and ${device.large} {
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  @media only screen and ${device.wide} {
+    width: 1026px;
+    margin: 0 auto;
+  }
+
+`;
+
+const Aside = styled.aside`
+  /** Aside is a flex item **/
+  flex-grow: 1;
+  align-self: flex-start;
+  width: 100%;
+
+  /** But it is also a container **/
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  @media only screen and ${device.large} {
+    flex-grow: 1;
+    max-width: 31%;
+    top: 3rem;
+    position: sticky;
+    height: min-content;
+    padding: 0 3rem;
+  }
+
+  /** change the order depending on column or row **/
+  & nav {
+    order: 2;
+
+    @media only screen and ${device.large} {
+      order: 1;
+    }
+  }
+
+  & section {
+    order: 1;
+
+    @media only screen and ${device.large} {
+      order: 2;
+    }
+  }
+`;
+
+const Nav = styled.nav`
+
+`;
 
 const Layout = ({ children, title, date, excerpt,
   featuredImage, featuredImageBy, featuredImageLink, path, readingTime, tags}) => {
@@ -36,16 +85,16 @@ const Layout = ({ children, title, date, excerpt,
       <PostHeader title={title} date={date}
         excerpt={excerpt} featuredImage={featuredImage}
         readingTime={readingTime} />
-      <main className="wrapper">
+      <Main>
         <Article title={title} url={urlpath}
           featuredImageBy={featuredImageBy} featuredImageLink={featuredImageLink}>
             {children}
         </Article>
-        <aside>
-          <nav>Here is the nav</nav>
+        <Aside>
+          <Nav>Here is the nav</Nav>
           <PostData tags={tags} title={title} publicationDate={date} author="ajfisher"/>
-        </aside>
-      </main>
+        </Aside>
+      </Main>
       <footer>
         © {new Date().getFullYear()}, Built with
       </footer>
@@ -57,4 +106,22 @@ Layout.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
+const useSiteMetadata = () => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+            siteURL
+          }
+        }
+      }
+    `,
+  );
+  return site.siteMetadata;
+};
+
 export default Layout
diff --git a/site/src/components/postdata.js b/site/src/components/postdata.js
@@ -12,10 +12,15 @@ const Published = styled.p`
   color: var(--light-text-colour);
   background: var(--dark-grey);
   box-shadow: 0.5rem 0 0 var(--dark-grey), -0.5rem 0 0 var(--dark-grey);
+  box-decoration-break: clone;
 `;
 
 const Section = styled.section`
-  order: 1;
+  padding: 0 2rem;
+
+  @media only screen and ${device.large} {
+    padding: 0;
+  }
 `;
 
 const Title = styled.h2`

diff --git a/site/src/components/tags.js b/site/src/components/tags.js
@@ -1,16 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const LinkedTag = ({children, className, href}) => {
-  return <a className={className} href={href}>{children}</a>
-};
+const TagPara = styled.p`
 
-const Tag = styled(LinkedTag)`
-  font-size: 2rem;
-  white-space: nowrap;
-  margin-right: 0.5rem;
+  & a {
+    font-size: 2rem;
+  }
 `;
 
+const Tag = ({children, className, href}) => {
+  const gap = ` `;
+  return <><a className={className} href={href}>{children}</a> </>
+};
+
 const Tags = ({children}) => {
 
   const tags = children.split(',').map(item => {
@@ -22,7 +24,7 @@ const Tags = ({children}) => {
   });
 
   return (
-    <p>Tagged: {taglist}</p>
+    <TagPara>Tagged: {taglist}</TagPara>
   );
 };
 

diff --git a/site/src/styles/global.css b/site/src/styles/global.css
@@ -75,14 +75,14 @@ h1 {
 h2 {
     font-family: var(--heading-font-family);
     font-weight: var(--heading-font-weight);
-    font-size: 5rem;
-    border-radius: 0.2rem;
+    font-size: 4rem;
+    /** border-radius: 0.2rem;**/
 }
 
 h3 {
     font-family: var(--heading-font-family);
     font-weight: var(--heading-font-weight);
-    font-size: 5rem;
+    font-size: 4rem;
 }
 
 a {
@@ -115,23 +115,17 @@ article h3{
     background-color: var(--base);
     color: var(--light-text-colour);
     display: inline;
-    /** use this to get consistent edge on outside of wrap**/
-    box-shadow: 3rem 0 0 var(--base), -3rem 0 0 var(--base);
-    margin: 0;
-    padding: 0px 0px 0.5rem;
-    box-decoration-break: clone;
 }
 
 article h4 {
-    /** padding: 0.5rem 3rem; **/
     margin:0;
     font-family: var(--heading-font-family);
     color: var(--dark-text-colour);
 }
 
 article figure.gatsby-resp-image-figure {
-    width: 100vw;
-    margin-left: -5vw;
+    width: 100%;
+    margin-left: 0;
     position: relative;
 }
 
@@ -171,8 +165,8 @@ p.has-pullquote::before {
 article blockquote {
     font-style: italic;
     border-left: 2px solid var(--base);
-    margin-left: -3rem;
-    padding-left: 3rem;
+    /** margin-left: -2rem;
+    padding-left: 2rem; **/
 }
 
 /* MEDIA QUERIES FOR Medium Size display */