fix typos

DOCS.md

@@ -0,0 +1,76 @@
+## Font size
+
+### Configuration
+
+The following values can be used to configure the font size:
+
+```css
+:root {
+	--text-scale: 1.2;
+}
+```
+
+Building on this value, these variables are available, where `--text-sm` is slightly less than `1em` and `--text-md` is slightly more.
+
+```css
+--text-xs
+--text-sm
+--text-md
+--text-lg
+--text-xl
+--text-xxl
+--text-xxxl
+```
+
+## Spacing
+
+Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. `--spacing-3`) doubles, the corresponding spacing should also double (`--spacing-6`).
+
+```css
+--spacing-0: 0;
+--spacing-px: 1px;
+--spacing-05: 0.125rem; 
+
+/* 1 */
+--spacing-1: 0.25rem;
+--spacing-2: 0.5rem;
+--spacing-3: 0.75rem;
+--spacing-4: 1rem;
+--spacing-5: 1.25rem;
+--spacing-6: 1.5rem;
+--spacing-7: 1.75rem;
+--spacing-8: 2rem;
+--spacing-9: 2.25rem;
+--spacing-10: 2.5rem;
+
+/* 2 */
+--spacing-12: 3rem;
+--spacing-14: 3.5rem;
+--spacing-16: 4rem;
+--spacing-18: 4.5rem;
+--spacing-20: 5rem;
+
+/* 4 */
+--spacing-24: 6rem;
+--spacing-28: 7rem;
+--spacing-32: 8rem;
+--spacing-36: 9rem;
+--spacing-40: 10rem;
+
+/* 8 */
+--spacing-48: 12rem;
+--spacing-56: 14rem;
+--spacing-64: 16rem;
+--spacing-80: 20rem;
+--spacing-96: 24rem;
+```
+
+## Colors
+
+Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.
+
+Every color has 10 values, `--<color>-50` and from `--<color>-100` and with `--<color>-900`.
+
+The included colors are taken from the great [Tailwind.css](https://tailwindcss.com).
+
+![Tailwind Palette](./media/tailwind.png)

README.md

@@ -2,12 +2,11 @@
 
 An abstract baseline css framework
 
-
 ## What is it?
 
 Ghost is not a framework, it'S merely a set of css variables which provide a nice foundation for small css projects and constistent styling.
 
-The premise of ghost is that it should **not be visible** in your project. 
+The premise of ghost is that it should **not be visible** in your project since it only consists of css variables. A the same time, these variables are available everywhere in your project, even in the live site!
 
 ## What does it include?
 
@@ -17,79 +16,10 @@ Ghost includes the following components:
 - Spacing
 - Colors
 
-## Font size
+## How to Use it
 
-### Configuration
-
-The following values can be used to configure the font size:
+In your project, include it like:
 
 ```css
-:root {
-	--text-scale: 1.2;
-}
-```
-
-Building on this value, these variables are available, where `--text-sm` is slightly less than `1em` and `--text-md` is slightly more.
-
-```css
---text-xs
---text-sm
---text-md
---text-lg
---text-xl
---text-xxl
---text-xxxl
-```
-
-## Spacing
-
-Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. `--spacing-3`) doubles, the corresponding spacing should also double (`--spacing-6`).
-
-```css
---spacing-0: 0;
---spacing-px: 1px;
---spacing-05: 0.125rem; 
-
-/* 1 */
---spacing-1: 0.25rem;
---spacing-2: 0.5rem;
---spacing-3: 0.75rem;
---spacing-4: 1rem;
---spacing-5: 1.25rem;
---spacing-6: 1.5rem;
---spacing-7: 1.75rem;
---spacing-8: 2rem;
---spacing-9: 2.25rem;
---spacing-10: 2.5rem;
-
-/* 2 */
---spacing-12: 3rem;
---spacing-14: 3.5rem;
---spacing-16: 4rem;
---spacing-18: 4.5rem;
---spacing-20: 5rem;
-
-/* 4 */
---spacing-24: 6rem;
---spacing-28: 7rem;
---spacing-32: 8rem;
---spacing-36: 9rem;
---spacing-40: 10rem;
-
-/* 8 */
---spacing-48: 12rem;
---spacing-56: 14rem;
---spacing-64: 16rem;
---spacing-80: 20rem;
---spacing-96: 24rem;
-```
-
-## Colors
-
-Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.
-
-Every color has 10 values, `--<color>-50` and from `--<color>-100` and with `--<color>-900`.
-
-The included colors are taken from the great [Tailwind.css](https://tailwindcss.com).
-
-![Tailwind Palette](./media/tailwind.png)
+@import "ghost-css/src/app.css"
+```

src/app.css

@@ -1,7 +1,7 @@
-import "modern-normalize";
+@import "modern-normalize";
 
-import "grays.css";
-import "colors.css";
-import "spacing.css";
-import "font-scale.css";
+@import "grays.css";
+@import "colors.css";
+@import "spacing.css";
+@import "font-scale.css";
 

src/grays.css

@@ -25,7 +25,7 @@
 	--gray-900: #111827;
 }
 
-:root.theme-slate
+:root.theme-slate {
 	--gray-50: #F8FAFC;
 	--gray-100: #F1F5F9;
 	--gray-200: #E2E8F0;