Merge pull request creativecommons#810 from MohdMuslim92/feature/share-button

Add prominent link to CC tools and clarify site purpose (Fixes creativecommons#793)

Author: TimidRobot

content/contents.lr

@@ -9,15 +9,22 @@ title:
 
 We have been building <span class="has-text-forest-green">free software</span> at <span class="has-text-gold">Creative Commons</span> for over a decade.
 ----
-description:
-
-We work on code and products that support digital creativity and sharing, from usability of our legal tools to enabling discovery of CC-licensed content.
-----
 links:
 
+<p class="hero-description">We work on code and products that support digital creativity and sharing, from usability of our legal tools to enabling discovery of CC-licensed content.</p>
+<div class="hero-links">
+  <!-- Button linking to the developer community page -->
+  <a class="button small is-success row" href="/community">
+    Join the Developer Community
+  </a>
+</div>
+
+<p class="hero-description">This site is for developers looking to contribute, but anyone can use CC tools to share their works.</p>
 <div class="hero-links">
-  <a class="button small is-success row" href="/community">Join the Developer Community</a>
-  <a class="button small row" href="https://twitter.com/cc_opensource"><i class="icon twitter"></i>Follow us on twitter</a>
+  <!-- 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/blocks/hero.html

@@ -7,9 +7,6 @@ <h1>
     </div>
     <div class="columns margin-right-0">
       <div class="column is-5">
-        <p class="hero-description">
-          {{ this.description }}
-        </p>
         {{ this.links }}
       </div>
     </div>

themes/vocabulary_theme/templates/layout.html

@@ -238,7 +238,7 @@ <h5 class="b-header">Subscribe to our newsletter</h5>
                   <input type="submit" value="subscribe" class="button small">
                  </form>
                </div>
-              <div class="attribution margin-top-bigger">
+               <div class="attribution margin-top-bigger">
                 <p class="caption">
                   Except where otherwise
                   <a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">noted</a>,

webpack/sass/home-page.scss

@@ -2,28 +2,35 @@
 .hero {
   @extend .margin-top-large;
 
+  // Title styling within the hero section
   .hero-title {
     @extend .padding-horizontal-big;
   }
 
+  // Description styling within the hero section
   .hero-description {
     @extend .body-bigger;
     @extend .padding-top-big;
     @extend .padding-horizontal-big;
   }
 
+  // Links container within the hero section
   .hero-links {
     @extend .margin-vertical-normal;
     @extend .padding-horizontal-big;
 
+    // Button styling within the hero links
     .button {
       @extend .margin-top-normal;
       text-decoration: none;
-
-      .icon {
-        @extend .margin-right-small;
-        @extend .padding-vertical-smaller;
-      }
+      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
+      box-sizing: border-box; // Include padding in width calculation
+      text-align: center;     // Center text inside buttons
+      line-height: 1.2;       // Set line height for readability
+      white-space: normal;    // Allow text wrapping within buttons
     }
   }