Skip to content

Commit 0a534b4

Browse files
committed
redesign things, bring out a big header, reduce markup
1 parent 2d9dd9c commit 0a534b4

File tree

5 files changed

+154
-104
lines changed

5 files changed

+154
-104
lines changed

_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: Code Guide by @mdo
2-
description: Standards for developing flexible, durable, and sustainable HTML and CSS.
2+
description: Standards for developing consistent, flexible, and sustainable HTML and CSS.
33
url: https://codeguide.co
44
permalink: pretty
55
sass:

_includes/header.html

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
<header class="masthead">
2-
<span class="icon">&#9703;</span>
3-
<h1>{{ site.name }}</h1>
4-
<p class="lead">{{ site.description }}</p>
1+
<header class="cg-masthead">
2+
<div class="container">
3+
<h1 class="cg-masthead-title">
4+
<div class="cg-icon"></div>
5+
Code<br>
6+
Guide
7+
</h1>
8+
<p class="cg-masthead-subtitle">
9+
{{ site.description }}
10+
</p>
511

6-
<p class="masthead-links">
7-
<a href="https://github.com/mdo/code-guide">
8-
<span class="icon icon-github-circled"></span>
9-
</a>
10-
<a href="https://twitter.com/mdo">
11-
<span class="icon icon-twitter"></span>
12-
</a>
13-
</p>
12+
<p class="masthead-links">
13+
<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>
15+
</a>
16+
<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>
18+
</a>
19+
</p>
1420

15-
<script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=codeguide" id="_fusionads_js"></script>
21+
22+
<script type="text/javascript" src="//cdn.fusionads.net/fusion.js?zoneid=1332&serve=C6SDP2Y&placement=codeguide" id="_fusionads_js"></script>
23+
</div>
1624
</header>

_layouts/default.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525

2626
{% include header.html %}
2727

28-
{{ content }}
28+
<main class="container">
29+
{{ content }}
30+
</main>
2931

3032
{% include footer.html %}
3133

_sass/_og.scss

Lines changed: 124 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
--blue: #1c7ed6;
4242
--indigo: #4263eb;
4343
--cyan: #1098ad;
44+
--gray: #212529;
4445
}
4546

4647
*,
@@ -50,29 +51,23 @@
5051
}
5152

5253
html {
53-
border-top: 1rem solid currentColor;
54-
padding: 2rem;
5554
font-size: 16px;
5655

5756
@media (min-width: 48em) {
58-
padding: 3rem;
5957
font-size: 18px;
6058
}
6159
}
6260

6361
body {
64-
max-width: 80em;
65-
padding: 0;
66-
margin-right: auto;
67-
margin-left: auto;
62+
margin: 0;
6863
font-size: 1rem;
6964
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";
7065
line-height: 1.5;
7166
color: #212529;
7267
}
7368

7469
a {
75-
color: #08c;
70+
color: var(--blue);
7671
text-decoration: none;
7772

7873
&:hover {
@@ -82,24 +77,20 @@ a {
8277

8378
h1, h2, h3, h4 {
8479
margin: 0 0 .5rem;
85-
font-weight: 500;
80+
font-weight: 600;
8681
line-height: 1;
8782
color: #2a2a2a;
8883
}
89-
h1 { font-size: 2rem; }
90-
h2 { font-size: 1.75rem; }
91-
h3 { font-size: 1.5rem; }
92-
h4 { font-size: 1.25rem }
84+
h1 { font-size: 2.5rem; }
85+
h2 { font-size: 2rem; }
86+
h3 { font-size: 1.75rem; }
87+
h4 { font-size: 1.5rem }
9388

9489
p {
9590
margin-top: 0;
9691
margin-bottom: 1rem;
9792
}
9893

99-
.lead {
100-
font-size: 1.25rem;
101-
}
102-
10394
blockquote {
10495
position: relative;
10596
margin: 0 1rem 1rem;
@@ -115,7 +106,6 @@ li {
115106
margin-bottom: .25rem;
116107
}
117108

118-
/* Tighten up margin on last items */
119109
p:last-child,
120110
ul:last-child,
121111
blockquote:last-child {
@@ -147,49 +137,150 @@ pre {
147137
line-height: 1.4;
148138
white-space: pre;
149139
white-space: pre-wrap;
140+
141+
code {
142+
padding: 0;
143+
color: inherit;
144+
background-color: transparent;
145+
border: 0;
146+
}
150147
}
151-
pre code {
152-
padding: 0;
153-
color: inherit;
154-
background-color: transparent;
155-
border: 0;
156-
}
148+
157149
.highlight {
158150
margin: 0;
151+
152+
pre {
153+
margin-bottom: 0;
154+
}
155+
156+
& + .highlight {
157+
margin-top: 1rem;
158+
}
159159
}
160-
.highlight pre {
161-
margin-bottom: 0;
160+
161+
162+
//
163+
// Masthead
164+
//
165+
166+
.cg-icon {
167+
display: block;
168+
width: 20vw;
169+
height: 20vw;
170+
margin-bottom: 1.5rem;
171+
border: solid currentColor;
172+
border-width: 1vw 1vw 1vw 10vw;
173+
174+
@media (min-width: 64em) {
175+
float: right;
176+
}
177+
}
178+
179+
.cg-masthead {
180+
padding-top: 3rem;
181+
padding-bottom: 3rem;
182+
margin-bottom: 3rem;
183+
color: #fff;
184+
background-color: var(--blue);
185+
186+
@media (min-width: 60em) {
187+
padding-top: 6rem;
188+
padding-bottom: 6rem;
189+
margin-bottom: 6rem;
190+
}
191+
}
192+
193+
.cg-masthead-title {
194+
margin-bottom: 1rem;
195+
font-size: 4rem;
196+
font-weight: 700;
197+
line-height: .9;
198+
color: inherit;
199+
200+
@media (min-width: 48em) {
201+
font-size: 6rem;
202+
}
203+
204+
@media (min-width: 60em) {
205+
font-size: 7rem;
206+
}
207+
}
208+
209+
.cg-masthead-subtitle {
210+
max-width: 40rem;
211+
font-size: 1.5rem;
212+
line-height: 1.25;
213+
214+
@media (min-width: 48em) {
215+
font-size: 2rem;
216+
}
217+
}
218+
219+
.masthead-links {
220+
font-size: 2rem;
221+
222+
a {
223+
color: #fff;
224+
text-decoration: none;
225+
}
226+
227+
svg {
228+
display: inline-block;
229+
width: 2rem;
230+
height: 2rem;
231+
margin-right: .5rem;
232+
}
162233
}
163-
.highlight + .highlight {
164-
margin-top: 1rem;
234+
235+
236+
//
237+
// Content
238+
//
239+
240+
.container {
241+
max-width: 80em;
242+
padding-right: 2rem;
243+
padding-left: 2rem;
244+
margin-right: auto;
245+
margin-left: auto;
246+
247+
@media (min-width: 48em) {
248+
padding-right: 3rem;
249+
padding-left: 3rem;
250+
}
165251
}
166252

167253

168254
/*
169255
* The Grid
170256
*/
171257

258+
.section {
259+
margin-bottom: 3rem;
260+
}
261+
172262
.col {
263+
margin-bottom: 1.5rem;
173264
// padding: 2rem 1rem;
174265
}
175266
.col p {
176267
max-width: 40rem;
177268
}
178269
.col + .col {
270+
padding: 2rem;
179271
// border-top: 1px solid #dfe1e8;
180272
background-color: #f8f9fa;
181273
}
182274
@media (min-width: 38em) {
183275
.col {
184-
padding: 2rem;
276+
// padding: 2rem;
185277
}
186278
}
187279
@media (min-width: 48em) {
188280
.section {
189281
display: table;
190282
width: 100%;
191283
table-layout: fixed;
192-
margin-bottom: 3rem;
193284
}
194285
.col {
195286
display: table-cell;
@@ -208,57 +299,16 @@ pre code {
208299
}
209300

210301

211-
/*
212-
* Masthead
213-
*/
214-
215-
.cg-icon {
216-
display: block;
217-
width: 3rem;
218-
height: 3rem;
219-
margin-bottom: 1.5rem;
220-
color: var(--red);
221-
border: solid currentColor;
222-
border-width: .25rem .25rem .25rem 1.5rem;
223-
}
224-
225-
.cg-masthead {
226-
// max-width: 64em;
227-
// padding: 2rem;
228-
margin-right: auto;
229-
margin-left: auto;
230-
231-
@media (min-width: 48em) {
232-
// padding: 4rem;
233-
}
234-
235-
> * {
236-
max-width: 48rem;
237-
}
238-
239-
h1 {
240-
// font-size: 4rem;
241-
margin-bottom: .25rem;
242-
}
243-
}
244-
245-
.masthead-links {
246-
font-size: 2rem;
247-
}
248-
.masthead-links a {
249-
text-decoration: none;
250-
}
251-
252-
253302
/*
254303
* Sections
255304
*/
256305

257-
.heading {
306+
h2 {
258307
padding-top: 1rem;
308+
margin-bottom: 1.5rem;
259309
// padding: 2rem 1rem 1.5rem;
260310
// background-color: #dfe1e8;
261-
border-top: .25rem solid;
311+
border-top: .125rem solid;
262312
}
263313

264314
@media (min-width: 38em) {

0 commit comments

Comments
 (0)