Complete Cards

snippets/mouse-cursor-gradient-tracking.md

@@ -64,7 +64,6 @@ btn.onmousemove = function(e) {
 
 #### Browser support
 
-<div class="snippet__requires-javascript">Requires JavaScript</div>
 <span class="snippet__support-note">⚠️ Requires JavaScript.</span>
 
 - https://caniuse.com/#feat=css-variables

src/docs/components/SnippetCard.js

@@ -19,6 +19,26 @@ const SnippetCard = ({ short, snippetData, ...rest }) =>
     <FullCard snippetData={snippetData} {...rest} />
   );
 
+// ===================================================
+// Link to edit snippet on Codepen
+// ===================================================
+const CodepenButton = ({ snippetData }) => (
+  <form action='https://codepen.io/pen/define' method='POST' target='_blank'>
+    <input 
+      type='hidden'
+      name='data'
+      value={
+        JSON.stringify({
+          css: snippetData.code.css,
+          html: snippetData.code.html,
+          js: snippetData.code.js
+        })
+      }
+    />
+    <button className='button button-a button-codepen'>Edit on Codepen</button>
+  </form>
+)
+
 // ===================================================
 // Full snippet view (tags, code, title, description)
 // ===================================================
@@ -75,7 +95,14 @@ const FullCard = ({ snippetData, isDarkMode }) => {
             {snippetData.code.scopedCss}
           </style>
           <div dangerouslySetInnerHTML={{__html: snippetData.code.html}} />
+          {
+            cardCodeJs &&
+            <script>
+              {`function()(${snippetData.code.js})();`}
+            </script>
+          }
         </div>
+        <CodepenButton snippetData={snippetData}/>
         <h5 className='card-section-explanation-title'>Explanation</h5>
         <div
           className='card-explanation'

src/docs/styles/_button.scss

@@ -82,4 +82,16 @@
   svg {
     margin-right: 0.125rem;
   }
+}
+
+.button.button-codepen {
+  display: block;
+  margin: 0.25rem calc(50% - 3rem);
+  min-width: 180px;
+  font-size: 1rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-codepen'%3E%3Cpolygon points='12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2'%3E%3C/polygon%3E%3Cline x1='12' y1='22' x2='12' y2='15.5'%3E%3C/line%3E%3Cpolyline points='22 8.5 12 15.5 2 8.5'%3E%3C/polyline%3E%3Cpolyline points='2 15.5 12 8.5 22 15.5'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='8.5'%3E%3C/line%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position-y: center;
+  background-position-x: 0.5rem;
+  padding-left: 2.5rem
 }

src/docs/styles/_card.scss

@@ -101,6 +101,7 @@
 }
 
 .card-section-demo-title, .card-section-explanation-title,.card-section-browser-support-title {
+  transition: 0.3s ease all;
   margin: 0.5rem 1rem .5rem;
   color: var(--card-fore-color-light);
   font-size: 1rem;
@@ -109,6 +110,7 @@
 }
 
 .card-explanation, .card-browser-support {
+  transition: 0.3s ease all;
   margin: 0.5rem;
   p, li {
     line-height: 1.75;
@@ -120,10 +122,12 @@
 }
 
 .card-browser-support {
+  transition: 0.3s ease all;
   margin: 1rem;
 }
 
 .browser-support-data {
+  transition: 0.3s ease all;
   font-size: 1.75rem;
   font-weight: 300;
   color: var(--card-fore-color-light);
@@ -132,9 +136,10 @@
 }
 
 .card-snippet-demo {
+  transition: 0.3s ease all;
   width: calc(100% - 0.25rem);
   margin: 0.5rem 1rem .5rem;
-  background: #f5f6f9;
+  background:var(--back-color);
   border-radius: .25rem;
   padding: .75rem 1.25rem;
 }