training css

frontend/components/training.js

@@ -1,3 +1,5 @@
+import theme from '../styles/theme'
+
 function calculateRating(ratings) {
   const numberOfRatings = ratings.length
   const sumOfRatings = ratings.reduce(
@@ -45,9 +47,7 @@ const Training = props => (
       </div>
       <div id='trainingRegistrations'>
         <span className='caption'>Registrations: </span>
-        <span className='data'>
-          {props.registration.length} <a href=''>Register!</a>
-        </span>
+        <span className='data'>          {props.registration.length}        </span>
       </div>
       <div id='trainingAttendance'>
         <span className='caption'>Attendance: </span>
@@ -65,6 +65,7 @@ const Training = props => (
           <a href=''>*</a>
         </span>
       </div>
+      <button>Register now!</button>
     </aside>
     <section>
       <h3>Content</h3>
@@ -81,24 +82,44 @@ const Training = props => (
       {`
         article {
           display: grid;
-          grid-template-columns: 1fr 3fr;
+          grid-template-areas: 
+            "title"
+            "information"
+            "content";
           background-color: rgba(127, 127, 127, 0.5);
+          background-image: url('media/man_working_out.jpg');
+          background-size: auto 400px;
+          background-repeat: no-repeat;
+          margin: 2em 0;
+        }
+
+        article > * {
+          padding: 0.2em 1em;
         }
 
         article > h2 {
+          grid-area: title;
           font-weight: 900;
           font-size: 120%;
+          background: ${theme.colors.darkerblue};
+          color: ${theme.colors.offWhite};
         }
 
         aside {
+          grid-area: information;
           padding: 1em 2em;
-          background: rgba(0,127,0,0.5);
+          height: 400px;
         }
 
         section {
+          grid-area: content;
           padding: 1em 2em;
           background: rgba(127, 0, 0, 0.5);
         }
+
+        span.caption {
+          display: none;
+        }
       `}
     </style>
   </article>

frontend/pages/index.js

@@ -29,24 +29,6 @@ const Home = () => (
         }
       } />
     </section>
-
-    <style jsx>
-      {`
-        #nextTraining {
-          background-image: url('media/man_working_out.jpg');
-          background-size: auto 400px;
-          background-repeat: no-repeat;
-          display: grid;
-          grid-template-rows: 48px 1fr;
-        }
-
-        #nextTraining > h1 {
-          background: rgba(32, 35, 40, 0.8);
-          padding: 5px 20px;
-          color: ${theme.colors.offWhite};
-        }
-      `}
-    </style>
   </>
 )