Address feedback: removed Twitter button, moved 'Share your work' button, updated styling and padding

Author: MohdMuslim92

content/contents.lr

@@ -17,26 +17,20 @@ links:
 
 <!-- Container for the hero section links -->
 <div class="hero-links">
-  <!-- Button linking to the Creative Commons "Share your work" page -->
-  <a class="button small row" href="https://creativecommons.org/share-your-work/" style="background-color: red; color: white;">
-    Share your work using our licenses/tools
-  </a>
-
   <!-- Button linking to the developer community page -->
   <a class="button small is-success row" href="/community">
     Join the Developer Community
   </a>
 
-  <!-- Button linking to Creative Commons' Twitter page -->
-  <a class="button small row" href="https://twitter.com/cc_opensource">
-    <!-- Icon displayed before the text inside the button -->
-    <i class="icon twitter"></i> Follow us on Twitter
-  </a>
-
   <!-- Informational text about the purpose of the site -->
-  <p>
+  <div class = "hero-notice">
     This site is for developers looking to contribute, but anyone can use CC tools to share their works.
-  </p>
+  </div>
+
+  <!-- Button linking to the Creative Commons "Share your work" page -->
+  <a class="button small row" href="https://creativecommons.org/share-your-work/">
+    Share your work using our licenses/tools
+  </a>
 </div>
 
 #### get-involved ####

themes/vocabulary_theme/templates/layout.html

@@ -249,12 +249,6 @@ <h5 class="b-header">Subscribe to our newsletter</h5>
                   by
                   <a href="https://fontawesome.com/" target="_blank" rel="noopener">Font Awesome</a>.
                 </p>
-                <!-- Notice for site purpose and link to CC tools -->
-                <p class="caption">
-                  This site is for developers looking to contribute to Creative Commons. Anyone can use 
-                  <a href="https://creativecommons.org/share-your-work/" target="_blank" rel="noopener">CC tools</a> 
-                  to share their works.
-                </p>
                 <div class="margin-top-smaller">
                   <i class="icon margin-right-small is-size-4">cclogo</i>
                   <i class="icon margin-right-small is-size-4">ccby</i>

webpack/sass/home-page.scss

@@ -19,31 +19,24 @@
     @extend .margin-vertical-normal;
     @extend .padding-horizontal-big;
 
-    // Use flexbox for layout
-    display: flex;
-    flex-direction: column; // Stack buttons vertically
-    align-items: center;    // Center-align the buttons
+    .hero-notice {
+      @extend .body-bigger;
+      @extend .padding-top-normal;
+      @extend .has-text-dark-slate-gray;
+    }
 
     // Button styling within the hero links
     .button {
-      // Apply normal top margin from the defined style
       @extend .margin-top-normal;
-      text-decoration: none; // Remove default underline from links
-      margin-bottom: 0.5rem; // Add spacing between buttons
+      text-decoration: none;
+      display: inline-block;          /* Allow the button to wrap around the text */
       width: 100%;           // Full width of the container
+      height: fit-content;  // Fit the content within the button
       max-width: 300px;     // Maximum width for buttons
-      padding: 1rem;        // Padding inside buttons
       box-sizing: border-box; // Include padding in width calculation
       text-align: center;    // Center text inside buttons
-      font-size: 1em;       // Set font size
       line-height: 1.2;     // Set line height for readability
       white-space: normal;   // Allow text wrapping within buttons
-
-      // Icon styling within buttons
-      .icon {
-        @extend .margin-right-small;
-        @extend .padding-vertical-smaller;
-      }
     }
   }