Cover logo

manual/cover/css/custom.css

@@ -150,6 +150,10 @@ img {
 	margin-top: 25px;
 	padding: 20px;
 }
+.header img.logoImage {
+	  width: 90%;
+	  object-fit: scale-down;
+}
 
 .logo {
 	width: 25px;

manual/cover/index.html

@@ -16,7 +16,7 @@
                     <div class="thumbnail">
                         <div class="content">
                             <div class="header">
-                                <h1 class="title">EPICYON</h1>
+                                <img class="logoImage" src="../../img/logo256.png" />
                                 <p class="subtitle">User Manual</p>
                             </div>
                             <div class="footer">

manual/manual.html

@@ -309,6 +309,10 @@ items.</p>
 the username and password that you previously registered. The first time
 that you log in it will show a series of introduction screens which
 prompt you to add a profile picture, name and bio description.</p>
+<figure>
+<img src="manual-login.png" alt="Login screen" />
+<figcaption aria-hidden="true">Login screen</figcaption>
+</figure>
 <h1 id="account-profiles">Account Profiles</h1>
 <h2 id="initial-setup">Initial setup</h2>
 <p>When you first register an account on the instance the first thing
@@ -516,6 +520,10 @@ between pages using key shortcuts <strong>ALT+SHIFT+&gt;</strong> and
 <strong>ALT+SHIFT+&lt;</strong>. Key shortcuts exist for most navigation
 events, and you can customise them by selecting the <em>key
 shortcuts</em> link at the bottom of the left column.</p>
+<figure>
+<img src="manual-shortcuts.png" alt="Keyboard shortcuts screen" />
+<figcaption aria-hidden="true">Keyboard shortcuts screen</figcaption>
+</figure>
 <h1 id="calendar">Calendar</h1>
 <p>The calendar is not yet a standardized feature of the fediverse as a
 whole, but has existed in Friendica and Zot instances for a long time.
@@ -780,6 +788,10 @@ the changes.</p>
 column of the main timeline you can select the <em>Theme Designer</em>
 icon, which usually resembles a paint roller or paint brush. This allows
 you to change colors and values for user interface components.</p>
+<figure>
+<img src="manual-theme-designer.png" alt="Theme designer screen" />
+<figcaption aria-hidden="true">Theme designer screen</figcaption>
+</figure>
 <h1 id="sharing-economy">Sharing economy</h1>
 <p>This is intended to add <a
 href="https://en.wikipedia.org/wiki/The_Freecycle_Network">Freecycle</a>
@@ -795,6 +807,10 @@ transactions, although prices can optionally be added. There are no
 payment mechanisms implemented and if that is required then it is
 recommended to include details of payment method within the
 description.</p>
+<figure>
+<img src="manual-new-share.png" alt="Adding a new shared item" />
+<figcaption aria-hidden="true">Adding a new shared item</figcaption>
+</figure>
 <h2 id="adding-a-wanted-item">Adding a wanted item</h2>
 <p>This is the opposite to adding a share in that you are making a post
 which indicates that you are wanting some particular thing or

manual/manual.md

@@ -263,6 +263,8 @@ Good defaults tend to be a little more private and avoid the addiction to making
 # Logging in
 In a browser if you navigate to the URL of your instance and enter the username and password that you previously registered. The first time that you log in it will show a series of introduction screens which prompt you to add a profile picture, name and bio description.
 
+![Login screen](manual-login.png)
+
 # Account Profiles
 ## Initial setup
 When you first register an account on the instance the first thing that you may want to do is to add more profile details and change your preferences. From the main timeline screen select the top banner to move to your profile and then select the edit button, which usually looks like a pen and is adjacent to the logout icon.
@@ -394,6 +396,8 @@ As a general principle of navigation selecting the top banner always takes you b
 
 At the bottom of the timeline there will usually be an arrow icon to go to the next page, and a list of page numbers. You can also move between pages using key shortcuts **ALT+SHIFT+>** and **ALT+SHIFT+<**. Key shortcuts exist for most navigation events, and you can customise them by selecting the *key shortcuts* link at the bottom of the left column.
 
+![Keyboard shortcuts screen](manual-shortcuts.png)
+
 # Calendar
 The calendar is not yet a standardized feature of the fediverse as a whole, but has existed in Friendica and Zot instances for a long time. Being able to attach a date and time to a post and then have it appear on your calendar and perhaps also the calendars of your followers is quite useful for organizing things with minimum effort. Until such time as federated calendar functionality becomes more standardized this may only work between Epicyon instances.
 
@@ -571,6 +575,8 @@ Epicyon has multiple standard themes and if you are the administrator then if yo
 ## Theme customization
 If you have the *artist* role then from the top of the left column of the main timeline you can select the *Theme Designer* icon, which usually resembles a paint roller or paint brush. This allows you to change colors and values for user interface components. 
 
+![Theme designer screen](manual-theme-designer.png)
+
 # Sharing economy
 This is intended to add [Freecycle](https://en.wikipedia.org/wiki/The_Freecycle_Network) type functionality within a social network context, leveraging your social connections on the instance, or between participating instances, to facilitate sharing and reduce wasteful consumerism.
 
@@ -579,6 +585,8 @@ When creating a new post one of the scope options is called *shares*. You can de
 
 Sharing is primarily intended to not require any monetary transactions, although prices can optionally be added. There are no payment mechanisms implemented and if that is required then it is recommended to include details of payment method within the description.
 
+![Adding a new shared item](manual-new-share.png)
+
 ## Adding a wanted item
 This is the opposite to adding a share in that you are making a post which indicates that you are wanting some particular thing or service.