BurnyLlama/nebulosa-css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added block quote.

Browse Source
This commit is contained in:
BurnyLlama 2023-03-06 10:53:01 +01:00
parent f7bf372d38
commit b3544c6e6c
4 changed files with 52 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/_palette.scss
View File

@ -157,6 +157,7 @@ $pink900: #8C2055;
$pink: $pink500; $pink: $pink500;
$surface: $grey100; $surface: $grey100;
$standout: $grey50;
$text: $grey800; $text: $grey800;
$primary50: $sea50; $primary50: $sea50;

27
src/text.scss
View File

@ -1,4 +1,31 @@
@use "palette";
p { p {
font-family: 'Alegreya', serif; font-family: 'Alegreya', serif;
font-size: 1rem; font-size: 1rem;
}
blockquote {
position: relative;
font-family: 'Alegreya', serif;
margin: 1rem;
padding: 1rem;
background-color: palette.$standout;
// border-left: .3rem solid palette.$primary;
box-shadow: .5rem .5rem 0 0 palette.$grey200;
&::before {
font-family: 'Alegreya', serif;
font-size: 2rem;
text-align: center;
content: '"';
position: absolute;
top: -.75rem;
left: -.75rem;
border-radius: 100%;
color: palette.$text;
background-color: palette.$primary;
height: 2rem;
width: 2rem;
}
} }

5
web/pages/index.njk
View File

@ -4,6 +4,7 @@
<header> <header>
<h1>Welcome to Nebulosa CSS!</h1> <h1>Welcome to Nebulosa CSS!</h1>
</header> </header>
<a href="/headings">Headings</a> <p><a href="/headings">Headings</a></p>
<a href="/buttons">Buttons</a> <p><a href="/buttons">Buttons</a></p>
<p><a href="/text">Text</a></p>
{% endblock %} {% endblock %}

21
web/pages/text.njk Normal file
View File

@ -0,0 +1,21 @@
{% extends "templates/publishing.njk" %}
{% block main %}
<header>
<h1>Nebulosa CSS</h1>
<h2>A showcase of text elements</h2>
</header>
<h1>Text elements</h1>
<h2>Regular paragraph</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex expedita ullam blanditiis inventore molestiae perferendis iusto nulla quo sit porro, mollitia nobis recusandae repellendus eveniet, alias hic officiis sunt impedit?</p>
<h2>Blockquote</h2>
<p>
<blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere, ullam repudiandae perferendis facilis voluptatibus dolores sequi quam nihil harum veritatis rerum, molestias voluptates enim dolorum? Provident officia qui voluptatum.
</blockquote>
</p>
{% endblock %}