diff --git a/snikket_web/scss/_baseline.scss b/snikket_web/scss/_baseline.scss index ee740b5..cfe73b4 100644 --- a/snikket_web/scss/_baseline.scss +++ b/snikket_web/scss/_baseline.scss @@ -7,13 +7,18 @@ body { color: $gray-100; } -p { +p, blockquote, ul, ol { line-height: 1.5; margin: 1.5em 0; font-family: $font-bulk; color: inherit; } +blockquote { + margin-left: $w-l2; + margin-right: $w-l2; +} + h1, h2, h3, h4, h5, h6 { /* normalise */ font-weight: 400; diff --git a/snikket_web/scss/app.scss b/snikket_web/scss/app.scss index a049de0..76f6e1b 100644 --- a/snikket_web/scss/app.scss +++ b/snikket_web/scss/app.scss @@ -4,6 +4,22 @@ $_top-h-size: nth($h-sizes, 1); $_top-h-small-size: nth($h-small-sizes, 1); +/* headings */ + +@for $n from 1 through 6 { + h#{$n} { + color: $primary-100; + } +} + +/* block quotes */ + +blockquote { + margin-left: $w-l2 / 2 - $w-s4 / 2; + padding-left: $w-l2 / 2 - $w-s4 / 2; + border-left: $w-s4 solid $primary-500; +} + /* coarse layout */ body { @@ -482,6 +498,7 @@ button.tertiary, .button.tertiary { background-color: transparent; color: $gray-100; border: none; + text-decoration: underline; /* TODO: fix vertical rhyhtm ... */ border-radius: $w-s4; @@ -492,6 +509,8 @@ button.tertiary, .button.tertiary { } &.accent { + text-decoration-color: $accent-500; + &:hover { background-color: $accent-900; border-color: $accent-800; @@ -500,6 +519,8 @@ button.tertiary, .button.tertiary { } &.danger { + text-decoration-color: $alert-500; + &:hover { background-color: $alert-900; border-color: $alert-800; diff --git a/snikket_web/templates/demo.html b/snikket_web/templates/demo.html index 9111a97..bd8c4db 100644 --- a/snikket_web/templates/demo.html +++ b/snikket_web/templates/demo.html @@ -16,7 +16,7 @@

Sub-heading

Repudiandae voluptatem ratione voluptatem facere. Rerum recusandae nemo commodi provident praesentium est dignissimos. Aut provident nisi omnis tempore veritatis voluptatem minus esse. Non nulla consequatur id est doloribus quos voluptates. Quae suscipit fugiat minima.

-

Nested Sub—heading

+

Nested Sub-heading

Omnis sit temporibus soluta et inventore. Doloribus velit unde placeat aut necessitatibus distinctio. Sapiente sunt corporis neque ducimus officiis qui. Maxime officia et architecto dolor quos autem expedita. Omnis architecto atque facilis iste dolorem voluptatem consectetur. Cupiditate et officiis accusantium inventore.

Deeper Sub-heading

Perferendis vitae doloribus praesentium natus non. Itaque hic numquam dolorum non vero et excepturi consequatur. Accusantium doloribus molestias impedit laudantium quis accusantium. Repellendus et assumenda voluptate aut ipsa quod. Dolores rerum accusantium cumque voluptatem rerum iure.

@@ -34,6 +34,25 @@
Paragraph Heading (h6)
+

Text

+

Odit totam deleniti nam. Corporis ea dolorem aut quis nobis. Et sint quo ipsum molestiae.

+

Rerum quibusdam assumenda eos cupiditate tempore. Nisi repudiandae impedit laboriosam numquam qui qui consequatur officiis. Doloremque a at voluptate recusandae vitae praesentium voluptas error. Optio vero aliquam libero sit magni. Nulla beatae voluptas quis voluptatibus quam porro.

+
Neque libero dicta rem repellat eos. Mollitia commodi quos minima voluptatum sed. Omnis occaecati suscipit et veniam aperiam animi. Laudantium cupiditate natus est similique dolores voluptas consequatur.
+

Asperiores est eum qui culpa. Numquam dolor vero et. Incidunt culpa dolores alias voluptatem. Iusto maxime harum ducimus ea debitis et. Repellat a esse non rerum ratione. Illum tempore hic veniam sed laborum nemo eveniet.

+ +

Reprehenderit nihil vel qui laborum sed harum. Facere possimus assumenda et aut laudantium. Accusantium maxime ducimus sapiente.

+
    +
  1. Un
  2. +
  3. Deux
  4. +
  5. Trois
  6. +
  7. Quatre
  8. +
+

Palette

gray
success