diff --git a/_includes/header.html b/_includes/header.html index 612fb204..2a21ae64 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -11,10 +11,14 @@

- + + + - + + +

diff --git a/_sass/_og.scss b/_sass/_og.scss index acd22c59..6004bb25 100644 --- a/_sass/_og.scss +++ b/_sass/_og.scss @@ -10,6 +10,10 @@ --indigo: #4263eb; --cyan: #1098ad; --gray: #212529; + + --body-bg: #fff; + --body-color: #212529; + --accent-bg: #f8f9fa; } *, @@ -21,7 +25,7 @@ html { font-size: 16px; - @media (min-width: 48em) { + @media (min-width: 768px) { font-size: 18px; } } @@ -31,7 +35,8 @@ body { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; line-height: 1.5; - color: #212529; + color: var(--body-color); + background-color: var(--body-bg); } a { @@ -44,10 +49,10 @@ a { } h1, h2, h3, h4 { - margin: 0 0 .5rem; + margin-top: 0; + margin-bottom: .5rem; font-weight: 600; line-height: 1; - color: #2a2a2a; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } @@ -91,10 +96,10 @@ pre { font-size: 95%; } code { - padding: 2px 4px; + padding: .125em .25em; font-size: 85%; color: #d44950; - background-color: #f7f7f9; + background-color: var(--accent-bg); border-radius: .2rem; } @@ -150,7 +155,7 @@ pre { color: #fff; background-color: var(--blue); - @media (min-width: 60em) { + @media (min-width: 960px) { padding-top: 6rem; padding-bottom: 6rem; margin-bottom: 6rem; @@ -164,22 +169,22 @@ pre { line-height: .9; color: inherit; - @media (min-width: 48em) { + @media (min-width: 768px) { font-size: 6rem; } - @media (min-width: 60em) { + @media (min-width: 960px) { font-size: 7rem; } } .cg-masthead-subtitle { - margin-bottom: 1.5rem; max-width: 40rem; + margin-bottom: 1.5rem; font-size: 1.5rem; line-height: 1.25; - @media (min-width: 48em) { + @media (min-width: 768px) { font-size: 2rem; } } @@ -212,7 +217,7 @@ pre { margin-right: auto; margin-left: auto; - @media (min-width: 48em) { + @media (min-width: 768px) { padding-right: 3rem; padding-left: 3rem; } @@ -230,14 +235,13 @@ pre { .col { margin-bottom: 1.5rem; } -.col p { - max-width: 40rem; -} -.col + .col { + +.col-code { padding: 2rem; - background-color: #f8f9fa; + background-color: var(--accent-bg); } -@media (min-width: 48em) { + +@media (min-width: 768px) { .section { display: table; width: 100%; @@ -245,20 +249,14 @@ pre { } .col { display: table-cell; - padding: 3rem 3rem 3rem 0; + padding: 3rem; vertical-align: top; } - .col + .col { - border-top: 0; - padding: 3rem; + .col:first-child { + padding-left: 0; } } -// Make the ToC a whole section -.toc .col + .col { - background-color: #fff; -} - // // Sections diff --git a/index.html b/index.html index 1ab0af0b..05879d06 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@

Syntax

  • Don’t omit optional closing tags (e.g. </li> or </body>).
    • -
    +
    {% highlight html %}{% include html/syntax.html %}{% endhighlight %}
    @@ -77,7 +77,7 @@

    Syntax

    HTML5 doctype

    Enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.

    -
    +
    {% highlight html %}{% include html/doctype.html %}{% endhighlight %}
    @@ -91,7 +91,7 @@

    Language attribute

    Read more about the lang attribute in the spec. Head to Sitepoint for a list of language codes.

    -
    +
    {% highlight html %}{% include html/lang.html %}{% endhighlight %}
    @@ -102,7 +102,7 @@

    IE compatibility mode

    Internet Explorer supports the use of a document compatibility <meta> tag to specify what version of IE the page should be rendered as. Unless circumstances require otherwise, it's most useful to instruct IE to use the latest supported mode with edge mode.

    For more information, read this awesome Stack Overflow article.

    -
    +
    {% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}
    @@ -112,7 +112,7 @@

    IE compatibility mode

    Character encoding

    Quickly and easily ensure proper rendering of your content by declaring an explicit character encoding. When doing so, you may avoid using character entities in your HTML, provided their encoding matches that of the document (generally UTF-8).

    -
    +
    {% highlight html %}{% include html/encoding.html %}{% endhighlight %}
    @@ -128,7 +128,7 @@

    HTML5 spec links

  • Using script
    • -
    +
    {% highlight html %}{% include html/style-script.html %}{% endhighlight %}
    @@ -154,7 +154,7 @@

    Attribute order

    Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.

    -
    +
    {% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}
    @@ -173,7 +173,7 @@

    Boolean attributes

    In short, don't add a value.

    -
    +
    {% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}
    @@ -183,7 +183,7 @@

    Boolean attributes

    Reducing markup

    Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:

    -
    +
    {% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}
    @@ -254,7 +254,7 @@

    Don't use @import

    For more information, read this article by Steve Souders.

    -
    +
    {% highlight html %}{% include css/import.html %}{% endhighlight %}