Rebooted Elements

Explore the modifications and enhancements made to default HTML elements in JTB_MD for a stylish and responsive design experience.

About

To harmonize default HTML elements with the aesthetic of JTB_MD, we've made design adjustments on some of them. Below are key modifications ensuring seamless integration:

<a>

• The default color of hyperlinks is set to var(--jtbBlue-5), and text decorations are set to none.
• During hover, the text color becomes var(--jtbBlue-7), and underline is applied as text decoration.
• In the focus state, the text color becomes var(--jtbBlue-7), and underline is used for text decoration.
• For visited links, var(--jtbBlue-9) is applied as text color, and var(--jtbBlue-9) is used for text decoration.

                <!-- Hyperlink example -->
<a href='#'>Hello, I'm a hyperlink!</a>
            

<abbr>

• Abbreviations are styled with underline.
• Decoration style of them is set to dotted, with a preferred color of var(--jtbNeutral-8).
• Hover actions use help as the defined cursor.

                <!-- Abbr example -->
<abbr title='...'>Hello</abbr> I'm an abbreviation!
            

<b> & <strong>

• Font-weight for both <b> and <strong> tags is set to 600.

                <!-- Bold & Strong example -->
<b>Hello</b> I'm so <strong>strong</strong>!
            

<code>

• <code> elements have backgrounds set to var(--jtbWhite-2).
• Text color is set to var(--jtbNeutral-12).
• Borders are defined as 0.0625rem, and border-radius is set to 0.25rem.
• Font-family is specified as "Monospace",
• Font-weight set to 400 and font-size adjusted to 0.85rem.
• white-space attribute for all <code> elements is set to pre-line, and line-height is 1.5.
• In addition, paddings of elements are adjusted as 0.125rem 0.250rem

                <!-- Code example -->
<code>Hello world!<code>
            

<h1>-<h6>

• Backgrounds are set to transparent.
• The text color of headers is set to var(--jtbNeutral-12).
• The font weight of header elements is set to 500.
• The font sizes of elements are adjusted as follows:
  • <h1>: 2.75rem
  • <h2>: 2rem
  • <h3>: 1.75rem
  • <h2>: 1.5rem
  • <h5>: 1.25rem
  • <h6>: 1rem
• Margins for each element are adjusted for better positioning:
  • <h1>: 0 0 1.25rem 0
  • <h2>: 2.5rem 0 1rem 0
  • <h3>: 2rem 0 .75rem 0
  • <h4>: 1.5rem 0 .50rem 0
  • <h5>: 1rem 0 .25rem 0
  • <h6>: 0.5rem 0 0 0

                <!-- Header examples -->
<h1>H1 header</h1>
<h2>H2 header</h2>
<h3>H3 header</h3>
<h4>H4 header</h4>
<h5>H5 header</h5>
<h6>H6 header</h6>
            

<kbd>

• <kbd> elements have backgrounds set to var(--jtbNeutral-12).
• Text color is set to var(--jtbNeutral-1).
• Borders are defined as 0.0625rem, and border-radius is set to 0.25rem.
• Font-family is specified as "Monospace",
• Font-weight set to 400 and font-size adjusted to .85rem.
• white-space attribute for all <kbd> elements is set to pre-line, and line-height is 1.5.
• In addition, paddings of elements are adjusted as 0.125rem 0.250rem

                <!-- kbd example -->
<kbd>CTRL + A<kbd>
            

<mark>

• The background of <mark> elements is set to var(--jtbYellow-2).
• To make them inline with other elements, the color of elements is set to inherit.

                <!-- Mark Item -->
Hello <mark>this text</mark> is so important!
            

<li>

• The margins of list elements are set to 1rem 0.

                <!-- List Items -->
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>
            

<p>

• The margins of paragraphs are set to 1rem 0.

                <!-- Paragraph Example -->
<p>In a world ...</p>
            

<ul> - <ol>

• The margins of list containers are set to 1rem 0 and,
• The paddings of list containers are adjusted to 0 0 0 2rem.

                <!-- Lists -->
<ol>
    <li>List Item 1</li>
    <li>List Item 1</li>
</ol>
<ul>
    <li>List Item 1</li>
    <li>List Item 1</li>
</ul>