fix: make bands transparent and update styling

Signed-off-by: Bryan Behrenshausen <[email protected]>

Author: semioticrobotic

css/sassoftware.css

@@ -261,9 +261,10 @@ a:hover {
 button,
 .button {
   margin-bottom: .5rem;
-  margin-right: 3rem;
 }
-
+.grid-container .button {
+	margin-right: 3rem;
+}
 .button,
 button,
 input[type="submit"],
@@ -287,7 +288,6 @@ input[type="button"] {
 	cursor: pointer;
 	box-sizing: border-box; 
 }
-
 .button:hover,
 button:hover,
 input[type="submit"]:hover,
@@ -302,7 +302,6 @@ input[type="button"]:focus {
 	border-color: var(--accent-hue);
 	outline: 0; 
 }
-
 .button.button-classic,
 button.button-classic,
 input[type="submit"].button-classic,
@@ -311,8 +310,8 @@ input[type="button"].button-classic {
   color: var(--button-inverted-color);
   background-color: var(--button-primary-color);
   border-color: var(--button-primary-color); 
+  text-decoration: none !important;
 }
-
 .button.button-classic:hover,
 button.button-classic:hover,
 input[type="submit"].button-classic:hover,
@@ -327,7 +326,6 @@ input[type="button"].button-classic:focus {
   background-color: var(--button-primary-accent);
   border-color: var(--button-primary-accent); 
 }
-
 .button.button-inverted,
 button.button-inverted,
 input[type="submit"].button-inverted,
@@ -338,7 +336,6 @@ background-color: transparent);
 border-color: var(--button-inverted-color); 
 text-decoration: none !important;
 }
-
 .button.button-inverted:hover,
 button.button-inverted:hover,
 input[type="submit"].button-inverted:hover,

index.html

@@ -93,11 +93,11 @@ <h3>Read the guide</h3>
 
 <!-- Banded section -->
 
-<div class="band gray-band">
+<div class="band transparent-band">
 	<div>
 		<h2>SAS® Studio custom steps</h2>
         <p class="u-embiggen">Create custom interfaces for SAS® Studio on SAS® Viya®. Customize, save, and share with other users at your site.</p>
-		<p><a class="button button-inverted" href="https://github.com/sassoftware/sas-studio-custom-steps" title="sas-studio-custom-steps">Create now</a></p>
+		<p><a class="button button-classic" href="https://github.com/sassoftware/sas-studio-custom-steps" title="sas-studio-custom-steps">Create now</a></p>
 	</div>
 </div>
 
@@ -200,11 +200,11 @@ <h4>Deploy now</h4>
 
 <!-- Banded section -->
 
-<div class="band gray-band">
+<div class="band transparent-band">
 	<div>
 		<h2>SAS education resources</h2>
 		<p class="u-embiggen">A collection of hands-on instructions, examples, data, and tutorials to support your SAS training journey.</p>
-		<p><a class="button button-inverted" href="https://github.com/sassoftware/sas-education">Start learning</a><p>
+		<p><a class="button button-classic" href="https://github.com/sassoftware/sas-education">Start learning</a><p>
 	</div>
 </div>