WIP: New design

package.json

@@ -19,6 +19,7 @@
     "aws-sdk": "^2.295.0",
     "express": "^4.16.3",
     "fs-extra": "^7.0.0",
+    "include-media": "^1.4.9",
     "linkify-urls": "^2.0.0",
     "mathjax-node-page": "^2.0.0",
     "s3-recursive-uploader": "^0.3.0",

src/assets/css/_colors.scss

@@ -0,0 +1,5 @@
+// Don't use alpha, because borders mix together
+$borderColor: black;
+$lightBorderColor: lighten(black, 50%);
+
+$secondaryBackground: darken(white, 5%);

src/assets/css/_fonts.scss

@@ -1,29 +1,81 @@
-%body-font {
-  font-family: $bodyFontFamily;
-  font-size: 17px;
-  line-height: 1.55em;
+@import "./media";
 
-  @media (min-width: 768px) {
-    font-size: 20px;
+$fontFamilyComputerModern: "CMUSerif-Roman", serif;
+$fontFamilyHelvetica: "Helvetica Neue", Helvetica, sans-serif;
+$fontFamilyMonospace: "CMUTypewriter-Light", monospace;
+
+%font-medium {
+  font-family: $fontFamilyComputerModern;
+  font-size: 16px;
+  line-height: 1.5;
+
+  @include media(">=tablet", "<desktop") {
+    font-size: 18px;
+  }
+
+  @include media(">=desktop") {
+    font-size: 24px;
   }
 }
 
-%system-font {
-  font-family: $systemFontFamily;
+%font-monospace {
+  font-family: $fontFamilyMonospace;
+
   font-size: 14px;
-  line-height: 1.55em;
+  line-height: 1.5;
+
+  @include media(">=tablet", "<desktop") {
+    font-size: 16px;
+  }
 
-  @media (min-width: 768px) {
-    font-size: 15px;
+  @include media(">=desktop") {
+    font-size: 22px;
   }
 }
 
-%system-font-small {
-  font-family: $systemFontFamily;
+%font-sans-serif-heading {
+  font-family: $fontFamilyHelvetica;
+
+  font-size: 14px;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: 400;
+  text-transform: uppercase;
+
+  @include media(">=tablet", "<desktop") {
+    font-size: 18px;
+  }
+
+  @include media(">=desktop") {
+    font-size: 20px;
+  }
+}
+
+%font-sans-serif-heading-small {
+  @extend %font-sans-serif-heading;
+
   font-size: 12px;
-  line-height: 1.55em;
 
-  @media (min-width: 768px) {
-    font-size: 13px;
+  @include media(">=tablet", "<desktop") {
+    font-size: 14px;
+  }
+
+  @include media(">=desktop") {
+    font-size: 16px;
+  }
+}
+
+%font-sans-serif-small {
+  font-family: $fontFamilyHelvetica;
+  font-size: 12px;
+
+  @include media(">=tablet", "<desktop") {
+    font-size: 14px;
+  }
+
+  @include media(">=desktop") {
+    font-size: 16px;
   }
 }

src/assets/css/_media.scss

@@ -0,0 +1,7 @@
+@import "../../../node_modules/include-media/dist/include-media";
+
+$breakpoints: (
+  phone: 320px,
+  tablet: 768px,
+  desktop: 1024px
+);