Skip to content

Modify blog interface

2 related links

A near final step of converting my Wordpress blog to markdown files is updating the interface of the website. Tweaking Material for Mkdocs to better suit my design intent.

Blog interface design#

Resources#

Overall design#

Interface components#

Template implementation#

main.html - extends base and provides a couple of local modifications header/footer.html - header.html - the header, title, search, light/dark mode toggle, navigation menu - footer.html - bottom two rows/footer

blog-post.html - extends base.html and used for any single blog post page

Text Only
- adds hero block if required
- adds the "old content" aside
- container for content
   - `partials/prev-next.html`
       - somehow this is generating HTML with duplicate links otuside of the nav
   - `partials/post-content.html`
   - `partials/comments-pingbacks.html`
   - partials/prev-next.html`

Components

  • Site icon - probably won't use one
  • search area
  • light/dark mode toggle
  • top level navigation menu
  • hero - used on old post pages
  • todo adding the prev/next to the header on blog posts

Consider adopting a more cloud based design

Components

Components

  • heading
  • list - need to make these look more like links

TODO

  • turn off the navigation that has Home and About appearing in the left hand menu

Home page#

Components

  • archive list
    • TODO make it links look like links
  • todo reinstate the left hand colum (empty)
  • list of blog posts
    • todo figure out a better way to visually separate different posts

Post page#

Components

  • headings within the post
  • Table of contents - todo make this look like archive list
  • headings for the comments/pingbacks sections
  • comments
  • pingbacks

Category/archives page#

  • category header
  • Todo add a next/prev like archives
  • todo add a list of catgegories to the left hand column
  • footer

Header#

`

- David's weblog <p>Home About RSS light/dark Search `</p> <h3 id="typology">Typology<a class="headerlink" href="#typology" title="Permanent link">#</a></h3> <p>Can use any <a href="https://fonts.google.com/">Google font</a> - set in <code>mkdocs.yml</code>. Currently using Gabarito.</p> <h3 id="colour-schemes">Colour schemes<a class="headerlink" href="#colour-schemes" title="Permanent link">#</a></h3> <p>Having difficulties getting custom colour schemes to work.</p> <p>Linear background - dark blue with Blackish clouds at the top. </p> <p>Dark </p><div class="highlight"><span class="filename">CSS</span><pre><span></span><code><span class="nt">background</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">100775</span><span class="o">;</span> <span class="nt">background</span><span class="o">:</span><span class="w"> </span><span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">280deg</span><span class="o">,</span><span class="w"> </span><span class="nt">rgba</span><span class="o">(</span><span class="nt">16</span><span class="o">,</span><span class="w"> </span><span class="nt">7</span><span class="o">,</span><span class="w"> </span><span class="nt">117</span><span class="o">,</span><span class="w"> </span><span class="nt">1</span><span class="o">)</span><span class="w"> </span><span class="nt">0</span><span class="o">%,</span><span class="w"> </span><span class="nt">rgba</span><span class="o">(</span><span class="nt">10</span><span class="o">,</span><span class="w"> </span><span class="nt">5</span><span class="o">,</span><span class="w"> </span><span class="nt">79</span><span class="o">,</span><span class="w"> </span><span class="nt">1</span><span class="o">)</span><span class="w"> </span><span class="nt">50</span><span class="o">%,</span><span class="w"> </span><span class="nt">rgba</span><span class="o">(</span><span class="nt">4</span><span class="o">,</span><span class="w"> </span><span class="nt">10</span><span class="o">,</span><span class="w"> </span><span class="nt">46</span><span class="o">,</span><span class="w"> </span><span class="nt">1</span><span class="o">)</span><span class="w"> </span><span class="nt">100</span><span class="o">%);</span> </code></pre></div> <p>light </p><div class="highlight"><span class="filename">CSS</span><pre><span></span><code><span class="nt">background</span><span class="o">:</span><span class="w"> </span><span class="p">#</span><span class="nn">f8f7fa</span><span class="o">;</span> <span class="nt">background</span><span class="o">:</span><span class="w"> </span><span class="nt">linear-gradient</span><span class="o">(</span><span class="nt">280deg</span><span class="o">,</span><span class="w"> </span><span class="nt">rgba</span><span class="o">(</span><span class="nt">248</span><span class="o">,</span><span class="w"> </span><span class="nt">247</span><span class="o">,</span><span class="w"> </span><span class="nt">250</span><span class="o">,</span><span class="w"> </span><span class="nt">1</span><span class="o">)</span><span class="w"> </span><span class="nt">0</span><span class="o">%,</span><span class="w"> </span><span class="nt">rgba</span><span class="o">(</span><span class="nt">225</span><span class="o">,</span><span class="w"> </span><span class="nt">225</span><span class="o">,</span><span class="w"> </span><span class="nt">237</span><span class="o">,</span><span class="w"> </span><span class="nt">1</span><span class="o">)</span><span class="w"> </span><span class="nt">50</span><span class="o">%,</span><span class="w"> </span><span class="nt">rgba</span><span class="o">(</span><span class="nt">195</span><span class="o">,</span><span class="w"> </span><span class="nt">199</span><span class="o">,</span><span class="w"> </span><span class="nt">217</span><span class="o">,</span><span class="w"> </span><span class="nt">1</span><span class="o">)</span><span class="w"> </span><span class="nt">100</span><span class="o">%);</span> </code></pre></div>