Merge pull request #251 from mdo/cleanup

mdo · web-flow · commit ae0e5fc72298 · 2021-04-12T08:39:41.000-07:00
Slight code cleanup
diff --git a/_includes/header.html b/_includes/header.html
@@ -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>
 
diff --git 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,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
diff --git a/index.html b/index.html
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
