From 75b48e1a47dbf1900be694112c4a69a2ee108789 Mon Sep 17 00:00:00 2001
From: BurnyLlama <burnyllama@protonmail.com>
Date: Fri, 3 Mar 2023 00:06:27 +0100
Subject: [PATCH] Addded colours and a test layout.

---
 dev.js                       |   3 +
 src/_palette.scss            | 166 +++++++++++++++++++++++++++++++++++
 src/defaults.scss            |  18 ++++
 src/fonts.scss               |  18 ++++
 src/headings.scss            |  32 ++++++-
 src/layouts/publishing.scss  |   9 ++
 src/main.scss                |   7 +-
 src/text.scss                |   1 +
 web/pages/headings.njk       |  18 ++--
 web/pages/index.njk          |   1 +
 web/templates/publishing.njk |  20 +++++
 11 files changed, 280 insertions(+), 13 deletions(-)
 create mode 100644 src/_palette.scss
 create mode 100644 src/defaults.scss
 create mode 100644 src/layouts/publishing.scss
 create mode 100644 web/templates/publishing.njk

diff --git a/dev.js b/dev.js
index 4c8e49e..d36842b 100644
--- a/dev.js
+++ b/dev.js
@@ -31,6 +31,9 @@ chokidar.watch("./src").on("change", () => {
 
     console.log("Compile done! Saving changes...")
 
+    if (!fs.existsSync("./out"))
+        fs.mkdirSync("./out")
+
     fs.writeFileSync(
         "./out/main.css",
         css
diff --git a/src/_palette.scss b/src/_palette.scss
new file mode 100644
index 0000000..1aec24b
--- /dev/null
+++ b/src/_palette.scss
@@ -0,0 +1,166 @@
+$grey50: #FAFAFF;
+$grey100: #EEEEF7;
+$grey200: #CECEE3;
+$grey300: #AEAED1;
+$grey400: #8484AE;
+$grey500: #6B6B94;
+$grey600: #52527A;
+$grey700: #3B3B5E;
+$grey800: #1F1F47;
+$grey900: #0F0F24;
+
+$black: #000008;
+$white: #FCFCFF;
+
+$red50: #FFE3E4;
+$red100: #FFCFD0;
+$red200: #FFCFD0;
+$red300: #FA989A;
+$red400: #F77275;
+$red500: #E04F53;
+$red600: #C4393E;
+$red700: #9C2A2E;
+$red800: #780D11;
+$red900: #59080B;
+$red: $red500;
+
+$orange50: #FFF3DB;
+$orange100: #FFEDC9;
+$orange200: #FFDF9E;
+$orange300: #FCCD6F;
+$orange400: #FABC41;
+$orange500: #F5A300;
+$orange600: #D68F00;
+$orange700: #AD7400;
+$orange800: #855800;
+$orange900: #694600;
+$orange: $orange500;
+
+$yellow50: #FFFCE0;
+$yellow100: #FFF9BF;
+$yellow200: #FFF599;
+$yellow300: #FFF27D;
+$yellow400: #FFE854;
+$yellow500: #F0D911;
+$yellow600: #DEC800;
+$yellow700: #C7B400;
+$yellow800: #B09F00;
+$yellow900: #8A7C00;
+$yellow: $yellow500;
+
+$pear50: #F8FFDB;
+$pear100: #F4FFC9;
+$pear200: #EEFFAB;
+$pear300: #E9FF91;
+$pear400: #DAF56C;
+$pear500: #C3E344;
+$pear600: #9FC700;
+$pear700: #7F9917;
+$pear800: #5B7006;
+$pear900: #46540D;
+$pear: $pear500;
+
+$green50: #EBFCE8;
+$green100: #E1FADC;
+$green200: #D2F7CB;
+$green300: #B1F0A5;
+$green400: #8DE87D;
+$green500: #64DB4F;
+$green600: #54B842;
+$green700: #469937;
+$green800: #3B822F;
+$green900: #295920;
+$green: $green500;
+
+$sea50: #D9FFEF;
+$sea100: #C5FAE4;
+$sea200: #ABF7D7;
+$sea300: #83F2C4;
+$sea400: #55EDAE;
+$sea500: #27E596;
+$sea600: #1BC27D;
+$sea700: #15A167;
+$sea800: #0E784C;
+$sea900: #0A5436;
+$sea: $sea500;
+
+$cyan50: #E5FFFF;
+$cyan100: #CFFFFE;
+$cyan200: #B4FAF9;
+$cyan300: #94F7F6;
+$cyan400: #72F2F2;
+$cyan500: #2FEBEB;
+$cyan600: #14DEDE;
+$cyan700: #10B5B5;
+$cyan800: #0D8F8F;
+$cyan900: #0A6B6B;
+$cyan: $cyan500;
+
+$blue50: #E5F3FF;
+$blue100: #D4EBFF;
+$blue200: #BFE1FF;
+$blue300: #BFE1FF;
+$blue400: #72BCFC;
+$blue500: #44A6FC;
+$blue600: #2184DB;
+$blue700: #196CB5;
+$blue800: #135894;
+$blue900: #0E4575;
+$blue: $blue500;
+
+$indigo50: #EBEBFF;
+$indigo100: #D6D6FF;
+$indigo200: #C7C8FF;
+$indigo300: #A8AAFF;
+$indigo400: #8587FF;
+$indigo500: #6D6FF2;
+$indigo600: #5658DB;
+$indigo700: #4648BD;
+$indigo800: #363799;
+$indigo900: #26277A;
+$indigo: $indigo500;
+
+$purple50: #F7E8FF;
+$purple100: #F1D9FC;
+$purple200: #E5BBFA;
+$purple300: #D698F5;
+$purple400: #C571F0;
+$purple500: #B647ED;
+$purple600: #9E3CCF;
+$purple700: #7C2EA3;
+$purple800: #5D1E7D;
+$purple900: #4A1663;
+$purple: $purple500;
+
+$magenta50: #FFE8FF;
+$magenta100: #FFD6FF;
+$magenta200: #FCC2FC;
+$magenta300: #FCA2FC;
+$magenta400: #FA7DFA;
+$magenta500: #EB5BEB;
+$magenta600: #D943D9;
+$magenta700: #C23AC2;
+$magenta800: #9E2B9E;
+$magenta900: #751D75;
+$magenta: $magenta500;
+
+$pink50: #FFE5F2;
+$pink100: #FFCCE6;
+$pink200: #FFADD5;
+$pink300: #FF87C1;
+$pink400: #FF69B2;
+$pink500: #FF4DA3;
+$pink600: #E03D8C;
+$pink700: #C9347D;
+$pink800: #AD2A6A;
+$pink900: #8C2055;
+$pink: $pink500;
+
+$surface: $grey100;
+$text: $grey800;
+$primary: $sea;
+
+$success: $sea;
+$danger: $red;
+$warning: $yellow;
+$info: $blue;
\ No newline at end of file
diff --git a/src/defaults.scss b/src/defaults.scss
new file mode 100644
index 0000000..fd26d22
--- /dev/null
+++ b/src/defaults.scss
@@ -0,0 +1,18 @@
+@use "palette";
+
+:root,
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    line-height: 1.5;
+}
+
+:root,
+body {
+    font-family: 'Manrope', sans-serif;
+    color: palette.$text;
+    background-color: palette.$surface;
+}
\ No newline at end of file
diff --git a/src/fonts.scss b/src/fonts.scss
index e69de29..26ce4d6 100644
--- a/src/fonts.scss
+++ b/src/fonts.scss
@@ -0,0 +1,18 @@
+@font-face {
+    font-family: 'Manrope';
+    src: local('Manrope'), url("/assets/fonts/Manrope-Variable.woff2") format("woff2");
+    font-weight: 200 800;
+}
+
+@font-face {
+    font-family: 'Alegreya';
+    src: local('Alegreya'), url("/assets/fonts/Alegreya-Regular.woff2") format("woff2");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: 'Alegreya';
+    src: local('Alegreya'), url("/assets/fonts/Alegreya-Italic.woff2") format("woff2");
+    font-weight: 400;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/src/headings.scss b/src/headings.scss
index 91ef717..ce12e8c 100644
--- a/src/headings.scss
+++ b/src/headings.scss
@@ -1,5 +1,23 @@
+@use "palette";
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 200;
+    margin: .75em 0 .25em 0;
+}
+
 h1 {
     font-size: 3.2rem;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 5rem;
+        height: .1rem;
+        background-color: palette.$primary;
+    }
 }
 
 h2 {
@@ -16,19 +34,29 @@ h4 {
 
 // NOTE: We don't recommend using h5 or h6...
 h5 {
-    font-size: 2.4rem;
+    font-size: 1.6rem;
 }
 
 h6 {
-    font-size: 2.4rem;
+    font-size: 1.4rem;
 }
 
 header {
+    padding: 3rem 0;
+
     > h1 {
+        margin: 0;
         font-size: 6.4rem;
+        font-weight: 300;
+
+        &::before {
+            content: none;
+        }
     }
 
     > h2 {
+        margin: 0;
         font-size: 4.8rem;
+        font-weight: 200;
     }
 }
\ No newline at end of file
diff --git a/src/layouts/publishing.scss b/src/layouts/publishing.scss
new file mode 100644
index 0000000..7ee80fd
--- /dev/null
+++ b/src/layouts/publishing.scss
@@ -0,0 +1,9 @@
+body.publishing {
+    display: grid;
+    place-content: center;
+
+    main {
+        margin: 5vh 0;
+        width: min(80ch, 90vw);
+    }
+}
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
index 82c894e..15bd810 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -1,5 +1,8 @@
-// Hello world!
+// This is the entry point for all SCSS!
 
+@use "defaults";
 @use "fonts";
 @use "headings";
-@use "text";
\ No newline at end of file
+@use "text";
+
+@use "layouts/publishing";
\ No newline at end of file
diff --git a/src/text.scss b/src/text.scss
index 2a5428c..40c6308 100644
--- a/src/text.scss
+++ b/src/text.scss
@@ -1,3 +1,4 @@
 p {
+    font-family: 'Alegreya', serif;
     font-size: 1rem;
 }
\ No newline at end of file
diff --git a/web/pages/headings.njk b/web/pages/headings.njk
index 1e9ffcf..e5c4699 100644
--- a/web/pages/headings.njk
+++ b/web/pages/headings.njk
@@ -1,17 +1,17 @@
-{% extends "templates/base.njk" %}
+{% extends "templates/publishing.njk" %}
 
-{% block body %}
+{% block main %}
 	<header>
-		<h1>H1 in a header!</h1>
-		<h1>H2 in a header!</h1>
+		<h1>Nebulosa CSS</h1>
+		<h2>A showcase of the publishing layout</h2>
 	</header>
 
 	<h1>A fancy heading h1</h1>
-	<h2>A fancy heading h1</h2>
-	<h3>A fancy heading h1</h3>
-	<h4>A fancy heading h1</h4>
-	<h5>A fancy heading h1</h5>
-	<h6>A fancy heading h1</h6>
+	<h2>A fancy heading h2</h2>
+	<h3>A fancy heading h3</h3>
+	<h4>A fancy heading h4</h4>
+	<h5>A fancy heading h5</h5>
+	<h6>A fancy heading h6</h6>
 
 	<p>Paragraph for comparison. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repudiandae hic, inventore asperiores nobis, molestiae at similique molestias dolore atque itaque dicta vitae? Laborum odio, quo molestiae corrupti veritatis culpa aliquid reprehenderit, nesciunt et eum dicta accusamus excepturi nostrum nihil soluta necessitatibus ratione earum? Cumque consequuntur obcaecati, id ipsa cupiditate nesciunt asperiores numquam fuga eveniet sit delectus, magni et quisquam laboriosam officia tenetur nisi?</p>
 {% endblock %}
diff --git a/web/pages/index.njk b/web/pages/index.njk
index c9e5e02..403c100 100644
--- a/web/pages/index.njk
+++ b/web/pages/index.njk
@@ -2,4 +2,5 @@
 
 {% block body %}
 	<h1>Welcome to Nebulosa CSS!</h1>
+	<a href="/headings">Headings</a>
 {% endblock %}
diff --git a/web/templates/publishing.njk b/web/templates/publishing.njk
new file mode 100644
index 0000000..3eb244f
--- /dev/null
+++ b/web/templates/publishing.njk
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" type="text/css" href="/assets/main.css">
+		{% block head %}
+			<title>Nebulosa CSS</title>
+		{% endblock %}
+	</head>
+	<body class="publishing">
+		<main>
+			{% block main %}
+				<h1>Nebulosa CSS</h1>
+				<p>Hello world!</p>
+			{% endblock %}
+		</main>
+	</body>
+</html>
\ No newline at end of file