Skip to content

Commit 49ccb1f

Browse files
mdomdo
committed
Clean up some HTML and CSS to fix offset content
1 parent ecf9b07 commit 49ccb1f

File tree

3 files changed

+33
-32
lines changed

3 files changed

+33
-32
lines changed

‎_includes/header.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ <h1 class="cg-masthead-title">
1111

1212
<p class="masthead-links">
1313
<a href="https://github.com/mdo/code-guide" title="View on GitHub">
14-
<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>
14+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
15+
<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"/>
16+
</svg>
1517
</a>
1618
<a href="https://twitter.com/mdo" title="Follow on Twitter">
17-
<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>
19+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
20+
<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"/>
21+
</svg>
1822
</a>
1923
</p>
2024

‎_sass/_og.scss‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
--indigo: #4263eb;
1111
--cyan: #1098ad;
1212
--gray: #212529;
13+
14+
--body-bg: #fff;
15+
--body-color: #212529;
16+
--accent-bg: #f8f9fa;
1317
}
1418

1519
*,
@@ -31,7 +35,8 @@ body {
3135
font-size: 1rem;
3236
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";
3337
line-height: 1.5;
34-
color: #212529;
38+
color: var(--body-color);
39+
background-color: var(--body-bg);
3540
}
3641

3742
a {
@@ -44,10 +49,10 @@ a {
4449
}
4550

4651
h1, h2, h3, h4 {
47-
margin: 0 0 .5rem;
52+
margin-top: 0;
53+
margin-bottom: .5rem;
4854
font-weight: 600;
4955
line-height: 1;
50-
color: #2a2a2a;
5156
}
5257
h1 { font-size: 2.5rem; }
5358
h2 { font-size: 2rem; }
@@ -94,7 +99,7 @@ code {
9499
padding: .125em .25em;
95100
font-size: 85%;
96101
color: #d44950;
97-
background-color: #f7f7f9;
102+
background-color: var(--accent-bg);
98103
border-radius: .2rem;
99104
}
100105

@@ -174,8 +179,8 @@ pre {
174179
}
175180

176181
.cg-masthead-subtitle {
177-
margin-bottom: 1.5rem;
178182
max-width: 40rem;
183+
margin-bottom: 1.5rem;
179184
font-size: 1.5rem;
180185
line-height: 1.25;
181186

@@ -230,13 +235,12 @@ pre {
230235
.col {
231236
margin-bottom: 1.5rem;
232237
}
233-
.col p {
234-
max-width: 40rem;
235-
}
236-
.col + .col {
238+
239+
.col-code {
237240
padding: 2rem;
238-
background-color: #f8f9fa;
241+
background-color: var(--accent-bg);
239242
}
243+
240244
@media (min-width: 768px) {
241245
.section {
242246
display: table;
@@ -245,21 +249,14 @@ pre {
245249
}
246250
.col {
247251
display: table-cell;
248-
padding: 3rem 3rem 3rem 0;
252+
padding: 3rem;
249253
vertical-align: top;
250254
}
251-
.col + .col {
252-
border-top: 0;
253-
padding: 3rem;
255+
.col:first-child {
256+
padding-left: 0;
254257
}
255258
}
256259

257-
// Make the ToC a whole section
258-
.toc .col + .col {
259-
padding: 0;
260-
background-color: #fff;
261-
}
262-
263260

264261
//
265262
// Sections

‎index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h3>Syntax</h3>
6767
<li>Don’t omit optional closing tags (e.g. <code>&lt;/li&gt;</code> or <code>&lt;/body&gt;</code>).</li>
6868
</ul>
6969
</div>
70-
<div class="col">
70+
<div class="col col-code">
7171
{% highlight html %}{% include html/syntax.html %}{% endhighlight %}
7272
</div>
7373
</div>
@@ -77,7 +77,7 @@ <h3>Syntax</h3>
7777
<h3>HTML5 doctype</h3>
7878
<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>
7979
</div>
80-
<div class="col">
80+
<div class="col col-code">
8181
{% highlight html %}{% include html/doctype.html %}{% endhighlight %}
8282
</div>
8383
</div>
@@ -91,7 +91,7 @@ <h3>Language attribute</h3>
9191
</blockquote>
9292
<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>
9393
</div>
94-
<div class="col">
94+
<div class="col col-code">
9595
{% highlight html %}{% include html/lang.html %}{% endhighlight %}
9696
</div>
9797
</div>
@@ -102,7 +102,7 @@ <h3>IE compatibility mode</h3>
102102
<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>
103103
<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>
104104
</div>
105-
<div class="col">
105+
<div class="col col-code">
106106
{% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}
107107
</div>
108108
</div>
@@ -112,7 +112,7 @@ <h3>IE compatibility mode</h3>
112112
<h3>Character encoding</h3>
113113
<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>
114114
</div>
115-
<div class="col">
115+
<div class="col col-code">
116116
{% highlight html %}{% include html/encoding.html %}{% endhighlight %}
117117
</div>
118118
</div>
@@ -128,7 +128,7 @@ <h4>HTML5 spec links</h4>
128128
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Using script</a></li>
129129
</ul>
130130
</div>
131-
<div class="col">
131+
<div class="col col-code">
132132
{% highlight html %}{% include html/style-script.html %}{% endhighlight %}
133133
</div>
134134
</div>
@@ -154,7 +154,7 @@ <h3>Attribute order</h3>
154154
</ul>
155155
<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>
156156
</div>
157-
<div class="col">
157+
<div class="col col-code">
158158
{% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}
159159
</div>
160160
</div>
@@ -173,7 +173,7 @@ <h3>Boolean attributes</h3>
173173
</blockquote>
174174
<p><strong>In short, don't add a value.</strong></p>
175175
</div>
176-
<div class="col">
176+
<div class="col col-code">
177177
{% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}
178178
</div>
179179
</div>
@@ -183,7 +183,7 @@ <h3>Boolean attributes</h3>
183183
<h3>Reducing markup</h3>
184184
<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>
185185
</div>
186-
<div class="col">
186+
<div class="col col-code">
187187
{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}
188188
</div>
189189
</div>
@@ -254,7 +254,7 @@ <h3>Don't use <code>@import</code></h3>
254254
</ul>
255255
<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>
256256
</div>
257-
<div class="col">
257+
<div class="col col-code">
258258
{% highlight html %}{% include css/import.html %}{% endhighlight %}
259259
</div>
260260
</div>

0 commit comments

Comments
 (0)