Addded colours and a test layout.
This commit is contained in:
parent
9df6949011
commit
75b48e1a47
3
dev.js
3
dev.js
|
|
@ -31,6 +31,9 @@ chokidar.watch("./src").on("change", () => {
|
||||||
|
|
||||||
console.log("Compile done! Saving changes...")
|
console.log("Compile done! Saving changes...")
|
||||||
|
|
||||||
|
if (!fs.existsSync("./out"))
|
||||||
|
fs.mkdirSync("./out")
|
||||||
|
|
||||||
fs.writeFileSync(
|
fs.writeFileSync(
|
||||||
"./out/main.css",
|
"./out/main.css",
|
||||||
css
|
css
|
||||||
|
|
|
||||||
166
src/_palette.scss
Normal file
166
src/_palette.scss
Normal file
|
|
@ -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;
|
||||||
18
src/defaults.scss
Normal file
18
src/defaults.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,23 @@
|
||||||
|
@use "palette";
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 200;
|
||||||
|
margin: .75em 0 .25em 0;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3.2rem;
|
font-size: 3.2rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 5rem;
|
||||||
|
height: .1rem;
|
||||||
|
background-color: palette.$primary;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|
@ -16,19 +34,29 @@ h4 {
|
||||||
|
|
||||||
// NOTE: We don't recommend using h5 or h6...
|
// NOTE: We don't recommend using h5 or h6...
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 2.4rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 2.4rem;
|
font-size: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
padding: 3rem 0;
|
||||||
|
|
||||||
> h1 {
|
> h1 {
|
||||||
|
margin: 0;
|
||||||
font-size: 6.4rem;
|
font-size: 6.4rem;
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> h2 {
|
> h2 {
|
||||||
|
margin: 0;
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
9
src/layouts/publishing.scss
Normal file
9
src/layouts/publishing.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
body.publishing {
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 5vh 0;
|
||||||
|
width: min(80ch, 90vw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
// Hello world!
|
// This is the entry point for all SCSS!
|
||||||
|
|
||||||
|
@use "defaults";
|
||||||
@use "fonts";
|
@use "fonts";
|
||||||
@use "headings";
|
@use "headings";
|
||||||
@use "text";
|
@use "text";
|
||||||
|
|
||||||
|
@use "layouts/publishing";
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
p {
|
p {
|
||||||
|
font-family: 'Alegreya', serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
{% extends "templates/base.njk" %}
|
{% extends "templates/publishing.njk" %}
|
||||||
|
|
||||||
{% block body %}
|
{% block main %}
|
||||||
<header>
|
<header>
|
||||||
<h1>H1 in a header!</h1>
|
<h1>Nebulosa CSS</h1>
|
||||||
<h1>H2 in a header!</h1>
|
<h2>A showcase of the publishing layout</h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<h1>A fancy heading h1</h1>
|
<h1>A fancy heading h1</h1>
|
||||||
<h2>A fancy heading h1</h2>
|
<h2>A fancy heading h2</h2>
|
||||||
<h3>A fancy heading h1</h3>
|
<h3>A fancy heading h3</h3>
|
||||||
<h4>A fancy heading h1</h4>
|
<h4>A fancy heading h4</h4>
|
||||||
<h5>A fancy heading h1</h5>
|
<h5>A fancy heading h5</h5>
|
||||||
<h6>A fancy heading h1</h6>
|
<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>
|
<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 %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,5 @@
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<h1>Welcome to Nebulosa CSS!</h1>
|
<h1>Welcome to Nebulosa CSS!</h1>
|
||||||
|
<a href="/headings">Headings</a>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
20
web/templates/publishing.njk
Normal file
20
web/templates/publishing.njk
Normal file
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user