feat: add Examples badge to layout (#22)

elitistsnob · web-flow · commit 895c6b64916a · 2022-08-31T19:56:31.000-04:00
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -118,6 +118,62 @@ pre {
 /* ----------------------------------
  CTA content
 -----------------------------------*/
+a.examples-block {
+    display: block;
+    color: #fff;
+    margin: 0 auto;
+    padding: 1rem;
+    background: #1D1D22;
+    border: 2px solid #FDA703;
+    border-radius: 10px;
+    margin: 2rem auto;
+    /* color: #fff; */
+    text-decoration: none;
+    max-width: 370px;
+
+    align-items: center;
+    border-radius: 10px;
+    color: #fff;
+    /* cursor: pointer; */
+    display: flex;
+    padding: 1rem;
+    position: relative;
+    text-decoration: none;
+}
+
+a.examples-block span {
+    color: #FDA703;
+}
+
+.examples-block p {
+    font-size: 0.85rem;
+}
+
+.examples-block .glyph {
+    background-color: #FDA703;
+}
+
+.examples-block .glyph svg {
+    fill: #1D1D22;
+}
+
+a.examples-block:hover .glyph {
+    background-color: #1D1D22;
+}
+
+.examples-block:hover .glyph svg {
+    fill: #FDA703;
+}
+
+a.examples-block:hover span {
+    color: inherit;
+}
+
+a.examples-block:hover {
+    background: #FDA703;
+    color: #1D1D22;
+}
+
 .disclaimer {
     background: #2D2E35;
     font-size: .8rem;
@@ -130,7 +186,7 @@ pre {
     grid-gap: 30px;
     grid-template-columns: repeat(2,1fr);
     margin-top: 1rem;
-    padding: 3rem 0 0;
+    padding: 0;
 }
 
 .dialog {
diff --git a/index.html b/index.html
@@ -28,16 +28,12 @@
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-LKETQQ110J"></script>
         <script>
             window.dataLayer = window.dataLayer || [];
-        function gtag() {
-        dataLayer.push(arguments);
-        }
-        gtag('js', new Date());
-
-        gtag('config', 'G-LKETQQ110J');
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+            gtag('config', 'G-LKETQQ110J');
         </script>
-
-
-
 	</head>
 
 	<body>
@@ -82,21 +78,23 @@
                 </div>
                 <!-- end terminal window -->
 
-                <!-- begin dialog content -->
-                <div class="dialogs">
-                    <div class="dialog dropdown" tabindex="1">
-                        <div class="glyph">
-                            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="none" stroke="#fff" stroke-width="2" d="M9,22 L15,2 M17,17 L22,12 L17,7 M7,17 L2,12 L7,7"/>
-                            </svg>
-                        </div>
-
-                        <div>
-                            <h2>Examples</h2>
-                            <p>Click <a href="https://pyscript.net/examples/" target="_blank">here</a> for example projects</p>
-                        </div>
+                <!-- begin examples badge -->
+                <a href="https://pyscript.net/examples/" target="_blank" class="examples-block">
+                    <div class="glyph">
+                        <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-grid">
+                        <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+                        </svg>
+                    </div>
+                    <div>
+                        <h2>Examples</h2>
+                        <p><span>Click here</span> for example projects</p>
                     </div>
 
+                </a>
+                <!-- end examples badge -->
+
+                <!-- begin dialog content -->
+                <div class="dialogs">
                     <div class="dialog dropdown" tabindex="2">
                         <div class="glyph">
                             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
