Compare commits
2 Commits
9df6949011
...
6a403e3b64
Author | SHA1 | Date |
---|---|---|
Fabian Seluska | 6a403e3b64 | |
Fabian Seluska | ea133e7ed6 |
3
dev.js
3
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
|
||||
|
|
|
@ -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;
|
|
@ -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 {
|
||||
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;
|
||||
}
|
||||
}
|
|
@ -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 "headings";
|
||||
@use "text";
|
||||
@use "text";
|
||||
|
||||
@use "layouts/publishing";
|
|
@ -1,3 +1,4 @@
|
|||
p {
|
||||
font-family: 'Alegreya', serif;
|
||||
font-size: 1rem;
|
||||
}
|
|
@ -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 %}
|
||||
|
|
|
@ -2,4 +2,5 @@
|
|||
|
||||
{% block body %}
|
||||
<h1>Welcome to Nebulosa CSS!</h1>
|
||||
<a href="/headings">Headings</a>
|
||||
{% endblock %}
|
||||
|
|
|
@ -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