Update signin graphics

Author: MeMMa137

app/assets/stylesheets/application.css

@@ -467,7 +467,7 @@ h1, h2, h3, h4, h5, h6 {
    position: absolute;
    bottom: 0;
    left: 0;
-   width: clamp(150px, 20vw, 280px);
+   width: clamp(800px, 20vw, 280px);
    z-index: 2;
 }
 

app/views/layouts/application.html.erb

@@ -6,6 +6,8 @@
     <title><%= content_for?(:title) ? yield(:title) : "Reboot" %></title>
     <%= csrf_meta_tags %>
     <meta name="csrf-token" content="<%= form_authenticity_token %>">
+    <link rel="icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
+    <link rel="shortcut icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
     <link rel="stylesheet" href="/stylesheets/application.css?v=6">
     <script defer src="/javascripts/application.js?v=2"></script>
   </head>

app/views/pages/signin.html.erb

@@ -2,16 +2,25 @@
 <% content_for :page, "signin" %>
 
 <div class="signin-page">
-  <img src="/images/signin/hackclub.svg" class="signin-flag" alt="Hack Club 2025">
+  <a href="https://hackclub.com/" target="_blank" rel="noopener">
+    <img src="/images/signin/hackclub.svg" class="signin-flag" alt="Hack Club 2025">
+  </a>
 
   <div class="signin-content">
     <img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A6LSXCXPF/image.png?pub_secret=dc0d11081a" class="signin-crane-text" alt="Reboot">
 
-    <p class="signin-subtitle">Restore old projects --> upgrade your desktop setup!</p>
-    
     <%= form_tag("/auth/hack_club", method: :post) do %>
-      <button type="submit" class="signin-btn">Start Now</button>
+      <button type="submit" class="signin-btn" style="background: transparent; padding: 0; box-shadow: none; border: none;">
+        <img
+          src="https://files.slack.com/files-pri/T09V59WQY1E-F0A7999BL3T/startbutton.png?pub_secret=346938b95a"
+          alt="Start Now"
+          class="signin-start-img"
+          onerror="this.onerror=null;this.src='/img/signin/startButton.PNG';"
+        >
+      </button>
     <% end %>
+    
+    <p class="signin-subtitle">Restore old projects --> upgrade your desktop setup!</p>
   </div>
 
   <img src="/images/signin/animal.png" class="signin-mole" alt="Mole">

img/signin/startButton.PNG

@@ -905,7 +905,8 @@ a.project-row:hover {
 
 /* Signin Page */
 [data-page="signin"] {
-  background: transparent;
+  background: var(--bg) url('/images/signin/background.PNG') no-repeat center center fixed;
+  background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }
@@ -923,8 +924,8 @@ a.project-row:hover {
 .signin-flag {
   position: absolute;
   top: 16px;
-  left: 16px;
-  width: 120px;
+  left: 0px;
+  width: 200px;
   z-index: 10;
 }
 
@@ -938,14 +939,21 @@ a.project-row:hover {
 }
 
 .signin-crane-text {
-   width: clamp(300px, 80vw, 800px);
+   width: clamp(550px, 90vw, 1100px);
    height: auto;
-   margin-bottom: 20px;
+   margin-bottom: 0px;
    order: 1;
 }
 
+/* Start button image */
+.signin-start-img {
+  width: clamp(100px, 22vw, 200px);
+  height: auto;
+}
+
 .signin-content form {
-   order: 4;
+   order: 2;
+   margin-top: -150px;
 }
 
 .signin-subtitle {
@@ -967,7 +975,7 @@ a.project-row:hover {
    color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
-   margin-top: 16px;
+   margin-top: 0;
 }
 
 .signin-btn:hover {
@@ -978,7 +986,7 @@ a.project-row:hover {
    position: absolute;
    bottom: 0;
    left: 0;
-   width: clamp(150px, 20vw, 280px);
+   width: clamp(400px, 20vw, 280px);
    z-index: 2;
 }