Improve footer appearance

src/vue/Footer.vue

@@ -2,37 +2,23 @@
     <footer>
         <div class="container">
             <div class="row">
-                <div class="col-12 col-lg-6 addr">
+                <div class="col-12 col-lg-6 address">
                     Tips:
-                    <span class="donation-address" v-text="tipsAddress"></span>
+                    <a :href="'https://etherscan.io/address/' + tipsAddress" target="_blank" v-text="tipsAddress"></a>
                 </div>
-                <div class="col-12 col-lg-6">
+                <div class="col-12 col-lg-6 links">
-                    <div class="row">
-                        <div class="col-6 col-sm-4 no-gutter">
                     <a :href="'https://etherscan.io/address/' + tipsAddress" target="_blank">
-                                <button type="button">
                         <i class="icon-ethereum"></i>&nbsp;&nbsp;&nbsp;Donate
-                                </button>
                     </a>
-                        </div>
-                        <div class="col-6 col-sm-4 no-gutter">
                     <a href="https://github.com/bokub/vanity-eth/stargazers" target="_blank">
-                                <button type="button" id="btn-star">
                         <i class="icon-star"></i>&nbsp;&nbsp;&nbsp;Star&nbsp;me
-                                </button>
                     </a>
-                        </div>
-                        <div class="col-4 no-mobile no-gutter">
                     <a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH" target="_blank">
-                                <button type="button" id="btn-download">
                         <i class="icon-download"></i>&nbsp;&nbsp;&nbsp;Download
-                                </button>
                     </a>
                 </div>
             </div>
         </div>
-            </div>
-        </div>
     </footer>
 </template>
 
@@ -49,38 +35,24 @@
 <style lang="sass" scoped>
     @import "../css/variables"
     footer
-        padding: 1.5rem 0
+        padding: 1rem 0 0.5rem
         background-color: $panel-background
-        color: $white-text
+        color: $grey-text
-        .addr
+        a
+            text-decoration: none
+        .address
             margin-bottom: 20px
-        .donation-address
+            color: $white-text
+            a
                 font-family: monospace
                 font-size: 1.2em
-            color: $grey-text
                 margin-left: 15px
                 word-break: break-all
-        button
+        .links
-            border: none
+            text-align: right
-            outline: none
+            a
-            color: $white-text
+                margin-right: 30px
-            padding: 0 0.8em
+                padding-bottom: 2px
-            line-height: 40px
-            font-weight: 500
-            cursor: pointer
-            -webkit-appearance: none
-            background-color: $teal
                 i
-                font-size: 1.3em
+                    font-size: 1.2em
-                position: relative
-                top: 2px
-                color: lighten($teal, 40)
-            &:hover
-                background-color: $yellow
-                i
-                    color: lighten($yellow, 40)
-
-    @media screen and (max-width: 576px)
-        .no-mobile
-            display: none
 </style>