Merge pull request #26 from tinacms/stylefix

Styles Fixes

components/layout/Footer.tsx

@@ -58,9 +58,18 @@ export const Footer = styled(({ ...styleProps }) => {
 
 const FooterSocial = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
 
+  @media (min-width: 550px) {
+    justify-content: flex-end;
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+  }
+
   svg {
     width: 2rem;
     height: auto;
@@ -85,15 +94,21 @@ const FooterNav = styled(Nav)`
 
 const FooterForm = styled.div`
   display: flex;
+  flex-direction: column;
   color: white;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: flex-start;
   margin-bottom: 1.5rem;
 
   span {
-    margin-right: 1rem;
+    margin: 0.5rem 1rem 0.5rem 0;
     white-space: nowrap;
   }
 
+  @media (min-width: 550px) {
+    flex-direction: row;
+  }
+
   @media (min-width: 1200px) {
     margin-bottom: 0;
   }
@@ -105,7 +120,11 @@ const FooterTop = styled.div`
   padding: 2rem 2rem;
   background-color: var(--color-primary);
   align-items: start;
-  grid-template-areas: 'logo social' 'nav nav';
+  grid-template-areas: 'logo' 'social' 'nav';
+
+  @media (min-width: 550px) {
+    grid-template-areas: 'logo social' 'nav nav';
+  }
 
   @media (min-width: 800px) {
     grid-template-columns: 1fr 3fr 1fr;

components/layout/Pagination.tsx

@@ -50,19 +50,18 @@ interface PaginationLinkProps {
 
 const PaginationLink = styled.a<PaginationLinkProps>`
   padding: 1rem;
-  flex: 1 0 auto;
+  display: block;
+  flex: 1 1 auto;
   font-family: var(--font-tuner);
   font-weight: regular;
   font-style: normal;
   text-decoration: none;
+  background-color: #fafafa;
   color: var(--color-secondary);
   position: relative;
   text-align: right;
-  padding-right: 4rem;
-
-  &:not(:last-child) {
-    border-right: 1px solid var(--color-light-dark);
-  }
+  padding-right: 3.5rem;
+  margin: 0 1px 1px 0;
 
   span {
     font-size: 0.9375rem;
@@ -79,7 +78,7 @@ const PaginationLink = styled.a<PaginationLinkProps>`
 
   svg {
     position: absolute;
-    right: 1rem;
+    right: 0.75rem;
     top: 50%;
     transform: translate3d(0, -50%, 0);
     width: 2rem;
@@ -100,24 +99,25 @@ const PaginationLink = styled.a<PaginationLinkProps>`
   ${props =>
     props.previous &&
     css`
-      padding-right: 0;
-      padding-left: 4rem;
+      padding-right: 1rem;
+      padding-left: 3.5rem;
       text-align: left;
 
       svg {
         right: auto;
-        left: 1rem;
+        left: 0.75rem;
         transform: translate3d(0, -50%, 0) rotate(180deg);
       }
     `};
 `
 
 const Wrapper = styled.div`
   margin-top: 2rem;
-  background-color: #fafafa;
+  background-color: var(--color-light-dark);
   display: flex;
   border-radius: 5px;
-  border: 1px solid var(--color-light-dark);
   overflow: hidden;
   justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 1px 0 0 1px;
 `

components/logo/TinaWordmark.tsx

@@ -16,6 +16,8 @@ const TinaWordmark = styled(({ ...styleProps }, props) => {
   h1 {
     margin: 0;
     font-size: 1rem;
+    display: flex;
+    align-items: center;
   }
 
   svg {

pages/teams.tsx

@@ -50,9 +50,9 @@ const TeamsLayout = styled(Layout)`
   color: white;
 `
 
-const TeamsSection = styled(Section)`
+const TeamsSection = styled.section`
   flex: 1 0 auto;
-  padding: 6rem 0 3rem 0;
+  padding: 8rem 0 5rem 0;
   display: flex;
   flex-direction: column;