Fixed padding on Twitter icon

elrumo · Mar 19, 2021 · 22f38f0 · 22f38f0 · vercel · Mar 19, 2021
1 parent 98df0d2
commit 22f38f0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/website/macos-big-sur-icons/src/components/Header.vue b/website/macos-big-sur-icons/src/components/Header.vue
@@ -115,7 +115,7 @@
                                 href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
                                 @click="logDonation('header')"
                             >
-                                <span>Donate</span>
+                                <span>Buy me a coffee</span>
                             </a>
                         </div>
 
@@ -185,18 +185,19 @@
                     <div>
                         <a rel="noopener" class="" target="_blank" href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN" @click="logDonation('header')">
                             <button is="coral-button">
-                                <span>Donate</span>
+                                <span>Buy me a coffee</span>
                             </button>
                         </a>
                     </div>
 
                     <!-- Submit icons -->
-                    <div>
+                    <div class="hide-on-shrink">
                         <button is="coral-button" variant="cta" @click="showDialog('submitIcon')">
                             <span>Submit icons</span>
                         </button>
                     </div>
-
+
+                    <!-- Twitter -->
                     <a href="https://twitter.com/elrumo" target="_blank" rel="noopener">
                         <img :src="icons.twitter" class="header-item header-icon" alt="">
                     </a>

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -311,7 +311,7 @@ main{
 
 .header-icon{
     height: 22px;
-    padding: 0px 20px;
+    padding: 0px 0px 0px 20px;
     cursor: pointer;
     position: relative;
     top: 50%;
@@ -1144,7 +1144,7 @@ main{
 
 }
 
-@media only screen and (max-width: 966px){
+@media only screen and (max-width: 1024px){
 
     .card-wrapper{
         max-width: 350px;   
@@ -1163,6 +1163,10 @@ main{
         grid-template-columns: 1.2fr 1.2fr;
         padding-top: 0px;
     }
+
+    .hide-on-shrink{
+        display: none;
+    }
 
 }