Skip to content

Slight code cleanup #251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 12, 2021
Merged

Slight code cleanup #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75262a3
Fix table of contents padding alignment
mdo Apr 11, 2021
ecf9b07
Update some media queries, make some padding relative
mdo Apr 11, 2021
49ccb1f
Clean up some HTML and CSS to fix offset content
mdo Apr 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@ <h1 class="cg-masthead-title">

<p class="masthead-links">
<a href="https://github.com/mdo/code-guide" title="View on GitHub">
<svg class="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://twitter.com/mdo" title="Follow on Twitter">
<svg class="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-reactid="1211"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
</a>
</p>

Expand Down
52 changes: 25 additions & 27 deletions _sass/_og.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
--indigo: #4263eb;
--cyan: #1098ad;
--gray: #212529;

--body-bg: #fff;
--body-color: #212529;
--accent-bg: #f8f9fa;
}

*,
Expand All @@ -21,7 +25,7 @@
html {
font-size: 16px;

@media (min-width: 48em) {
@media (min-width: 768px) {
font-size: 18px;
}
}
Expand All @@ -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 {
Expand All @@ -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; }
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -230,35 +235,28 @@ 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%;
table-layout: fixed;
}
.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
Expand Down
20 changes: 10 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ <h3>Syntax</h3>
<li>Don’t omit optional closing tags (e.g. <code>&lt;/li&gt;</code> or <code>&lt;/body&gt;</code>).</li>
</ul>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/syntax.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -77,7 +77,7 @@ <h3>Syntax</h3>
<h3>HTML5 doctype</h3>
<p>Enforce <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">standards mode</a> and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/doctype.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -91,7 +91,7 @@ <h3>Language attribute</h3>
</blockquote>
<p>Read more about the <code>lang</code> attribute <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">in the spec</a>. Head to Sitepoint for a <a href="https://www.sitepoint.com/iso-2-letter-language-codes/">list of language codes</a>.</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/lang.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -102,7 +102,7 @@ <h3>IE compatibility mode</h3>
<p>Internet Explorer supports the use of a document compatibility <code>&lt;meta&gt;</code> 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 <strong>edge mode</strong>.</p>
<p>For more information, <a href="https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do">read this awesome Stack Overflow article</a>.</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -112,7 +112,7 @@ <h3>IE compatibility mode</h3>
<h3>Character encoding</h3>
<p>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).</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/encoding.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -128,7 +128,7 @@ <h4>HTML5 spec links</h4>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Using script</a></li>
</ul>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/style-script.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -154,7 +154,7 @@ <h3>Attribute order</h3>
</ul>
<p>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.</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -173,7 +173,7 @@ <h3>Boolean attributes</h3>
</blockquote>
<p><strong>In short, don't add a value.</strong></p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}
</div>
</div>
Expand All @@ -183,7 +183,7 @@ <h3>Boolean attributes</h3>
<h3>Reducing markup</h3>
<p>Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}
</div>
</div>
Expand Down Expand Up @@ -254,7 +254,7 @@ <h3>Don't use <code>@import</code></h3>
</ul>
<p>For more information, <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">read this article by Steve Souders</a>.</p>
</div>
<div class="col">
<div class="col col-code">
{% highlight html %}{% include css/import.html %}{% endhighlight %}
</div>
</div>
Expand Down