Skip to content

Commit 7ae1dd3

Browse files
mattwondramattwondra
committed
Commit all the changes!
1 parent 18d9bf9 commit 7ae1dd3

19 files changed

+238
-234
lines changed

‎Gemfile

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
source 'https://rubygems.org'
2-
gem 'github-pages'
2+
gem 'github-pages'
3+
gem 'motion-markdown-it'

‎Gemfile.lock

+9
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,22 @@ GEM
9090
jekyll (>= 2.0)
9191
json (1.8.3)
9292
kramdown (1.5.0)
93+
linkify-it-rb (1.1.1.0)
94+
uc.micro-rb (~> 1.0)
9395
liquid (2.6.2)
9496
listen (2.10.1)
9597
celluloid (~> 0.16.0)
9698
rb-fsevent (>= 0.9.3)
9799
rb-inotify (>= 0.9)
98100
maruku (0.7.0)
101+
mdurl-rb (1.0.0.3)
99102
mercenary (0.3.5)
100103
mini_portile (0.6.2)
101104
minitest (5.8.0)
105+
motion-markdown-it (4.2.2.0)
106+
linkify-it-rb (~> 1.0)
107+
mdurl-rb (~> 1.0)
108+
uc.micro-rb (~> 1.0)
102109
net-dns (0.8.0)
103110
nokogiri (1.6.6.2)
104111
mini_portile (~> 0.6.0)
@@ -126,13 +133,15 @@ GEM
126133
ethon (>= 0.7.4)
127134
tzinfo (1.2.2)
128135
thread_safe (~> 0.1)
136+
uc.micro-rb (1.0.0)
129137
yajl-ruby (1.2.1)
130138

131139
PLATFORMS
132140
ruby
133141

134142
DEPENDENCIES
135143
github-pages
144+
motion-markdown-it
136145

137146
BUNDLED WITH
138147
1.10.6

‎_config.yml

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ url: "http://mattwondra.com"
33
description: "Thoughts on web development, design process, and remote work by Matt Wondra."
44
author: "Matt Wondra"
55

6-
defaultFlavorText: forgot to add flavor text to this page.
7-
86
permalink: /blog/:year/:title/
97

10-
8+
defaultFlavorText: "lives in a rounded rectangle."
119

1210
highlighter: pygments
1311
markdown: redcarpet

‎_drafts/first-post.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
layout: post
33
title: Hello, world. Nice to meet you.
44
mattwondra: has a fancy-pants blog. About dang time.
5-
comments: false
65
---
76

87
<p class="standout">Early in my career I knew that I wanted to write. Like many young developers, I followed my web heroes’ blogs as they wrote tutorials, code snippets, and web philosophy.</p>
@@ -12,3 +11,16 @@ comments: false
1211
And now our world is flush with tutorials, code snippets, design theory, best practices, experimental techniques... And nearly all of it completely free of cost. How many of us grew up in the profession primarily through blog posts, conference videos, and podcasts? I sure did.
1312

1413
**The greatest accomplishment of the web development community is its endless imperative to share.** And for years I’ve quietly(tk) enjoyed the benefits. But now I'm ready to jump in and contribute. I want to give back to the community that's given so much to me.
14+
15+
## So what now?
16+
Early in my career I knew that I wanted to write. Like many young developers, I followed my web heroes’ blogs as they wrote tutorials, [code snippets](), and web philosophy.
17+
18+
And now our world is flush with tutorials, code snippets, design theory, best practices, experimental techniques... And nearly all of it completely free of cost. How many of us grew up in the profession primarily through blog posts, conference videos, and podcasts? I sure did.
19+
20+
### The first step
21+
Early in my career I knew that I wanted to write. Like many young developers, I followed my web heroes’ blogs as they wrote tutorials, code snippets, and web philosophy.
22+
23+
### The second step
24+
And now our world is flush with tutorials, code snippets, design theory, best practices, experimental techniques... And nearly all of it completely free of cost. How many of us grew up in the profession primarily through blog posts, conference videos, and podcasts? I sure did.
25+
26+
**The greatest accomplishment of the web development community is its endless imperative to share.** And for years I’ve quietly(tk) enjoyed the benefits. But now I'm ready to jump in and contribute. I want to give back to the community that's given so much to me.

‎_layouts/default.html

+25-51
Original file line numberDiff line numberDiff line change
@@ -16,62 +16,36 @@
1616
</head>
1717
<body>
1818

19-
<header role="banner" class="u-responsive-wrapper">
20-
{% if page.url != "/index.html" %}
21-
{% assign isLink = true %}
22-
{% endif %}
23-
24-
{% capture flavorText %}
25-
<div class="FlavorText__text">
26-
Matt Wondra
27-
<span class="FlavorText__text__flavor">
28-
{% if page.mattwondra %}{{ page.mattwondra }}{% else %}{{ site.defaultFlavorText }}{% endif %}
29-
</span>
30-
31-
{% if isLink %}
32-
<div class="FlavorText__hover-text">
33-
<span class="FlavorText__hover-text__name">Matt Wondra</span>
34-
will guide you home.
35-
</div>
36-
{% endif %}
37-
</div>
38-
{% endcapture %}
39-
40-
{% if isLink %}
41-
<a href="/" class="FlavorText FlavorText--link">
42-
{{ flavorText }}
43-
</a>
44-
{% else %}
45-
<div class="FlavorText">
46-
{{ flavorText }}
47-
</div>
48-
{% endif %}
19+
<header role="banner">
20+
<div class="u-responsive-wrapper">
21+
<a href="/">Matt Wondra</a>
22+
{% if page.mattwondra %}{{ page.mattwondra }}{% else %}{{ site.defaultFlavorText }}{% endif %}
23+
</div>
4924
</header>
5025

51-
<main class="u-responsive-wrapper" role="main">
26+
<main role="main">
5227
{{ content }}
5328
</main>
5429

55-
<footer role="contentinfo" class="SiteFooter u-responsive-wrapper">
56-
<hr class="ContentBreak" />
57-
58-
<h2 class="u-section-heading">Choose your own adventure</h2>
59-
<nav class="PrimaryNav">
60-
<a href="/">Home</a>
61-
<a href="/about/">About</a>
62-
<a href="/blog/archive/">Archive</a>
63-
</nav>
64-
<div class="SecondaryNav">
65-
<a href="https://github.com/mattwondra" class="u-link-muted">Github</a>
66-
<a href="https://twitter.com/mattwondra" class="u-link-muted">Twitter</a>
67-
<a href="http://instagram.com/mattwondra" class="u-link-muted">Instagram</a>
68-
<a href="{{site.rss_path}}{{site.rss_name}}" class="u-link-muted">RSS</a>
69-
</div>
70-
71-
72-
<small class="SiteCopyright">
73-
&copy; {{ site.time | date: '%Y' }} Matt Wondra
74-
</small>
30+
<footer role="contentinfo" class="u-bg-gray">
31+
<section class="u-responsive-wrapper">
32+
<h2 class="u-section-heading">Choose your own adventure</h2>
33+
<nav class="PrimaryNav">
34+
<a href="/">Home</a>
35+
<a href="/about/">About</a>
36+
<a href="/speaking/">Speaking</a>
37+
</nav>
38+
<div class="SecondaryNav">
39+
<a href="https://github.com/mattwondra" class="u-link-muted">Github</a>
40+
<a href="https://twitter.com/mattwondra" class="u-link-muted">Twitter</a>
41+
<a href="http://instagram.com/mattwondra" class="u-link-muted">Instagram</a>
42+
<a href="{{site.rss_path}}{{site.rss_name}}" class="u-link-muted">RSS</a>
43+
</div>
44+
45+
<small class="SiteCopyright">
46+
&copy; {{ site.time | date: '%Y' }} Matt Wondra
47+
</small>
48+
</section>
7549
</footer>
7650

7751

‎_layouts/page.html

+8-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
---
44

55
<section class="Page">
6-
{% if page.title %}
7-
<h1 class="Page__title">{{page.title}}</h1>
8-
{% endif %}
6+
<div class="Page__header">
7+
{% if page.page_title %}
8+
<h1 class="Page__title">{{page.page_title}}</h1>
9+
{% elsif page.title %}
10+
<h1 class="Page__title">{{page.title}}</h1>
11+
{% endif %}
12+
</div>
913

10-
<div class="Page__content u-typeset">
14+
<div class="Page__body u-typeset">
1115
{{content}}
1216
</div>
1317
</section>

‎_layouts/post.html

+1-22
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,7 @@ <h1 class="Post__title">{{ page.title }}</h1>
88
<small class="Post__byline">{{ page.date | date: "%B %-d, %Y" }}</small>
99
</header>
1010

11-
<hr class="ContentBreak ContentBreak--condensed" />
12-
1311
<div class="Post__content u-typeset">
1412
{{ content }}
1513
</div>
16-
</article>
17-
18-
{% if page.comments %}
19-
<div class="page-section page-content">
20-
<div id="disqus_thread"></div>
21-
</div>
22-
<script type="text/javascript">
23-
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
24-
var disqus_shortname = 'mattwondra'; // required: replace example with your forum shortname
25-
26-
/* * * DON'T EDIT BELOW THIS LINE * * */
27-
(function() {
28-
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
29-
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
30-
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
31-
})();
32-
</script>
33-
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
34-
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
35-
{% endif %}
14+
</article>

‎_plugins/jekyll-commonmark.rb

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
class Jekyll::Converters::Markdown::MyCustomProcessor
2+
def initialize(config)
3+
require 'motion-markdown-it'
4+
@config = config
5+
rescue LoadError
6+
STDERR.puts 'You are missing a library required for Markdown. Please run:'
7+
STDERR.puts ' $ [sudo] gem install commonmarker'
8+
raise FatalException.new("Missing dependency: commonmarker")
9+
end
10+
11+
def convert(content)
12+
# CommonMarker.render_html(content, :default)
13+
parser = MarkdownIt::Parser.new(:commonmark, { html: false })
14+
parser.render(content)
15+
end
16+
end

‎about.html

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
---
22
layout: page
3-
mattwondra: is pleased to meet you!
3+
mattwondra: is pleased to meet you.
44
permalink: /about/
5-
title: Hi, I'm Matt.
5+
title: Hi, I’m Matt.
66
---
77
<p class="standout">I’m a design-minded web geek living in Champaign, Illinois. Yes, we invented the web browser. Yes, you can be jealous.</p>
8-
<p>I work as a Front-End Web Developer with my amazing team at <a href="http://www.apartmenttherapy.com">Apartment Therapy</a> and <a href="http://www.thekitchn.com">The&nbsp;Kitchn</a>. Like a growing number of web teams, we operate remotely and I work from home. Most days it’s pretty great, but the upsides of remote work are offset by unique challenges&nbsp;too.</p>
9-
<p>On this site I write about my experiences in web design and development. It’s probably going to get pretty nerdy (sorry Mom). I’m also dipping my toes into <a href="/speaking.html">speaking publicly</a> on the topic. Hit me up on <a href="http://twitter.com/mattwondra">Twitter</a> if you’re looking for a presenter.</p>
8+
<p>I work as Lead Front-End Web Engineer with my amazing team at <a href="http://www.apartmenttherapy.com">Apartment Therapy</a> and <a href="http://www.thekitchn.com">The&nbsp;Kitchn</a>. Like a growing number of web teams, we operate remotely and I work from home. Most days it’s pretty great, but the upsides of remote work are offset by unique challenges&nbsp;too.</p>
9+
<p>On this site I write about my experiences in web design and development. It’s probably going to get pretty nerdy (sorry Mom). I’m also dipping my toes into <a href="/speaking/">speaking publicly</a> on the topic. Hit me up on <a href="http://twitter.com/mattwondra">Twitter</a> if you’re looking for a presenter.</p>
1010
<p>At home I brew my own beer and usually it’s pretty drinkable, which is a bonus. I also like to find ridiculous icons, and <a href="http://iconsoutofcontext.tumblr.com/">occasionally post them to&nbsp;Tumblr</a>.</p>
11-
12-

‎assets/_sass/base.scss

+24-37
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ html {
1010

1111
body {
1212
font: #{$fontSizeNormal}/1.4 "interface", "Helvetica Neue", Arial, Helvetica, sans-serif;
13-
color: #444;
13+
color: $colorText;
1414
font-weight: $fontWeightNormal;
1515
}
1616

@@ -37,34 +37,27 @@ strong, b {
3737
}
3838

3939

40-
.Post__header {
41-
// margin-bottom: 7rem;
42-
// &:after {
43-
// content: '';
44-
// display: block;
45-
// width: 4rem;
46-
// height: 1px;
47-
// background: $colorMuted;
48-
// position:relative;
49-
// top: 2rem;
50-
// }
51-
}
52-
53-
.Post__title {
54-
@include largeHeading;
55-
margin-bottom: 3rem;
56-
color: #222;
57-
}
58-
59-
.Post__byline {
60-
@include uppercase;
61-
color: $colorMuted;
62-
font-size:$fontSizeSmall;
63-
}
6440

6541
.u-typeset {
66-
p {
67-
margin: 0 0 1.25em;
42+
p, blockquote, h2, h3 {
43+
@extend %responsive-wrapper;
44+
margin-bottom: 3rem;
45+
}
46+
.u-bg-gray, .u-bg-brand {
47+
margin-bottom: 3rem;
48+
}
49+
blockquote {
50+
text-align: center;
51+
color: $colorBrand;
52+
}
53+
h2 {
54+
font-size: $fontSizeLarge;
55+
font-weight: $fontWeightBold;
56+
margin-top: 3rem*2;
57+
}
58+
h3 {
59+
@extend %section-heading;
60+
margin-top: 3rem*1.5;
6861
}
6962
}
7063

@@ -76,7 +69,6 @@ strong, b {
7669
.PostTeaser__title {
7770
font-size: $fontSizeLarge;
7871
font-weight: $fontWeightBold;
79-
color: #333;
8072
display: inline-block;
8173
margin-right: 1rem;
8274
}
@@ -86,6 +78,7 @@ strong, b {
8678
color: $colorMuted;
8779
font-size:$fontSizeSmall;
8880
white-space: nowrap;
81+
letter-spacing: 1px;
8982
}
9083

9184

@@ -94,12 +87,6 @@ strong, b {
9487
}
9588

9689

97-
.Page__title {
98-
@include largeHeading;
99-
margin-bottom: 3rem;
100-
color: #222;
101-
}
102-
10390
.PrimaryNav {
10491
margin-bottom: 0.5rem;
10592
display: inline-block;
@@ -109,7 +96,8 @@ strong, b {
10996
}
11097

11198
.SecondaryNav {
112-
font-size: $fontSizeSmall;
99+
@include uppercase;
100+
font-size: $fontSizeSmaller;
113101
margin-bottom: 0.5rem;
114102
display: inline-block;
115103
}
@@ -121,9 +109,8 @@ strong, b {
121109
.Teaser__title {
122110
font-size: $fontSizeLarge;
123111
font-weight: $fontWeightBold;
124-
color: #333;
125112
display: inline-block;
126-
margin-right: 1rem;
113+
margin: 0;
127114
}
128115

129116

‎assets/_sass/extends.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
%responsive-wrapper {
2+
max-width: 73rem;
3+
padding-left: 1.5rem;
4+
padding-right: 1.5rem;
5+
margin-left: auto;
6+
margin-right: auto;
7+
8+
@media (min-width: $mediaMedium) {
9+
padding-left: 3rem;
10+
padding-right: 3rem;
11+
}
12+
}

0 commit comments

Comments
 (0)