├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── config.toml
├── content
├── _index.md
├── bib.md
├── citet.md
├── comma.md
├── contraction.md
├── egie.md
├── emdash.md
├── endash.md
├── footnote.md
├── however.md
├── hyphen.md
├── inline.md
├── judgment.md
├── list.md
├── math.md
├── passive.md
├── quote.md
├── ref.md
├── runtime.md
├── sectitle.md
├── simplify.md
├── subfig.md
├── table.md
├── they.md
├── this.md
├── times.md
├── tradeoff.md
└── transpiler.md
├── sass
└── style.scss
└── templates
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | public/
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) Adrian Sampson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | .PHONY: site serve deploy
2 |
3 | # Build the site and then remove all subdirectories (i.e., all normal pages).
4 | # We currently *only* produce an index.html with all the content; the actual
5 | # pages are unnecessary.
6 | site:
7 | rm -rf public
8 | zola build
9 | rm -r $(shell echo public/*/)
10 | rm public/sitemap.xml
11 |
12 | serve:
13 | zola serve
14 |
15 | # Deployment.
16 | RSYNCARGS := --compress --recursive --checksum --itemize-changes \
17 | --delete -e ssh --perms --chmod=Du=rwx,Dgo=rx,Fu=rw,Fog=r
18 | DEST := courses:coursewww/capra.cs.cornell.edu/htdocs/styleguide
19 | deploy: site
20 | rsync $(RSYNCARGS) ./public/ $(DEST)
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Capra Style Guide
2 | =================
3 |
4 | This is a guide for writing and typesetting in the [Capra][] research group.
5 |
6 | It uses the [Zola][] static site generator.
7 | Every entry in the guide is a Markdown file in the `content` directory.
8 | The templates stitch everything together into one long `index.html` file.
9 | Type `make` to build the page.
10 |
11 | [capra]: https://capra.cs.cornell.edu
12 | [zola]: https://www.getzola.org
13 |
--------------------------------------------------------------------------------
/config.toml:
--------------------------------------------------------------------------------
1 | base_url = "https://capra.cs.cornell.edu/styleguide"
2 | compile_sass = true
3 | highlight_code = false
4 | build_search_index = false
5 |
6 | [extra]
7 | title = "Capra Style Guide"
8 |
--------------------------------------------------------------------------------
/content/_index.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "index title"
3 | +++
4 | This is an in-progress collection of hints for writing and typesetting in the [Capra][] research group.
5 | The source is [on GitHub][gh], so you can contribute or fork your own style guide there.
6 |
7 | For more good advice, see [Eddie Kohler][ek]’s [LaTeX usage notes][eklatex] or [Claire Le Goues][clg]’s [things she repeats about writing][clgwriting].
8 |
9 | [capra]: https://capra.cs.cornell.edu
10 | [gh]: https://github.com/cucapra/styleguide
11 | [ek]: http://www.read.seas.harvard.edu/~kohler/
12 | [eklatex]: http://www.read.seas.harvard.edu/~kohler/latex.html
13 | [clg]: https://clairelegoues.com
14 | [clgwriting]: https://clairelegoues.com/posts/clg-writing-rules.html
15 |
--------------------------------------------------------------------------------
/content/bib.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "bibliography"
3 | +++
4 | The BibTeX code you get from the ACM Digital Library or IEEE Xplore or whatever is usually terrible.
5 | You need to fix it up manually:
6 |
7 | * Remove all the useless fields like `publisher` and `keywords`. For `inproceedings` (conference) entries, keep only `author`, `title`, `booktitle`, and `year`.
8 | * Edit the conference name (`booktitle`) to be less rambly. Remove stuff like *Proceedings of the 32nd ACM SIGPLAN Conference on...* and use something succinct like *Programming Language Design and Implementation (PLDI)*. Include popular abbreviations in parentheses to help readers skim. When submitting to a venue with unjust page limit rules that include references, consider using the abbreviation by itself to save space (and as a form of protest).
9 | * Check for capitalization in the title and surround it with curly braces. For example, use `{PRIMES} is in {P}` to make sure BibTeX doesn’t render it as *Primes is in p*.
10 |
11 | If you find something on arXiv, always look for a real publication first before resorting to an arXiv citation.
12 |
--------------------------------------------------------------------------------
/content/citet.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "citation as nouns"
3 | +++
4 |
5 | Citation are not nouns. For example, this is wrong:
6 |
7 | - *We build on the work of [32].*
8 |
9 | The right way is to either name the system or the authors:
10 |
11 | - *We build on Terra [32].*
12 | - *We build on the work of Cookie Monster et al. [32].*
13 |
14 | The [natbib][] package for LaTeX defines the `\citet` macro which automatically
15 | adds the names of the authors and the citation.
16 | It provides several other [useful macros][natbib-macros] for citations.
17 |
18 | [natbib]: https://ctan.org/pkg/natbib?lang=en
19 | [natbib-macros]: http://merkel.texture.rocks/Latex/natbib.php
20 |
--------------------------------------------------------------------------------
/content/comma.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "commas"
3 | +++
4 | Use [the serial comma][sc]: the last one in a list like *locks, transactions, and atomics*.
5 |
6 | [sc]: https://en.wikipedia.org/wiki/Serial_comma
7 |
--------------------------------------------------------------------------------
/content/contraction.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "contractions"
3 | +++
4 | Don’t use ’em in papers.
5 | They’re fine in blog posts ’n’ such.
6 |
--------------------------------------------------------------------------------
/content/egie.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "e.g. and i.e."
3 | +++
4 | The abbreviation *e.g.* means *for example*, and *i.e.* means something like *in other words*.
5 | Do not italicize them, and always follow them with a comma.
6 | Both need some kind of separating punctuation preceding them, such as a comma, an opening parenthesis, or an em dash.
7 | For example:
8 |
9 | > They forgot the most important thing in the world, i.e., breakfast.
10 | > There would be no egg-based foods (e.g., omelettes or quiches) today.
11 |
--------------------------------------------------------------------------------
/content/emdash.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "em dash"
3 | +++
4 | In TeX, three hyphens (`---`) become an em dash (—).
5 |
6 | You can use em dashes, sparingly, [in place of parentheses][sodash] or to evoke a conversational pause.
7 | See [Eddie Kohler’s advice][ekdash] on how to use them.
8 | Do not put spaces around an em dash.
9 |
10 | [ekdash]: http://www.read.seas.harvard.edu/~kohler/latex.html#dash
11 | [sodash]: https://english.stackexchange.com/a/105667
12 |
--------------------------------------------------------------------------------
/content/endash.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "en dash"
3 | +++
4 | In TeX, two hyphens (`--`) become an en dash (–).
5 |
6 | Use an en dash, not a hyphen, in numeric ranges like *4–10*.
7 |
8 | Also use an en dash between words that are balanced with each other but [not part of a compound word](https://tex.stackexchange.com/a/46229/1625).
9 | Common examples include *hardware–software*, *producer–consumer*, and things named after multiple people, like *Curry–Howard* or *Lucas–Kanade*.
10 |
--------------------------------------------------------------------------------
/content/footnote.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "footnotes"
3 | +++
4 | Footnotes at the end of the sentence go after the period.
5 | In TeX:
6 |
7 | Some technical statement.\footnote{Snide remark here.}
8 |
--------------------------------------------------------------------------------
/content/however.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "however"
3 | +++
4 | *However* and similar words are not conjunctions, so *foo, however bar* is a
5 | [comma splice][cs].
6 | Try instead:
7 |
8 | > foo. However, bar
9 |
10 | Or:
11 |
12 | > foo; however, bar
13 |
14 | [cs]: https://writing.wisc.edu/handbook/grammarpunct/commonerrors/
15 |
--------------------------------------------------------------------------------
/content/hyphen.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "hyphens"
3 | +++
4 | Use hyphens in [compound modifier phrases][cms785] when they help clarify which words go together.
5 | Specifically, hyphenate compound modifiers that come before the noun they modify, except when they consist of an adverb ending in *-ly*.
6 | Do not hyphenate compound modifiers that come *after* the noun they modify unless you have a really good reason to.
7 |
8 | For example, you need a hyphen in *language-based security*, *off-chip DRAM*, and *real-time deadline*
9 | but not in *this accelerator is fixed function*.
10 | On the other hand, *fully connected layer* does not need a hyphen, even though the modified noun *layer* comes last, because the *-ly* suffix in *fully* makes it easy to see how to parse the phrase.
11 |
12 | Some phrases can act either as modifiers that need hyphens or as nouns that do not.
13 | The phrase *state of the art* is a common bugaboo.
14 | A reference to something *in the state of the art* does not need hyphens, but *a state-of-the-art accelerator* does.
15 |
16 | [cms785]: https://www.chicagomanualofstyle.org/book/ed17/part2/ch07/psec085.html
17 |
--------------------------------------------------------------------------------
/content/inline.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "inline math & code"
3 | +++
4 | You often want to put math, code, or other notation in the flow of prose.
5 | Do it like this:
6 |
7 | Introductory sentence, ending with a colon:
8 | %
9 | \[ e = m \times c^2 \]
10 | %
11 | More explanation here.
12 |
13 | The text leading up to the notation should give enough context so that the reader knows why they are about to see an equation.
14 | It should call out the key insight they should look for while trying to understand the math or listing.
15 | The text afterward should provide justification and explain details that make sense after seeing the notation.
16 |
17 | Above and below the math or `listing`, use an empty TeX comment line (`%`) to avoid starting a new paragraph while still making the TeX look readable.
18 |
19 | For math, be sure to use display-mode math macros like `\[ x \]` or `align*`.
20 | Use `align*` (instead of several `\[ \]` equations in a row) when you have multiple lines:
21 |
22 | \begin{align*}
23 | S &= \frac{T_s}{T_p} \\
24 | &= \frac{1}{(1 - p) + \frac{p}{s}}
25 | \end{align*}
26 |
--------------------------------------------------------------------------------
/content/judgment.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "judgment"
3 | +++
4 | Use the [predominant American spelling][judgment], *judgment*.
5 |
6 | [judgment]: https://www.washingtonpost.com/news/volokh-conspiracy/wp/2017/08/16/judgment-or-judgement/?noredirect=on
7 |
--------------------------------------------------------------------------------
/content/list.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "lists"
3 | +++
4 | If you have to list items that are only a sentence or two, consider inlining them into a paragraph, following these rules. (1) There’s no need for fancy marker words like *firstly* and *secondly*. (2) Instead, use numerals in parentheses at the beginning of each item.
5 |
--------------------------------------------------------------------------------
/content/math.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "math"
3 | +++
4 | In LaTeX math:
5 |
6 | - Don't use `*` for multiplication. Use `\cdot`, `\times`, or nothing at all.
7 | - For variable names that are words, use `$\text{count}$`.
8 | A plain `$count$` looks like you're multiplying five single-letter variables together.
9 |
--------------------------------------------------------------------------------
/content/passive.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "passive voice"
3 | +++
4 | Avoid the [passive voice][pv] as much as reasonable.
5 | When you say *the data is converted*, for example, your writing will be clearer if it is more specific about who or what does the conversion: the system, the algorithm, the user, the server, the authors, etc.
6 |
7 | An imperfect way to tell whether a sentence is in the passive voice is to try adding *…by space aliens* to the end.
8 | If that works, you probably want to add a subject for your verb.
9 | (Credit to [Melissa O’Neill][melissa] for this trick.)
10 |
11 | Sometimes, rewriting a sentence to avoid the passive voice makes it worse.
12 | Give it an earnest try, but give up if the alternative seems bad.
13 |
14 | [pv]: https://writingcenter.unc.edu/tips-and-tools/passive-voice/
15 | [melissa]: https://www.cs.hmc.edu/~oneill/
16 |
--------------------------------------------------------------------------------
/content/quote.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "quotes"
3 | +++
4 | Periods and commas at the ends of quotations go *inside* the quotation marks.
5 | For example:
6 |
7 | > My advisor texted me that I had “fixed the last bug,” but I replied that “bugs are forever.”
8 |
9 | In TeX, remember to use `` for opening and `''` for closing double quotes.
10 | TeX will typeset `"this"` with opening quotes on both sides.
11 |
--------------------------------------------------------------------------------
/content/ref.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "references"
3 | +++
4 | To reference a section, use `Section~\ref{...}`. Capitalize *Section* and use
5 | a tilde to make a nonbreaking space. (And the same for tables and figures.) Always use *Section*, even when it’s a subsection or subsubsection.
6 |
7 | When explaining figures or tables that show results, refer to them early in the paragraph, usually in the first sentence, and then explain the contents in more detail. For example:
8 |
9 | > Figure 9 shows the execution time for each benchmark relative to an unmodified execution. The geometric mean slowdown is 8%. The worst slowdown is streamcluster, which is 31% slower with debugging enabled.
10 |
11 | It’s usually best to put the figure or table reference right at the beginning of the sentence and to follow it with an active verb.
12 | For example, prefer *Figure N shows X* to *X can be found in Figure N* or *As shown in Figure N, X*.
13 |
--------------------------------------------------------------------------------
/content/runtime.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "runtime, run-time, run time"
3 | +++
4 | Use *run time* as a noun for the time when execution happens, as in *the error arises at run time*.
5 | Use *run-time* as an adjective phrase before the noun, as in *the system’s run-time behavior*.
6 | Use *runtime* as the noun that is shorthand for *runtime system*, as in *we designed a compiler and runtime*.
7 | (Credit to [James Wilcox][jrw]’s [recollection][p] of [Mike Ernst][ernst].)
8 |
9 | Use the same rules for *compile time* and *compile-time* (but *compiletime* is not a thing).
10 |
11 | [jrw]: https://homes.cs.washington.edu/~jrw12/
12 | [p]: https://homes.cs.washington.edu/~jrw12/runtime.html
13 | [ernst]: https://homes.cs.washington.edu/~mernst/
14 |
--------------------------------------------------------------------------------
/content/sectitle.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "section titles"
3 | +++
4 | For most section titles, use Title Case.
5 | For “run-in” titles like LaTeX's `\paragraph`, use sentence case and end the title with a period.
6 |
--------------------------------------------------------------------------------
/content/simplify.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "simpler phrases"
3 | +++
4 | Writing in “academic mode” can tempt you to use phrases that are more complicated than they need to be.
5 | Try to keep things simple, even if it means sounding informal.
6 | Here are some find/replace patterns for simplifying language:
7 |
8 | - *which means that* → *so*
9 | - *gives X the ability to* → *lets X*
10 | - *allows X to* → *lets X*
11 | - *is different* → *differs*
12 | - *is built on* → *builds on*
13 | - *it is observed that X* → just *X* or, if necessary, *we observe that X*
14 | - *in order to* → *to*
15 | - *so as to* → *to*
16 | - *as can be seen in the figure, X* → *the figure shows that X* or just *X*
17 | - *has the potential to* → *could*
18 | - *a sufficient amount of* → *enough*
19 | - *utilize* → *use*
20 | - *make use of* → *use*
21 | - *note that X* → *X*
22 | - *it is worth noting that X* → *X*
23 |
--------------------------------------------------------------------------------
/content/subfig.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "subfigures"
3 | +++
4 | Use [the `subcaption` package][subcaption] to lay out subfigures in TeX.
5 | Use something like this:
6 |
7 | \begin{figure}
8 | \centering
9 | \begin{subfigure}[b]{0.5\linewidth}
10 | \centering
11 | Figure here.
12 | \caption{First caption.}
13 | \label{fig:thing1}
14 | \end{subfigure}
15 | \begin{subfigure}[b]{0.5\linewidth}
16 | \centering
17 | Another figure here.
18 | \caption{Second caption.}
19 | \label{fig:thing2}
20 | \end{subfigure}
21 | \caption{Caption for both.}
22 | \label{fig:both}
23 | \end{figure}
24 |
25 | Using `0.5\linewidth` for the size of the subfigures makes them divide the horizontal space equally.
26 |
27 | [subcaption]: https://ctan.org/pkg/subcaption
28 |
--------------------------------------------------------------------------------
/content/table.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "tables"
3 | +++
4 | In TeX, use [booktabs][booktabs] and its `\toprule`, `\midrule`, and `\bottomrule` lines instead of `\hline`.
5 | Do not put horizontal lines between every row (but between the header row and the rest of the rows is fine).
6 | Do not use vertical lines.
7 | Right-align columns that contain numbers.
8 |
9 | [booktabs]: https://ctan.org/pkg/booktabs
10 |
--------------------------------------------------------------------------------
/content/they.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "personal pronouns"
3 | +++
4 | To refer to a notional person like *the programmer*, use the [singular *they*][wt].
5 |
6 | [wt]: https://en.wikipedia.org/wiki/Singular_they
7 |
--------------------------------------------------------------------------------
/content/this.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "this as a subject"
3 | +++
4 | It can be tempting to chain together two sentences by starting the second one with *this* as a noun.
5 | For example:
6 |
7 | > Because the oven was broken, we microwaved the hot pocket. This resulted in a quicker but soggier treat.
8 |
9 | This pattern can make the second sentence harder to read because the referent can be ambiguous (at first glance, *this* might be the hot pocket, the oven, or the microwave).
10 | Insert a clarifying noun, such as *this technique* in the sentence above.
11 |
--------------------------------------------------------------------------------
/content/times.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "times"
3 | +++
4 | Use a × symbol, not the letter x, when writing about dimensions (“a 4×2 grid”) or factors (“a speedup of 2.3× over the baseline”).
5 | In TeX, you can use `$\times$` to get the symbol.
6 |
--------------------------------------------------------------------------------
/content/tradeoff.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "trade-off"
3 | +++
4 | Use *trade-off*, not *tradeoff*. (Both are common, but we had to pick one and the former seems to be more popular.)
5 |
--------------------------------------------------------------------------------
/content/transpiler.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "transpiler"
3 | +++
4 | Avoid *transpiler*. Just use *compiler* instead.
5 | (See [Lindsey Kuper][lk]’s [investigation][p] into the varied, fuzzy meaning of the former.)
6 |
7 | [lk]: https://users.soe.ucsc.edu/~lkuper/
8 | [p]: http://composition.al/blog/2017/07/30/what-do-people-mean-when-they-say-transpiler/
9 |
--------------------------------------------------------------------------------
/sass/style.scss:
--------------------------------------------------------------------------------
1 | $main-color: rgb(179, 27, 27); // Theme color.
2 | $disabled-color: #666; // Grayed-out color.
3 | $exception-color: #ccc; // Highlight color for "different" rows.
4 | $max-width: 40rem; // Width of the content.
5 | $sidebar-width: 15rem;
6 | $small-width: 450px; // "Small devices" are smaller than this.
7 | $tiny-width: 400px; // Really tiny devices are smaller than this.
8 | $main-font: "Source Sans Pro", Verdana, Tahoma, Geneva, sans-serif;
9 | $display-font: "Source Code Pro", "Anonymous Pro", Inconsolata, Consolas,
10 | Courier, monospace;
11 | $display-font-size: 120%;
12 | $line-height: 150%;
13 |
14 | // Laying out figures.
15 | $figure-width: 20rem;
16 | $figure-gap: 1rem;
17 |
18 |
19 | // Layout.
20 | body {
21 | margin: 0;
22 | }
23 |
24 | body>header {
25 | width: 100%;
26 | nav {
27 | padding: 0.5rem 0.5rem;
28 | display: block;
29 | margin: 0 1rem 0;
30 | max-width: $max-width;
31 |
32 | p, h1 {
33 | margin: 0;
34 | padding: 0.5rem 0;
35 | display: inline-block;
36 | }
37 | p {
38 | margin-left: 0.5rem;
39 | }
40 |
41 | // Compact layout on small screens.
42 | @media (max-width: $small-width) {
43 | padding: 0 0.5rem;
44 | }
45 | }
46 |
47 | // Header links.
48 | font-family: $display-font;
49 | font-size: $display-font-size;
50 | a {
51 | color: $main-color;
52 | text-decoration: none;
53 | }
54 | h1 {
55 | font-size: inherit;
56 | font-weight: bold;
57 | }
58 | }
59 |
60 | #content {
61 | // In rows on large screens.
62 | @media (min-width: $small-width) {
63 | display: flex;
64 | flex-direction: row;
65 | }
66 |
67 | margin: 0 1rem;
68 | padding: 0 0.5rem;
69 |
70 | main {
71 | max-width: $max-width;
72 | }
73 |
74 | .ephemera {
75 | // Hide title links.
76 | h2 a {
77 | text-decoration: none;
78 | color: inherit;
79 | }
80 |
81 | @media (min-width: $small-width) {
82 | margin-left: 2rem;
83 | max-width: $sidebar-width;
84 |
85 | h2 {
86 | margin: 0 0 0.5rem 0;
87 | }
88 | }
89 |
90 | section {
91 | margin: 0 0 1.5rem 0;
92 | ul {
93 | margin: 0;
94 | }
95 | }
96 | }
97 | }
98 |
99 |
100 | // Fonts.
101 | body {
102 | font-family: $main-font;
103 | line-height: $line-height;
104 | }
105 |
106 | a {
107 | color: $main-color;
108 | }
109 |
110 | // Headings.
111 | h1, h2, h3, h4, h5, h6 {
112 | font-family: $display-font;
113 | line-height: $line-height;
114 | }
115 | // Top two levels of headings are the same size.
116 | h1, h2 {
117 | font-size: $display-font-size;
118 | }
119 | // Non-top headings leave a gap.
120 | h1 {
121 | margin-top: 0;
122 | }
123 | h2, h3, h4, h5, h6 {
124 | margin-top: 1.5em;
125 | }
126 | // Other headings are smaller.
127 | h3, h4, h5, h6 {
128 | font-size: 100%;
129 | margin: 0;
130 | }
131 |
132 | // More style.
133 | ul {
134 | list-style-type: square;
135 | }
136 | ul, ol {
137 | padding-left: 1.3rem;
138 | }
139 | blockquote {
140 | margin: 0.8em 0 0.8em 0.5em;
141 | }
142 |
143 | // Code.
144 | pre {
145 | background: #eee;
146 | padding: 1em 1em;
147 | overflow-x: auto;
148 | line-height: 1.3;
149 | }
150 | code {
151 | background: #eee;
152 | }
153 |
154 | // Style guide stuff.
155 |
156 | main>p:first-child {
157 | margin-top: 0;
158 | }
159 |
160 | // "Index"/table of contents.
161 | main>nav {
162 | margin: 1rem 0 1.5rem;
163 |
164 | a {
165 | margin-right: 0.6em;
166 | text-decoration: none;
167 | &:hover {
168 | text-decoration: underline;
169 | }
170 | }
171 | }
172 |
173 | // Entry.
174 | article {
175 | border-top: 2px dashed $main-color;
176 | margin-top: 2rem;
177 | padding-top: 0.2rem;
178 |
179 | header {
180 | // The header contains an anchor link with the entry's slug.
181 | a {
182 | float: right;
183 | text-decoration: none;
184 | color: $main-color;
185 | font-family: $display-font;
186 | &:hover {
187 | text-decoration: underline;
188 | }
189 | }
190 |
191 | // Entry title.
192 | h2 {
193 | margin: 0 0 0.5rem;
194 | float: left;
195 | color: $main-color;
196 | }
197 | }
198 |
199 | p {
200 | clear: both;
201 | margin: 0.5rem 0;
202 | }
203 | }
204 |
--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{ config.extra.title }}
9 |
10 |
11 |
12 |
13 |
19 |
20 |