Merge pull request #344 from mcspach/buttons

design system buttons

_includes/action.html

@@ -12,7 +12,7 @@
         </p>
       </div>
       <div class="action_card_actions">
-        <a href="{{ site.pages[1].url | relative_url }}" class="contribute">
+        <a href="{{ site.pages[1].url | relative_url }}" class="default_light">
           Get Involved
         </a>
       </div>

_includes/border.html

@@ -12,7 +12,7 @@
         <p>
           You have an idea for an automation and want to submit it.
         </p>
-        <a href="{{ site.pages[4].url | relative_url }}" class="button_primary">
+        <a href="{{ site.pages[4].url | relative_url }}" class="default_light">
           Submit Idea
         </a>
       </div>
@@ -21,7 +21,7 @@
         <p>
           You want to build your own approved automation idea or pick from a list of approved ideas.
         </p>
-        <a href="{{ site.pages[2].url | relative_url }}" class="button_primary">
+        <a href="{{ site.pages[2].url | relative_url }}" class="default_light">
           Start Building
         </a>
       </div>
@@ -30,7 +30,7 @@
         <p>
           You want to contribute to an existing automation that’s already being developed.
         </p>
-        <a href="{{ site.pages[3].url | relative_url }}" class="button_primary">
+        <a href="{{ site.pages[3].url | relative_url }}" class="default_light">
           Start Contributing
         </a>
       </div>

_includes/guide_grid.html

@@ -3,7 +3,7 @@
   <div class="guides_title flexbox_row">
     <span id="guides_title_text">Guides</span>
     <div class="spacer"></div>
-    <a id="suggest_a_guide" href="{{site.guides[6].url | relative_url }}">Suggest a guide</a>
+    <a class="secondary_dark" href="{{site.guides[6].url | relative_url }}">Suggest a guide</a>
   </div>
   <div class="guide_grid flexbox_row">
     <!-- Jekyll loops through our guides collection -->

_layouts/guides.html

@@ -13,7 +13,7 @@ <h1 class="title1 col1">
     <section class="body-container body-container--guides">
         <div class="content-container content-container--guide">
           <h5 class="title5">In This Guide</h5>
-          <p class="p1"> Learn best practice for creating a good project image </p>
+          <p class="p1">{{page.description}}</p>
           {{content}}
         </div>
 

_sass/components/buttons.scss

@@ -1,44 +1,69 @@
-.button_primary {
-    width: 180px;
+a {
+    font-family: $poppins;
+    font-weight: 600;
+    text-decoration: none;
     text-align: center;
-    padding: 14px;
+}
+
+a.default_dark {
     border-radius: 28px;
+    width: 180px;
+    padding: 12px 30px;
     background-color: $primary;
+    color: white;
 }
 
-.button_primary:hover {
-    background-color: $primaryhover;
+a.default_dark:hover {
+    border: 4px solid #CDCBBF;
 };
 
-a.contribute{
-    display: flexbox;
-    text-decoration: none;
-    color: $primary;
-    background: linear-gradient(180deg, #FFFFFF 0%, #D9E1E5 100%);
+a.default_light {
     border-radius: 28px;
+    width: 180px;
     padding: 12px 30px;
-    font-family: $poppins;
-    font-weight: 600;
-    margin: 4rem;
+    color: $primary;
+    background: $whitegradient;
 };
+a.default_light:hover {
+    border: 4px solid #CDCBBF;
+    padding: 8px 26px;
+}
+
+a.secondary_dark {
+    border-radius: 28px;
+    width: 180px;
+    padding: 12px 30px;
+    border: 2px solid $primary;
+    background-color: none;
+    color: $primary;
+}
+a.secondary_dark:hover {
+    padding: 12px 28px;
+    border: 4px solid $primary;
+}
+
+a.secondary_light {
+    border-radius: 28px;
+    width: 180px;
+    padding: 12px 30px;
+    border: 2px solid $white;
+    background-color: none;
+    color: $white;
+}
+a.secondary_light:hover {
+    padding: 12px 28px;
+    border: 4px solid $white;
+}
 
 a.read_me_button{
     width: 100%;
     height: 38px; 
     background: $secondary;
     border-radius: 28px;
     box-shadow: 0px 3.86033px 9.65083px rgba(0, 0, 0, 0.25), inset 0px 3.86033px 3.86033px rgba(255, 255, 255, 0.25);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: $poppins;
-    text-align: center;
-    text-transform: none;
-    font-weight: 600;
     font-size: 20px;
     line-height: 42px; 
     color: $white;
-    text-decoration: none;
     i {
         margin-left: 10px;
     }

_sass/includes/ato_grid.scss

@@ -143,9 +143,6 @@
                 ;
             }
             ;
-            @media screen and (max-width:480px) {
-            }
-            ;
         }
         ;
     }

_sass/includes/border.scss

@@ -47,15 +47,6 @@
                 flex-wrap: nowrap;
                 }
                 ;
-
-                a {
-                text-decoration: none;
-                color: $primary;
-                background: linear-gradient(180deg, #FFFFFF 0%, #D9E1E5 100%);
-                font-family: $poppins;
-                font-weight: 600;
-                }
-                ;
         }
         ;
         @media screen and (max-width: 480px) {

_sass/includes/guide_grid.scss

@@ -11,19 +11,6 @@
         flex:1
       }
       ;
-      #suggest_a_guide{
-        border: 2px solid #003750;
-        box-sizing: border-box;
-        border-radius: 28px;
-        padding: 12px 22px;
-        text-decoration: none;
-        font-weight: 600;
-        font-size: 18px;
-        line-height: 22px;
-        font-family: $poppins;
-        color: #003750;
-      }
-      ;
       #guides_title_text{
         position: inherit;
         left:120px;
@@ -48,9 +35,6 @@
           margin: 12px;
           padding: 6px;
           background: linear-gradient(130.94deg, #F36437 0.77%, #C93709 100.78%);
-          a{
-            text-decoration: none;
-          }
           ;
           .guide_card_title {
               display: block;

_sass/variables/colors.scss

@@ -23,4 +23,6 @@ $labelred: #A80909;
 
 // gradients
 
+$whitegradient: linear-gradient(180deg, #FFFFFF 0%, #D9E1E5 100%);
+