Remove iframe on Twitter for twitter follow buttons

src/css/theme_daux/_components.scss

@@ -242,6 +242,42 @@ Components
 
 .Twitter {
     padding: 0 20px;
+    font: normal normal normal 11px/18px "Helvetica Neue", Arial, sans-serif;
+
+    &__button {
+        text-decoration: none;
+
+        display: inline-block;
+        vertical-align: top;
+        zoom: 1;
+
+        position: relative;
+        height: 20px;
+        box-sizing: border-box;
+        padding: 1px 8px 1px 6px;
+        background-color: #1b95e0;
+        color: #fff;
+        border-radius: 3px;
+        font-weight: 500;
+        cursor: pointer;
+
+        .Twitter__button__label {
+            display: inline-block;
+            vertical-align: top;
+            zoom: 1;
+
+            margin-left: 3px;
+            white-space: nowrap;
+        }
+
+        svg {
+            position: relative;
+            top: 2px;
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+        }
+    }
 }
 
 .PoweredBy {

src/css/theme_daux/_homepage.scss

@@ -226,7 +226,7 @@ Homepage
         margin: 40px 0;
     }
 
-    .Twitter {
+    .Twitter__button {
         margin-bottom: 20px;
     }
 }

templates/home.php

@@ -60,11 +60,9 @@
 
             <?php if (!empty($params['html']['twitter'])) { ?>
                 <div class="HomepageFooter__twitter">
-                    <?php foreach ($params['html']['twitter'] as $handle) { ?>
                     <div class="Twitter">
-                        <iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?= $handle; ?>&amp;show_count=false"></iframe>
+                        <?php $this->insert('theme::partials/twitter_buttons', ['params' => $params]); ?>
                     </div>
-                    <?php } ?>
                 </div>
             <?php } ?>
         </div>

templates/layout/05_page.php

@@ -47,11 +47,7 @@
                 <?php if (!empty($params['html']['twitter'])) { ?>
                     <div class="Twitter">
                         <hr/>
-                        <?php foreach ($params['html']['twitter'] as $handle) { ?>
+                        <?php $this->insert('theme::partials/twitter_buttons', ['params' => $params]); ?>
-                            <iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?= $handle; ?>&amp;show_count=false"></iframe>
-                            <br />
-                            <br />
-                        <?php } ?>
                     </div>
                 <?php } ?>
 

templates/partials/twitter_buttons.php

@@ -0,0 +1,7 @@
+<?php foreach ($params['html']['twitter'] as $handle) { ?>
+    <a class="Twitter__button" target="_blank" title="Follow @<?= $handle; ?> on Twitter" href="https://twitter.com/intent/follow?screen_name=<?= $handle; ?>">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path fill="none" d="M0 0h72v72H0z"/><path class="icon" fill="#fff" d="M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z"/></svg>
+        <span class="Twitter__button__label">Follow @<?= $handle; ?></span>
+    </a>
+    <br />
+<?php } ?>