Short SnippetCard full linking

src/docs/components/SnippetCard.js

@@ -96,18 +96,12 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
         >
           {examplesOpen ? <CollapseOpenIcon /> : <CollapseClosedIcon />}Examples
         </button>
-        {/* <ReactCSSTransitionReplace
-          transitionName='roll-up'
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={300}
-        > */}
           {examplesOpen && (
             <pre
               className='section card-examples language-js'
               dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
             />
           )}
-        {/* </ReactCSSTransitionReplace> */}
       </div>
     </div>
   );
@@ -122,14 +116,15 @@ const ShortCard = ({
   difficulty, 
 }) => {
   return (
+    <Link
+      className='clickable-card-wrapper'
+      to={archived ? `/archive/${snippetData.id}` : `/snippet/${snippetData.id}`}
+    >
     <div className='card short'>
       <CardCorner difficulty={difficulty} />
       <h4 className='card-title'>
-        <Link
+        
-          to={archived ? `/archive/${snippetData.id}` : `/snippet/${snippetData.id}`}
-        >
           {snippetData.title}
-        </Link>
       </h4>
       <div
         className='card-description'
@@ -137,7 +132,8 @@ const ShortCard = ({
           __html: `${getTextualContent(snippetData.html, true)}`,
         }}
       />
-    </div>
+      </div>
+    </Link>
   );
 };
 

src/docs/pages/archive.js

@@ -23,7 +23,7 @@ const ArchivePage = props => {
       <Shell>
         <h2 className='page-title'>Archived snippets</h2>
         <p className='page-sub-title'>These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p>
-        <p className='light-sub'>Click on a snippet's name to view its code.</p>
+        <p className='light-sub'>Click on a snippet card to view the snippet.</p>
         {posts &&
           posts.map(({ node }) => (
             <SnippetCard

src/docs/pages/index.js

@@ -70,7 +70,7 @@ const IndexPage = props => {
         ) : (
           <>
             <p className='light-sub'>
-              Click on a snippet's name to view its code.
+              Click on a snippet card to view the snippet.
             </p>
             <h2 className='page-sub-title'>Search results</h2>
             {searchResults.map(snippet => (

src/docs/pages/list.js

@@ -65,7 +65,7 @@ const ListPage = props => {
       <Shell withIcon={true} isList>
         <h2 className='page-title'>Snippet List</h2>
         <p className='light-sub'>
-          Click on a snippet’s name to view its code or a tag name to view all
+          Click on a snippet card to view the snippet or a tag name to view all
           snippets in that category.
         </p>
         {tags.sort((a,b) => a.localeCompare(b)).map(tag => (

src/docs/pages/search.js

@@ -49,7 +49,7 @@ const SearchPage = props => {
           setSearchQuery={setSearchQuery}
           defaultValue={props.searchQuery}
         />
-        <p className='light-sub'>Click on a snippet's name to view its code.</p>
+        <p className='light-sub'>Click on a snippet card to view the snippet.</p>
         {/* Display page background or results depending on state */}
         {searchQuery.length === 0 ? (
           <>

src/docs/styles/_card.scss

@@ -2,6 +2,8 @@
 // Cards
 // ===================================================
 .card {
+  backface-visibility: hidden;
+  will-change: transform;
   position: relative;
   transition: all 0.3s ease;
   margin: 1rem 1.25rem;
@@ -143,3 +145,14 @@
     margin-top: 0.375rem;
   }
 }
+
+.clickable-card-wrapper {
+  &:link, &:visited {
+    &:hover, &:focus {
+      text-decoration: none;
+      .card {
+        transform: scale(1.025);
+      }
+    }
+  }
+}

src/docs/templates/TagPage.js

@@ -25,7 +25,7 @@ const TagRoute = props => {
       <Meta title={capitalize(tag)} />
       <Shell>
         <h2 className='page-title'>{capitalize(tag)}</h2>
-        <p className='light-sub'>Click on a snippet's name to view its code.</p>
+        <p className='light-sub'>Click on a snippet card to view the snippet.</p>
         {posts &&
           posts.map(({ node }) => (
             <SnippetCard