change button colour

Author: LinuxJava7

index.html

@@ -57,10 +57,10 @@ <h2>Projects and Contributions</h2>
               <img alt="BuildTheEarth.net - Recreating Earth in Minecraft" src="https://cdn.buildtheearth.net/uploads/879c4af49ee880f348c95e9fd7bdb11dd526fda08ce6dd9c1bfaee3b91a7368e">
             </a>
             <div class="description">
-              <h4>
+              <h3>
                 <img src="https://buildtheearth.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.65c70928.gif&w=96&q=75" alt="BuildTheEarth Logo" style="vertical-align: middle; width: 1em; height: auto;" />
                 BuildTheEarth.net
-              </h4>
+              </h3>
               <p>A project that aims to recreate the Earth in Minecraft. Also a <a href="https://www.guinnessworldrecords.com/world-records/734997-biggest-minecraft-project" target="_blank" rel="noopener noreferrer">Guinness World Record holder</a> for the largest Minecraft project in the world.</p>
               <h4>Team Owner & System Administrator</h4>
               <p>Team owner for the Middle East region, also managing the Minecraft server as its system admin. <a href="https://buildtheearth.net/teams/me" target="_blank" rel="noopener noreferrer">Visit my team</a></p>
@@ -73,11 +73,10 @@ <h4>Support Staff Member (From August 2020 to September 2023)</h4>
               <img alt="AvdanOS - Linux Desktop Environment Project" src="https://raw.githubusercontent.com/Avdan-OS/Website/dev/src/public/assets/marketing/header.png">
             </a>
             <div class="description">
-              <h4>
-              <h4>
+              <h3>
                 <img src="https://avatars.githubusercontent.com/u/103757089" alt="AvdanOS Logo" style="vertical-align: middle; width: 1em; height: auto;" />
                 AvdanOS
-              </h4>
+              </h3>
               <p>Linux Desktop environment project based on <a href="https://youtu.be/tXFEiw1aJTw" target="_blank" rel="noopener noreferrer">a concept by Avdan</a>.</p>
               <h4>UI Designer (From 2022 to 2023)</h4>
               <p>Created some UI mockups and design systems for the desktop within the design team.</p>
@@ -91,7 +90,7 @@ <h2>Other Interests</h2>
           <div class="tile" id="devs">
             <img alt="GNOME Developer Platform" src="https://upload.wikimedia.org/wikipedia/commons/9/97/GNOME_Shell.png">
             <div class="description">
-              <h4>GNOME</h4>
+              <h3>GNOME</h3>
               <p>Linux Desktop Environment</p>
               <p>GNOME is one of my main inspirations for UI and UX design, they do some really great stuff :)</p>
               <a class="btn dark" href="https://www.gnome.org/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.785 1.082c.559.512 1.223 1.207 2.18 2.168.281.281.39.746.176 1.246a.664.664 0 0 0 .152.719c.262.254.68.254.945 0 .262-.262.793-.086.922.043l.48.48v-.004a.997.997 0 0 1 0 1.418L13.278 9.52c-.39.39-1.027.39-1.418 0l-.46-.524a.667.667 0 0 1 0-.945.667.667 0 0 0 0-.946c-.262-.253-.747-.296-1.012-.043L9.215 8.168 6.773 5.723s.84-.828 1.086-1.067c.618-.625.063-1.152-.21-1.418-.665-.66-2.04-.922-2.977-.883a.676.676 0 0 1-.66-.44.67.67 0 0 1 .234-.763C7-.008 9.7-.008 10.786 1.082zm-2.45 8.035-5.288 5.278c-.371.375-.672.625-1.02.625a2.056 2.056 0 0 1-2-2c0-.532.13-.727.504-1.098l5.297-5.274zm0 0"></path></svg> Visit GNOME</a>

style.css

@@ -8,7 +8,7 @@
   --ctp-lavender: var(--ctp-latte-lavender);
   --ctp-antitext: var(--ctp-frappe-text);
   --ctp-antibase: var(--ctp-frappe-base-rgb);
-  --ctp-antiblue: var(--ctp-frappe-blue);
+  --ctp-antiblue: var(--ctp-frappe-blue-rgb);
   --ctp-antilavender: var(--ctp-frappe-lavender);
 
   /* Layout Variables */
@@ -229,7 +229,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 }
 
 .tile p {
-  opacity: 1;
+  opacity: 0.8;
   margin: 0;
   padding: 0;
   font-size: 0.95rem;
@@ -247,7 +247,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
 .tile a {
   justify-self: start;
   width: 100%;
-  color: var(--ctp-antiblue);
+  color: rgb(var(--ctp-antiblue));
 }
 
 .tile a:not(.btn) {
@@ -263,8 +263,9 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   max-width: 12rem;
   font-size: 80%;
   border-radius: var(--btnsqr);
-  background-color: var(--ctp-antiblue);
+  background-color: rgba(var(--ctp-antiblue)/ 50%);
   color: var(--ctp-antitext);
+  opacity: 1;
   font-weight: 600;
   font-variation-settings: "wght" 600;
   padding: 0.6rem 1.5rem;
@@ -275,15 +276,15 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   transition: box-shadow 200ms var(--slickease);
   margin: 0.3rem;
   border: none;
-  box-shadow: 0 0 0 0 var(--ctp-antiblue);
+  box-shadow: 0 0 0 0 rgba(var(--ctp-antiblue)/ 50%);
   min-width: 4rem;
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
 }
 
 .tile .btn:hover {
-  box-shadow: 0 0 0 2px var(--ctp-antiblue);
+  box-shadow: 0 0 0 2px rgba(var(--ctp-antiblue)/ 50%);
   text-decoration: none;
 }