nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-27 10:43:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
hugo-theme-relearn/exampleSite/content/development/screenshots/_index.en.md
Sören Weber 9b2cc58751
docs: revise dev section #567 
- adding new hook
- restoring lost file
- renaming directory to be more descriptive
2024-10-11 16:47:31 +02:00

2.5 KiB
Raw Blame History

+++ description = "Recipe to create various documentation screenshots" title = "Screenshots" +++

Sometimes screenshots need to be redone. This page explains how to create the different screenshots, tools and settings

Common

Creation:

  • Use English translation
  • Empty search
  • Remove history checkmarks but leave it on the page thats used for the screenshot
  • After resize of the page into the required resolution, reload the page to have all scrollbars in default loading position

Demo Screenshot

Content:

A meaningful full-screen screenshot of an interesting page.

The content should be:

  • timeless: not showing any dates or often edited content
  • interesting: show a bunch of interesting elements like headings, code, etc
  • balanced: no cluttering with overpresent elements or coloring
  • aligned: aligned outlines

Used by:

Page URL: Screenshot Link

Creation:

  • save as images/screenshot.png
  • from original screenshot, scale to 900 x 600 and save as images/tn.png

Remarks:

The locations are mandatory due to Hugo's theme site builder.

Preview images/screenshot.png:

Screenshot

Preview images/tn.png:

tn

Hero Image

Content:

Show the Demo Screenshot page on different devices and different themes. Composition of the different device screenshots into a template.

The content should be:

  • consistent: always use the same page for all devices
  • pleasing: use a delightful background

Used by:

Page URL: Hero Image Link

Creation:

Preview images/hero.png:

Hero