[REMOVED PAGE TRANSITION PLUGIN] It was breaking in IE

cnocon · Oct 14, 2020 · 939646f · 939646f
1 parent 47da336
commit 939646f
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 198 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +0,0 @@
-[submodule "gatsby-v3-plugin-page-transitions"]
-	path = plugins/gatsby-v3-plugin-page-transitions
-	url = https://github.com/Orlandohub/gatsby-plugin-page-transitions

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -84,12 +84,6 @@ module.exports = {
           }
         }
       }
-    },   
-    {
-      resolve: `gatsby-v3-plugin-page-transitions`,
-      options: {
-        transitionTime: 350
-      }
     },
     {
       resolve: `gatsby-plugin-sass`,

diff --git a/package.json b/package.json
@@ -30,7 +30,6 @@
     "gatsby-source-buttercms": "^2.1.1",
     "gatsby-source-filesystem": "^2.3.8",
     "gatsby-transformer-remark": "^2.8.15",
-    "gatsby-v2-plugin-page-transitions": "^1.0.0",
     "jquery": "^3.5.1",
     "netlify-cli": "^2.54.0",
     "node-sass": "^4.14.1",

diff --git a/src/components/AboutMe/AboutMe.jsx b/src/components/AboutMe/AboutMe.jsx
@@ -8,7 +8,6 @@ import SectionTitle from '../SectionTitle/SectionTitle'
 import Intro from '../Intro/Intro'
 import IconColumn from '../IconColumn/IconColumn'
 import ImageColumn from '../ImageColumn/ImageColumn'
-import PageTransition from '../../../plugins/gatsby-v3-plugin-page-transitions';
 
 const AboutMe = ({ ...data }) => {
   const { posts } = data.pageContext
@@ -35,98 +34,97 @@ const AboutMe = ({ ...data }) => {
     <Layout>
       <Header />
       <SEO stitle="Cristin O'Connor | Front End Developer" />
-      <PageTransition>
-        <Styled.Container>
-          <div className="row">
-            <div className="col-sm-12">
-              <SectionTitle
-                text="A Little About Me"
-                icon="fal fa-user-astronaut"
-              />
-              <Intro />
-            </div>
+
+      <Styled.Container>
+        <div className="row">
+          <div className="col-sm-12">
+            <SectionTitle
+              text="A Little About Me"
+              icon="fal fa-user-astronaut"
+            />
+            <Intro />
           </div>
+        </div>
 
 
-          <SectionTitle text="Services" icon="fas fa-concierge-bell"/>
-          <div className="row">
-            <IconColumn
-              columnClasses="col-sm-6 col-md-3"
-              icon="fal fa-code"
-              title="Web Development"
-              classes='rainbow-box-shadow-rounded rainbow-icon-narrow dark'
-              text="This is my primary area of expertise. I have <b>10+ years of experience</b> in the field."
-            />
-            <IconColumn
-              columnClasses="col-sm-6 col-md-3"
-              icon="fal fa-graduation-cap"
-              title="Code Tutoring"
-              classes='rainbow-box-shadow-rounded rainbow-icon-narrow dark'
-              text="I focus on <b>teaching with compassion</b>. I love tutoring and I can work with all ages. <a href='mailto:[email protected]' class=
-              rainbow-box-shadow'>Contact me about tutoring</a>."
-            />
-            <div className="col-sm-12 col-md-6">
-              <div className="testo">
-                <span className="icon-wrapper"><i className="fal fa-quote-left"></i></span>
-                <blockquote>
-                  <p><strong>Cristin O'Connor is a lifesaver!</strong> Being new to Gatsby, I was having a difficult time finding a solution for a blocker. I scoured documentation, tried every combination of keywords, and went to every forum I could think of to find the solution. I came across Cristin's website and reached out. Cristin was responsive, fast, and knowledgeable. She was also kind and concise which was exactly what a newbie like me needed.</p>
-                  <cite>– <b>Mariah W.</b>, Freelance Developer</cite>
-                </blockquote>
-              </div>
+        <SectionTitle text="Services" icon="fas fa-concierge-bell"/>
+        <div className="row">
+          <IconColumn
+            columnClasses="col-sm-6 col-md-3"
+            icon="fal fa-code"
+            title="Web Development"
+            classes='rainbow-box-shadow-rounded dark'
+            text="This is my primary area of expertise. I have <b>10+ years of experience</b> in the field."
+          />
+          <IconColumn
+            columnClasses="col-sm-6 col-md-3"
+            icon="fal fa-graduation-cap"
+            title="Code Tutoring"
+            classes='rainbow-box-shadow-rounded dark'
+            text="I focus on <b>teaching with compassion</b>. I love tutoring and I can work with all ages. <a href='mailto:[email protected]' class=
+            rainbow-box-shadow'>Contact me about tutoring</a>."
+          />
+          <div className="col-sm-12 col-md-6">
+            <div className="testo">
+              <span className="icon-wrapper"><i className="fal fa-quote-left"></i></span>
+              <blockquote>
+                <p><strong>Cristin O'Connor is a lifesaver!</strong> Being new to Gatsby, I was having a difficult time finding a solution for a blocker. I scoured documentation, tried every combination of keywords, and went to every forum I could think of to find the solution. I came across Cristin's website and reached out. Cristin was responsive, fast, and knowledgeable. She was also kind and concise which was exactly what a newbie like me needed.</p>
+                <cite>– <b>Mariah W.</b>, Freelance Developer</cite>
+              </blockquote>
             </div>
-          </div> 
+          </div>
+        </div> 
 
 
-          <SectionTitle text="Latest from the Blog" icon="fas fa-rss" />
-          <div className="row">{articles}</div>
+        <SectionTitle text="Latest from the Blog" icon="fas fa-rss" />
+        <div className="row">{articles}</div>
 
-              <SectionTitle
-                text="Connect"
-                icon="fal fa-handshake"
-              />
-              <IconList 
-                classes='' 
-                listItems={[
-                {
-                  icon: 'fab fa-codepen',
-                  link: 'https://codepen.io/cnocon',
-                  text: 'CodePen',
-                  classes: 'rainbow-box-shadow-rounded'
-                },
-                {
-                  icon: 'fab fa-github',
-                  link: 'https://github.com/cnocon',
-                  text: 'GitHub',
-                  classes: 'rainbow-box-shadow-rounded'
-                },
-                {
-                  icon: 'fal fa-hashtag',
-                  link: 'https://twitter.com/cnocon',
-                  text: 'Twitter',
-                  classes: 'rainbow-box-shadow-rounded'
-                },
-                {
-                  icon: 'fab fa-linkedin-in',
-                  link: 'https://www.linkedin.com/in/cristinoconnor',
-                  text: 'LinkedIn',
-                  classes: 'rainbow-box-shadow-rounded'
-                },
-                {
-                  icon: 'fab fa-stack-overflow',
-                  link: 'https://stackoverflow.com/users/2187039/cnocon',
-                  text: 'Stack Overflow',
-                  classes: 'rainbow-box-shadow-rounded'
-                },
-                {
-                  icon: 'fal fa-envelope',
-                  link: 'mailto:[email protected]',
-                  text: 'Email',
-                  classes: 'rainbow-box-shadow-rounded'
-                }
-              ]} 
+            <SectionTitle
+              text="Connect"
+              icon="fal fa-handshake"
             />
-        </Styled.Container>
-      </PageTransition>
+            <IconList 
+              classes='' 
+              listItems={[
+              {
+                icon: 'fab fa-codepen',
+                link: 'https://codepen.io/cnocon',
+                text: 'CodePen',
+                classes: 'rainbow-box-shadow-rounded'
+              },
+              {
+                icon: 'fab fa-github',
+                link: 'https://github.com/cnocon',
+                text: 'GitHub',
+                classes: 'rainbow-box-shadow-rounded'
+              },
+              {
+                icon: 'fal fa-hashtag',
+                link: 'https://twitter.com/cnocon',
+                text: 'Twitter',
+                classes: 'rainbow-box-shadow-rounded'
+              },
+              {
+                icon: 'fab fa-linkedin-in',
+                link: 'https://www.linkedin.com/in/cristinoconnor',
+                text: 'LinkedIn',
+                classes: 'rainbow-box-shadow-rounded'
+              },
+              {
+                icon: 'fab fa-stack-overflow',
+                link: 'https://stackoverflow.com/users/2187039/cnocon',
+                text: 'Stack Overflow',
+                classes: 'rainbow-box-shadow-rounded'
+              },
+              {
+                icon: 'fal fa-envelope',
+                link: 'mailto:[email protected]',
+                text: 'Email',
+                classes: 'rainbow-box-shadow-rounded'
+              }
+            ]} 
+          />
+      </Styled.Container>
     </Layout>
   )
 }

diff --git a/src/components/AboutMe/AboutMe.styles.jsx b/src/components/AboutMe/AboutMe.styles.jsx
@@ -44,6 +44,11 @@ export const Container = styled.div`
       padding-left: 22.5px;
       color: ${Theme.colors.default.darker};
 
+      @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
+      /* IE10+ specific styles go here */  
+        display: block;
+      }
+
       p {
         margin: 0 0 5px;
         padding: 0;

diff --git a/src/components/Header/Header.styles.js b/src/components/Header/Header.styles.js
@@ -126,6 +126,14 @@ export const Nav = styled.ul`
       margin: ${Theme.spacing.md} 0;
       flex-wrap: unset;
     }
+
+    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
+      /* IE10+ specific styles go here */  
+      display: block;
+      text-align: center;
+    }
+  }
+
 `
 
 export const NavItem = styled.li`
@@ -135,6 +143,12 @@ export const NavItem = styled.li`
   text-decoration: none;
   flex-basis: 33.333%;
   justify-content: center;
+
+  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
+    /* IE10+ specific styles go here */  
+    display: inline-block;
+  }
+
 `
 
 export const NavLink = styled(Link)`

diff --git a/src/components/IconColumn/IconColumn.styles.js b/src/components/IconColumn/IconColumn.styles.js
@@ -8,6 +8,12 @@ export const IconColumnDiv = styled.div`
   align-items: center;
   justify-content: space-evenly;
 
+  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
+    /* IE10+ specific styles go here */  
+    display: block;
+    text-align: center;
+  }
+
   h4 {
     font-size: ${Theme.fonts.sizes.sm};
     line-height: ${Theme.fonts.sizes.lineHeights.sm};
@@ -52,9 +58,10 @@ export const IconColumnDiv = styled.div`
 
     &.dark {
       background-color: #345 !important;
+      color: white;
       
       &::before {
-        
+        color: white;
       }
     }
   }

diff --git a/src/components/IconListItem/IconListItem.styles.js b/src/components/IconListItem/IconListItem.styles.js
@@ -103,11 +103,13 @@ export const ItemIcon = styled.i`
 
   .dark & {
     background-color: ${Theme.colors.default.base};
+    color: white;
     font-weight: 500;
   }
 
   .dark a:hover & {
-    &::before { color: #fff; }
+    background-color: white;
+    color: #345;
   }
 `
 

diff --git a/src/components/Post/Post.jsx b/src/components/Post/Post.jsx
@@ -8,7 +8,6 @@ import * as Styled from "./Post.styles"
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs"
 import Rule from "../Rule/Rule"
 import EntryMeta from "../EntryMeta/EntryMeta"
-import PageTransition from '../../../plugins/gatsby-v3-plugin-page-transitions'
 import $ from 'jquery'
 import { Link } from 'gatsby'
 
@@ -59,7 +58,6 @@ const Post = ({...data}) => {
         <script defer async src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy"></script>
       </SEO>
 
-      <PageTransition>
 
       <Rule
           title={`Level: ${post.tags[0].name.toUpperCase()}`}
@@ -123,7 +121,6 @@ const Post = ({...data}) => {
             </Styled.Navigation>
           </div>
         </div> */}
-      </PageTransition>
     </Layout>
   )
 }

diff --git a/src/components/PostsList/PostsList.jsx b/src/components/PostsList/PostsList.jsx
@@ -7,7 +7,6 @@ import PostPreview from "../PostPreview/PostPreview"
 import * as Styled from '../PostsList/PostsList.styles'
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs"
 import Rule from "../Rule/Rule"
-import PageTransition from '../../../plugins/gatsby-v3-plugin-page-transitions';
 
 const PostsList = ({...data}) => {
   const {stitle, posts, nextPagePath, prevPagePath, breadcrumbs, title, seoDescription, categories} = data.pageContext
@@ -49,33 +48,31 @@ const PostsList = ({...data}) => {
     <Layout className="blog-posts">
       <Header />
       <SEO stitle={stitle} sdescription={seoDescription} />
-      <PageTransition>
-        <div className="posts-list">
-          <Rule title={title} icon="fas fa-rss" />
-          <Breadcrumbs crumbs={breadcrumbs} />
-          <div className="row">
-            <div className="col-sm-12 col-md-9">
-              {articles}
-              <Styled.Navigation>
-                {prevBtn}
-                {nextBtn}
-              </Styled.Navigation>
-            </div>
-            <BlogSidebar categories={categories} colClasses='col-sm-12 col-md-3' />
+      <div className="posts-list">
+        <Rule title={title} icon="fas fa-rss" />
+        <Breadcrumbs crumbs={breadcrumbs} />
+        <div className="row">
+          <div className="col-sm-12 col-md-9">
+            {articles}
+            <Styled.Navigation>
+              {prevBtn}
+              {nextBtn}
+            </Styled.Navigation>
           </div>
+          <BlogSidebar categories={categories} colClasses='col-sm-12 col-md-3' />
         </div>
+      </div>
 
-        {/* <div className="row">
-            <div className="col-sm-12">
+      {/* <div className="row">
+          <div className="col-sm-12">
 
-            <Styled.Navigation>
-                {prevBtn}
-                {nextBtn}
-              </Styled.Navigation>
-              </div>
-          </div>
-        </div> */}
-      </PageTransition>
+          <Styled.Navigation>
+              {prevBtn}
+              {nextBtn}
+            </Styled.Navigation>
+            </div>
+        </div>
+      </div> */}
     </Layout>
   )
 }