Startsida Utforska Hjälp
Logga in
riff
/
riff_site
Bevaka 2
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Incheckningar 1 Släpp 0 Wiki

A new Riff-radio.org site with a static approach.

Träd: d4718ccdb3
Grenar Taggar
riff_site/cache/pages/creating-a-theme.html

creating-a-theme.html 127KB
Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704 
  1. <p>Nikola is a static site and blog generator. So is Jekyll. While I like what we have done with Nikola,

  2. I do admit that Jekyll (and others!) have many more, and nicer themes than Nikola does.</p>

  3. <p>This document is an attempt at making it easier for 3rd parties (that means <em>you</em> people! ;-) to

  4. create themes. Since I <strong>suck</strong> at designing websites, I asked for opinions on themes to port,

  5. and got some feedback. Since this is <strong>Not So Hard™</strong>, I will try to make time to port a few

  6. and see what happens.</p>

  7. <p>If you are looking for a reference, check out <a class="reference external" href="/pages/theming.html">Theming reference</a> and <a class="reference external" href="https://getnikola.com/template-variables.html">Template variables</a>.</p>

  8. <p>Today’s theme is <a class="reference external" href="https://github.com/poole/lanyon">Lanyon</a> which is written by <a class="reference external" href="https://twitter.com/mdo">&#64;mdo</a>

  9. and released under a MIT license, which is liberal enough.</p>

  10. <p>So, let’s get started.</p>

  11. <section id="checking-it-out">

  12. <h1>Checking It Out</h1>

  13. <p>The first step in porting a theme is making the original theme work. Lanyon is awesome in that its

  14. <a class="reference external" href="https://github.com/poole/lanyon">GitHub project</a> is a full site!</p>

  15. <p>So:</p>

  16. <pre class="literal-block"># Get jekyll

  17. sudo apt-get install jekyll

  18. 

  19. # Get Lanyon

  20. git clone git&#64;github.com:poole/lanyon.git

  21. 

  22. # Build it

  23. cd lanyon &amp;&amp; jekyll build

  24. 

  25. # Look at it

  26. jekyll serve &amp; google-chrome http://localhost:4000</pre>

  27. <p>If you <strong>do not want to install Jekyll</strong>, you can also see it in action at <a class="reference external" href="https://lanyon.getpoole.com/">https://lanyon.getpoole.com/</a></p>

  28. <p>Some things jump to my mind:</p>

  29. <ol class="arabic simple">

  30. <li><p>This is one fine looking theme</p></li>

  31. <li><p>Very clear and readable</p></li>

  32. <li><p>Nice hidden navigation-thingy</p></li>

  33. </ol>

  34. <p>Also, from looking at <a class="reference external" href="https://github.com/poole/lanyon/blob/master/README.md">the project’s README</a>

  35. it supports some nice configuration options:</p>

  36. <ol class="arabic simple">

  37. <li><p>Color schemes</p></li>

  38. <li><p>Reverse layout</p></li>

  39. <li><p>Sidebar overlay instead of push</p></li>

  40. <li><p>Open the sidebar by default, or on a per-page basis by using its metadata</p></li>

  41. </ol>

  42. <p>Let’s try to make all those nice things survive the porting.</p>

  43. </section>

  44. <section id="starting-from-somewhere">

  45. <h1>Starting From Somewhere</h1>

  46. <p>Nikola has a nice, clean, base theme from which you can start when writing your own theme.

  47. Why start from that instead of from a clean slate? Because theme inheritance is going to save you a ton of work,

  48. that’s why. If you start from scratch you won’t be able to build <strong>anything</strong> until you have a bunch of

  49. templates written. Starting from base, you just need to hack on the things you <strong>need</strong> to change.</p>

  50. <p>First, we create a site with some content in it. We’ll use the <code class="docutils literal">nikola init</code> wizard (with the <code class="docutils literal"><span class="pre">--demo</span></code> option) for that:</p>

  51. <pre class="literal-block">$ nikola init --demo lanyon-port

  52. Creating Nikola Site

  53. ====================

  54. 

  55. This is Nikola v7.8.0.  We will now ask you a few easy questions about your new site.

  56. If you do not want to answer and want to go with the defaults instead, simply restart with the `-q` parameter.

  57. --- Questions about the site ---

  58. Site title [My Nikola Site]:

  59. Site author [Nikola Tesla]:

  60. Site author's e-mail [n.tesla&#64;example.com]:

  61. Site description [This is a demo site for Nikola.]:

  62. Site URL [https://example.com/]:

  63. --- Questions about languages and locales ---

  64. We will now ask you to provide the list of languages you want to use.

  65. Please list all the desired languages, comma-separated, using ISO 639-1 codes.  The first language will be used as the default.

  66. Type '?' (a question mark, sans quotes) to list available languages.

  67. Language(s) to use [en]:

  68. 

  69. Please choose the correct time zone for your blog. Nikola uses the tz database.

  70. You can find your time zone here:

  71. https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

  72. 

  73. Time zone [UTC]:

  74.     Current time in UTC: 16:02:07

  75. Use this time zone? [Y/n]

  76. --- Questions about comments ---

  77. You can configure comments now.  Type '?' (a question mark, sans quotes) to list available comment systems.  If you do not want any comments, just leave the field blank.

  78. Comment system:

  79. 

  80. That's it, Nikola is now configured.  Make sure to edit conf.py to your liking.

  81. If you are looking for themes and addons, check out https://themes.getnikola.com/ and https://plugins.getnikola.com/.

  82. Have fun!

  83. [2015-05-28T16:02:08Z] INFO: init: A new site with example data has been created at lanyon-port.

  84. [2015-05-28T16:02:08Z] INFO: init: See README.txt in that folder for more information.</pre>

  85. <p>Then, we create an empty theme inheriting from base. This theme will use Mako templates. If you prefer Jinja2,

  86. then you should use <code class="docutils literal"><span class="pre">base-jinja</span></code> as a parent and <code class="docutils literal">jinja</code> as engine instead:</p>

  87. <pre class="literal-block">$ cd lanyon-port/

  88. $ nikola theme -n lanyon --parent base --engine mako</pre>

  89. <p>Edit <code class="docutils literal">conf.py</code> and set <code class="docutils literal">THEME = 'lanyon'</code>. Also set <code class="docutils literal">USE_BUNDLES = False</code> (just do it for now, we’ll get to bundles later).

  90. Also, if you intend to publish your theme on the Index, or want to use it with older versions (v7.8.5 or older), use the <code class="docutils literal"><span class="pre">--legacy-meta</span></code> option for <code class="docutils literal">nikola theme <span class="pre">-n</span></code>.</p>

  91. <p>You can now build that site using <code class="docutils literal">nikola build</code> and it will look like this:</p>

  92. <figure>

  93. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-0.png"><img alt="https://getnikola.com/images/lanyon-0.thumbnail.png" src="https://getnikola.com/images/lanyon-0.thumbnail.png" /></a>

  94. <figcaption>

  95. <p>This is just the base theme.</p>

  96. </figcaption>

  97. </figure>

  98. </section>

  99. <section id="basic-css">

  100. <h1>Basic CSS</h1>

  101. <p>The next step is to know exactly how Lanyon’s pages work. To do this, we read its HTML.

  102. First let’s look at the head element:</p>

  103. <pre class="code html"><a name="rest_code_aaccd00a36264f57b74893d4eb903571-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>

  104. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en-us&quot;</span><span class="p">&gt;</span>

  105. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-3"></a>

  106. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>

  107. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-5"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://gmpg.org/xfn/11&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;profile&quot;</span><span class="p">&gt;</span>

  108. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-6"></a><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;content-type&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;text/html; charset=utf-8&quot;</span><span class="p">&gt;</span>

  109. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-7"></a>

  110. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-8"></a><span class="c">&lt;!-- Enable responsiveness on mobile devices--&gt;</span>

  111. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-9"></a><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1.0, maximum-scale=1&quot;</span><span class="p">&gt;</span>

  112. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-10"></a>

  113. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-11"></a><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>

  114. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-12"></a>    Lanyon <span class="ni">&amp;middot;</span> A Jekyll theme

  115. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-13"></a><span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>

  116. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-14"></a>

  117. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-15"></a><span class="c">&lt;!-- CSS --&gt;</span>

  118. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-16"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/public/css/poole.css&quot;</span><span class="p">&gt;</span>

  119. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-17"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/public/css/syntax.css&quot;</span><span class="p">&gt;</span>

  120. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-18"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/public/css/lanyon.css&quot;</span><span class="p">&gt;</span>

  121. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-19"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400&quot;</span><span class="p">&gt;</span>

  122. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-20"></a>

  123. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-21"></a><span class="c">&lt;!-- Icons --&gt;</span>

  124. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-22"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;apple-touch-icon-precomposed&quot;</span> <span class="na">sizes</span><span class="o">=</span><span class="s">&quot;144x144&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/public/apple-touch-icon-144-precomposed.thumbnail.png&quot;</span><span class="p">&gt;</span>

  125. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-23"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;shortcut icon&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/public/favicon.ico&quot;</span><span class="p">&gt;</span>

  126. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-24"></a>

  127. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-25"></a><span class="c">&lt;!-- RSS --&gt;</span>

  128. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-26"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;alternate&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;application/rss+xml&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;RSS&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/atom.xml&quot;</span><span class="p">&gt;</span>

  129. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-27"></a>

  130. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-28"></a><span class="c">&lt;!-- Google Analytics --&gt;</span>

  131. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-29"></a>[...]

  132. <a name="rest_code_aaccd00a36264f57b74893d4eb903571-30"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

  133. </pre><p>The interesting part there is that it loads a few CSS files. If you check the source of your Nikola site, you will

  134. see something fairly similar:</p>

  135. <pre class="code html"><a name="rest_code_990036230fdd4f33818ff702e2f5ec35-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>

  136. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">prefix</span><span class="o">=</span><span class="s">&quot;og: http://ogp.me/ns# article: http://ogp.me/ns/article# &quot;</span> <span class="na">vocab</span><span class="o">=</span><span class="s">&quot;http://ogp.me/ns&quot;</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>

  137. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>

  138. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-4"></a><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>

  139. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-5"></a><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;This is a demo site for Nikola.&quot;</span><span class="p">&gt;</span>

  140. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-6"></a><span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width&quot;</span><span class="p">&gt;</span>

  141. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-7"></a><span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>My Nikola Site | My Nikola Site<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>

  142. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-8"></a>

  143. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-9"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;assets/css/rst_base.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  144. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-10"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;assets/css/code.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  145. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-11"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;assets/css/theme.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  146. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-12"></a>

  147. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-13"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;alternate&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;application/rss+xml&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;RSS&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;rss.xml&quot;</span><span class="p">&gt;</span>

  148. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-14"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;canonical&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://example.com/index.html&quot;</span><span class="p">&gt;</span>

  149. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-15"></a><span class="c">&lt;!--[if lt IE 9]&gt;&lt;script src=&quot;assets/js/html5.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;</span><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;prefetch&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;posts/welcome-to-nikola.html&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/html&quot;</span><span class="p">&gt;</span>

  150. <a name="rest_code_990036230fdd4f33818ff702e2f5ec35-16"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

  151. </pre><p>Luckily, since this is all under a very liberal license, we can just copy these CSS files into

  152. Nikola, adapting the paths a little so that they follow our conventions:</p>

  153. <pre class="literal-block">$ mkdir -p themes/lanyon/assets/css

  154. $ cp ../lanyon/public/css/poole.css themes/lanyon/assets/css/

  155. $ cp ../lanyon/public/css/lanyon.css themes/lanyon/assets/css/</pre>

  156. <p>Notice I am <em>not</em> copying <code class="docutils literal">syntax.css</code>? That’s because Nikola handles that styles for syntax highlighting

  157. in a particular way, using a setting called <code class="docutils literal">CODE_COLOR_SCHEME</code> where you can configure

  158. what color scheme the syntax highlighter uses. You can use your own <code class="docutils literal">assets/css/code.css</code> if you

  159. don’t like the provided ones.</p>

  160. <p>Nikola <strong>requires</strong> <code class="docutils literal">assets/css/rst_base.css</code> and <code class="docutils literal">assets/css/code.css</code> to function properly.

  161. We will also add themes for Jupyter (<code class="docutils literal">assets/css/ipython.min.css</code>

  162. and <code class="docutils literal">assets/css/nikola_ipython.css</code>) into the template; note that they are

  163. activated only if you configured your <code class="docutils literal">POSTS</code>/<code class="docutils literal">PAGES</code> with ipynb support.

  164. There’s also <code class="docutils literal">assets/css/nikola_rst.css</code>, which adds Bootstrap 3-style reST notes etc.</p>

  165. <p>But how do I tell <strong>our</strong> lanyon theme to use those CSS files instead of whatever it’s using now?

  166. By giving our theme its own base_helper.tmpl.</p>

  167. <p>That file is a <strong>template</strong> used to generate parts of the pages. It’s large and

  168. complicated but we don’t need to change a lot of it. First, make a copy in your

  169. theme (note this command requires setting your <code class="docutils literal">THEME</code> in <code class="docutils literal">conf.py</code> to

  170. <code class="docutils literal">lanyon</code>):</p>

  171. <pre class="literal-block">$ nikola theme -c base_helper.tmpl</pre>

  172. <p>The part we want to change is this:</p>

  173. <pre class="code html+mako"><a name="rest_code_adacc386e77a4a0ca76f3f5965909385-1"></a><span class="cp">&lt;%</span><span class="nb">def</span> <span class="na">name=</span><span class="s">&quot;html_stylesheets()&quot;</span><span class="cp">&gt;</span>

  174. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-2"></a>    <span class="cp">%</span><span class="k">if</span> <span class="n">use_bundles</span><span class="p">:</span>

  175. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-3"></a>        <span class="cp">%</span><span class="k">if</span> <span class="n">use_cdn</span><span class="p">:</span>

  176. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-4"></a>            <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/all.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  177. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-5"></a>        <span class="cp">%</span><span class="k">else</span><span class="p">:</span>

  178. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-6"></a>            <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/all-nocdn.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  179. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-7"></a>        <span class="cp">%</span><span class="k">endif</span>

  180. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-8"></a>    <span class="cp">%</span><span class="k">else</span><span class="p">:</span>

  181. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-9"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/rst_base.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  182. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-10"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/nikola_rst.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  183. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-11"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/code.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  184. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-12"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/theme.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  185. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-13"></a>        <span class="cp">%</span><span class="k">if</span> <span class="n">has_custom_css</span><span class="p">:</span>

  186. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-14"></a>            <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/custom.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  187. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-15"></a>        <span class="cp">%</span><span class="k">endif</span>

  188. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-16"></a>    <span class="cp">%</span><span class="k">endif</span>

  189. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-17"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="n">needs_ipython_css</span><span class="p">:</span>

  190. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-18"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/ipython.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  191. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-19"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/nikola_ipython.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  192. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-20"></a>    <span class="cp">%</span><span class="k"> endif</span>

  193. <a name="rest_code_adacc386e77a4a0ca76f3f5965909385-21"></a><span class="cp">&lt;/%</span><span class="nb">def</span><span class="cp">&gt;</span>

  194. </pre><p>And we will change it so it uses the lanyon styles instead of theme.css (again, ignore the bundles for now!):</p>

  195. <pre class="code html+mako"><a name="rest_code_481d3ff311a64503aa44d20cc132c419-1"></a><span class="cp">&lt;%</span><span class="nb">def</span> <span class="na">name=</span><span class="s">&quot;html_stylesheets()&quot;</span><span class="cp">&gt;</span>

  196. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-2"></a>    <span class="cp">%</span><span class="k">if</span> <span class="n">use_bundles</span><span class="p">:</span>

  197. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-3"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/all.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  198. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-4"></a>    <span class="cp">%</span><span class="k">else</span><span class="p">:</span>

  199. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-5"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/rst_base.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  200. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-6"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/nikola_rst.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  201. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-7"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/poole.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  202. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-8"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/lanyon.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  203. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-9"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/code.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  204. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-10"></a>        <span class="cp">%</span><span class="k">if</span> <span class="n">has_custom_css</span><span class="p">:</span>

  205. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-11"></a>            <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/custom.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  206. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-12"></a>        <span class="cp">%</span><span class="k">endif</span>

  207. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-13"></a>    <span class="cp">%</span><span class="k">endif</span>

  208. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-14"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="n">needs_ipython_css</span><span class="p">:</span>

  209. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-15"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/ipython.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  210. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-16"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/assets/css/nikola_ipython.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>

  211. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-17"></a>    <span class="cp">%</span><span class="k"> endif</span>

  212. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-18"></a>    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400&quot;</span><span class="p">&gt;</span>

  213. <a name="rest_code_481d3ff311a64503aa44d20cc132c419-19"></a><span class="cp">&lt;/%</span><span class="nb">def</span><span class="cp">&gt;</span>

  214. </pre><figure>

  215. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-1.png"><img alt="https://getnikola.com/images/lanyon-1.thumbnail.png" src="https://getnikola.com/images/lanyon-1.thumbnail.png" /></a>

  216. <figcaption>

  217. <p>You may say this looks like crap. Don’t worry, we are just starting :-)</p>

  218. </figcaption>

  219. </figure>

  220. </section>

  221. <section id="page-layout">

  222. <h1>Page Layout</h1>

  223. <p>This is trickier but should be no problem for people with a basic understanding of HTML and a desire to make a theme!</p>

  224. <p>Lanyon’s content is split in two parts: a sidebar and the rest. The sidebar looks like this (shortened for comprehension):</p>

  225. <pre class="code html"><a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-1"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

  226. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-2"></a><span class="c">&lt;!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular</span>

  227. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-3"></a><span class="c">     styles, `#sidebar-checkbox` for behavior. --&gt;</span>

  228. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-4"></a><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-checkbox&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;sidebar-checkbox&quot;</span><span class="p">&gt;</span>

  229. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-5"></a>

  230. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-6"></a><span class="c">&lt;!-- Toggleable sidebar --&gt;</span>

  231. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-7"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;sidebar&quot;</span><span class="p">&gt;</span>

  232. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-8"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-item&quot;</span><span class="p">&gt;</span>

  233. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-9"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>A reserved <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://jekyllrb.com&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>Jekyll<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> theme that places the utmost gravity on content with a hidden drawer. Made by <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://twitter.com/mdo&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>@mdo<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  234. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-10"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  235. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-11"></a>

  236. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-12"></a>    <span class="p">&lt;</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-nav&quot;</span><span class="p">&gt;</span>

  237. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-13"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-nav-item active&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/&quot;</span><span class="p">&gt;</span>Home<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  238. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-14"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-nav-item&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/about/&quot;</span><span class="p">&gt;</span>About<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  239. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-15"></a>        [...]

  240. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-16"></a>    <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span>

  241. <a name="rest_code_cf308091aa514e15b5a33ebf5a9e58dd-17"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  242. </pre><p>So, a plain body, with an input element that controls the sidebar, a div which is the sidebar itself.

  243. Inside that, div.sidebar-item for items, and a nav with &quot;navigational links&quot;. This is followed by the &quot;masthead&quot; and

  244. the content itself, which we will look at in a bit.</p>

  245. <p>If we look for the equivalent code in Nikola’s side, we see this:</p>

  246. <pre class="code html"><a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-1"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

  247. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-2"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#content&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sr-only sr-only-focusable&quot;</span><span class="p">&gt;</span>Skip to main content<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  248. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-3"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>

  249. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-4"></a><span class="p">&lt;</span><span class="nt">header</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;header&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;banner&quot;</span><span class="p">&gt;</span>

  250. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-5"></a><span class="p">&lt;</span><span class="nt">h1</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;brand&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://example.com/&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;My Nikola Site&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;home&quot;</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;blog-title&quot;</span><span class="p">&gt;</span>My Nikola Site<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>

  251. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-6"></a><span class="p">&lt;</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;menu&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;navigation&quot;</span><span class="p">&gt;&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>

  252. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-7"></a><span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../archive.html&quot;</span><span class="p">&gt;</span>Archive<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>

  253. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-8"></a>                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../categories/index.html&quot;</span><span class="p">&gt;</span>Tags<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>

  254. <a name="rest_code_557cdd996ffb47e78ccbe28c4f35baa5-9"></a>                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;../rss.xml&quot;</span><span class="p">&gt;</span>RSS feed<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>

  255. </pre><p>So Nikola has the &quot;masthead&quot; above the nav element, and uses list elements in nav instead of bare links.

  256. Not all that different is it?</p>

  257. <p>Let’s make it lanyon-like! We will need 2 more templates: <a class="reference external" href="https://github.com/getnikola/nikola/blob/master/nikola/data/themes/base/templates/base.tmpl">base.tmpl</a> and <a class="reference external" href="https://github.com/getnikola/nikola/blob/master/nikola/data/themes/base/templates/base_header.tmpl">base_header.tmpl</a>. Get them and put them in your <code class="docutils literal">themes/lanyon/templates</code> folder.</p>

  258. <p>Let’s look at <code class="docutils literal">base.tmpl</code> first. It’s short and nice, it looks like a webpage without

  259. all the interesting stuff:</p>

  260. <pre class="code html+mako"><a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-1"></a><span class="cp">## -*- coding: utf-8 -*-</span>

  261. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-2"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;base&quot;</span> <span class="na">file=</span><span class="s">&quot;base_helper.tmpl&quot;</span> <span class="na">import=</span><span class="s">&quot;*&quot;</span><span class="cp">/&gt;</span>

  262. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-3"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;header&quot;</span> <span class="na">file=</span><span class="s">&quot;base_header.tmpl&quot;</span> <span class="na">import=</span><span class="s">&quot;*&quot;</span><span class="cp">/&gt;</span>

  263. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-4"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;footer&quot;</span> <span class="na">file=</span><span class="s">&quot;base_footer.tmpl&quot;</span> <span class="na">import=</span><span class="s">&quot;*&quot;</span><span class="cp">/&gt;</span>

  264. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-5"></a><span class="cp">${</span><span class="n">set_locale</span><span class="p">(</span><span class="n">lang</span><span class="p">)</span><span class="cp">}</span>

  265. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-6"></a><span class="cp">${</span><span class="n">base</span><span class="o">.</span><span class="n">html_headstart</span><span class="p">()</span><span class="cp">}</span>

  266. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-7"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;extra_head&quot;</span><span class="cp">&gt;</span>

  267. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-8"></a><span class="cp">### Leave this block alone.</span>

  268. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-9"></a><span class="cp">&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  269. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-10"></a><span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;extra_head&#39;</span><span class="p">]()</span><span class="cp">}</span>

  270. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-11"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

  271. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-12"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

  272. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-13"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#content&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sr-only sr-only-focusable&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">messages</span><span class="p">(</span><span class="s2">&quot;Skip to main content&quot;</span><span class="p">)</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  273. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-14"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>

  274. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-15"></a>        <span class="cp">${</span><span class="n">header</span><span class="o">.</span><span class="n">html_header</span><span class="p">()</span><span class="cp">}</span>

  275. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-16"></a>        <span class="p">&lt;</span><span class="nt">main</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;content&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;main&quot;</span><span class="p">&gt;</span>

  276. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-17"></a>            <span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content&quot;</span><span class="cp">&gt;&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  277. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-18"></a>        <span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>

  278. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-19"></a>        <span class="cp">${</span><span class="n">footer</span><span class="o">.</span><span class="n">html_footer</span><span class="p">()</span><span class="cp">}</span>

  279. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-20"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  280. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-21"></a>    <span class="cp">${</span><span class="n">body_end</span><span class="cp">}</span>

  281. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-22"></a>    <span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;body_end&#39;</span><span class="p">]()</span><span class="cp">}</span>

  282. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-23"></a>    <span class="cp">${</span><span class="n">base</span><span class="o">.</span><span class="n">late_load_js</span><span class="p">()</span><span class="cp">}</span>

  283. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-24"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

  284. <a name="rest_code_4dee5332d49f482b8cb7522fb5db9060-25"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

  285. </pre><p>That link which says &quot;Skip to main content&quot; is very important for accessibility, so we will leave it in

  286. place. But below, you can see how it creates the &quot;container&quot; div we see in the Nikola page, and the content is

  287. created by <code class="docutils literal">html_header()</code> which is defined in <code class="docutils literal">base_header.tmpl</code> The actual <code class="docutils literal">nav</code> element is done

  288. by the <code class="docutils literal">html_navigation_links</code> function out of the <code class="docutils literal">NAVIGATION_LINKS</code> and <code class="docutils literal">NAVIGATION_ALT_LINKS</code> options. (Let's put the alt links after regular ones; Bootstrap puts it on the right side, for example.)</p>

  289. <p>So, first, lets change that base template to be more lanyon-like:</p>

  290. <pre class="code html+mako"><a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-1"></a><span class="cp">## -*- coding: utf-8 -*-</span>

  291. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-2"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;base&quot;</span> <span class="na">file=</span><span class="s">&quot;base_helper.tmpl&quot;</span> <span class="na">import=</span><span class="s">&quot;*&quot;</span><span class="cp">/&gt;</span>

  292. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-3"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;header&quot;</span> <span class="na">file=</span><span class="s">&quot;base_header.tmpl&quot;</span> <span class="na">import=</span><span class="s">&quot;*&quot;</span><span class="cp">/&gt;</span>

  293. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-4"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;footer&quot;</span> <span class="na">file=</span><span class="s">&quot;base_footer.tmpl&quot;</span> <span class="na">import=</span><span class="s">&quot;*&quot;</span><span class="cp">/&gt;</span>

  294. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-5"></a><span class="cp">${</span><span class="n">set_locale</span><span class="p">(</span><span class="n">lang</span><span class="p">)</span><span class="cp">}</span>

  295. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-6"></a><span class="cp">${</span><span class="n">base</span><span class="o">.</span><span class="n">html_headstart</span><span class="p">()</span><span class="cp">}</span>

  296. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-7"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;extra_head&quot;</span><span class="cp">&gt;</span>

  297. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-8"></a><span class="cp">### Leave this block alone.</span>

  298. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-9"></a><span class="cp">&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  299. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-10"></a><span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;extra_head&#39;</span><span class="p">]()</span><span class="cp">}</span>

  300. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-11"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

  301. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-12"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

  302. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-13"></a>    <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#content&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sr-only sr-only-focusable&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">messages</span><span class="p">(</span><span class="s2">&quot;Skip to main content&quot;</span><span class="p">)</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  303. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-14"></a>    <span class="c">&lt;!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular</span>

  304. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-15"></a><span class="c">            styles, `#sidebar-checkbox` for behavior. --&gt;</span>

  305. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-16"></a>    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-checkbox&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;sidebar-checkbox&quot;</span><span class="p">&gt;</span>

  306. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-17"></a>

  307. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-18"></a>    <span class="c">&lt;!-- Toggleable sidebar --&gt;</span>

  308. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-19"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;sidebar&quot;</span><span class="p">&gt;</span>

  309. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-20"></a>        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-item&quot;</span><span class="p">&gt;</span>

  310. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-21"></a>            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>A reserved <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://getnikola.com&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;noopener&quot;</span><span class="p">&gt;</span>Nikola<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> theme that places the utmost gravity on content with a hidden drawer. Made by <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://twitter.com/mdo&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;noopener&quot;</span><span class="p">&gt;</span>@mdo<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> for Jekyll,

  311. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-22"></a>            ported to Nikola by <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://twitter.com/ralsina&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>@ralsina<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  312. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-23"></a>        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  313. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-24"></a>        <span class="cp">${</span><span class="n">header</span><span class="o">.</span><span class="n">html_navigation_links</span><span class="p">()</span><span class="cp">}</span>

  314. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-25"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  315. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-26"></a>

  316. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-27"></a>    <span class="p">&lt;</span><span class="nt">main</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;content&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;main&quot;</span><span class="p">&gt;</span>

  317. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-28"></a>        <span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content&quot;</span><span class="cp">&gt;&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  318. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-29"></a>    <span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>

  319. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-30"></a>    <span class="cp">${</span><span class="n">footer</span><span class="o">.</span><span class="n">html_footer</span><span class="p">()</span><span class="cp">}</span>

  320. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-31"></a>    <span class="cp">${</span><span class="n">body_end</span><span class="cp">}</span>

  321. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-32"></a>    <span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;body_end&#39;</span><span class="p">]()</span><span class="cp">}</span>

  322. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-33"></a>    <span class="cp">${</span><span class="n">base</span><span class="o">.</span><span class="n">late_load_js</span><span class="p">()</span><span class="cp">}</span>

  323. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-34"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

  324. <a name="rest_code_fc89fb81b5d44b0fb54d746832f1e6d2-35"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

  325. </pre><figure>

  326. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-2.png"><img alt="https://getnikola.com/images/lanyon-2.thumbnail.png" src="https://getnikola.com/images/lanyon-2.thumbnail.png" /></a>

  327. <figcaption>

  328. <p>And that’s after I exposed the sidebar by clicking on an invisible widget!</p>

  329. </figcaption>

  330. </figure>

  331. <p>One problem, which causes that yellow color in the sidebar is a CSS conflict.

  332. We are loading <code class="docutils literal">rst_base.css</code> which specifies

  333. the background color of <code class="docutils literal">div.sidebar</code> which is more specific than

  334. <code class="docutils literal">lanyon.css</code>, which specifies for <code class="docutils literal">.sidebar</code> alone.</p>

  335. <p>There are many ways to fix this, I chose to change lanyon.css to also use div.sidebar:</p>

  336. <pre class="code css"><a name="rest_code_bad453546fa040adb097fc015dede08a-1"></a><span class="nt">div</span><span class="p">.</span><span class="nc">sidebar</span><span class="o">,</span><span class="p">.</span><span class="nc">sidebar</span> <span class="p">{</span>

  337. <a name="rest_code_bad453546fa040adb097fc015dede08a-2"></a>    <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>

  338. <a name="rest_code_bad453546fa040adb097fc015dede08a-3"></a>    <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  339. <a name="rest_code_bad453546fa040adb097fc015dede08a-4"></a>    <span class="k">bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  340. <a name="rest_code_bad453546fa040adb097fc015dede08a-5"></a>    <span class="k">left</span><span class="p">:</span> <span class="mi">-14</span><span class="kt">rem</span><span class="p">;</span>

  341. <a name="rest_code_bad453546fa040adb097fc015dede08a-6"></a>    <span class="k">width</span><span class="p">:</span> <span class="mi">14</span><span class="kt">rem</span><span class="p">;</span>

  342. <a name="rest_code_bad453546fa040adb097fc015dede08a-7"></a>    <span class="err">[...]</span>

  343. </pre><p>This is annoying but it will happen when you just grab CSS from different places. The &quot;Inspect Element&quot;

  344. feature of your web browser is your best friend for these situations.</p>

  345. <p>Another problem is that the contents of the nav element are wrong. They are not bare links. We will fix that in

  346. <code class="docutils literal">base_header.html</code>, like this:</p>

  347. <pre class="code html+mako"><a name="rest_code_608b7cc1e36a477194847e829dea8fc6-1"></a><span class="cp">&lt;%</span><span class="nb">def</span> <span class="na">name=</span><span class="s">&quot;html_navigation_links()&quot;</span><span class="cp">&gt;</span>

  348. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-2"></a>    <span class="p">&lt;</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;menu&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;navigation&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-nav&quot;</span><span class="p">&gt;</span>

  349. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-3"></a>    <span class="cp">%</span><span class="k">for</span> <span class="n">url</span><span class="p">,</span> <span class="n">text</span> <span class="ow">in</span> <span class="n">navigation_links</span><span class="p">[</span><span class="n">lang</span><span class="p">]:</span>

  350. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-4"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-nav-item&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">url</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">text</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  351. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-5"></a>    <span class="cp">%</span><span class="k">endfor</span>

  352. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-6"></a>    <span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;menu&#39;</span><span class="p">]()</span><span class="cp">}</span>

  353. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-7"></a>

  354. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-8"></a>    <span class="cp">%</span><span class="k">for</span> <span class="n">url</span><span class="p">,</span> <span class="n">text</span> <span class="ow">in</span> <span class="n">navigation_alt_links</span><span class="p">[</span><span class="n">lang</span><span class="p">]:</span>

  355. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-9"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-nav-item&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">url</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">text</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  356. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-10"></a>    <span class="cp">%</span><span class="k">endfor</span>

  357. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-11"></a>    <span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;menu_alt&#39;</span><span class="p">]()</span><span class="cp">}</span>

  358. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-12"></a>    <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span>

  359. <a name="rest_code_608b7cc1e36a477194847e829dea8fc6-13"></a><span class="cp">&lt;/%</span><span class="nb">def</span><span class="cp">&gt;</span>

  360. </pre><p><strong>Note: this means this theme will not support submenus in navigation. If you want that, I’ll happily take a patch.</strong></p>

  361. <figure>

  362. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-3.png"><img alt="https://getnikola.com/images/lanyon-3.thumbnail.png" src="https://getnikola.com/images/lanyon-3.thumbnail.png" /></a>

  363. <figcaption>

  364. <p>Starting to see a resemblance?</p>

  365. </figcaption>

  366. </figure>

  367. <p>Now let’s look at the content. In Lanyon, this is how the &quot;main&quot; content looks:</p>

  368. <pre class="code html"><a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-1"></a><span class="c">&lt;!-- Wrap is the content to shift when toggling the sidebar. We wrap the</span>

  369. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-2"></a><span class="c">     content to avoid any CSS collisions with our real content. --&gt;</span>

  370. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-3"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;wrap&quot;</span><span class="p">&gt;</span>

  371. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-4"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead&quot;</span><span class="p">&gt;</span>

  372. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-5"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>

  373. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-6"></a>      <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead-title&quot;</span><span class="p">&gt;</span>

  374. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-7"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Home&quot;</span><span class="p">&gt;</span>Lanyon<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  375. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-8"></a>        <span class="p">&lt;</span><span class="nt">small</span><span class="p">&gt;</span>A Jekyll theme<span class="p">&lt;/</span><span class="nt">small</span><span class="p">&gt;</span>

  376. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-9"></a>      <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>

  377. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-10"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  378. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-11"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  379. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-12"></a>

  380. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-13"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container content&quot;</span><span class="p">&gt;</span>

  381. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-14"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post&quot;</span><span class="p">&gt;</span>

  382. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-15"></a>        <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post-title&quot;</span><span class="p">&gt;</span>Introducing Lanyon<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>

  383. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-16"></a>        <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post-date&quot;</span><span class="p">&gt;</span>02 Jan 2014<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

  384. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-17"></a>        <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lanyon is an unassuming <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://jekyllrb.com&quot;</span><span class="p">&gt;</span>Jekyll<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> theme [...]

  385. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-18"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  386. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-19"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  387. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-20"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  388. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-21"></a><span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;sidebar-checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-toggle&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>

  389. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-22"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

  390. <a name="rest_code_965ba81d3aa44aa991feb7dec4b71fe0-23"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

  391. </pre><p>Everything inside the &quot;container content&quot; div is… the content. The rest is a masthead with the site title

  392. and at the bottom a label for the sidebar toggle. Easy to do in <code class="docutils literal">base.tmpl</code>

  393. (only showing the relevant part):</p>

  394. <pre class="code html+mako"><a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-1"></a>    <span class="c">&lt;!-- Wrap is the content to shift when toggling the sidebar. We wrap the</span>

  395. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-2"></a><span class="c">        content to avoid any CSS collisions with our real content. --&gt;</span>

  396. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-3"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;wrap&quot;</span><span class="p">&gt;</span>

  397. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-4"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead&quot;</span><span class="p">&gt;</span>

  398. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-5"></a>        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>

  399. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-6"></a>        <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead-title&quot;</span><span class="p">&gt;</span>

  400. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-7"></a>            <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Home&quot;</span><span class="p">&gt;</span>Lanyon<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  401. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-8"></a>            <span class="p">&lt;</span><span class="nt">small</span><span class="p">&gt;</span>A Jekyll theme<span class="p">&lt;/</span><span class="nt">small</span><span class="p">&gt;</span>

  402. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-9"></a>        <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>

  403. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-10"></a>        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  404. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-11"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  405. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-12"></a>

  406. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-13"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container content&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;content&quot;</span><span class="p">&gt;</span>

  407. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-14"></a>        <span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content&quot;</span><span class="cp">&gt;&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  408. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-15"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  409. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-16"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  410. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-17"></a>    <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;sidebar-checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sidebar-toggle&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>

  411. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-18"></a>    <span class="cp">${</span><span class="n">footer</span><span class="o">.</span><span class="n">html_footer</span><span class="p">()</span><span class="cp">}</span>

  412. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-19"></a>    <span class="cp">${</span><span class="n">body_end</span><span class="cp">}</span>

  413. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-20"></a>    <span class="cp">${</span><span class="n">template_hooks</span><span class="p">[</span><span class="s1">&#39;body_end&#39;</span><span class="p">]()</span><span class="cp">}</span>

  414. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-21"></a>    <span class="cp">${</span><span class="n">base</span><span class="o">.</span><span class="n">late_load_js</span><span class="p">()</span><span class="cp">}</span>

  415. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-22"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

  416. <a name="rest_code_48adeb55557c44a28e38822f50eb3ac6-23"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

  417. </pre><figure>

  418. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-4.png"><img alt="https://getnikola.com/images/lanyon-4.thumbnail.png" src="https://getnikola.com/images/lanyon-4.thumbnail.png" /></a>

  419. <figcaption>

  420. <p>Getting there!</p>

  421. </figcaption>

  422. </figure>

  423. <p>The sidebar looks bad because of yet more CSS conflicts with <code class="docutils literal">rst_base.css</code>. By

  424. adding some extra styling in <code class="docutils literal">lanyon.css</code>, it will look better.</p>

  425. <pre class="code css"><a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-1"></a><span class="c">/* Style and &quot;hide&quot; the sidebar */</span>

  426. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-2"></a><span class="nt">div</span><span class="p">.</span><span class="nc">sidebar</span><span class="o">,</span> <span class="p">.</span><span class="nc">sidebar</span> <span class="p">{</span>

  427. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-3"></a>  <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>

  428. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-4"></a>  <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  429. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-5"></a>  <span class="k">bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  430. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-6"></a>  <span class="k">left</span><span class="p">:</span> <span class="mi">-14</span><span class="kt">rem</span><span class="p">;</span>

  431. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-7"></a>  <span class="k">width</span><span class="p">:</span> <span class="mi">14</span><span class="kt">rem</span><span class="p">;</span>

  432. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-8"></a>  <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>

  433. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-9"></a>  <span class="k">overflow-y</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>

  434. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-10"></a>  <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  435. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-11"></a>  <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  436. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-12"></a>  <span class="k">border</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>

  437. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-13"></a>  <span class="k">font-family</span><span class="p">:</span> <span class="s2">&quot;PT Sans&quot;</span><span class="p">,</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>

  438. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-14"></a>  <span class="k">font-size</span><span class="p">:</span> <span class="mf">.875</span><span class="kt">rem</span><span class="p">;</span> <span class="c">/* 15px */</span>

  439. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-15"></a>  <span class="k">color</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mf">.6</span><span class="p">);</span>

  440. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-16"></a>  <span class="k">background-color</span><span class="p">:</span> <span class="mh">#202020</span><span class="p">;</span>

  441. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-17"></a>  <span class="kp">-webkit-</span><span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span> <span class="kc">ease-in-out</span><span class="p">;</span>

  442. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-18"></a>          <span class="k">transition</span><span class="p">:</span> <span class="kc">all</span> <span class="mf">.3</span><span class="kt">s</span> <span class="kc">ease-in-out</span><span class="p">;</span>

  443. <a name="rest_code_7cfd88bc25024630b0a2eab6659f2a9f-19"></a><span class="p">}</span>

  444. </pre><p>Also, the accessibility link on top is visible when it should not. That’s

  445. because we removed <code class="docutils literal">theme.css</code> from the base theme, and with it, we lost a

  446. couple of classes. We can add them in <code class="docutils literal">lanyon.css</code>, along with others used by other

  447. pieces of the site:</p>

  448. <pre class="code css"><a name="rest_code_3b340df0699a4d0a9924c68722dd106a-1"></a><span class="p">.</span><span class="nc">sr-only</span> <span class="p">{</span>

  449. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-2"></a>  <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>

  450. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-3"></a>  <span class="k">width</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>

  451. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-4"></a>  <span class="k">height</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>

  452. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-5"></a>  <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  453. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-6"></a>  <span class="k">margin</span><span class="p">:</span> <span class="mi">-1</span><span class="kt">px</span><span class="p">;</span>

  454. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-7"></a>  <span class="k">overflow</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>

  455. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-8"></a>  <span class="k">clip</span><span class="p">:</span> <span class="nb">rect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>

  456. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-9"></a>  <span class="k">border</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  457. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-10"></a><span class="p">}</span>

  458. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-11"></a>

  459. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-12"></a><span class="p">.</span><span class="nc">sr-only-focusable</span><span class="p">:</span><span class="nd">active</span><span class="o">,</span>

  460. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-13"></a><span class="p">.</span><span class="nc">sr-only-focusable</span><span class="p">:</span><span class="nd">focus</span> <span class="p">{</span>

  461. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-14"></a>  <span class="k">position</span><span class="p">:</span> <span class="kc">static</span><span class="p">;</span>

  462. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-15"></a>  <span class="k">width</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>

  463. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-16"></a>  <span class="k">height</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>

  464. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-17"></a>  <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  465. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-18"></a>  <span class="k">overflow</span><span class="p">:</span> <span class="kc">visible</span><span class="p">;</span>

  466. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-19"></a>  <span class="k">clip</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>

  467. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-20"></a><span class="p">}</span>

  468. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-21"></a>

  469. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-22"></a><span class="p">.</span><span class="nc">breadcrumb</span> <span class="p">{</span>

  470. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-23"></a>  <span class="k">padding</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span> <span class="mi">15</span><span class="kt">px</span><span class="p">;</span>

  471. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-24"></a>  <span class="k">margin-bottom</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>

  472. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-25"></a>  <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>

  473. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-26"></a><span class="p">}</span>

  474. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-27"></a>

  475. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-28"></a><span class="p">.</span><span class="nc">breadcrumb</span> <span class="o">&gt;</span> <span class="nt">li</span> <span class="p">{</span>

  476. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-29"></a>  <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>

  477. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-30"></a>  <span class="k">margin-right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  478. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-31"></a>  <span class="k">margin-left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  479. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-32"></a><span class="p">}</span>

  480. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-33"></a>

  481. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-34"></a><span class="p">.</span><span class="nc">breadcrumb</span> <span class="o">&gt;</span> <span class="nt">li</span><span class="p">:</span><span class="nd">after</span> <span class="p">{</span>

  482. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-35"></a>  <span class="k">content</span><span class="p">:</span> <span class="s1">&#39; / &#39;</span><span class="p">;</span>

  483. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-36"></a>  <span class="k">color</span><span class="p">:</span> <span class="mh">#888</span><span class="p">;</span>

  484. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-37"></a><span class="p">}</span>

  485. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-38"></a>

  486. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-39"></a><span class="p">.</span><span class="nc">breadcrumb</span> <span class="o">&gt;</span> <span class="nt">li</span><span class="p">:</span><span class="nd">last-of-type</span><span class="p">:</span><span class="nd">after</span> <span class="p">{</span>

  487. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-40"></a>  <span class="k">content</span><span class="p">:</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>

  488. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-41"></a>  <span class="k">margin-left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  489. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-42"></a><span class="p">}</span>

  490. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-43"></a>

  491. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-44"></a><span class="p">.</span><span class="nc">thumbnails</span> <span class="o">&gt;</span> <span class="nt">li</span> <span class="p">{</span>

  492. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-45"></a>  <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>

  493. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-46"></a>  <span class="k">margin-right</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>

  494. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-47"></a><span class="p">}</span>

  495. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-48"></a>

  496. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-49"></a><span class="p">.</span><span class="nc">thumbnails</span> <span class="o">&gt;</span> <span class="nt">li</span><span class="p">:</span><span class="nd">last-of-type</span> <span class="p">{</span>

  497. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-50"></a>  <span class="k">margin-right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>

  498. <a name="rest_code_3b340df0699a4d0a9924c68722dd106a-51"></a><span class="p">}</span>

  499. </pre><figure>

  500. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-5.png"><img alt="https://getnikola.com/images/lanyon-5.thumbnail.png" src="https://getnikola.com/images/lanyon-5.thumbnail.png" /></a>

  501. <figcaption>

  502. <p>Little by little, things look better.</p>

  503. </figcaption>

  504. </figure>

  505. <p>One clear problem is that the title &quot;Lanyon · A Jekyll theme&quot; is set in the

  506. theme itself. We don’t do that sort of thing in Nikola, we have settings for

  507. that. So, let’s use them. There is a <code class="docutils literal">html_site_title</code> function in

  508. <code class="docutils literal">base_helper.tmpl</code> which is just the thing. So we change base.tmpl to use it:</p>

  509. <pre class="code html+mako"><a name="rest_code_c0335d8fcada40ccb0cf1f884bd1a01d-1"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;wrap&quot;</span><span class="p">&gt;</span>

  510. <a name="rest_code_c0335d8fcada40ccb0cf1f884bd1a01d-2"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead&quot;</span><span class="p">&gt;</span>

  511. <a name="rest_code_c0335d8fcada40ccb0cf1f884bd1a01d-3"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>

  512. <a name="rest_code_c0335d8fcada40ccb0cf1f884bd1a01d-4"></a>      <span class="cp">${</span><span class="n">header</span><span class="o">.</span><span class="n">html_site_title</span><span class="p">()</span><span class="cp">}</span>

  513. <a name="rest_code_c0335d8fcada40ccb0cf1f884bd1a01d-5"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  514. <a name="rest_code_c0335d8fcada40ccb0cf1f884bd1a01d-6"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  515. </pre><p>That’s a <code class="docutils literal">&lt;h1&gt;</code> instead of a <code class="docutils literal">&lt;h3&gt;</code> like Lanyon does, but hey, it’s the

  516. right thing to do. If you want to go with an <code class="docutils literal">&lt;h3&gt;</code>, just

  517. change <code class="docutils literal">html_site_title</code> itself.</p>

  518. <p>And now we more or less have the correct page layout and styles. Except for a

  519. rather large thing…</p>

  520. </section>

  521. <section id="typography">

  522. <h1>Typography</h1>

  523. <p>You can see in the previous screenshot that text still looks quite different in our port: Serif versus Sans-Serif

  524. content, and the titles have different colors!</p>

  525. <p>Let’s start with the titles. Here’s how they look in Lanyon:</p>

  526. <pre class="code html"><a name="rest_code_e2944f60418c413180b6428673e808af-1"></a><span class="p">&lt;</span><span class="nt">h3</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead-title&quot;</span><span class="p">&gt;</span>

  527. <a name="rest_code_e2944f60418c413180b6428673e808af-2"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Home&quot;</span><span class="p">&gt;</span>Lanyon<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  528. <a name="rest_code_e2944f60418c413180b6428673e808af-3"></a>  <span class="p">&lt;</span><span class="nt">small</span><span class="p">&gt;</span>A Jekyll theme<span class="p">&lt;/</span><span class="nt">small</span><span class="p">&gt;</span>

  529. <a name="rest_code_e2944f60418c413180b6428673e808af-4"></a><span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>

  530. </pre><p>Versus our port:</p>

  531. <pre class="code html"><a name="rest_code_0f80e1aa37524d958a0df59a95befa54-1"></a><span class="p">&lt;</span><span class="nt">h1</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;brand&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://example.com/&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;My Nikola Site&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;home&quot;</span><span class="p">&gt;</span>

  532. </pre><p>So, it looks like we will have to fix <code class="docutils literal">html_site_title</code> after all:</p>

  533. <pre class="code html+mako"><a name="rest_code_f43d7fc8e85b42ef97b6322588feee1d-1"></a><span class="cp">&lt;%</span><span class="nb">def</span> <span class="na">name=</span><span class="s">&quot;html_site_title()&quot;</span><span class="cp">&gt;</span>

  534. <a name="rest_code_f43d7fc8e85b42ef97b6322588feee1d-2"></a>    <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;brand&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;masthead-title&quot;</span><span class="p">&gt;</span>

  535. <a name="rest_code_f43d7fc8e85b42ef97b6322588feee1d-3"></a>    <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">_link</span><span class="p">(</span><span class="s2">&quot;root&quot;</span><span class="p">,</span> <span class="kc">None</span><span class="p">,</span> <span class="n">lang</span><span class="p">)</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">blog_title</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;home&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">blog_title</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

  536. <a name="rest_code_f43d7fc8e85b42ef97b6322588feee1d-4"></a>    <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>

  537. <a name="rest_code_f43d7fc8e85b42ef97b6322588feee1d-5"></a><span class="cp">&lt;/%</span><span class="nb">def</span><span class="cp">&gt;</span>

  538. </pre><p>As for the actual content, that’s not in any of the templates we have seen so far. The page you see is an

  539. &quot;index.tmpl&quot; page, which means it’s a list of blog posts shown one below the

  540. other. Obviously it’s not doing

  541. things in the way the Lanyon CSS expects it to. Here’s the original, which you

  542. can find in Nikola’s source

  543. code:</p>

  544. <pre class="code html+mako"><a name="rest_code_e551bc4dba92475db85b839f6885c89f-1"></a><span class="cp">## -*- coding: utf-8 -*-</span>

  545. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-2"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;helper&quot;</span> <span class="na">file=</span><span class="s">&quot;index_helper.tmpl&quot;</span><span class="cp">/&gt;</span>

  546. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-3"></a><span class="cp">&lt;%</span><span class="nb">namespace</span> <span class="na">name=</span><span class="s">&quot;comments&quot;</span> <span class="na">file=</span><span class="s">&quot;comments_helper.tmpl&quot;</span><span class="cp">/&gt;</span>

  547. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-4"></a><span class="cp">&lt;%</span><span class="nb">inherit</span> <span class="na">file=</span><span class="s">&quot;base.tmpl&quot;</span><span class="cp">/&gt;</span>

  548. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-5"></a>

  549. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-6"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;extra_head&quot;</span><span class="cp">&gt;</span>

  550. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-7"></a>    <span class="cp">${</span><span class="n">parent</span><span class="o">.</span><span class="n">extra_head</span><span class="p">()</span><span class="cp">}</span>

  551. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-8"></a>    <span class="cp">%</span> <span class="k">if</span> <span class="n">posts</span> <span class="ow">and</span> <span class="p">(</span><span class="n">permalink</span> <span class="o">==</span> <span class="s1">&#39;/&#39;</span> <span class="ow">or</span> <span class="n">permalink</span> <span class="o">==</span> <span class="s1">&#39;/&#39;</span> <span class="o">+</span> <span class="n">index_file</span><span class="p">):</span>

  552. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-9"></a>        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;prefetch&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">posts</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">.</span><span class="n">permalink</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/html&quot;</span><span class="p">&gt;</span>

  553. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-10"></a>    <span class="cp">%</span><span class="k"> endif</span>

  554. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-11"></a><span class="cp">&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  555. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-12"></a>

  556. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-13"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content&quot;</span><span class="cp">&gt;</span>

  557. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-14"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content_header&quot;</span><span class="cp">&gt;&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  558. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-15"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;postindex&quot;</span><span class="p">&gt;</span>

  559. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-16"></a><span class="cp">%</span> <span class="k">for</span> <span class="n">post</span> <span class="ow">in</span> <span class="n">posts</span><span class="p">:</span>

  560. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-17"></a>    <span class="p">&lt;</span><span class="nt">article</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-entry post-</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">)</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span>

  561. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-18"></a>    <span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>

  562. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-19"></a>        <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;p-name entry-title&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;u-url&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">title</span><span class="p">()</span><span class="o">|</span><span class="n">h</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>

  563. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-20"></a>        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;metadata&quot;</span><span class="p">&gt;</span>

  564. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-21"></a>            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;byline author vcard&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;byline-name fn&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">author</span><span class="p">()</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  565. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-22"></a>            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dateline&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;bookmark&quot;</span><span class="p">&gt;&lt;</span><span class="nt">time</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;published dt-published&quot;</span> <span class="na">datetime</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">date</span><span class="o">.</span><span class="n">isoformat</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">formatted_date</span><span class="p">(</span><span class="n">date_format</span><span class="p">)</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">formatted_date</span><span class="p">(</span><span class="n">date_format</span><span class="p">)</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">time</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  566. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-23"></a>            <span class="cp">%</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">&#39;nocomments&#39;</span><span class="p">)</span> <span class="ow">and</span> <span class="n">site_has_comments</span><span class="p">:</span>

  567. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-24"></a>                <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;commentline&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">comments</span><span class="o">.</span><span class="n">comment_link</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">(),</span> <span class="n">post</span><span class="o">.</span><span class="n">_base_path</span><span class="p">)</span><span class="cp">}</span>

  568. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-25"></a>            <span class="cp">%</span><span class="k"> endif</span>

  569. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-26"></a>        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  570. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-27"></a>    <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>

  571. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-28"></a>    <span class="cp">%</span><span class="k">if</span> <span class="n">index_teasers</span><span class="p">:</span>

  572. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-29"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;p-summary entry-summary&quot;</span><span class="p">&gt;</span>

  573. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-30"></a>    <span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">teaser_only</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span><span class="cp">}</span>

  574. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-31"></a>    <span class="cp">%</span><span class="k">else</span><span class="p">:</span>

  575. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-32"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;e-content entry-content&quot;</span><span class="p">&gt;</span>

  576. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-33"></a>    <span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">teaser_only</span><span class="o">=</span><span class="kc">False</span><span class="p">)</span><span class="cp">}</span>

  577. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-34"></a>    <span class="cp">%</span><span class="k">endif</span>

  578. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-35"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  579. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-36"></a>    <span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>

  580. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-37"></a><span class="cp">%</span><span class="k"> endfor</span>

  581. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-38"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  582. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-39"></a><span class="cp">${</span><span class="n">helper</span><span class="o">.</span><span class="n">html_pager</span><span class="p">()</span><span class="cp">}</span>

  583. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-40"></a><span class="cp">${</span><span class="n">comments</span><span class="o">.</span><span class="n">comment_link_script</span><span class="p">()</span><span class="cp">}</span>

  584. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-41"></a><span class="cp">${</span><span class="n">helper</span><span class="o">.</span><span class="n">mathjax_script</span><span class="p">(</span><span class="n">posts</span><span class="p">)</span><span class="cp">}</span>

  585. <a name="rest_code_e551bc4dba92475db85b839f6885c89f-42"></a><span class="cp">&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  586. </pre><p>And this is how it looks after I played with it for a while, making it generate code that looks closer to

  587. the Lanyon original:</p>

  588. <pre class="code html+mako"><a name="rest_code_fd5122ac420e47ab84bb494729d69912-1"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content&quot;</span><span class="cp">&gt;</span>

  589. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-2"></a><span class="cp">&lt;%</span><span class="nb">block</span> <span class="na">name=</span><span class="s">&quot;content_header&quot;</span><span class="cp">&gt;&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  590. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-3"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;posts&quot;</span><span class="p">&gt;</span>

  591. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-4"></a><span class="cp">%</span> <span class="k">for</span> <span class="n">post</span> <span class="ow">in</span> <span class="n">posts</span><span class="p">:</span>

  592. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-5"></a>    <span class="p">&lt;</span><span class="nt">article</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post h-entry post-</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">)</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span>

  593. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-6"></a>    <span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>

  594. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-7"></a>        <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post-title p-name&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;u-url&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">title</span><span class="p">()</span><span class="o">|</span><span class="n">h</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>

  595. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-8"></a>        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;metadata&quot;</span><span class="p">&gt;</span>

  596. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-9"></a>            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;byline author vcard&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;byline-name fn&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">author</span><span class="p">()</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  597. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-10"></a>            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dateline&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;bookmark&quot;</span><span class="p">&gt;&lt;</span><span class="nt">time</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post-date published dt-published&quot;</span> <span class="na">datetime</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">date</span><span class="o">.</span><span class="n">isoformat</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">formatted_date</span><span class="p">(</span><span class="n">date_format</span><span class="p">)</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">formatted_date</span><span class="p">(</span><span class="n">date_format</span><span class="p">)</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">time</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  598. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-11"></a>            <span class="cp">%</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">&#39;nocomments&#39;</span><span class="p">)</span> <span class="ow">and</span> <span class="n">site_has_comments</span><span class="p">:</span>

  599. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-12"></a>                <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;commentline&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">comments</span><span class="o">.</span><span class="n">comment_link</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">(),</span> <span class="n">post</span><span class="o">.</span><span class="n">_base_path</span><span class="p">)</span><span class="cp">}</span>

  600. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-13"></a>            <span class="cp">%</span><span class="k"> endif</span>

  601. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-14"></a>        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  602. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-15"></a>    <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>

  603. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-16"></a>    <span class="cp">%</span><span class="k">if</span> <span class="n">index_teasers</span><span class="p">:</span>

  604. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-17"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;p-summary entry-summary&quot;</span><span class="p">&gt;</span>

  605. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-18"></a>    <span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">teaser_only</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span><span class="cp">}</span>

  606. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-19"></a>    <span class="cp">%</span><span class="k">else</span><span class="p">:</span>

  607. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-20"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;e-content entry-content&quot;</span><span class="p">&gt;</span>

  608. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-21"></a>    <span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">teaser_only</span><span class="o">=</span><span class="kc">False</span><span class="p">)</span><span class="cp">}</span>

  609. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-22"></a>    <span class="cp">%</span><span class="k">endif</span>

  610. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-23"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  611. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-24"></a>    <span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>

  612. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-25"></a><span class="cp">%</span><span class="k"> endfor</span>

  613. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-26"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  614. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-27"></a><span class="cp">${</span><span class="n">helper</span><span class="o">.</span><span class="n">html_pager</span><span class="p">()</span><span class="cp">}</span>

  615. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-28"></a><span class="cp">${</span><span class="n">comments</span><span class="o">.</span><span class="n">comment_link_script</span><span class="p">()</span><span class="cp">}</span>

  616. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-29"></a><span class="cp">${</span><span class="n">helper</span><span class="o">.</span><span class="n">mathjax_script</span><span class="p">(</span><span class="n">posts</span><span class="p">)</span><span class="cp">}</span>

  617. <a name="rest_code_fd5122ac420e47ab84bb494729d69912-30"></a><span class="cp">&lt;/%</span><span class="nb">block</span><span class="cp">&gt;</span>

  618. </pre><p>With these changes, it looks… similar?</p>

  619. <figure>

  620. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-6.png"><img alt="https://getnikola.com/images/lanyon-6.thumbnail.png" src="https://getnikola.com/images/lanyon-6.thumbnail.png" /></a>

  621. <figcaption>

  622. <p>It does!</p>

  623. </figcaption>

  624. </figure>

  625. <p>Similar changes (basically adding class names to elements) needed to be done in <code class="docutils literal">post_header.tmpl</code>:</p>

  626. <pre class="code html+mako"><a name="rest_code_f471988dc16e43429671b09e47f39316-1"></a><span class="cp">&lt;%</span><span class="nb">def</span> <span class="na">name=</span><span class="s">&quot;html_post_header()&quot;</span><span class="cp">&gt;</span>

  627. <a name="rest_code_f471988dc16e43429671b09e47f39316-2"></a>    <span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>

  628. <a name="rest_code_f471988dc16e43429671b09e47f39316-3"></a>        <span class="cp">${</span><span class="n">html_title</span><span class="p">()</span><span class="cp">}</span>

  629. <a name="rest_code_f471988dc16e43429671b09e47f39316-4"></a>        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;metadata&quot;</span><span class="p">&gt;</span>

  630. <a name="rest_code_f471988dc16e43429671b09e47f39316-5"></a>            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;byline author vcard&quot;</span><span class="p">&gt;&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;byline-name fn&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">author</span><span class="p">()</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  631. <a name="rest_code_f471988dc16e43429671b09e47f39316-6"></a>            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dateline&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;bookmark&quot;</span><span class="p">&gt;&lt;</span><span class="nt">time</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;post-date published dt-published&quot;</span> <span class="na">datetime</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">date</span><span class="o">.</span><span class="n">isoformat</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">&quot;datePublished&quot;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">formatted_date</span><span class="p">(</span><span class="n">date_format</span><span class="p">)</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">formatted_date</span><span class="p">(</span><span class="n">date_format</span><span class="p">)</span><span class="cp">}</span><span class="p">&lt;/</span><span class="nt">time</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

  632. <a name="rest_code_f471988dc16e43429671b09e47f39316-7"></a>            <span class="cp">%</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">post</span><span class="o">.</span><span class="n">meta</span><span class="p">(</span><span class="s1">&#39;nocomments&#39;</span><span class="p">)</span> <span class="ow">and</span> <span class="n">site_has_comments</span><span class="p">:</span>

  633. <a name="rest_code_f471988dc16e43429671b09e47f39316-8"></a>                <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;commentline&quot;</span><span class="p">&gt;</span><span class="cp">${</span><span class="n">comments</span><span class="o">.</span><span class="n">comment_link</span><span class="p">(</span><span class="n">post</span><span class="o">.</span><span class="n">permalink</span><span class="p">(),</span> <span class="n">post</span><span class="o">.</span><span class="n">_base_path</span><span class="p">)</span><span class="cp">}</span>

  634. <a name="rest_code_f471988dc16e43429671b09e47f39316-9"></a>            <span class="cp">%</span><span class="k"> endif</span>

  635. <a name="rest_code_f471988dc16e43429671b09e47f39316-10"></a>            <span class="cp">%</span><span class="k">if</span> <span class="n">post</span><span class="o">.</span><span class="n">description</span><span class="p">():</span>

  636. <a name="rest_code_f471988dc16e43429671b09e47f39316-11"></a>                <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">itemprop</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">post</span><span class="o">.</span><span class="n">description</span><span class="p">()</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span>

  637. <a name="rest_code_f471988dc16e43429671b09e47f39316-12"></a>            <span class="cp">%</span><span class="k">endif</span>

  638. <a name="rest_code_f471988dc16e43429671b09e47f39316-13"></a>        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

  639. <a name="rest_code_f471988dc16e43429671b09e47f39316-14"></a>        <span class="cp">${</span><span class="n">html_translations</span><span class="p">(</span><span class="n">post</span><span class="p">)</span><span class="cp">}</span>

  640. <a name="rest_code_f471988dc16e43429671b09e47f39316-15"></a>    <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>

  641. <a name="rest_code_f471988dc16e43429671b09e47f39316-16"></a><span class="cp">&lt;/%</span><span class="nb">def</span><span class="cp">&gt;</span>

  642. </pre></section>

  643. <section id="customization">

  644. <h1>Customization</h1>

  645. <p>The original Lanyon theme supports some personalization options. It suggests you do them by tweaking the templates, and

  646. you <em>can</em> also do that in the Nikola port. But we prefer to use options for that, so that you can get a later, better

  647. version of the theme and it will still &quot;just work&quot;.</p>

  648. <p>Let’s see the color schemes first. They apply easily, just tweak your <code class="docutils literal">body</code> element like this:</p>

  649. <pre class="code html"><a name="rest_code_bbc2c326094f4118b891e33d8631f56c-1"></a><span class="p">&lt;</span><span class="nt">body</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;theme-base-08&quot;</span><span class="p">&gt;</span>

  650. <a name="rest_code_bbc2c326094f4118b891e33d8631f56c-2"></a>...

  651. <a name="rest_code_bbc2c326094f4118b891e33d8631f56c-3"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

  652. </pre><p>We can tweak <code class="docutils literal">base.tmpl</code> to do just that:</p>

  653. <pre class="code html+mako"><a name="rest_code_f4dcd8bf0daf42e1b56dc407750d4511-1"></a><span class="cp">%</span> <span class="k">if</span> <span class="n">lanyon_subtheme</span><span class="p">:</span>

  654. <a name="rest_code_f4dcd8bf0daf42e1b56dc407750d4511-2"></a><span class="p">&lt;</span><span class="nt">body</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">${</span><span class="n">lanyon_subtheme</span><span class="cp">}</span><span class="s">&quot;</span><span class="p">&gt;</span>

  655. <a name="rest_code_f4dcd8bf0daf42e1b56dc407750d4511-3"></a><span class="cp">%</span><span class="k">else</span><span class="p">:</span>

  656. <a name="rest_code_f4dcd8bf0daf42e1b56dc407750d4511-4"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

  657. <a name="rest_code_f4dcd8bf0daf42e1b56dc407750d4511-5"></a><span class="cp">%</span><span class="k">endif</span>

  658. </pre><p>And then we can put the options in conf.py’s <code class="docutils literal">GLOBAL_CONTEXT</code>:</p>

  659. <pre class="code python"><a name="rest_code_ab8625d895114acc84ba828d69f39931-1"></a><span class="n">GLOBAL_CONTEXT</span> <span class="o">=</span> <span class="p">{</span>

  660. <a name="rest_code_ab8625d895114acc84ba828d69f39931-2"></a>    <span class="s2">&quot;lanyon_subtheme&quot;</span><span class="p">:</span> <span class="s2">&quot;theme-base-08&quot;</span>

  661. <a name="rest_code_ab8625d895114acc84ba828d69f39931-3"></a><span class="p">}</span>

  662. </pre><figure>

  663. <a class="reference external image-reference" href="https://getnikola.com/images/lanyon-7.png"><img alt="https://getnikola.com/images/lanyon-7.thumbnail.png" src="https://getnikola.com/images/lanyon-7.thumbnail.png" /></a>

  664. <figcaption>

  665. <p>Look at it, all themed up.</p>

  666. </figcaption>

  667. </figure>

  668. <p>Doing the same for layout-reverse, sidebar-overlay and the rest is left as an exercise for the reader.</p>

  669. </section>

  670. <section id="bundles">

  671. <h1>Bundles</h1>

  672. <p>If the <code class="docutils literal">USE_BUNDLES</code> option set to True,

  673. Nikola can put several CSS or JS files together in a larger file, which can

  674. makes site load faster for some deployments. To do this, your theme needs

  675. a <code class="docutils literal">bundles</code> file. The file format is a modified

  676. <a class="reference external" href="https://docs.python.org/3/library/configparser.html">config</a> file with no

  677. defined section; the basic syntax is:</p>

  678. <pre class="literal-block">outputfile1.js=

  679.     thing1.js,

  680.     thing2.js,

  681.     ...

  682. outputfile2.css=

  683.     thing1.css,

  684.     thing2.css,

  685.     ...</pre>

  686. <p>For the Lanyon theme, it should look like this:</p>

  687. <pre class="literal-block">assets/css/all.css=

  688.     rst_base.css,

  689.     nikola_rst.css,

  690.     code.css,

  691.     poole.css,

  692.     lanyon.css,

  693.     custom.css,</pre>

  694. <p><strong>Note:</strong> trailing commas are optional</p>

  695. <p><strong>Note:</strong> Some themes also support the <code class="docutils literal">USE_CDN</code> option meaning that in some cases it will load one bundle with all CSS and in other will load some CSS files

  696. from a CDN and others from a bundle. This is complicated and probably not worth the effort.</p>

  697. </section>

  698. <section id="the-end">

  699. <h1>The End</h1>

  700. <p>And that’s it, that’s a whole theme. Eventually, once people start using it, they will notice small broken details, which will need handling one at a time.</p>

  701. <p>This theme should be available in <a class="reference external" href="https://themes.getnikola.com/v7/lanyon/">https://themes.getnikola.com/v7/lanyon/</a> and you can see it in action at <a class="reference external" href="https://themes.getnikola.com/v7/lanyon/demo/">https://themes.getnikola.com/v7/lanyon/demo/</a> .</p>

  702. <p>What if you want to extend other parts of the theme? Check out the <a class="reference external" href="/pages/theming.html">Theming reference</a>. You can also contribute your improvements to the <cite>nikola-themes &lt;https://github.com/getnikola/nikola&gt;</cite> repository on GitHub.</p>

  703. </section>