add github button and new start text

Megaemce · Apr 17, 2024 · 93d23e5 · 93d23e5
1 parent ede4873
commit 93d23e5
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 7 deletions.
diff --git a/fire.css b/fire.css
@@ -26,7 +26,7 @@ body {
     width: 100vmin;
     bottom: 0;
     left: calc(((100vw - 100vmin) / 2));
-    background-color: rgba(114, 99, 90, 0.13);
+    background-color: rgb(92 47 21 / 31%);
 }
 
 /* bonfire image used in the background to create the flickering sensation */
@@ -106,6 +106,7 @@ body {
     background-image: url(noiseSmall.svg), url(noiseNormal.svg),
         url(noiseBig.svg),
         linear-gradient(180deg, black, #656565d1 50%, #ffb100);
+
     background-size: 50% 50%, 50% 50%, 50% 50%, 100% 100%;
     background-blend-mode: difference, difference, difference, darken;
 
@@ -134,7 +135,6 @@ body {
 
     filter: grayscale(1) contrast(1.5) invert(1);
 
-    /* overlay could do too, will make the smoke more visible */
     mix-blend-mode: multiply;
 
     /* making the smoke goes up */
@@ -260,22 +260,55 @@ body {
 }
 
 /* start button */
-button {
+button.startButton {
     position: absolute;
     z-index: 6;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 
-    font-size: xx-large;
-    font-family: monospace;
-    color: rgb(111, 73, 34);
+    background-image: url(startTheFire.svg);
+    background-size: 80%;
+    background-repeat: no-repeat;
+    background-position: center;
     background-color: #000000f5;
+
     border: none;
+    transition: filter 0.3s ease-in-out;
     cursor: pointer;
 }
 
+button.startButton:hover {
+    filter: contrast(1.75);
+}
+
+button.gitHubButton {
+    position: absolute;
+    z-index: 7;
+    width: 30px;
+    height: 30px;
+    margin: 30px;
+    top: 0;
+    left: 90%;
+
+    background-image: url(github.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #000000f5;
+
+    filter: opacity(0.25);
+    transition: filter 0.3s ease-in-out;
+
+    border: none;
+    cursor: pointer;
+}
+
+button.gitHubButton:hover {
+    filter: opacity(1);
+}
+
 /* smoke animation that goes up */
 @keyframes smoke {
     from {

diff --git a/github.svg b/github.svg
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
     <head>
         <title>Bonfire 🔥</title>
+        <meta name="description" content="CSS only realistic bonfire" />
         <link rel="stylesheet" type="text/css" href="fire.css" />
     </head>
     <body>
@@ -15,7 +16,17 @@
                 <div class="fire_lights"></div>
                 <div class="bon_front"></div>
             </div>
-            <button id="start" onclick="startSound()">START THE FIRE</button>
+            <button
+                title="Click to start the fire"
+                id="start"
+                class="startButton"
+                onclick="startSound()"
+            ></button>
+            <button
+                title="Source code on GitHub"
+                class="gitHubButton"
+                onclick="window.open('https://github.com/Megaemce/Bonfire', '_blank')"
+            ></button>
         </div>
 
         <audio id="fireSound" loop>

diff --git a/startTheFire.svg b/startTheFire.svg