Style gmail button

Make all buttons in the mobile view equally wide
niccostantini · Oct 9, 2024 · cb04868 · cb04868
1 parent fb91463
commit cb04868
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/styles.css b/src/styles.css
@@ -40,6 +40,10 @@ r {
     font-weight: 700;
 }
 
+.mail {
+    svg path { fill: #c71610 }
+}
+
 header {
     box-shadow: 0px 5px 18px -6px rgba(0,0,0,0.75);
 }
@@ -266,6 +270,7 @@ footer div:last-child {
             flex-direction: row;
             align-items: center;
             height: 75px;
+            width: 290px;
 
             background-color: var(--air-force-blue);
             color: var(--creamy-white);
@@ -305,6 +310,19 @@ footer div:last-child {
             box-shadow: -6px 7px 5px #0000008f;
         }
 
+        .card.mail {
+            border-top: 3px solid #c71610;
+            border-right: 3px solid #f2a60c;
+            border-bottom: 3px solid #3b60c4;
+            border-left: 3px solid #08851b;
+
+            background-color: var(--jet);
+        }
+
+        .card.mail:hover {
+            background-color: #0a0000;
+        }
+
         .ig {
             background: #833ab4;
             background: linear-gradient(
@@ -580,6 +598,19 @@ footer div:last-child {
             box-shadow: -6px 7px 5px #0000008f;
         }
 
+        .card.mail {
+            border-top: 3px solid #c71610;
+            border-right: 3px solid #f2a60c;
+            border-bottom: 3px solid #3b60c4;
+            border-left: 3px solid #08851b;
+
+            background-color: var(--jet);
+        }
+
+        .card.mail:hover {
+            background-color: #0a0000;
+        }
+
         .ig {
             background: #833ab4;
             background: linear-gradient(

diff --git a/src/template.html b/src/template.html
@@ -67,9 +67,9 @@ <h2>Unisciti all'armonia</h2>
            </a>
 
            <a class="fadein" href="mailto:[email protected]">
-               <div class="card">
-                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
-                <div class="details mail">
+               <div class="card mail">
+                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" id="gmail"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
+                <div class="details">
                     <p>[email protected]</p>
                 </div>
                </div>