introduction

This simple page is for testing things out: firstly an experiment with using a style sheet in the markdown AND using a design from a book in a Why Not Ascociates book layout. Secondly trying to make that design responsive.

So firstly I couldn’t get the style tag to work in the body of the markdown. I needed to add some settings to the config file.

Some things learned and reminded of. Yes you can use <style> tags within markdown PROVIDED that you have allowed HTML within markdown. This needs to be set within Hugo’s config file using the unsafe key:

[markup]
  [markup.goldmark.renderer]
    unsafe = true

In terms of layout this highlights the difficulties of combining flowing columns using the the CSS column property with grid. Grid requires separate containers for each grid item and thus negates the possibility of flowing text, from say a content page. All the text here is from one content markdown file. The text changes each time it is edited so flowing text between columns is essential.

Knowledge

This project was organic in the sense I made it up as I went along. It would have been much easier had a started with a definite plan of what I was doing. It started as just a fun layout, then I wanted to make it responsive which involved changing almost everything.

Using columns that have to be changed from 2 or more downwards with size necessitates media queries. No way round it.

Using ch as a width can be weird as you get uneven white space.

Time

Make a page reponsive can take considerable time for anything more than a simple layout. Why you can get there in the end I’m not sure how valuable it is in terms of time.

Dolor quia ab beatae ut nemo doloremque et error illo explicabo dolorem ipsum voluptas eaque, natus ratione id, nobis obcaecati saepe. Adipisci laudantium facilis illum maiores, rem quae dolor quam?

This page was based on an image of a layout from a book on Why Not Associates