Retro/pcjs
Watch
1
0
Fork
You've already forked pcjs
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved screenshot styling

Browse source
This commit is contained in:
Jeff Parsons 2015-12-14 09:33:28 -08:00
commit 956c4506c1
5 changed files with 46 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -39,14 +39,14 @@ Demos
--- ---
Some pre-configured machines are shown below, ready to run BASIC, DOS, Windows 1.01, and assorted non-DOS software. Some pre-configured machines are shown below, ready to run BASIC, DOS, Windows 1.01, and assorted non-DOS software.
[<img src="/devices/pc/machine/5150/cga/64kb/donkey/thumbnail.jpg" width="200" height="100" alt="IBM PC running DONKEY.BAS"/>](/devices/pc/machine/5150/cga/64kb/donkey/) {% include screenshot.html src="/devices/pc/machine/5150/cga/64kb/donkey/thumbnail.jpg" width="200" height="100" title="IBM PC running DONKEY.BAS" link="/devices/pc/machine/5150/cga/64kb/donkey/" %}
[<img src="/devices/pc/machine/5160/cga/256kb/demo/thumbnail.jpg" width="200" height="100" alt="IBM PC XT w/CGA, 10Mb Hard Drive"/>](/devices/pc/machine/5160/cga/256kb/demo/) {% include screenshot.html src="/devices/pc/machine/5160/cga/256kb/demo/thumbnail.jpg" width="200" height="100" title="IBM PC XT w/CGA, 10Mb Hard Drive" link="/devices/pc/machine/5160/cga/256kb/demo/" %}
[<img src="/devices/pc/machine/5160/cga/256kb/win101/thumbnail.jpg" width="200" height="100" alt="IBM PC XT w/CGA, Windows 1.01"/>](/devices/pc/machine/5160/cga/256kb/win101/) {% include screenshot.html src="/devices/pc/machine/5160/cga/256kb/win101/thumbnail.jpg" width="200" height="100" title="IBM PC XT w/CGA, Windows 1.01" link="/devices/pc/machine/5160/cga/256kb/win101/" %}
[<img src="/devices/pc/machine/5160/ega/640kb/win101/thumbnail.jpg" width="200" height="100" alt="IBM PC XT w/EGA, Windows 1.01"/>](/devices/pc/machine/5160/ega/640kb/win101/) {% include screenshot.html src="/devices/pc/machine/5160/ega/640kb/win101/thumbnail.jpg" width="200" height="100" title="IBM PC XT w/EGA, Windows 1.01" link="/devices/pc/machine/5160/ega/640kb/win101/" %}
[<img src="/disks/pc/os2/ibm/1.0/thumbnail.jpg" width="200" height="100" alt="IBM PC AT w/EGA, OS/2 1.0"/>](/disks/pc/os2/ibm/1.0/) {% include screenshot.html src="/disks/pc/os2/ibm/1.0/thumbnail.jpg" width="200" height="100" title="IBM PC AT w/EGA, OS/2 1.0" link="/disks/pc/os2/ibm/1.0/" %}
[<img src="/disks/pc/cpm/1.1b/thumbnail.jpg" width="200" height="100" alt="IBM PC w/MDA, CP/M-86"/>](/disks/pc/cpm/1.1b/) {% include screenshot.html src="/disks/pc/cpm/1.1b/thumbnail.jpg" width="200" height="100" title="IBM PC w/MDA, CP/M-86" link="/disks/pc/cpm/1.1b/" %}
[<img src="/disks/pc/games/microsoft/adventure/thumbnail.jpg" width="200" height="100" alt="IBM PC w/MDA, Microsoft Adventure"/>](/disks/pc/games/microsoft/adventure/) {% include screenshot.html src="/disks/pc/games/microsoft/adventure/thumbnail.jpg" width="200" height="100" title="IBM PC w/MDA, Microsoft Adventure" link="/disks/pc/games/microsoft/adventure/" %}
[<img src="/disks/pc/games/infocom/zork1/thumbnail.jpg" width="200" height="100" alt="IBM PC w/CGA, Zork I"/>](/disks/pc/games/infocom/zork1/) {% include screenshot.html src="/disks/pc/games/infocom/zork1/thumbnail.jpg" width="200" height="100" title="IBM PC w/CGA, Zork I" link="/disks/pc/games/infocom/zork1/" %}
Check out the rest of the PCjs [Application](/apps/pc/), [Boot Disk](/disks/pc/) and [Machine](/devices/pc/machine/) Check out the rest of the PCjs [Application](/apps/pc/), [Boot Disk](/disks/pc/) and [Machine](/devices/pc/machine/)
demos, including an [IBM PC Dual Display System](/devices/pc/machine/5150/dual/64kb/) demo of multiple monitor support, demos, including an [IBM PC Dual Display System](/devices/pc/machine/5150/dual/64kb/) demo of multiple monitor support,

8
_includes/screenshot.html Normal file
View file

@ -0,0 +1,8 @@
<div class="screenshot-frame">
<div class="screenshot-image">
<a href="{{ site.baseurl }}{{ include.link }}">
<img src="{{ site.baseurl }}{{ include.src }}" width="{{ include.width }}" height="{{ include.height }}" alt="{{ include.title }}"/>
</a>
</div>
<span class="screenshot-label">{{ include.title }}</span>
</div>

2
_posts/2014-09-02-minor-fixes-and-additions.md
View file

@ -6,7 +6,7 @@ category: Releases
permalink: /blog/2014/09/02/ permalink: /blog/2014/09/02/
--- ---
The following fixes were made in PCjs v1.15.1: The following fixes were made in PCjs v1.15.1
1. Using the "User-defined URL" option when loading a disk image from a 3rd-party server was broken if the URL 1. Using the "User-defined URL" option when loading a disk image from a 3rd-party server was broken if the URL
contained certain special characters; that should be fixed now, but be aware that only web servers (ie, URLs contained certain special characters; that should be fixed now, but be aware that only web servers (ie, URLs

19
_sass/_base.scss
View file

@ -202,3 +202,22 @@ pre {
} }
} }
} }
/**
* Screenshot links
*/
.screenshot-frame {
display: inline-block;
margin: 8px;
text-align: center;
}
.screenshot-image {
padding: 5px;
border: 1px solid black;
border-radius: 5px;
background-color: #FAEBD7;
}
.screenshot-label {
font-size: x-small;
}

8
notes.md
View file

@ -158,6 +158,12 @@ Although I created image.html in the **_includes** folder, so that I could do th
instead of this: instead of this:
[<img src="{{ site.baseurl }}/devices/pc/machine/5150/cga/64kb/donkey/thumbnail.jpg" width="200" height="100"/>](/devices/pc/machine/5150/cga/64kb/donkey/ "IBM PC running DONKEY.BAS") [<img src="/devices/pc/machine/5150/cga/64kb/donkey/thumbnail.jpg" width="200" height="100"/>](/devices/pc/machine/5150/cga/64kb/donkey/ "IBM PC running DONKEY.BAS")
I decided to stick with the latter, since it has a better chance of rendering as normal Markdown. I decided to stick with the latter, since it has a better chance of rendering as normal Markdown.
Technically, the URLs in the latter should include:
{{ site.baseurl }}
but since I'm using a custom domain name (http://pcjs.net instead of http://jeffpar.github.io/pcjs), it's not necessary.