diff --git a/src/_palette.scss b/src/_palette.scss index 3d89b77..ad0af1b 100644 --- a/src/_palette.scss +++ b/src/_palette.scss @@ -157,6 +157,7 @@ $pink900: #8C2055; $pink: $pink500; $surface: $grey100; +$standout: $grey50; $text: $grey800; $primary50: $sea50; diff --git a/src/text.scss b/src/text.scss index 40c6308..03950f7 100644 --- a/src/text.scss +++ b/src/text.scss @@ -1,4 +1,31 @@ +@use "palette"; + p { font-family: 'Alegreya', serif; 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; + } } \ No newline at end of file diff --git a/web/pages/index.njk b/web/pages/index.njk index 1de71bf..9e2d01c 100644 --- a/web/pages/index.njk +++ b/web/pages/index.njk @@ -4,6 +4,7 @@

Welcome to Nebulosa CSS!

- Headings - Buttons +

Headings

+

Buttons

+

Text

{% endblock %} diff --git a/web/pages/text.njk b/web/pages/text.njk new file mode 100644 index 0000000..50a91ae --- /dev/null +++ b/web/pages/text.njk @@ -0,0 +1,21 @@ +{% extends "templates/publishing.njk" %} + +{% block main %} +
+

Nebulosa CSS

+

A showcase of text elements

+
+

Text elements

+ +

Regular paragraph

+

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?

+ +

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. +
+

+ + +{% endblock %}