styling changes

src/views/event/partials/event_panel.hbs

@@ -12,21 +12,23 @@
         </div>
     </div>
     <div class=" Panel-footer u-flex u-flexJustifyAround u-padSm">
-        <a class="Button" href="/{{team.id}}/event/{{event.id}}">
-            <span>{{{embeddedSvgFromPath "/bootstrap-icons/calendar.svg"}}}</span> 
-            <span class="u-hidden u-xs-inline">Details</span> 
-        </a>
-        <a class="Button" href="/{{team.id}}/event/{{event.id}}/lineup">
-            <span>{{{embeddedSvgFromPath "/bootstrap-icons/clipboard.svg"}}}</span> 
-            <span class="u-hidden u-xs-inline">Lineup</span> 
-        </a>
-        <a class="Button" href="/{{team.id}}/event/{{event.id}}/sheet">
-            <span>{{{embeddedSvgFromPath "/bootstrap-icons/file-earmark.svg"}}}</span> 
-            <span class="u-hidden u-xs-inline">Sheet</span> 
-        </a>
-        <a class="Button" href="https://go.teamsnap.com/{{team.id}}/schedule/view_game/{{event.id}}">
-            <span>{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span> 
-            <span class="u-hidden u-xs-inline">TeamSnap</span> 
-        </a>
+        <div class="u-maxWidthXs">
+            <a class="Button" href="/{{team.id}}/event/{{event.id}}">
+                <span>{{{embeddedSvgFromPath "/bootstrap-icons/calendar.svg"}}}</span>
+                <span class="u-hidden">Details</span>
+            </a>
+            <a class="Button" href="/{{team.id}}/event/{{event.id}}/lineup">
+                <span>{{{embeddedSvgFromPath "/bootstrap-icons/clipboard.svg"}}}</span>
+                <span class="u-hidden">Lineup</span>
+            </a>
+            <a class="Button" href="/{{team.id}}/event/{{event.id}}/sheet">
+                <span>{{{embeddedSvgFromPath "/bootstrap-icons/file-earmark.svg"}}}</span>
+                <span class="u-hidden">Sheet</span>
+            </a>
+            <a class="Button" href="https://go.teamsnap.com/{{team.id}}/schedule/view_game/{{event.id}}">
+                <span>{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span>
+                <span class="u-hidden">TeamSnap</span>
+            </a>
+        </div>
     </div>
 </div>

src/views/layouts/main.hbs

@@ -25,7 +25,7 @@
         {{> navbar }}
         {{{_sections.header}}}
     </header>
-    <main class="u-sm-spaceSidesMd">
+    <main class="u-xs-spaceSidesMd">
     {{{ body }}}
     </main>
 </body>

src/views/opponent/list.hbs

@@ -1,5 +1,6 @@
 <h1>
   {{title}}
+  <hr class="Divider" />
 </h1>
 <div class="Panel">
   <div class="Panel-body">

src/views/team/home.hbs

@@ -29,24 +29,23 @@
   </div>
 </div>
 
-<div class=" Panel Panel--full">
-  <div class=" Panel-header">
-    <h2 class=" Panel-title">Upcoming Events</h2>
-  </div>
-  <div class=" Panel-body">
+
+<h2 class=" ">Upcoming Events</h2>
+<hr class="Divider" />
+<div class="Grid Grid--withGutter">
     {{#each upcoming_events}}
+  <div class="Grid-cell u-xs-size1of2 u-sm-size1of3">
       {{>event_panel event=this}}
-    {{/each}}
   </div>
+    {{/each}}
 </div>
 
-<div class=" Panel Panel--full">
-  <div class=" Panel-header">
-    <h2 class=" Panel-title">Recent Events</h2>
-  </div>
-  <div class=" Panel-body">
+<h2 class="">Recent Events</h2>
+<hr class="Divider" />
+<div class="Grid Grid--withGutter">
     {{#each recent_events}}
+  <div class="Grid-cell u-xs-size1of2 u-sm-size1of3">
       {{>event_panel event=this}}
-    {{/each}}
   </div>
+    {{/each}}
 </div>