Skip to content

Commit 91e1288

Browse files
committed
Fix image alignment issues in software pages.
1 parent 6bb49e2 commit 91e1288

File tree

10 files changed

+38
-44
lines changed

10 files changed

+38
-44
lines changed

_software/aboutbox.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ <h2 class="panel-title">
2929
<p>
3030
This non-visual component encapsulates an About Box. When displayed the About Box appears like this:
3131
</p>
32-
<p class="text-center">
33-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/aboutbox.png" alt="Vista screenshot of About dialog box" title="About dialog box" class="scale" />
32+
<p>
33+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/aboutbox.png" alt="Vista screenshot of About dialog box" title="About dialog box" class="scale center-block" />
3434
</p>
3535
<p>
3636
The dialogue box can either display information stored in its properties or from the host program's version information resources.

_software/boobytrap.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,12 @@ <h2 class="panel-title">
4646
<p>
4747
<em>BoobyTrap!</em> is a clone of the Minesweeper game, programmed in Delphi Pascal. The program has user-definable play areas and has high score tables.
4848
</p>
49-
<div class="text-center">
50-
<p>
51-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/boobytrap.png" alt="Screenshot of BoobyTrap! v1.1.2 running on Windows 7" title="BoobyTrap! v1.1.2 running on Windows 7"/>
52-
</p>
53-
<p class="small text-smallcaps">
54-
<em>BoobyTrap! v1.1.2 running on Windows 7.</em>
55-
</p>
56-
</div>
49+
<p>
50+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/boobytrap.png" alt="Screenshot of BoobyTrap! v1.1.2 running on Windows 7" title="BoobyTrap! v1.1.2 running on Windows 7"/>
51+
</p>
52+
<p class="small text-smallcaps text-center">
53+
<em>BoobyTrap! v1.1.2 running on Windows 7.</em>
54+
</p>
5755
</div>
5856
</section>
5957

_software/cmenu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ <h2 class="panel-title">
127127
A component editor (accessed from a mouse menu when the component is selected) that gives easy access to all the component's main properties. Here is a screenshot of the component editor:
128128
</p>
129129
<p>
130-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/cmenu-4.gif" alt="Screenshot of colour menu component editor" title="Colour menu component editor" />
130+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/cmenu-4.gif" alt="Screenshot of colour menu component editor" title="Colour menu component editor" />
131131
</p>
132132
</li>
133133
<li>

_software/hkeype.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,12 @@ <h2 class="panel-title">
6060
<p>
6161
Here is a screen-shot of the property editor in use in the Delphi 4 object inspector:
6262
</p>
63-
<div class="text-center">
64-
<p>
65-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/hkeype.gif" alt="HKEY Property Editor Screen Shot" title="HKEY Property Editor Screen Shot" />
66-
</p>
67-
<p class="small text-smallcaps">
68-
Delphi 4 object inspector displaying HKEY property editor.
69-
</p>
70-
</div>
63+
<p>
64+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/hkeype.gif" alt="HKEY Property Editor Screen Shot" title="HKEY Property Editor Screen Shot" />
65+
</p>
66+
<p class="small text-smallcaps text-center">
67+
Delphi 4 object inspector displaying HKEY property editor
68+
</p>
7169
</section>
7270

7371
<section class="panel panel-default">

_software/life.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ <h2 class="panel-title">
4343
<p>
4444
This program demonstrates John Conway's <em>Game of Life</em> on a 21&times;21 grid. Rules for cellular automata other than the <em>Game of Life</em> can also be created and used.
4545
</p>
46-
<p class="text-center">
47-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/life.png" alt="Game of Life v5.2.0" title="Game of Life v5.2.0" />
46+
<p>
47+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/life.png" alt="Game of Life v5.2.0" title="Game of Life v5.2.0" />
4848
</p>
4949
<p>
5050
A user manual is included with the program that explains how to use it. This manual can be displayed in the user's default web browser by clicking the program's Help button.

_software/menusbtn.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ <h4>
6868
</h4>
6969
<!-- TODO: try to create a responsive class to float images right on larger screen and centre them above text on phones -->
7070
<div class="clearfix">
71-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/menusb-1.gif" alt="TPJMenuSpeedButton example" title="TPJMenuSpeedButton example" class="pull-right-xs" />
71+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/menusb-1.gif" alt="TPJMenuSpeedButton example" title="TPJMenuSpeedButton example" class="pull-right-xs center-block" />
7272
<p>
7373
When this speed button is clicked it displays an associated pop-up menu.
7474
</p>
@@ -84,7 +84,7 @@ <h4>
8484
TPJLinkedSpeedButton
8585
</h4>
8686
<div class="clearfix">
87-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/menusb-2.gif" alt="TPJLinkedSpeedButton example" title="TPJLinkedSpeedButton example" class="pull-right-xs" />
87+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/menusb-2.gif" alt="TPJLinkedSpeedButton example" title="TPJLinkedSpeedButton example" class="pull-right-xs center-block" />
8888
<p>
8989
This speed button can link to and control a slave button that itself controls a pop-up menu.
9090
</p>
@@ -106,7 +106,7 @@ <h4>
106106
TPJLinkedMenuSpeedButton
107107
</h4>
108108
<div class="clearfix">
109-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/menusb-3.gif" alt="TPJLinkedMenuSpeedButton example" title="TPJLinkedMenuSpeedButton example" class="pull-right-xs" />
109+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/menusb-3.gif" alt="TPJLinkedMenuSpeedButton example" title="TPJLinkedMenuSpeedButton example" class="pull-right-xs center-block" />
110110
<p>
111111
This component functions like a <var>TPJMenuSpeedButton</var> but can be linked to, and controlled by, a <var>TPJLinkedSpeedButton</var>. By default this button is narrow and displays a down arrow glyph. The button &quot;sticks&quot; to the right hand side of the controlling button and moves with it.
112112
</p>

_software/mtdwiz.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ <h2 class="panel-title">
4949
Delphi 7 introduced a macro recording toolbar that can be used to record and play back macros. The toolbar was to be displayed in the bottom left of the editor's status bar. However, the toolbar was hidden in the release version, leaving an empty space in the first panel of the status bar as the following image shows.
5050
</p>
5151

52-
<p class="text-center">
53-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/mtdwiz-1.png" alt="Delphi Editor without macro toolbar" title="Delphi Editor without macro toolbar" />
52+
<p>
53+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/mtdwiz-1.png" alt="Delphi Editor without macro toolbar" title="Delphi Editor without macro toolbar" />
5454
</p>
5555
<p>
5656
This wizard causes the hidden toolbar to be displayed in each open edit window:
5757
</p>
58-
<p class="text-center">
59-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/mtdwiz-2.png" alt="Delphi Editor with macro toolbar" title="Delphi Editor with macro toolbar" />
58+
<p>
59+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/mtdwiz-2.png" alt="Delphi Editor with macro toolbar" title="Delphi Editor with macro toolbar" />
6060
</p>
6161
<p>
6262
The Wizard also adds a new <em>Display Macro Toolbar</em> menu item to the end of Delphi's <em>View</em> menu that toggles the toolbar on and off.

_software/queens.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,12 @@ <h2 class="panel-title">
4949
<p>
5050
This program calculates and displays all possible solutions of the &quot;eight queens problem&quot;. This problem asks how many different ways eight queens can be placed on a chess board so that no queen can capture any other.
5151
</p>
52-
<div class="text-center">
53-
<p>
54-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/8queens.png" alt="Screenshot of 8 Queens Problem Solver program" title="8 Queens Problem Solver"/>
55-
</p>
56-
<p class="small text-smallcaps">
57-
<em>8 Queens Problem Solver v4.1.1 running in manual mode on Windows 10.1.</em>
58-
</p>
59-
</div>
52+
<p>
53+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/8queens.png" alt="Screenshot of 8 Queens Problem Solver program" title="8 Queens Problem Solver"/>
54+
</p>
55+
<p class="small text-smallcaps text-center">
56+
<em>8 Queens Problem Solver v4.1.1 running in manual mode on Windows 10.1.</em>
57+
</p>
6058
<p>
6159
A user guide, in PDF format, is included with the program.
6260
</p>

_software/sib.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ <h2 class="panel-title">
4646
<p>
4747
Install programs are created using <em>SIBuilder's</em> Wizard style interface, as below.
4848
</p>
49-
<p class="text-center">
50-
<img class="scale" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/sib.gif" alt="SIBuilder's Project Details page" title="SIBuilder's Project Details page"/>
49+
<p>
50+
<img class="scale center-block" src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/sib.gif" alt="SIBuilder's Project Details page" title="SIBuilder's Project Details page"/>
5151
</p>
5252
<p>
5353
For more information please download the program's <a href="https://drive.google.com/file/d/0B8qEVqTUMgmJQ1BNWldvUzd6REE/view?usp=sharing">help file</a> or <a href="https://drive.google.com/file/d/0B8qEVqTUMgmJMkNVTVFsdVJfR2c/view?usp=sharing">tutorial</a>.

_software/stringpe.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,20 +83,20 @@ <h3 data-toggle="collapse" data-target="#screenshots" class="collapsible collaps
8383
<p>
8484
Our first screen shot is of the extended string editor dialogue box, called from Delphi 2010, displaying a two line string.
8585
</p>
86-
<p class="text-center">
87-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-1.png" alt="Extended String Property Editor Screen Shot" title="Extended String Property Editor" class="scale" />
86+
<p>
87+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-1.png" alt="Extended String Property Editor Screen Shot" title="Extended String Property Editor" class="scale center-block" />
8888
</p>
8989
<p>
9090
The second screen shot shows the object inspector displaying a multi-line string in a label's caption. This caption has been entered using the extended string property editor. The ellipsis button displays the editor when clicked.
9191
</p>
92-
<p class="text-center">
93-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-2.png" alt="Object Inpsector Screen Shot" title="Object Inspector showing elipsis leading to property editor" class="scale" />
92+
<p>
93+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-2.png" alt="Object Inpsector Screen Shot" title="Object Inspector showing elipsis leading to property editor" class="scale center-block" />
9494
</p>
9595
<p>
9696
As can be seen above we are editing a <var>TLabel</var>. The final screenshot shows the label on a form at design time, displaying the two lines of text.
9797
</p>
98-
<p class="text-center">
99-
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-3.png" alt="Form screen shot" title="Two line label in form" class="scale" />
98+
<p>
99+
<img src="{{ site.base-url }}{{ site.data.core.software-images-base-url}}/stringpe-3.png" alt="Form screen shot" title="Two line label in form" class="scale center-block" />
100100
</p>
101101
</div> <!-- /#screenshots -->
102102
</div>

0 commit comments

Comments
 (0)