New HTML5UP theme: Phantom

Hi,

before I submit this theme to themes.gohugo.io I would like to get some feedback.

I ported Phantom from HTMLUP5 to Hugo.

It is my very first theme.

I use it in my tech blog. http://www.hasecke.eu

I would be more than happy to get tips for improving.

Ciao!
juh

3 Likes

Since you are creating a brand new theme, I would consider using the new block/base syntax in Hugo 0.16. With som few templates it would not make too much difference, but it will clean it up a little.

Thanks for this hint. Iā€™ll look at the documentation.

But a quick look at https://gohugo.io/templates/blocks/ gives me no idea what is the advantage of this approach.

It may be in the eye of the beholder, but to me the advantage is obvious, and it becomes even more so when the complexity grows ā€“ it removes the partial include spaghetti and enables fairly well formed HTML templates.

Nice, I like it.

Two ideas (non-tech perspective) :

  1. Have you thought about making your header/logo stick to the top when scrolling? Especially when browsing with a smartphone, I like that. You always have the main page just one tap away (instead of pressing the sandwich menu first), plus people will find it easier to remember your page name when they keep seeing it reading your articles.
  2. In my opinion, the blow view could use some (small) images. You might use the same banners that you use for the article preview on the homepage, but maybe a bit smaller / icon-like

Hope that inspires you somehow!

1 Like

I refactored the theme to make use of block templates.

Good job. Itā€™s great to see all this ports of high-quality themes coming to Hugo.

For a blog I would miss a feature: a way to let users comment on a post. Hugo ships with a template for Disqus. This could be added easily with a oneliner.

Yes integrating Disqus is easy. I donā€™t use Disqus, Google Analytics or any other us-based service, because this is a privacy issue in Europe since Safe Harbour was cancelled.

1 Like

If a user doesnā€™t set his disqus shortname of a tracking id in the config file none of the templates will be included. Therefore, nobody will be tracked or treated as ā€œdigital cash cowā€ unless the site owner decides so.

@bep Is the ā€˜blockā€™ template system a replacement for ā€˜partialsā€™ system?

I am confused because the Go Template Primer still shows the ā€˜partialsā€™ based examples: http://gohugo.io/templates/go-templates/

The only official guide I found on Blocks is this: http://gohugo.io/templates/blocks/

Can you please point to more sources?

Thanks.

No. Partials have been used as ā€œpoor mans blocksā€ in the past. Think of blocks as site structure, partials as ā€¦ reusable snippets?

No. Partials have been used as ā€œpoor mans blocksā€ in the past.

So it should be possible to have layouts completely devoid of Partials if Blocks are planned correctly?

Yes, but partials still have usage.

See docs: Refactor /docs to use the block keyword Ā· gohugoio/hugo@c2bf748 Ā· GitHub

I left the partials in there ā€“ if we add more baseof.html templates in the future, we get less copy-and-paste.

The above is a pretty bad example ā€“ but it gets golden with more complex latyouts with default values in the blocks.

OMG, I hadnā€™t seen the block thing. This is amazing. Iā€™m glad I read this thread!

runs off to refactor all his themes

Hello, very nice template.

i wanted to remove that white cross lines on the tiles, only maintain the opacity without the white cross lines.

How can i do that ?

Thks on advance

What cross lines do you mean?

I am not a css expert, but I think you have to adjust the css files according to your needs.

The cross lines you are asking about are rendered by the following CSS rule .tiles article > .image:after

To get rid of them simply remove the background-image property from the above rule in your themeā€™s CSS.

Thk you onedrawinggperday.

solved.

1 Like

Hello,

i use an background-image on the body to cover all website.
How i make the image to have the same opacity (0.25), when menu is visible ?
i tried to put the image inside the wrapper, but only show half the image.

and also, how i stick the footer on the bottow ?

Thks in advance.

@juh2 who ported this theme to Hugo has answered to you above.

In my previous reply I helped you with your other request.

But this is a Hugo forum for CSS stackoverflow.com is a better place.

2 Likes