Reorganized styles

src/components/AtlasPreview/AtlasPreview.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 .container {
   display: flex;

src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss

@@ -1,4 +1,4 @@
-@import '../../../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 .link {
   display: flex;

src/components/DocumentPreview/DocumentPreview.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 
 .container {

src/components/DropdownMenu/DropdownMenu.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 .label {
   display: flex;

src/components/Layout/Layout.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 .container {
   display: flex;
@@ -67,4 +67,3 @@
     padding-top: $headerHeight;
   }
 }
-

src/components/MarkdownEditor/codemirror.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 :global {
   /* Custom styling */

src/index.js

@@ -10,10 +10,10 @@ import stores from 'stores';
 window.stores = stores;
 
 import 'normalize.css/normalize.css';
-import 'utils/base-styles.scss';
-import 'fonts/atlas/atlas.css';
-import 'assets/styles/github-gist.scss';
-import 'assets/styles/codemirror.css';
+import 'styles/base.scss';
+import 'styles/fonts.css';
+import 'styles/hljs-github-gist.scss';
+import 'styles/codemirror.scss';
 
 import Application from 'scenes/Application';
 

src/scenes/DocumentEdit/DocumentEdit.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 .preview {
   display: flex;

src/styles/base.scss

@@ -25,6 +25,12 @@ body {
   margin: 0;
   color: $textColor;
   background-color: #fff;
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 img {
   max-width: 100%;

src/styles/constants.scss

@@ -1,3 +1,5 @@
+$lightGray: #eee;
+
 $textColor: #171B35;
 $linkColor: #0C77F8;
 

src/styles/fonts.css

@@ -1,48 +1,48 @@
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-Regular-Web.woff') format('woff');
+  src: url('../fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-Medium-Web.woff') format('woff');
+  src: url('../fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-RegularItalic-Web.woff') format('woff');
+  src: url('../fonts/atlas/AtlasGrotesk-RegularItalic-Web.woff') format('woff');
   font-weight: normal;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-MediumItalic-Web.woff') format('woff');
+  src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff');
   font-weight: bold;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-MediumItalic-Web.woff') format('woff');
+  src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff');
   font-weight: bold;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Atlas Typewriter';
-  src: url('./AtlasTypewriterRegular.woff') format('woff');
+  src: url('../fonts/atlas/AtlasTypewriterRegular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Atlas Typewriter';
-  src: url('./AtlasTypewriterMedium.woff') format('woff');
+  src: url('../fonts/atlas/AtlasTypewriterMedium.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }