Addded colours and a test layout.

2023-03-03 00:06:27 +01:00 · 2023-03-03 00:06:27 +01:00 · 75b48e1a47
parent 9df6949011
commit 75b48e1a47
11 changed files with 280 additions and 13 deletions
--- 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
--- a/src/_palette.scss
+++ 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;
--- a/src/defaults.scss
+++ 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;
+}
--- 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;
+}
--- 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;
    }
 }
--- a/src/layouts/publishing.scss
+++ b/src/layouts/publishing.scss
@ -0,0 +1,9 @@
+body.publishing {
+    display: grid;
+    place-content: center;
+
+    main {
+        margin: 5vh 0;
+        width: min(80ch, 90vw);
+    }
+}
--- 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";
+@use "text";
+
+@use "layouts/publishing";
--- a/src/text.scss
+++ b/src/text.scss
@ -1,3 +1,4 @@
 p {
+    font-family: 'Alegreya', serif;
    font-size: 1rem;
 }
--- 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 %}
--- 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 %}
--- a/web/templates/publishing.njk
+++ 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>