Adjustments to CTA button sizing/alignment

Claire Gallup · Claire Gallup · commit 0796c95ef837 · 2021-07-01T13:48:58.000-05:00
diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
diff --git a/_site/atom.xml b/_site/atom.xml
@@ -4,7 +4,7 @@
  <title>BrickHack</title>
  <link href="https://coderit.org/atom.xml" rel="self"/>
  <link href="https://coderit.org/"/>
- <updated>2021-07-01T13:21:20-05:00</updated>
+ <updated>2021-07-01T13:48:36-05:00</updated>
  <id>https://coderit.org</id>
  <author>
    <name></name>
diff --git a/_site/index.html b/_site/index.html
@@ -42,9 +42,11 @@ <h2 class="title coderit">WHAT IS BRICKHACK?</h2>
     <p>BrickHack is a community of students passionate about running hackathons: fast-paced prototyping events. Our members love the challenge of organizing great events through careful planning, empathy, and a little bit of luck.</p>
     <p>Our club's main event is (aptly named) BrickHack - RIT's largest hackathon, running for 24 hours every spring. You can find more details about the upcoming BrickHack 8 below.</p>
     <p>More info coming soon!</p>
-    <p class="center"><a href="https://campusgroups.rit.edu/BrickHack/club_signup" class="button orange">Join BrickHack on CampusGroups<span class="fa fa-arrow-right icon-space-l"></span></a></p>
-    <p class="center"><a href="https://brickhack.io" class="button orange">Visit BrickHack event site<span class="fa fa-arrow-right icon-space-l"></span></a></p>
-    <p class="center"><span class="button orange disabled">Discord server coming soon!</span></p>
+    <div class="button-cta grid-cta three">
+      <div class="col center"><a href="https://campusgroups.rit.edu/BrickHack/club_signup" class="button orange">View on<br/>CampusGroups<span class="fa fa-arrow-right icon-space-l"></span></a></div>
+      <div class="col center"><a href="https://brickhack.io" class="button orange">Visit BrickHack<br/>event site<span class="fa fa-arrow-right icon-space-l"></span></a></div>
+      <div class="col center"><span class="button orange disabled">Discord server<br/>coming soon!</span></div>
+    </div>
     <hr/>
     <div class="col center badge-cta">
       <i class="fa fa-book fa-5x badge-icon coderit"></i>
diff --git a/assets/css/main.sass b/assets/css/main.sass
@@ -205,6 +205,10 @@ a
 #about
 	.title
 		margin-bottom: 110px
+	.button-cta
+		.button
+			padding-left: 30px
+			padding-right: 30px
 	.badge-cta
 		.badge-icon
 			@include border-radius (100%)
@@ -370,6 +374,10 @@ a
 		.title
 			margin-bottom: 25px
 	#about
+		.button-cta
+			.button
+				width: 80%
+				max-width: 300px
 		.badge-cta
 			margin-bottom: 40px
 			.badge-icon
diff --git a/index.html b/index.html
@@ -15,9 +15,11 @@ <h2 class="title coderit">WHAT IS BRICKHACK?</h2>
     <p>BrickHack is a community of students passionate about running hackathons: fast-paced prototyping events. Our members love the challenge of organizing great events through careful planning, empathy, and a little bit of luck.</p>
     <p>Our club's main event is (aptly named) BrickHack - RIT's largest hackathon, running for 24 hours every spring. You can find more details about the upcoming BrickHack 8 below.</p>
     <p>More info coming soon!</p>
-    <p class="center"><a href="https://campusgroups.rit.edu/BrickHack/club_signup" class="button orange">Join BrickHack on CampusGroups<span class="fa fa-arrow-right icon-space-l"></span></a></p>
-    <p class="center"><a href="https://brickhack.io" class="button orange">Visit BrickHack event site<span class="fa fa-arrow-right icon-space-l"></span></a></p>
-    <p class="center"><span class="button orange disabled">Discord server coming soon!</span></p>
+    <div class="button-cta grid-cta three">
+      <div class="col center"><a href="https://campusgroups.rit.edu/BrickHack/club_signup" class="button orange">View on<br/>CampusGroups<span class="fa fa-arrow-right icon-space-l"></span></a></div>
+      <div class="col center"><a href="https://brickhack.io" class="button orange">Visit BrickHack<br/>event site<span class="fa fa-arrow-right icon-space-l"></span></a></div>
+      <div class="col center"><span class="button orange disabled">Discord server<br/>coming soon!</span></div>
+    </div>
     <hr/>
     <div class="col center badge-cta">
       <i class="fa fa-book fa-5x badge-icon coderit"></i>
