restyle global layout and course cards

views/layout.pug

@@ -4,8 +4,8 @@ html
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
   body
-    #main
-      #main__header
+    .main
+      .main__header
         header.header
           .header__upper-wrapper
             .header__upper.layout-centered
@@ -50,10 +50,10 @@ html
                   li
                     a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
 
-      #main__content
+      .main__content
         block content
 
-      #main__footer
+      .main__footer
         .layout-centered
           footer.footer
             .footer__upper

views/mixins/_courseCard.pug

@@ -3,7 +3,8 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
     .course-card__categories
       if(course.fields.categories)
         each category in course.fields.categories
-          a.course-card__category(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
+          .course-card__category
+            a.course-card__category-link(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
     h2.course-card__title= course.fields.title
     p.course-card__description= course.fields.shortDescription
     .course-card__link-wrapper