From 3f0005b46ee0e5c450f9202e3a59b4a88c120197 Mon Sep 17 00:00:00 2001 From: tummychow Date: Fri, 14 Mar 2014 01:01:21 -0400 Subject: [PATCH] Init --- .gitattributes | 8 + .gitignore | 3 + CONTRIBUTING.md | 34 ++ README.md | 44 ++ config.json | 24 + content/fixed/404.md | 6 + content/fixed/about.md | 30 + content/post/2013-12-31-whats-jekyll.md | 12 + content/post/2014-01-02-introducing-lanyon.md | 38 ++ layouts/chrome/default_foot.html | 7 + layouts/chrome/default_head.html | 22 + layouts/chrome/head.html | 28 + layouts/chrome/sidebar.html | 29 + layouts/fixed/single.html | 8 + layouts/index.html | 17 + layouts/post/single.html | 9 + layouts/rss.xml | 24 + .../apple-touch-icon-144-precomposed.png | Bin 0 -> 2357 bytes static/assets/favicon.ico | Bin 0 -> 445 bytes static/css/lanyon.css | 527 ++++++++++++++++++ static/css/poole.css | 402 +++++++++++++ static/css/syntax.css | 66 +++ 22 files changed, 1338 insertions(+) create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 CONTRIBUTING.md create mode 100644 README.md create mode 100644 config.json create mode 100644 content/fixed/404.md create mode 100644 content/fixed/about.md create mode 100644 content/post/2013-12-31-whats-jekyll.md create mode 100644 content/post/2014-01-02-introducing-lanyon.md create mode 100644 layouts/chrome/default_foot.html create mode 100644 layouts/chrome/default_head.html create mode 100644 layouts/chrome/head.html create mode 100644 layouts/chrome/sidebar.html create mode 100644 layouts/fixed/single.html create mode 100644 layouts/index.html create mode 100644 layouts/post/single.html create mode 100644 layouts/rss.xml create mode 100644 static/assets/apple-touch-icon-144-precomposed.png create mode 100644 static/assets/favicon.ico create mode 100644 static/css/lanyon.css create mode 100644 static/css/poole.css create mode 100644 static/css/syntax.css diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..790c483 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,8 @@ +*.json text +*.yaml text +*.toml text + +*.html text +*.md text +*.xml text +*.css text diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f0303ba --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +jekyll/** +public/** +hugout/** diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..f0739ac --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,34 @@ +# Contributing + +So you want to help me with Lanyon-Hugo? **AWESOME**! + +I'm not a designer, nor do I know CSS or HTML. Most of those things are coming straight out of the original Lanyon. However, the parts that make it work with Hugo, those are mine. And if you're interested, what's mine is yours. I'll explain what has changed from the original Lanyon, if you were familiar with that theme already. And I'll explain the structure of this Hugo theme, assuming you already understand some of how Hugo works. + +Hugo's docs are a bit lacking in the "big picture" of how things fit together (I might submit a PR when I'm more familiar with the tool), but they're quite complete. I recommend you read them first. + +## Layouts +Lanyon-Hugo uses two content types, `fixed` and `post`. These are analogous to Lanyon's `page` and `post` layouts, respectively. Right now, I only have single views for these content types. I will probably add a list view for `post` in the future. + +The two types are quite similar. In fact, the only difference is that `post` shows a date, where as `fixed` does not. [This](http://golang.org/pkg/time/#Time.Format) documentation explains how to change the date formatting. + +Both content types call out to a set of general HTML files which provide the universal bits and pieces. These are stored in `layouts/chrome`, which is a Hugo convention, and they are analogous to Lanyon's `_includes`. + +In Jekyll, you can nest layouts. Lanyon's `page` and `post` layouts are both based on a `default` layout. The `default` layout is the one that provides things like the header and the sidebar. But Hugo doesn't have this functionality, so I took the `default` layout, and I split it into two files: `default_head.html` and `default_foot.html`. These two are meant to be included at the top and bottom, respectively, of any other content views. You can see this in `fixed/single.html` and `post/single.html`. + +## Sidebar +The most interesting layout is probably `layouts/chrome/sidebar.html`. This is mostly based on Lanyon's `_includes/sidebar.html`, but ported to Go templates instead of Liquid. We identify the homepage via `.Url`. Any pages whose front matter sets the `sidebar` flag are also added to the sidebar. We match the active page (if any) using its `.Permalink`. The sidebar also retains the GitHub integration from the original Lanyon, where it lists a repository of your choice. + +## Homepage +Hugo implements homepages as a special layout, which does not correspond to any content type. This gets generated into a page called a node. You can see this in `layouts/index.html`. If you want to change the number of posts listed on the homepage, just change the `pagination` variable. One inconvenience of Hugo's system is that you can't include front matter for nodes (as far as I know). + +The index implements a full view of each item whose content type is `post`. This is quite repetitive and overlaps heavily with `post/single.html`. I plan to add a `post/summary.html` in the future, which does not include the default header and footer, and which sets the post title to a link. Then, I can replace this with `{{ .Render "summary" }}` to reduce code repetition. + +You may notice that the pagination buttons from the original Lanyon are conspicuously missing. Jekyll has a pagination feature which generates extra HTML in the output site, so that you can go through pages of past posts easily. This isn't available in Hugo yet. Hugo provides indexes, which can list stuff, but breaking those lists into paginated pieces is another matter. I am probably going to wait until Hugo provides support for this feature. Then I'll add the pagination buttons back. + +## Statics +Jekyll will take every file in its source directory and mirror it in the destination, unless the file's name begins with an underscore. Hugo is not quite so inclusive. The contents of the `static` directory are mirrored into the root of the destination exactly as they are. This is where the Lanyon/Poole CSS files are placed. I have not changed those files at all (literally nothing). + +If your GitHub Page has a custom name, the `CNAME` file should go in this directory. + +## Custom 404 +The custom 404 is implemented as a fixed page, but where the `sidebar` flag is not set. It's aliased to `404.html`. If you use the `url` front matter key, it will be prettified, so if you set `"url": "/404.html"`, then you end up with `404/index.html` in your generated site instead of `404.html`. Aliases are explicit, so I guess it gets around that problem. It feels like a hack to me, but it seems to work. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7ba9a13 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +# Lanyon for Hugo + +[Lanyon](http://github.com/poole/lanyon) is a great theme for [Jekyll](http://jekyllrb.com). This is a port of that theme, but to another static site generator, [Hugo](http://github.com/spf13/hugo). I'm aiming to get the same look and interactions as the original Lanyon. + +Hugo and Jekyll are similar in that, out of the box, you can't make a presentable website out of them. You need some kind of theme first, or otherwise your site will be *really* bare-bones. If you're a designer, you might be comfortable doing that yourself. If you aren't, Jekyll has a thriving ecosystem of themes waiting for you. Hugo, being younger than Jekyll, does not. Lanyon-Hugo attempts to remedy that problem. + +Lanyon-Hugo is a theme designed for blogging. While Hugo is flexible enough to turn almost any static content into a website, this theme is focused on blog-like use cases. Lanyon-Hugo retains the CSS, and therefore the look and feel, of the parent theme, Lanyon. This includes a sidebar that is hidden by default, and can be toggled with a button (implemented entirely in CSS). The sidebar gives some convenient navigation links, but when it is hidden, Lanyon-Hugo, just like Lanyon, is discreet and puts your content front and center. + +## Usage + +To begin authoring content, all you have to do is clone this repository and start writing Markdown files in `content/post`. Front matter for Hugo can be written in JSON, YAML or TOML. I am using JSON out of preference, but it's your content - use whatever language you want. Two example posts are already provided (lifted from the parent Lanyon, with links fixed for Hugo) as an example of the front matter you need. + +Note for Jekyll users: Jekyll parses the date out of your post's title, but Hugo does not. You must specify a date in the front matter. I specify the permalinks to look like Jekyll's in `config.json`, so if you set the date correctly, the permalinks will also look correct. + +Hugo's universal config file is `config.json` (or YAML, or TOML). You can change the base URL of your site, the title, and the tagline from this file. The link to your GitHub repository (for whatever the site represents, say a dev blog, or a personal GitHub Page) can also be changed here. If you are familiar with Hugo, you already know that you can add more parameters to the `params` object to introduce more variables. + +### Fixed Pages + +The original Lanyon had a layout for "pages", fixed content that didn't have a date. Lanyon-Hugo retains this concept, and refers to these pages as "fixed" (that's the content type, if you're familiar with Hugo concepts). Fixed pages will not display a date, only a title, and they will not be listed on the homepage of your site. Pages such as About (an example `about.md` has been lifted from the parent Lanyon) should generally be fixed. + +You can alter the content of the custom 404 via `fixed/404.md`. This is useful if you want a custom 404 for your GitHub Page. + +### Sidebar Links + +To indicate that a given piece of content should be linked in the sidebar, add a key `sidebar` to the front matter, and set it to `true`. See `about.md` for an example of this. Sidebar links currently appear in an arbitrary order; this will be improved in the future. You can pin content to the sidebar regardless of whether it is a post, or if it is fixed. + +Note for Jekyll users: In the original Lanyon, any content that had the `page` layout would be added to the sidebar. However, in Lanyon-Hugo, content with the `fixed` type will not be added to the sidebar automatically. You must specify the `sidebar` flag in the front matter. + +### Look and Feel + +The CSS from the original Lanyon is unchanged, and you can find it in `static/css`. Any of the modifications suggested for Lanyon can also be applied to Lanyon-Hugo, by changing the CSS here. + +## To Do + +While Lanyon-Hugo is aiming for functional compatibility with Lanyon (ie all the old functionality is available and looks similar), there are still some things I'm missing: +- pagination. Lanyon-Hugo does not have next/previous buttons. Jekyll's pagination feature is quite good, but Hugo's pagination is still on the roadmap for now. I may implement a hackish solution in the meantime, but ideally I'd rather wait until Hugo has a solid solution for this problem. +- syntax highlighting in posts. I don't understand a lot about Hugo's syntax highlighting feature, not because it's undocumented but because I haven't read the docs yet. It's in the pipeline. + +## Contributing + +If you're interested in hacking on this theme, please check out [CONTRIBUTING](CONTRIBUTING.md). + +## License +None for now. Not a big priority for me. But it'll probably be MIT. diff --git a/config.json b/config.json new file mode 100644 index 0000000..7d6cc87 --- /dev/null +++ b/config.json @@ -0,0 +1,24 @@ +{ + "contentdir": "content", + "layoutdir": "layouts", + "publishdir": "public", + + "builddrafts": false, + + "baseurl": "http://tummychow.github.io/lanyon-hugo/", + "canonifyurls": true, + "permalinks": { + "post": "/:year/:month/:day/:title/", + "fixed": "/:title/" + }, + + "params": { + "Title": "Lanyon", + "Tagline": "A Jekyll theme", + "Author": "Mark Otto", + "Github": { + "Url": "http://github.com/tummychow/lanyon-hugo", + "Head": "master" + } + } +} diff --git a/content/fixed/404.md b/content/fixed/404.md new file mode 100644 index 0000000..fe2c05d --- /dev/null +++ b/content/fixed/404.md @@ -0,0 +1,6 @@ +{ + "aliases": ["/404.html"], + "title": "404" +} + +Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. [Head back home](/) to try finding it again. diff --git a/content/fixed/about.md b/content/fixed/about.md new file mode 100644 index 0000000..7d0556f --- /dev/null +++ b/content/fixed/about.md @@ -0,0 +1,30 @@ +{ + "title": "About", + "sidebar": true +} + +

+ Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on! +

+ +In the novel, *The Strange Case of Dr. Jeykll and Mr. Hyde*, Mr. Poole is Dr. Jekyll's virtuous and loyal butler. Similarly, Poole is an upstanding and effective butler that helps you build Jekyll themes. It's made by [@mdo](https://twitter.com/mdo). + +There are currently two themes built on Poole: + +* [Hyde](http://hyde.getpoole.com) +* [Lanyon](http://lanyon.getpoole.com) + +Learn more and contribute on [GitHub](https://github.com/poole). + +## Setup + +Some fun facts about the setup of this project include: + +* Built for [Jekyll](http://jekyllrb.com) +* Developed on GitHub and hosted for free on [GitHub Pages](https://pages.github.com) +* Coded with [Sublime Text 2](http://sublimetext.com), an amazing code editor +* Designed and developed while listening to music like [Blood Bros Trilogy](https://soundcloud.com/maddecent/sets/blood-bros-series) + +Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/poole/issues/new) or [ask me on Twitter](https://twitter.com/mdo). + +Thanks for reading! diff --git a/content/post/2013-12-31-whats-jekyll.md b/content/post/2013-12-31-whats-jekyll.md new file mode 100644 index 0000000..5c078fe --- /dev/null +++ b/content/post/2013-12-31-whats-jekyll.md @@ -0,0 +1,12 @@ +{ + "title": "What's Jekyll?", + "date": "2013-12-31" +} + +[Jekyll](http://jekyllrb.com) is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From [the project's readme](https://github.com/mojombo/jekyll/blob/master/README.markdown): + + > Jekyll is a simple, blog aware, static site generator. It takes a template directory [...] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub. + +It's an immensely useful tool and one we encourage you to use here with Hyde. + +Find out more by [visiting the project on GitHub](https://github.com/mojombo/jekyll). diff --git a/content/post/2014-01-02-introducing-lanyon.md b/content/post/2014-01-02-introducing-lanyon.md new file mode 100644 index 0000000..dd222b7 --- /dev/null +++ b/content/post/2014-01-02-introducing-lanyon.md @@ -0,0 +1,38 @@ +{ + "title": "Introducing Lanyon", + "date": "2014-01-02" +} + +Lanyon is an unassuming [Jekyll](http://jekyllrb.com) theme that places content first by tucking away navigation in a hidden drawer. It's based on [Poole](http://getpoole.com), the Jekyll butler. + +### Built on Poole + +Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Lanyon here) includes the following: + +* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/index.xml), posts, and [example page](/about)) +* Mobile friendly design and development +* Easily scalable text and component sizing with `rem` units in the CSS +* Support for a wide gamut of HTML elements +* Related posts (time-based, because Jekyll) below each post +* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter) + +### Lanyon features + +In addition to the features of Poole, Lanyon adds the following: + +* Toggleable sliding sidebar (built with only CSS) via **☰** link in top corner +* Sidebar includes support for textual modules and a dynamically generated navigation with active link support +* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `` classes +* [Eight optional color schemes](https://github.com/poole/lanyon#themes), available via `` classes + +[Head to the readme](https://github.com/poole/lanyon#readme) to learn more. + +### Browser support + +Lanyon is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above. + +### Download + +Lanyon is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests. + +Thanks! diff --git a/layouts/chrome/default_foot.html b/layouts/chrome/default_foot.html new file mode 100644 index 0000000..0780e14 --- /dev/null +++ b/layouts/chrome/default_foot.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/layouts/chrome/default_head.html b/layouts/chrome/default_head.html new file mode 100644 index 0000000..4ccac8d --- /dev/null +++ b/layouts/chrome/default_head.html @@ -0,0 +1,22 @@ + + + + {{ template "chrome/head.html" . }} + + + + {{ template "chrome/sidebar.html" . }} + + +
+
+
+

+ {{ .Site.Params.Title }} + {{ .Site.Params.Tagline }} +

+
+
+ +
diff --git a/layouts/chrome/head.html b/layouts/chrome/head.html new file mode 100644 index 0000000..1b43d6a --- /dev/null +++ b/layouts/chrome/head.html @@ -0,0 +1,28 @@ + + + + + + + + + {{ if eq .Url "/" }} + {{ .Site.Params.Title }} · {{ .Site.Params.Tagline }} + {{ else }} + {{ .Title }} · {{ .Site.Params.Title }} + {{ end }} + + + + + + + + + + + + + + + diff --git a/layouts/chrome/sidebar.html b/layouts/chrome/sidebar.html new file mode 100644 index 0000000..855a9b4 --- /dev/null +++ b/layouts/chrome/sidebar.html @@ -0,0 +1,29 @@ + + + + + diff --git a/layouts/fixed/single.html b/layouts/fixed/single.html new file mode 100644 index 0000000..7dc117a --- /dev/null +++ b/layouts/fixed/single.html @@ -0,0 +1,8 @@ +{{ template "chrome/default_head.html" . }} + +
+

{{ .Title }}

+ {{ .Content }} +
+ +{{ template "chrome/default_foot.html" . }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..9c67e98 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,17 @@ +{{ template "chrome/default_head.html" . }} + +{{ $pagination := 5 }} + +
+ {{ range first $pagination .Data.Pages }} + {{ if eq .Type "post"}} +
+

{{ .Title }}

+ {{ .Date.Format "Jan 2 2006" }} + {{ .Content }} +
+ {{ end }} + {{ end }} +
+ +{{ template "chrome/default_foot.html" . }} diff --git a/layouts/post/single.html b/layouts/post/single.html new file mode 100644 index 0000000..26f625c --- /dev/null +++ b/layouts/post/single.html @@ -0,0 +1,9 @@ +{{ template "chrome/default_head.html" . }} + +
+

{{ .Title }}

+ {{ .Date.Format "Jan 2 2006" }} + {{ .Content }} +
+ +{{ template "chrome/default_foot.html" . }} diff --git a/layouts/rss.xml b/layouts/rss.xml new file mode 100644 index 0000000..35f1d80 --- /dev/null +++ b/layouts/rss.xml @@ -0,0 +1,24 @@ + + + {{ .Site.Title }} + {{ .Permalink }} + en-us + {{ .Site.Params.Author }} + (C) {{ .Site.LastChange.Year }} + {{ .Date }} + + {{ range .Data.Pages }} + {{ if eq .Type "post"}} + + {{ .Title }} + {{ .Permalink }} + {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 MST" }} + {{ .Site.Params.Author }} + {{ .Permalink }} + {{ .Content | html }} + + {{ end }} + {{ end }} + + + diff --git a/static/assets/apple-touch-icon-144-precomposed.png b/static/assets/apple-touch-icon-144-precomposed.png new file mode 100644 index 0000000000000000000000000000000000000000..b2fdb2d7c614898bc8dd4007bafd0671cfb48ac3 GIT binary patch literal 2357 zcmbVOdsGwY6^|m2Wf4=V5|x9)fC562$%`T|~fU7ZhAT1r=2AwYn-Qt%xjAXeSD`J@xD#opWZs@7}qO-*;a# zIiVq|=h`f`!QpUogM;|t*t*Yr<7Z<}g=@kvwk*;Ii1iVuT%Uw!WjL-Bjg|qyY9vM$ zE<>a{;@f2_aX1T=QY6-kg#xw&Rg)333^`dHhiT(*D}9sW5Q$2r2cl&$N(~1bZfpSo zrIZ71WC|f+98acD2Bm0a5h)=eNs3AWOF`dNz{+GcWgqEo1J5|ze=U^bNr zOkW`8O)HhN!})>JzA%adD)jm|HieRultfOVlTmF9g$lzk1)@=CG!iC3((Tabkz|ra z=Q3k~FVji1$~e6e)c|ITNHm(D=YSZ}k4I3)35A~wYjo3r!a_z#M&c+`GDK0U&FA_c zt<#6g{te@^(mK(OI2k2erb8375-cBbml3ze>#Sv@ZQOb=f?v4AG-n5sJpnR6wW# z)uTEE8VB%rfV&WpC^crZU84*_N?KLfxAro#v?fi&2dxNIPy2YoOhj2F(1ji zZhw%s&#*SkO0(FG*%wNzcMU&CB8LG%LQdZ{Sw$i`2+L7i|;Q8YsLry1u{v%t{9i9AaKOhix zy&D@Fe+m$8C0=N0YU(^QyXMGRuR~Yww{TD0K7iKql9C#>{&gF)Fpt~UUB2ASt+mDY zmX+8z@G#D&ETr&xyZAtBYwOU^(B;dk4Sd)+N&)T{Z{7@cZP>VRWc*@&S$|ub)%(+S zh3(SW>6h-^yI1f~c(@%=)t0!+p{1$k6mZP6`p@!Fyy>9FC8ryxkJ8b`jm(QNL z8{)sp?LC`!vMLy}Nuf~mmU{wS4DkYUs*q$n9J>RU@V?%;Qv?owGo;k*KORF;$&}fw zc|jt$xBFRenvIo7JTf(9hd3UMTpLk)6UevdRVk|-GX08O|CF8m+@|CFu{nnG>Fv_v zUC*PUqA-L`1=$z84z~h?cfO8x*@cgt4eeipU$0q)e+)@0Bew)K{bRoASxIT>aq{7I zDUk2seYo?9_IgoMW20olI{d`djt-lI{_JdPtola4BSs^S7?GHmSbeoH`HGgZ2|tv} z2gB_KFE%tFo3@<%Qr9@p)6>)2YRTPpu_>{jP2Ku9zAR+*&aB#6&$fiu>7*B)jKjir zjki^z;@d+-irON_zxe(v%B%VbYa3&?+uy;LsT7ip%UsX-HtpIDYvs|cU4&b?r~CUi z-KeRk7&f*==I}GFT8|&fDiJI%xa=~~@9BD592xm^^jNQJ{<(r!@4N3OChi;SHmH8F z^8qc?d#!6~>#}zK$Y{ve(pVAhA#bSwP99pb$~Z6khqNIa5`99nBHeFyDiaXYky`Gb zGL-riSG$(?Jt|fxk{$?dqaM!o$Fp*xQFL8c{WVkb&^d1wYr*$tml$?(`W}@x^NQU& zp1gVgo_%O!mvfzZeRg(sS_~CCS}e2n!%t8qQ&Upd9M1Y*2b(+W z6H`;~vRkhy7`tM}G!T(}2K&T|YHyYsjlrql*!n95OXh(5?4}at#JQ-zE$cMrou-@% zdl$U!CE2EZQCVpoSGyte6a#FrDK-nAiA^z_>3`Tg3tKFSxaOyK215gH^qPNUf&)VM J-}-OM_!sP=unPbH literal 0 HcmV?d00001 diff --git a/static/assets/favicon.ico b/static/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..ef1916fd41c12b625b2f482ffb4426c17d2da5a5 GIT binary patch literal 445 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1SJ1Ryj={WI14-?i-EKU7`vU!wgU;46*#5? zX$3HD|21bW0|TRur;B5V$MLt*47*wkMA{y2n#vKjanlB`{Ka#9_cUa{bn*zCl3Xa!RymJTF`YrEo^M%Z)m9fx)s{U+W7yxk+NH;H__ccpPu46ph6Sru z<=&QfytmJ=Z&AnQ{>|1JT}r;eVg8d;`jX4Srls!n+ELN{$>#m8yzc@|*GpNM85sJH zH&-4nJi>fyTdJI*id?~!%L_W#3sl%PtXo~tkU8s2|6>ig2bFT4KihD#z1a2c_rG`B zb07PB5_J$@aSc4NX-|Dv=+R8O-ys2B(^DB4GG?(Urtlt;v*vhc_&w#9K7;?O-}~0R z-lTKC%1Jp8|0Uprp{h*&ip$t0F|mjB1(eu(@M${i&7aFDsC0~ob>k!{cy(D h$Dh~B*JmXQgZ>=WE9-bx`T|umc)I$ztaD0e0sx2Au$%w@ literal 0 HcmV?d00001 diff --git a/static/css/lanyon.css b/static/css/lanyon.css new file mode 100644 index 0000000..721c9d3 --- /dev/null +++ b/static/css/lanyon.css @@ -0,0 +1,527 @@ +/* + * ___ + * /\_ \ + * \//\ \ __ ___ __ __ ___ ___ + * \ \ \ /'__`\ /' _ `\/\ \/\ \ / __`\ /' _ `\ + * \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \ + * /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\ + * \/____/\/__/\/_/\/_/\/_/`/___/> \/___/ \/_/\/_/ + * /\___/ + * \/__/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/lanyon. + */ + + +/* + * Contents + * + * Global resets + * Masthead + * Sidebar + * Slide effect + * Posts and pages + * Pagination + * Reverse layout + * Themes + */ + + +/* + * Global resets + * + * Update the foundational and global aspects of the page. + */ + +/* Prevent scroll on narrow devices */ +html, +body { + overflow-x: hidden; +} + +html { + font-family: "PT Serif", Georgia, "Times New Roman", serif; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-weight: 400; + color: #313131; + letter-spacing: -.025rem; +} + + +/* + * Wrapper + * + * The wrapper is used to position site content when the sidebar is toggled. We + * use an outter wrap to position the sidebar without interferring with the + * regular page content. + */ + +.wrap { + position: relative; + width: 100%; +} + + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 28rem; +} +@media (min-width: 38rem) { + .container { + max-width: 32rem; + } +} +@media (min-width: 56rem) { + .container { + max-width: 38rem; + } +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; + border-bottom: 1px solid #eee; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; +} +.masthead-title a { + color: #505050; +} +.masthead-title small { + font-size: 75%; + font-weight: 400; + color: #c0c0c0; + letter-spacing: 0; +} + +@media (max-width: 48rem) { + .masthead-title { + text-align: center; + } + .masthead-title small { + display: none; + } +} + + +/* + * Sidebar + * + * The sidebar is the drawer, the item we are toggling with our handy hamburger + * button in the corner of the page. + * + * This particular sidebar implementation was inspired by Chris Coyier's + * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the + * comments by a reader. It modifies both implementations to continue using the + * checkbox (no change in URL means no polluted browser history), but this uses + * `position` for the menu to avoid some potential content reflow issues. + * + * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 + */ + +/* Style and "hide" the sidebar */ +.sidebar { + position: fixed; + top: 0; + bottom: 0; + left: -14rem; + width: 14rem; + visibility: hidden; + overflow-y: auto; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-size: .875rem; /* 15px */ + color: rgba(255,255,255,.6); + background-color: #202020; + -webkit-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} +@media (min-width: 30rem) { + .sidebar { + font-size: .75rem; /* 14px */ + } +} + +/* Sidebar content */ +.sidebar a { + font-weight: normal; + color: #fff; +} +.sidebar-item { + padding: 1rem; +} +.sidebar-item p:last-child { + margin-bottom: 0; +} + +/* Sidebar nav */ +.sidebar-nav { + border-bottom: 1px solid rgba(255,255,255,.1); +} +.sidebar-nav-item { + display: block; + padding: .5rem 1rem; + border-top: 1px solid rgba(255,255,255,.1); +} +.sidebar-nav-item.active, +a.sidebar-nav-item:hover, +a.sidebar-nav-item:focus { + text-decoration: none; + background-color: rgba(255,255,255,.1); + border-color: transparent; +} + +@media (min-width: 48rem) { + .sidebar-item { + padding: 1.5rem; + } + .sidebar-nav-item { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */ +.sidebar-checkbox { + display: none; +} + +/* Style the `label` that we use to target the `.sidebar-checkbox` */ +.sidebar-toggle { + position: absolute; + top: 1rem; + left: 1rem; + display: block; + width: 2.2rem; + padding: .5rem .65rem; + color: #505050; + background-color: #fff; + border-radius: 4px; + cursor: pointer; +} +.sidebar-toggle:before { + display: block; + content: ""; + width: 100%; + padding-bottom: .125rem; + border-top: .375rem double; + border-bottom: .125rem solid; + + /* Make the border inside the box */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.sidebar-toggle:active, +#sidebar-checkbox:checked ~ .sidebar-toggle { + color: #fff; + background-color: #505050; +} + +@media (min-width: 30.1rem) { + .sidebar-toggle { + position: fixed; + width: 2.25rem; + } + .sidebar-toggle:before { + padding-bottom: .15rem; + border-top-width: .45rem; + border-bottom-width: .15rem; + } +} + + +/* Slide effect + * + * Handle the sliding effects of the sidebar and content in one spot, seperate + * from the default styles. + * + * As an a heads up, we don't use `transform: translate3d()` here because when + * mixed with `position: fixed;` for the sidebar toggle, it creates a new + * containing block. Put simply, the fixed sidebar toggle behaves like + * `position: absolute;` when transformed. + * + * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. + */ + +.wrap, +.sidebar, +.sidebar-toggle { + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +.wrap, +.sidebar-toggle { + -webkit-transition: -webkit-transform .3s ease-in-out; + transition: transform .3s ease-in-out; +} + +#sidebar-checkbox:checked + .sidebar { + visibility: visible; +} +#sidebar-checkbox:checked ~ .sidebar, +#sidebar-checkbox:checked ~ .wrap, +#sidebar-checkbox:checked ~ .sidebar-toggle { + -webkit-transform: translateX(14rem); + -ms-transform: translateX(14rem); + transform: translateX(14rem); +} + + +/* + * Posts and pages + * + * Each post is wrapped in `.post` and is used on default and post layouts. Each + * page is wrapped in `.page` and is only used on the page layout. + */ + +.page, +.post { + margin-bottom: 4em; +} + +/* Blog post or page title */ +.page-title, +.post-title, +.post-title a { + color: #303030; +} +.page-title, +.post-title { + margin-top: 0; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} +.related-posts { + padding-left: 0; + list-style: none; +} +.related-posts h3 { + margin-top: 0; +} +.related-posts li small { + font-size: 75%; + color: #999; +} +.related-posts li a:hover { + color: #268bd2; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + + +/* + * Pagination + * + * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when + * there are no more previous or next posts to show. + */ + +.pagination { + overflow: hidden; /* clearfix */ + margin-left: -1rem; + margin-right: -1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + display: block; + padding: 1rem; + border: 1px solid #eee; +} +.pagination-item:first-child { + margin-bottom: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30rem) { + .pagination { + margin: 3rem 0; + } + .pagination-item { + float: left; + width: 50%; + } + .pagination-item:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .pagination-item:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} + + +/* + * Reverse layout + * + * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle + * on the right side. + */ + +.layout-reverse .sidebar { + left: auto; + right: -14rem; +} +.layout-reverse .sidebar-toggle { + left: auto; + right: 1rem; +} + +.layout-reverse #sidebar-checkbox:checked ~ .sidebar, +.layout-reverse #sidebar-checkbox:checked ~ .wrap, +.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle { + -webkit-transform: translateX(-14rem); + -ms-transform: translateX(-14rem); + transform: translateX(-14rem); +} + + +/* + * Themes + * + * Apply custom color schemes by adding the appropriate class to the `body`. + * Based on colors from Base16: http://chriskempson.github.io/base16/#default. + */ + +/* Red */ +.theme-base-08 .sidebar, +.theme-base-08 .sidebar-toggle:active, +.theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #ac4142; +} +.theme-base-08 .container a, +.theme-base-08 .sidebar-toggle, +.theme-base-08 .related-posts li a:hover { + color: #ac4142; +} + +/* Orange */ +.theme-base-09 .sidebar, +.theme-base-09 .sidebar-toggle:active, +.theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #d28445; +} +.theme-base-09 .container a, +.theme-base-09 .sidebar-toggle, +.theme-base-09 .related-posts li a:hover { + color: #d28445; +} + +/* Yellow */ +.theme-base-0a .sidebar, +.theme-base-0a .sidebar-toggle:active, +.theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #f4bf75; +} +.theme-base-0a .container a, +.theme-base-0a .sidebar-toggle, +.theme-base-0a .related-posts li a:hover { + color: #f4bf75; +} + +/* Green */ +.theme-base-0b .sidebar, +.theme-base-0b .sidebar-toggle:active, +.theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #90a959; +} +.theme-base-0b .container a, +.theme-base-0b .sidebar-toggle, +.theme-base-0b .related-posts li a:hover { + color: #90a959; +} + +/* Cyan */ +.theme-base-0c .sidebar, +.theme-base-0c .sidebar-toggle:active, +.theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #75b5aa; +} +.theme-base-0c .container a, +.theme-base-0c .sidebar-toggle, +.theme-base-0c .related-posts li a:hover { + color: #75b5aa; +} + +/* Blue */ +.theme-base-0d .sidebar, +.theme-base-0d .sidebar-toggle:active, +.theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #6a9fb5; +} +.theme-base-0d .container a, +.theme-base-0d .sidebar-toggle, +.theme-base-0d .related-posts li a:hover { + color: #6a9fb5; +} + +/* Magenta */ +.theme-base-0e .sidebar, +.theme-base-0e .sidebar-toggle:active, +.theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #aa759f; +} +.theme-base-0e .container a, +.theme-base-0e .sidebar-toggle, +.theme-base-0e .related-posts li a:hover { + color: #aa759f; +} + +/* Brown */ +.theme-base-0f .sidebar, +.theme-base-0f .sidebar-toggle:active, +.theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #8f5536; +} +.theme-base-0f .container a, +.theme-base-0f .sidebar-toggle, +.theme-base-0f .related-posts li a:hover { + color: #8f5536; +} diff --git a/static/css/poole.css b/static/css/poole.css new file mode 100644 index 0000000..5e3dabe --- /dev/null +++ b/static/css/poole.css @@ -0,0 +1,402 @@ +/* + * ___ + * /\_ \ + * _____ ___ ___\//\ \ __ + * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ + * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ + * \ \ ,__/\ \____/\ \____//\____\ \____\ + * \ \ \/ \/___/ \/___/ \/____/\/____/ + * \ \_\ + * \/_/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/poole. + */ + + +/* + * Contents + * + * Body resets + * Custom type + * Messages + * Container + * Masthead + * Posts and pages + * Pagination + * Reverse layout + * Themes + */ + + +/* + * Body resets + * + * Update the foundational and global aspects of the page. + */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; +} +@media (min-width: 38rem) { + html { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* No `:visited` state is required by default (browsers will use `a`) */ +a { + color: #268bd2; + text-decoration: none; +} +/* `:focus` is linked to `:hover` for basic accessibility */ +a:hover, +a:focus { + text-decoration: underline; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-weight: bold; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; +} +h1 { + font-size: 2rem; +} +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} +h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; +} + +/* Body text */ +p { + margin-top: 0; + margin-bottom: 1rem; +} + +strong { + color: #303030; +} + + +/* Lists */ +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +dt { + font-weight: bold; +} +dd { + margin-bottom: .5rem; +} + +/* Misc */ +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; + text-transform: uppercase; +} +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + +/* Code */ +code, +pre { + font-family: Menlo, Monaco, "Courier New", monospace; +} +code { + padding: .25em .5em; + font-size: 85%; + color: #bf616a; + background-color: #f9f9f9; + border-radius: 3px; +} +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 1rem; + font-size: .8rem; + line-height: 1.4; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + background-color: #f9f9f9; +} +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +/* Quotes */ +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; +} +blockquote p:last-child { + margin-bottom: 0; +} +@media (min-width: 30rem) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + border-radius: 5px; +} + +/* Tables */ +table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} +td, +th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} + + +/* + * Custom type + * + * Extend paragraphs with `.lead` for larger introductory text. + */ + +.lead { + font-size: 1.25rem; + font-weight: 300; +} + + +/* + * Messages + * + * Show alert messages to users. You may add it to single elements like a `

`, + * or to a parent if there are multiple elements to show. + */ + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: #f9f9f9; +} + + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 38rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; +} +.masthead-title a { + color: #505050; +} +.masthead-title small { + font-size: 75%; + font-weight: 400; + color: #c0c0c0; + letter-spacing: 0; +} + + +/* + * Posts and pages + * + * Each post is wrapped in `.post` and is used on default and post layouts. Each + * page is wrapped in `.page` and is only used on the page layout. + */ + +.page, +.post { + margin-bottom: 4em; +} + +/* Blog post or page title */ +.page-title, +.post-title, +.post-title a { + color: #303030; +} +.page-title, +.post-title { + margin-top: 0; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} +.related-posts { + padding-left: 0; + list-style: none; +} +.related-posts h3 { + margin-top: 0; +} +.related-posts li small { + font-size: 75%; + color: #999; +} +.related-posts li a:hover { + color: #268bd2; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + + +/* + * Pagination + * + * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when + * there are no more previous or next posts to show. + */ + +.pagination { + overflow: hidden; /* clearfix */ + margin-left: -1rem; + margin-right: -1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + display: block; + padding: 1rem; + border: 1px solid #eee; +} +.pagination-item:first-child { + margin-bottom: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30rem) { + .pagination { + margin: 3rem 0; + } + .pagination-item { + float: left; + width: 50%; + } + .pagination-item:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .pagination-item:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} diff --git a/static/css/syntax.css b/static/css/syntax.css new file mode 100644 index 0000000..1264b87 --- /dev/null +++ b/static/css/syntax.css @@ -0,0 +1,66 @@ +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; }