diff --git a/src/pages/typography.html b/src/pages/typography.html index f21cf8600..0776ffe5f 100644 --- a/src/pages/typography.html +++ b/src/pages/typography.html @@ -4,153 +4,64 @@ page-header: Typography menu: base.typography --- -
-
- {% card title="Card title" %} - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto corporis cumque debitis dicta - dolores error esse explicabo incidunt inventore minima, officiis quis reprehenderit saepe sed sit vel voluptatem, - voluptatibus? - {% endcard %} -
-
-
-
-
Headings
+
+
+
+
+

1/1 Text

+

I'm not a witch. Now, look here, my good man. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! Well, I didn't vote for you. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Bring her forward! He hasn't got shit all over him. He hasn't got shit all over him. We shall say 'Ni' again to you, if you do not appease us.

+

Well, we did do the nose. Why? Now, look here, my good man. Be quiet! Well, what do you want?

-
-

h1. Heading text

-

h2. Heading text

-

h3. Heading text

-

h4. Heading text

-
h5. Heading text
-
h6. Heading text
-
-
-
-
-
-
-
Headings with secondary text
-
-
-

h1. Heading text - Secondary text -

-

h2. Heading text - Secondary text -

-

h3. Heading text - Secondary text -

-

h4. Heading text - Secondary text -

-
h5. Heading text - Secondary text -
-
h6. Heading text - Secondary text -
-
-
-
-
-
-
-
Body text
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus, eget gravida - est - lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores assumenda at, - commodi - est, et, fugiat in ipsam iure mollitia optio quas reiciendis rem repellat sed similique - voluptatibus.

-
-
-
-
-
-
-
Lead body
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus, - eget - gravida est lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores assumenda at, - commodi - est, et, fugiat in ipsam iure mollitia.

-
-
-
-
-
-
-
Alignment types
-
-
-
-
-

Left aligned text.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid - beatae - consequatur culpa, - deserunt, doloribus ea et inventore iste molestias nihil nobis officiis qui reiciendis sint - totam - ullam veritatis vitae.

-
-

Center aligned text.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam - consequatur - error esse, facilis - harum, ipsa libero minima modi nisi nobis obcaecati odit officia officiis quis quisquam quos - sapiente, sunt. Ab.

-
-

Right aligned text.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur - deleniti - dicta eius excepturi - facere nulla quia sequi sit soluta ullam! Animi commodi cupiditate, enim id maiores minus - mollitia - sed temporibus!

-
-
-
-
-
-
-
-
Unordered list
+
+

1/2 Text

+

What do you mean? We shall say 'Ni' again to you, if you do not appease us. I have to push the pram a lot. No, no, no! Yes, yes. A bit. But she's got a wart. What a strange person.

-
+ +
+

1/2 Text

+

And this isn't my nose. This is a false one. We found them. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.

+
+ + +
+

1/3 Text

+

Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Why? Well, what do you want? …Are you suggesting that coconuts migrate?

+
+
+

2/3 Text

+

Well, I got better. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Found them? In Mercia?! The coconut's tropical! A newt? …Are you suggesting that coconuts migrate?

+
+ +
+

I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! We want a shrubbery!!

+

Well, how'd you become king, then? Found them? In Mercia?! The coconut's tropical! Oh, ow! I am your king.

+
+ +
+

Small Text

+

Well, Mercia's a temperate zone! You don't vote for kings. Now, look here, my good man.

+

Who's that then? Well, we did do the nose.

+
+ + +
+

Unordered list

    -
  • lorem ipsum doloret
    • -
  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
    • lorem ipsum doloret
    • lorem ipsum doloret
      • -
    • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
    • -
  • lorem ipsum doloret
    • -
  • lorem ipsum doloret
-
-
-
-
-
-
Ordered list
-
-
+ +
+

Ordered list

  1. lorem ipsum doloret
  2. lorem ipsum doloret
    3. @@ -158,106 +69,59 @@ menu: base.typography
  3. lorem ipsum doloret
  4. lorem ipsum doloret
  5. lorem ipsum doloret
    6. -
  6. lorem ipsum doloret
    7. -
  7. lorem ipsum doloret
    8. -
  8. lorem ipsum doloret
    9. -
  9. lorem ipsum doloret
    10. -
  10. lorem ipsum doloret
-
-
-
-
-
-
Unordered list
-
-
+ +
+

Unstyled list

  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
    • -
  • lorem ipsum doloret -
      -
    • lorem ipsum doloret
      • -
    • lorem ipsum doloret
      • -
    • lorem ipsum doloret
      • -
    -
    • -
  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
-
-
-
-
-
-
Blockquotes
-
-
+ +
+

Blockquote

+
-

Maecenas id tellus felis. Phasellu s eu magna ornare, ultrices metus yet odio. Cras et lectus - vitae - diam rutrum hendrerit.

-
-
-

Fusce bibendum in velit nec ullamcorper. Nullam elementum erat eu nisi venenatis elementum. - Suspendisse maximus.

+

I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! The nose?

Julius Cesar
-
-
-
-
-
-
Text elements
-
-
-

You can use the mark tag to - highlight - text. -

-

This line of text is meant to be treated as deleted

-

This line of text will render as underlined.

-

- This line of text is meant to be treated as fine print. -

-

The following snippet of text is rendered as bold text.

-

The following snippet of text is rendered as italicized text.

-
-
-
-
-
-
-
Text color
+
+

Text elements

+ +
You can use the mark tag to highlight text.
+
This line of text is meant to be treated as deleted
+
This line of text will render as underlined.
+
This line of text is meant to be treated as fine print.
+
The following snippet of text is rendered as bold text.
+
The following snippet of text is rendered as italicized text.
-
-

This is an example of muted text.

-

This is an example of success text.

-

This is an example of info text.

-

This is an example of warning text.

-

This is an example of danger text.

+ +
+

Text color

+
This is an example of muted text.
+
This is an example of success text.
+
This is an example of info text.
+
This is an example of warning text.
+
This is an example of danger text.
-
-
-
-
-
-
Addresses
-
-
+ +
+

Addresses

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456 7890
-
Full name
first.last@example.com
+
Full name
first.last@example.com
+ diff --git a/src/scss/_mixins-override.scss b/src/scss/_mixins-override.scss index a3eb0f057..c6fe2ec46 100644 --- a/src/scss/_mixins-override.scss +++ b/src/scss/_mixins-override.scss @@ -13,12 +13,12 @@ height: $caret-width; border-bottom: 1px solid; border-left: 1px solid; - margin-inline-end: .1em; + margin-right: .1em; @if $direction != 'left' { - margin-inline-start: $caret-spacing; + margin-left: $caret-spacing; } @else { - margin-inline-end: $caret-spacing; + margin-right: $caret-spacing; } @if $direction == down { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 956ad8abf..e290e1226 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -212,7 +212,7 @@ $link-decoration: none !default; $link-hover-decoration: underline !default; //Typography -$headings-font-weight: $font-weight-medium !default; +$headings-font-weight: $font-weight-bold !default; $hr-opacity: $border-opacity !default; $hr-margin-y: 2rem !default; diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss index 6e53f204f..054dec967 100644 --- a/src/scss/layout/_navbar.scss +++ b/src/scss/layout/_navbar.scss @@ -124,7 +124,7 @@ } .dropdown-toggle:after { - margin-inline-start: auto; + margin-left: auto; } .nav-item.active:after { @@ -241,7 +241,7 @@ Navbar &.navbar-vertical { ~ .navbar, ~ .content { - margin-inline-start: $sidebar-width; + margin-left: $sidebar-width; } } } diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss index f79a6e5f1..1695e5e31 100644 --- a/src/scss/layout/_page.scss +++ b/src/scss/layout/_page.scss @@ -58,7 +58,7 @@ svg { width: 1.5rem; height: 1.5rem; - margin-inline-end: .25rem; + margin-right: .25rem; } } diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index 83f70cad7..1ae2ea376 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -27,8 +27,7 @@ width: $icon-size; height: $icon-size; min-width: $icon-size; - margin: 0 .5rem 0; - margin-inline-start: -.25rem; + margin: 0 .5rem 0 -.25rem; vertical-align: bottom; color: $text-muted; } @@ -37,13 +36,11 @@ width: 1.25rem; height: 1.25rem; vertical-align: text-top; - margin: 0 .5rem 0; - margin-inline-start: -.25rem; + margin: 0 .5rem 0 -.25rem; } .icon-right { - margin: 0 .5rem 0; - margin-inline-end: -.25rem; + margin: 0 -.25rem 0 .5rem; } .badge { diff --git a/src/scss/ui/_markdown.scss b/src/scss/ui/_markdown.scss index 19dc872b8..f0fa89a36 100644 --- a/src/scss/ui/_markdown.scss +++ b/src/scss/ui/_markdown.scss @@ -3,7 +3,6 @@ Markdown */ .markdown { line-height: $line-height-lg; - font-size: $h4-font-size; > :first-child { margin-top: 0; @@ -14,34 +13,6 @@ Markdown margin-bottom: 0; } - > { - h1, h2, h3, h4, h5, h6 { - margin-top: 2rem; - margin-bottom: .5rem; - font-weight: $font-weight-bold; - } - - h1 { - font-size: $h2-font-size; - line-height: $h2-line-height; - } - - h2 { - font-size: $h3-font-size; - line-height: $h3-line-height; - } - - h3 { - font-size: $h4-font-size; - line-height: $h4-line-height; - } - - h4 { - font-size: $h5-font-size; - line-height: $h5-line-height; - } - } - > hr { @include media-breakpoint-up(md) { margin-top: 3em; @@ -53,7 +24,13 @@ Markdown @extend .table, .table-bordered; } - img { + > blockquote { + font-size: $h3-font-size; + margin: 1.5rem 0; + padding: .5rem 1.5rem; + } + + > img { border-radius: $border-radius; } } \ No newline at end of file diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss index 0305a2cda..441ee168a 100644 --- a/src/scss/ui/_nav.scss +++ b/src/scss/ui/_nav.scss @@ -10,9 +10,9 @@ } .nav { - margin-inline-start: 1.25rem; + margin-left: 1.25rem; border-left: 1px solid $border-color; - padding-inline-start: .5rem; + padding-left: .5rem; } .nav-link.active, @@ -92,7 +92,7 @@ .nav-link-icon { width: 1.5rem; height: $icon-size; - margin-inline-end: .25rem; + margin-right: .25rem; opacity: $text-muted-opacity; svg { diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss index 4c99c7374..6617d5370 100644 --- a/src/scss/ui/_type.scss +++ b/src/scss/ui/_type.scss @@ -8,14 +8,6 @@ a { text-decoration-skip-ink: auto; } -ul, -ol { - margin: 0 0 1rem 0; - margin-inline-start: 1rem; - padding: 0; - padding-inline-start: 1rem; -} - h1, h2, h3, @@ -81,6 +73,15 @@ blockquote { } } +ul, ol { + padding-left: 1.5rem; + + li::marker { + color: $primary; + font-weight: $font-weight-bold; + } +} + hr { margin: 2rem 0; }