"Publishing" layout done.
This commit is contained in:
Fabian Seluska
parent
9df6949011
commit
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
|
||||
|
|
|
|||
14
src/defaults.scss
Normal file
14
src/defaults.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
:root,
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:root,
|
||||
body {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
|
@ -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,21 @@
|
|||
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: black;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -16,19 +32,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;
|
||||
}
|
||||
}
|
||||
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 "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 %}
|
||||
|
|
|
|||
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