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;
@@ -20,4 +20,4 @@
 .timestamp {
   font-size: 13px;
   color: #ccc;
-}
+}

src/components/DocumentPreview/DocumentPreview.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 
 .container {
@@ -17,4 +17,4 @@
 
 .continueLink {
   text-decoration: none;
-}
+}

src/components/DropdownMenu/DropdownMenu.scss

@@ -1,4 +1,4 @@
-@import '../../utils/constants.scss';
+@import '~styles/constants.scss';
 
 .label {
   display: flex;
@@ -48,4 +48,4 @@
   &:hover {
     border-left: 2px solid #2196F3;
   }
-}
+}

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 */
@@ -56,4 +56,4 @@
   .cm-s-atlas .CodeMirror-activeline-background { background: #DDDCDC; }
   .cm-s-atlas .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
   .cm-s-atlas .CodeMirror-placeholder { color: rgba(0, 0, 0, 0.5); font-weight: bold; }
-}
+}

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;
@@ -43,4 +43,4 @@
   ::-webkit-scrollbar {
     display: none;
   }
-}
+}

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/codemirror.scss

@@ -337,4 +337,4 @@
 
   /* Help users use markselection to safely style text background */
   span.CodeMirror-selectedtext { background: none; }
-}
+}

src/styles/constants.scss

@@ -1,3 +1,5 @@
+$lightGray: #eee;
+
 $textColor: #171B35;
 $linkColor: #0C77F8;
 
@@ -5,4 +7,4 @@ $headerHeight: 42px;
 
 :export {
   textColor: $textColor;
-}
+}

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;
-}
+}

src/styles/hljs-github-gist.scss

@@ -70,4 +70,4 @@
   .hljs-link {
     text-decoration: underline;
   }
-}
+}