restyle global layout and course cards

assets/stylesheets/base/typography.css

@@ -1,5 +1,5 @@
 h1, h2, h3, h4, h5, h6 {
-  font-family: 'robotomedium', 'Arial Black', sans-serif;
+  font-family: var(--font-medium);
   font-weight: normal;
   line-height: 1.31;
   color: var(--color-text-headlines);

assets/stylesheets/course/card.css

@@ -16,12 +16,12 @@
     display: inline-block;
     color: var(--color-text-grey);
     font-size: 0.75em;
-    letter-spacing: 2px;
+    font-family: var(--font-medium);
 
     &:after {
-      content: '/';
+      content: ' • ';
       display: inline-block;
-      padding: 0 0.3em;
+      padding: 0 0.5em;
     }
 
     &:last-child:after {
@@ -29,6 +29,11 @@
     }
   }
 
+  @element category-link {
+    display: inline-block;
+    letter-spacing: 2px;
+  }
+
   @element title {
     flex: 0 1 12vh;
     max-height: 120px;
@@ -68,5 +73,10 @@
     font-size: 0.75em;
     line-height: 2.17;
     letter-spacing: 2px;
+
+    &:hover {
+      color: var(--color-link-content-hover);
+      border-bottom-color: var(--color-link-content-hover);
+    }
   }
 }

assets/stylesheets/global/index.css

@@ -13,19 +13,20 @@ body {
   line-height: var(--line-height);
 }
 
-#main {
+@block main {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-}
-#main__header {
+
+  @element header {
     flex: 0 0 auto;
   }
-#main__content {
+  @element content {
     flex: 1 0 auto;
     display: flex;
     align-items: stretch;
   }
-#main__footer {
+  @element footer {
     flex: 0 0 auto;
   }
+}

public/stylesheets/style.css

@@ -499,7 +499,7 @@ template {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: 'robotomedium', 'Arial Black', sans-serif;
+  font-family: 'robotomedium', Helvetica, sans-serif;
   font-weight: normal;
   line-height: 1.31;
   color: #2a3039
@@ -1470,7 +1470,7 @@ body {
   line-height: 1.5em;
 }
 
-#main {
+.main {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1481,13 +1481,13 @@ body {
   min-height: 100vh;
 }
 
-#main__header {
+.main__header {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 auto;
             flex: 0 0 auto;
 }
 
-#main__content {
+.main__content {
     -webkit-box-flex: 1;
         -ms-flex: 1 0 auto;
             flex: 1 0 auto;
@@ -1499,7 +1499,7 @@ body {
             align-items: stretch;
 }
 
-#main__footer {
+.main__footer {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 auto;
             flex: 0 0 auto;
@@ -1632,19 +1632,24 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
     display: inline-block;
     color: #8091a5;
     font-size: 0.75em;
-    letter-spacing: 2px;
+    font-family: 'robotomedium', Helvetica, sans-serif;
 }
 
 .course-card__category:after {
-  content: '/';
+  content: ' • ';
   display: inline-block;
-  padding: 0 0.3em;
+  padding: 0 0.5em;
 }
 
 .course-card__category:last-child:after {
   display: none;
 }
 
+.course-card__category-link {
+    display: inline-block;
+    letter-spacing: 2px;
+}
+
 .course-card__title {
     -webkit-box-flex: 0;
         -ms-flex: 0 1 12vh;
@@ -1692,6 +1697,11 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
     letter-spacing: 2px;
 }
 
+.course-card__link:hover {
+  color: #3c80cf;
+  border-bottom-color: #3c80cf;
+}
+
 .course {
   display: -webkit-box;
   display: -ms-flexbox;

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