Skip to content

Commit 145b402

Browse files
richardg867richardg867
committed
Improve media embed templates
1 parent 1ffac0d commit 145b402

File tree

8 files changed

+64
-36
lines changed

8 files changed

+64
-36
lines changed

‎_includes/image.html‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
<figure class="image">
2-
<a href="{{ include.url }}"><img class="image" src="{{ include.thumbnail | default: include.url }}" /></a>
3-
{% if include.description %}
4-
<figcaption><div class="imagecaption" markdown="block">
5-
{{ include.description }}
6-
</div></figcaption>
7-
{% endif %}
2+
{%- assign thumbnail = include.thumbnail | default: include.url -%}
3+
{%- assign alt = include.alt | default: include.description | normalize_whitespace -%}
4+
{%- if include.url -%}
5+
<a href="{{ include.url }}"
6+
{% if alt %}
7+
title="{{ alt }}"
8+
{% endif %}
9+
>
10+
{%- endif -%}
11+
<img class="image" src="{{ thumbnail }}"
12+
{%- if alt %}
13+
alt="{{ alt }}"
14+
{%- endif -%}
15+
/>
16+
{%- if include.url -%}
17+
</a>
18+
{%- endif -%}
19+
{%- if include.description -%}
20+
<figcaption class="image-caption">
21+
{{- include.description | markdownify -}}
22+
</figcaption>
23+
{%- endif -%}
824
</figure>

‎_includes/imageheading.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
{{ include.separator | default: "<hr />" }}
22
<figure class="image">
3-
<img src="{{ include.url }}" class="heading"
3+
{%- if include.heading %}
4+
<a name="{{ include.heading | slugify }}">
5+
{%- endif %}
6+
<img src="{{ include.url }}" class="heading"
47
{% if include.heading %}
5-
alt="{{ include.heading }}"
8+
alt="{{ include.heading }}"
69
{% endif %}
710
{% if include.tooltip or include.heading %}
8-
title="{{ include.tooltip | default: include.heading }}"
11+
title="{{ include.tooltip | default: include.heading }}"
912
{% endif %}
10-
/>
13+
/>
14+
{%- if include.heading %}
15+
</a>
16+
{%- endif %}
1117
</figure>

‎_includes/youtube.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<div class="image">
2-
<iframe class="youtube" src="https://www.youtube-nocookie.com/embed/{{ include.video }}"><a href="https://www.youtube.com/watch?v={{ include.video }}">[Watch YouTube video]</a></iframe>
3-
{% if include.description %}
4-
<div class="imagecaption" markdown="block">
5-
{{ include.description }}
1+
<figure class="youtube">
2+
<div class="youtube">
3+
<iframe class="youtube" src="https://www.youtube-nocookie.com/embed/{{ include.video }}"><a href="https://www.youtube.com/watch?v={{ include.video }}">[Watch YouTube video]</a></iframe>
64
</div>
7-
{% endif %}
8-
</div>
5+
{%- if include.description -%}
6+
<figcaption class="image-caption">
7+
{{- include.description | markdownify -}}
8+
</figcaption>
9+
{%- endif -%}
10+
</figure>

‎_posts/2021-12-01-86box-v3-0.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ An AC'97 codec implementation was developed by [**richardg867**](https://github.
204204

205205
Due to the way the PCI bus works, PCI-based machines have a limited number of slots to work with, with the exact slot count varying from one machine to the other. In previous versions of 86Box, running out of PCI slots (often an issue with Voodoo 2 SLI setups) resulted in a silent failure; no error message would be shown, and any cards that didn't "fit" simply wouldn't work.
206206

207-
[**richardg867**](https://github.com/richardg867) worked around this limitation by implementing emulation of the **DEC 21150** PCI-PCI bridge. This bridge takes up a single PCI slot and provides 9 more slots; it is automatically deployed whenever the emulated machine runs out of available PCI slots, and works without any additional drivers or setup on the operating system side, although some devices may not work correctly under a bridge, such as the game port built into the Ensoniq AudioPCI sound card on Windows.<a name="linux" />
207+
[**richardg867**](https://github.com/richardg867) worked around this limitation by implementing emulation of the **DEC 21150** PCI-PCI bridge. This bridge takes up a single PCI slot and provides 9 more slots; it is automatically deployed whenever the emulated machine runs out of available PCI slots, and works without any additional drivers or setup on the operating system side, although some devices may not work correctly under a bridge, such as the game port built into the Ensoniq AudioPCI sound card on Windows.
208208

209209

210210
{% include imageheading.html url="/assets/images/v3.0/linux.png" heading="One more thing: Linux is coming" %}

‎_posts/2022-04-20-86box-v3-4.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This is the April 2022 update to 86Box, bringing **macOS support**, bugfixes and
1414

1515
## Now with macOS
1616

17-
Continuing on the cross-platform development effort started during [v3.0]({% post_url 2021-12-01-86box-v3-0 %}#linux) and first released for Linux on [v3.2]({% post_url 2022-02-16-86box-v3-2 %}#now-with-linux), we now provide **Intel macOS** builds of 86Box. These should work on macOS High Sierra 10.13 and newer, natively on Intel Macs and through Rosetta 2 on Apple Silicon Macs. [dob205](https://github.com/dob205) was our main macOS tester, while [**jgilje**](https://github.com/jgilje), [**Cacodemon345**](https://github.com/Cacodemon345) and other contributors did the OS integration work.
17+
Continuing on the cross-platform development effort started during [v3.0]({% post_url 2021-12-01-86box-v3-0 %}#one-more-thing-linux-is-coming) and first released for Linux on [v3.2]({% post_url 2022-02-16-86box-v3-2 %}#now-with-linux), we now provide **Intel macOS** builds of 86Box. These should work on macOS High Sierra 10.13 and newer, natively on Intel Macs and through Rosetta 2 on Apple Silicon Macs. [dob205](https://github.com/dob205) was our main macOS tester, while [**jgilje**](https://github.com/jgilje), [**Cacodemon345**](https://github.com/Cacodemon345) and other contributors did the OS integration work.
1818

1919
As with Linux, there is currently no 86Box manager for macOS, but you can manage emulated machines by **making copies** of `86Box.app` on different places (just dragging it to `/Applications` is currently not recommended); the `roms/` directory (containing the ROM set) must be placed next to the .app ([example](/assets/images/v3.4/roms.png)\), and the emulated machine's files will be saved next to the .app as well.
2020

‎assets/css/style-print.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,6 @@ img.image {
5252
width: auto;
5353
height: auto;
5454
}
55-
div.imagecaption {
56-
display: inline;
57-
}
5855
hr {
5956
border-color: #808080;
6057
width: 100%;

‎assets/css/style-reduced.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ img.heading, img.image {
8585
margin-top: 10pt;
8686
margin-bottom: 5pt;
8787
}
88-
div.imagecaption {
88+
.image-caption {
8989
text-align: center;
9090
margin-bottom: 10pt;
9191
}

‎assets/css/style.css‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,12 @@ div#socialold {
153153
p, ul, ol {
154154
margin: 0.65em 0;
155155
}
156-
.image {
157-
text-align: center;
158-
}
159-
div.image, figure.image {
156+
div.image, figure {
160157
margin-top: 1em;
161158
margin-bottom: 1em;
162159
margin-left: 0px;
163160
margin-right: 0px;
161+
text-align: center;
164162
}
165163
img.heading {
166164
max-width: 100%;
@@ -172,10 +170,7 @@ img.image {
172170
width: auto;
173171
height: auto;
174172
}
175-
div.imagecaption {
176-
display: inline;
177-
}
178-
div.imagecaption > p {
173+
.image-caption > p {
179174
margin-top: 0.5em;
180175
margin-bottom: 0px;
181176
}
@@ -237,14 +232,26 @@ code {
237232
padding-left: 3pt;
238233
padding-right: 3pt;
239234
}
235+
figure.youtube {
236+
237+
}
238+
div.youtube {
239+
position: relative;
240+
overflow: hidden;
241+
max-width: 640px;
242+
margin: 0 auto;
243+
aspect-ratio: 16/9;
244+
}
240245
iframe {
241246
display: block;
242247
border: none;
243248
}
244249
iframe.youtube {
245-
text-align: center;
246-
margin: auto;
247-
width: 640px;
248-
height: 360px;
249-
padding-bottom: 8pt;
250+
position: absolute;
251+
top: 0;
252+
left: 0;
253+
bottom: 0;
254+
right: 0;
255+
width: 100%;
256+
height: 100%;
250257
}

0 commit comments

Comments
 (0)