feat(readme): improve markdown css

qri-io · Apr 20, 2020 · 2956882 · 2956882
1 parent 99b2179
commit 2956882
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 13 deletions.
diff --git a/app/assets/fonts/RobotoMono-Regular.ttf b/app/assets/fonts/RobotoMono-Regular.ttf
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -176,7 +176,7 @@ export const NavbarComponent: React.FunctionComponent<NavbarProps> = (props: Nav
           <NavbarItem
             id='nav-options'
             icon={
-              <div className='photo' style={{
+              <div className='userphoto' style={{
                 backgroundImage: `url(${photo})`
               }}/>
             }

diff --git a/app/scss/_readme.scss b/app/scss/_readme.scss
@@ -1,9 +1,51 @@
 .CodeMirror {
   padding: 1rem;
+
+  .CodeMirror-lines {
+    font-family: $font-family-monospace;
+  }
 }
 
+
+
 .editor-preview {
   padding: 1rem;
+
+  h1, h2 {
+    padding-bottom: .3em;
+    border-bottom: 1px solid #eaecef;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4 {
+    font-size: 24px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h6 {
+    font-size: 13.6px;
+  }
 }
 
 .editor-preview > blockquote {
@@ -25,4 +67,4 @@
 .editor-preview > table {
   margin-top: 1rem;
   margin-bottom: 1rem;
-}
+}
diff --git a/app/scss/_site.scss b/app/scss/_site.scss
@@ -792,12 +792,7 @@ b {
     border-top: 1px solid #ddd;
 
     .CodeMirror-lines * {
-      font-size: 1rem !important;
-      font-weight: normal !important;
-      font-style: normal !important;
-      line-height: normal !important;
-      color: inherit !important;
-      text-decoration: none !important;
+      font-size: 12px !important;
     }
   }
 }

diff --git a/app/scss/_variables.scss b/app/scss/_variables.scss
@@ -254,9 +254,17 @@ $grid-gutter-width: 30px !default;
        url('../assets/fonts/rubik-v9-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 }
 
+/* RobotoMono */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../assets/fonts/RobotoMono-Regular.ttf') format('truetype'),
+}
+
 $font-family-sans-serif: "Avenir", "Rubik", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
 $font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace:  "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-monospace:  "Roboto Mono", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
 
 // Pixel value used to responsively scale all typography. Applied to the `<html>` element.

diff --git a/webpack.config.development.js b/webpack.config.development.js
@@ -106,8 +106,8 @@ module.exports = merge(baseConfig, {
         use: {
           loader: 'url-loader',
           options: {
-            limit: 10000,
-            mimetype: 'application/octet-stream'
+            limit: 110000,
+            mimetype: 'font/ttf'
           }
         }
       },

diff --git a/webpack.config.production.js b/webpack.config.production.js
@@ -90,8 +90,8 @@ module.exports = merge(baseConfig, {
         use: {
           loader: 'url-loader',
           options: {
-            limit: 10000,
-            mimetype: 'application/octet-stream'
+            limit: 110000,
+            mimetype: 'font/ttf'
           }
         }
       },