Advice - Neat title and list page

support
1

:wave:

Greeting~

I’m currently building my personal website, using the Sam huge theme. I’m not technical person, I’m using http://www.giraffeacademy.com/, while getting some help from a friend.

I wanted to keep the list page and title page as neat as possible, as I"d like to have a more readable listing.

After researching the listing, and page layout, I’m still struggling to find a way to make it neat.

Appreciate your advice if you could give some guidance to move forward.

image
image.jpg1231×676 187 KB

Code:

{{ partial "head.html" . }}<body><div class="wrap"><div class="section" id="content"><h1>{{ .Title }}</h1><p>{{ .Content }}</p>{{ range .Data.Pages }}<li>
<a href="{{.Permalink}}">{{.Title}}</a> &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183; &#183;
{{ if .Params.showDate }}
{{ .Date.Format (.Site.Params.dateformArchive | default "Jan 02, 2006")}} {{ end }}</li>{{ end }}</div>{{ if .Site.Params.mainMenu }}<div class="section bottom-menu"><hr/><p>{{ range first 1 .Site.Params.mainMenu }}<a href="{{ .link }}">{{ .text }}</a>{{ end }}
{{ range after 1 .Site.Params.mainMenu }}
&#183; <a href="{{ .link }}">{{ .text }}</a>{{ end }}
&#183; <a href="{{.Site.BaseURL}}">{{ .Site.Params.homepage }}</a></p></div>{{ end }}<div class="section footer">{{ partial "footer.html" . }}</div></div></body>

Here is the WIP -

Thank you very much
:grinning::grinning::grinning:
Be Awesome,
500seeds:

2

Example

Now:

image
image.png718×464 28.7 KB

Future:
image

image

image

3

Your topic is kind of OT in this forum since you are asking about HTML/CSS and not Hugo.

I’ll give you a hint though. To render dot leaders in a Table of Contents see the various techniques at: https://stackoverflow.com/questions/2508732/create-leading-dots-in-css

Regarding the layout of Recent Posts, again you need to structure your HTML in your template and style it to achieve the layout you want.