Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 20 commits
  • 9 files changed
  • 0 commit comments
  • 1 contributor
View
1 config.json
@@ -7,6 +7,7 @@
},
"plugins": [
"./plugins/list-content.coffee",
+ "./plugins/format.coffee",
"wintersmith-nunjucks",
"wintersmith-stylus"
],
View
11 contents/assets/col.styl
@@ -63,14 +63,9 @@ grid(num, gutterwidth, contextwidth, calc-span)
.in
- margin-left 10px
- margin-right 10px
-
-@media screen and (min-width: 670px)
- grid(12, 10px, 650px, calc-span)
-
-@media screen and (min-width: 836px)
- grid(12, 20px, 796px, calc-span)
+ width 300px
+ margin-left auto
+ margin-right auto
@media screen and (min-width: 980px)
grid(12, 20px, 940px, calc-span)
View
123 contents/assets/site.css
@@ -73,6 +73,7 @@ html {
background: #fff;
color: #555;
font-family: "Fira Sans", sans-serif;
+ padding: 18px 0;
}
img {
@@ -87,19 +88,11 @@ strong {
font-weight: 600;
}
-h1,
-h2,
-h3 {
- font-weight: 100;
- font-style: italic;
-}
-
-/* Type sizing @ 21px, 9px, 3px cadence
+/* Type sizing @ 14px with 9px cadence
----------------------------------------------------------------------------- */
-
html {
- font-size: 21px;
- line-height: 1.571429; /* 33px */
+ font-size: 14px;
+ line-height: 1.6875; /* 27px */
}
h1,
@@ -109,17 +102,25 @@ h4,
h5,
h6 {
margin-bottom: 18px;
- margin-top: 54px;
+ margin-top: 36px;
}
h1 {
- font-size: 36px;
- line-height: 54px;
+ font-size: 21px;
+ line-height: 27px;
}
h2 {
- font-size: 30px;
- line-height: 45px;
+ font-size: 18px;
+ line-height: 21px;
+}
+
+h3,
+h4,
+h5,
+h6 {
+ font-size: 14px;
+ line-height: 27px;
}
p,
@@ -149,10 +150,92 @@ hr {
margin-top: 54px;
}
-/* Articles
+/* Type sizing @ 21px with 9px cadence
----------------------------------------------------------------------------- */
-.article {
- padding-top: 54px;
- padding-bottom: 54px;
+@media screen and (min-width: 1320px) {
+
+ html {
+ font-size: 21px;
+ line-height: 1.571429; /* 33px */
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-bottom: 18px;
+ margin-top: 54px;
+ }
+
+ h1 {
+ font-size: 36px;
+ line-height: 54px;
+ }
+
+ h2 {
+ font-size: 30px;
+ line-height: 45px;
+ }
+
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: 21px;
+ line-height: 33px;
+ }
+
+ p,
+ table {
+ margin-bottom: 18px;
+ margin-top: 0;
+ }
+
+ ul,
+ ol {
+ margin-bottom: 18px;
+ margin-top: 0;
+ }
+
+ li ul,
+ li ol {
+ margin-bottom: 0;
+ }
+
+ li {
+ margin-bottom: 9px;
+ margin-top: 9px;
+ }
+
+ hr {
+ margin-bottom: 54px;
+ margin-top: 54px;
+ }
+
+}
+
+.hero,
+.hero-fullscreen {
+ background: #222;
+ left: 50%;
+ margin: 54px 0;
+ position: relative;
+ transform: translateX(-50%);
+}
+
+.hero-fullscreen {
+ background-size: cover;
+ /* Fallback for browsers that don't support vw and vh */
+ width: 800px;
+ height: 600px;
+}
+
+@supports (width: 100vw) {
+ .hero-fullscreen {
+ width: 100vw;
+ height: 100vw;
+ }
}
View
112 contents/assets/theme-console.css
@@ -0,0 +1,112 @@
+.theme-console {
+ background: #262a2b;
+ color: #a0dff1;
+ font-weight: 100;
+}
+
+.theme-console h1,
+.theme-console h2,
+.theme-console h3 {
+ font-weight: 100;
+}
+
+.theme-console a {
+ color: #42b6cd;
+ font-weight: 400;
+ text-decoration: none;
+}
+
+.theme-console a:hover {
+ color: #2e7b95;
+}
+
+.theme-console .article-title {
+ color: #34ccfe;
+ font-size: 72px;
+ line-height: 81px;
+ margin: 96px 0;
+ text-align: center;
+}
+
+.theme-console .article-title i,
+.theme-console .article-title em {
+ color: #74e2fb;
+ display: block;
+ font-style: normal;
+}
+
+.theme-console .article-synopsis {
+ color: #fff;
+ font-size: 24px;
+ margin: 45px 0;
+}
+
+.theme-console .article-byline {
+ color: #656565;
+}
+
+.theme-console .article-content h1,
+.theme-console .article-content h2 {
+ color: #ffcc66;
+}
+
+.theme-console .article-content h3,
+.theme-console .article-content h4,
+.theme-console .article-content h5,
+.theme-console .article-content h6 {
+ color: #fb934c;
+ font-weight: 500;
+ text-transform: uppercase;
+}
+
+.theme-console .article-content blockquote {
+ border-left: 1px dashed #656565;
+ margin: 36px 0;
+ padding-left: 18px;
+}
+
+.theme-console .article-content blockquote cite {
+ color: #ffcc66;
+ display: block;
+ font-style: italic;
+}
+
+.theme-console .series {
+ list-style: none;
+ padding: 0;
+}
+
+.theme-console .series-item {
+ margin-bottom: 18px;
+}
+
+.theme-console .series-item > a,
+.theme-console .series-item > span {
+ border-bottom: 3px solid #656565;
+ display: block;
+ color: #999;
+ font-weight: 100;
+ font-style: italic;
+ padding: 0 0 18px;
+}
+
+.theme-console .series-item > a > i,
+.theme-console .series-item > a > em,
+.theme-console .series-item > span > i,
+.theme-console .series-item > span > em {
+ color: #656565;
+ display: block;
+ font-size: 14px;
+ line-height: 18px;
+ font-style: normal;
+ text-transform: uppercase;
+}
+
+.theme-console .series-activated > a {
+ color: #34ccfe;
+ border-color: #34ccfe;
+}
+
+.theme-console .series-activated > a > i {
+ color: #2e7b95;
+}
View
11 plugins/format.coffee
@@ -0,0 +1,11 @@
+###
+Given a string (possibly) containing HTML, return a new string with all tags
+removed.
+###
+stripHtml = (string) -> string.replace(/<[^>]+>/g, '')
+
+plugin = (env, end) ->
+ env.helpers.stripHtml = stripHtml
+ end()
+
+module.exports = plugin
View
59 plugins/list-content.coffee
@@ -1,38 +1,25 @@
_ = require('underscore')
-compareFilesByFilename = (a, b) ->
+comparePagesByFilename = (a, b) ->
###
- Compares filenames of each file object. Returns a sorting number.
+ Compares filenames of each page object. Returns a sorting number.
###
a = a.getFilename()
b = b.getFilename()
if a < b then 1 else if a > b then -1 else 0
-compareFilesByDate = (a, b) ->
+comparePagesByDate = (a, b) ->
###
Compares UNIX timestamps of each file object. Returns a sorting number.
+ Reverse Chron.
###
a = a.date.getTime()
b = b.date.getTime()
if a > b then -1 else if a < b then 1 else 0
-###
-Is object a file object?
-We consider any object with a `getUrl` method to be a file object.
-###
-isFile = (object) -> object and object.getUrl?
-
-
-###
-Is file object not an index file?
-###
-isFileAndIsntIndex = (file) ->
- isFile(file) and file.filepath.relative.search('index.') isnt -1
-
-
id = (thing) -> thing
@@ -49,20 +36,34 @@ searcher = (pattern, a2b) ->
###
Combine multiple predicates into a single predicate using an AND relationship.
+Returns a predicate function.
###
all = (predicates...) -> (thing) ->
rAll = (isPass, predicate) -> if isPass then predicate(thing) else false
predicates.reduce(rAll, true)
+isntIndex = (page) -> page.filepath.relative.search('index.') is -1
+
+
+toFilepathRelative = (page) -> page.filepath.relative
+
+
+withPathMatching = (string) ->
+ all(isntIndex, searcher(RegExp(string), toFilepathRelative))
+
+
###
-Convenience function for sorting, slicing, filtering a list of file objects from
-a content tree. `contentTree` can be any tree object or any node of the content
-tree. Only immediate values of node are considered. Child nodes are ignored.
+Convenience function for sorting, slicing, filtering a list of page objects from
+a content tree. `contentTreeGroup` can be any sub-group of a content tree object.
+
+Example:
+
+ listPages(contents._.pages, isntIndex, compareByFilename, 0, 10)
###
-listContent = (contentTree, predicate, compare, start, end) ->
- predicate = isFileAndIsntIndex unless predicate?
- compare = compareFilesByDate unless compare?
+listPages = (contentTreeGroup, predicate, compare, start, end) ->
+ predicate = isntIndex unless predicate?
+ compare = comparePagesByDate unless compare?
start = 0 unless start?
end = Infinity unless end?
@@ -70,20 +71,20 @@ listContent = (contentTree, predicate, compare, start, end) ->
# Filter out files we don't care about.
# Sort the result.
# Trim to range.
- _.values(contentTree)
+ contentTreeGroup
.filter(predicate)
.sort(compare)
.slice(start, end)
plugin = (env, end) ->
- env.helpers.listContent = listContent
+ env.helpers.listPages = listPages
env.helpers.searcher = searcher
env.helpers.all = all
- env.helpers.isFile = isFile
- env.helpers.isFileAndIsntIndex = isFileAndIsntIndex
- env.helpers.compareFilesByFilename = compareFilesByFilename
- env.helpers.compareFilesByDate = compareFilesByDate
+ env.helpers.isntIndex = isntIndex
+ env.helpers.comparePagesByFilename = comparePagesByFilename
+ env.helpers.comparePagesByDate = comparePagesByDate
+ env.helpers.withPathMatching = withPathMatching
end()
View
42 templates/article.html
@@ -4,15 +4,45 @@
<link rel="stylesheet" href="/vendor/normalize.css">
<link rel="stylesheet" href="/assets/col.css">
<link rel="stylesheet" href="/assets/site.css">
- {% for url in page.metadata.styles %}
- <link rel="stylesheet" href="{{ url }}">
- {% endfor %}
{% endblock %}
-{% block main %}
+{% block body %}
+<ul class="series in">
+ <li class="series-item series-activated col-02 col-first pre-03">
+ <a href="#">
+ <i>Part one:</i>
+ The state of the web
+ </a>
+ </li>
+ <li class="series-item col-02">
+ <span>
+ <i>Part two:</i>
+ The new Firefox OS
+ </span>
+ </li>
+ <li class="series-item col-02">
+ <span>
+ <i>Part three:</i>
+ The making of
+ </span>
+ </li>
+</ul>
<div class="in">
- <article class="article pre-01 col-06">
- {{ page.html | safe }}
+ <article class="article pre-03 col-06 col-first">
+ <header class="page-header">
+ <h1 class="article-title">{{ page.title }}</h1>
+ {% if page.metadata.synopsis %}
+ <div class="article-synopsis">{{ page.metadata.synopsis }}</div>
+ {% endif %}
+ {% if page.metadata.author %}
+ <div class="article-byline">
+ {{ page.metadata.author }}, {{ moment(page.date).format('MMMM D') }}
+ </div>
+ {% endif %}
+ </header>
+ <div class="article-content">
+ {{ page.html | safe }}
+ </div>
</article>
</div>
{% endblock %}
View
17 templates/base.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
{% block html_tag %}
-<html>
+<html {% if page.metadata.html_class %}class="{{ page.metadata.html_class }}"{% endif %}>
{% endblock %}
<head>
{% block meta %}
@@ -11,25 +11,28 @@
{% endblock %}
{% block title %}
<title>
- {% if page.title %}{{ page.title }} | {% endif %}{{ name }}
+ {% if page.title %}
+ {{ env.helpers.stripHtml(page.title) }} |
+ {% endif %}
+ {{ name }}
</title>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="/vendor/normalize.css">
+ {% endblock %}
+ {% block styles_extra %}
{% for url in page.metadata.styles %}
<link rel="stylesheet" href="{{ url }}">
{% endfor %}
{% endblock %}
</head>
<body>
- {% block header %}
- {% endblock %}
- {% block main %}
+ {% block body %}
{{ typogr(page.html).typogrify() | safe }}
{% endblock %}
- {% block footer %}
- {% endblock %}
{% block scripts %}
+ {% endblock %}
+ {% block scripts_extra %}
{% for url in page.metadata.scripts %}
<script type="text/javascript" src="{{ url }}"></script>
{% endfor %}
View
16 templates/cinematic.html
@@ -1,16 +0,0 @@
-{% extends "base.html" %}
-
-{% block styles %}
- <link rel="stylesheet" href="/vendor/normalize.css">
- <link rel="stylesheet" href="/assets/col.css">
- <link rel="stylesheet" href="/assets/site.css">
- {% for url in page.metadata.styles %}
- <link rel="stylesheet" href="{{ url }}">
- {% endfor %}
-{% endblock %}
-
-{% block main %}
- <div class="in section">
- <div class="col-06">{{ typogr(page.html).typogrify() | safe }}</div>
- </div>
-{% endblock %}

No commit comments for this range

Something went wrong with that request. Please try again.