commit bcd903c6ff45b399ca2d56b3fd018aa06cebff8b
parent b5a3883a8aae3dfa3f4e711f7793d3cc49a452c6
Author: Jake Bauer <jbauer@paritybit.ca>
Date: Thu, 28 Mar 2019 02:16:32 -0400
Improve styling for video and audio elements
Styling for video and audio elements should appropriately resize for
smaller screens. Make them do that. (Includes minor change for
making <li> elements with a certain class bold so that they fit with
the rest of a list better.
Diffstat:
3 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/build/base.css b/build/base.css
@@ -48,9 +48,18 @@ button {
video, audio {
width: 27em;
+ max-width: 90%;
border: 5px #585858 groove;
}
+video {
+ height: 16em;
+}
+
+audio {
+ height: 2.3em;
+}
+
ul.inline {
padding: .1em 0 .5em 0;
margin: 0;
@@ -60,6 +69,10 @@ ul.inline {
text-align: center;
}
+.sublist-header {
+ font-weight: bold;
+}
+
#header {
font-family: "Liberation Mono", monospace;
text-align: center;
diff --git a/pages/projects.md b/pages/projects.md
@@ -2,7 +2,7 @@
<ul>
<li><a href="https://git.sr.ht/~jbauer/">My Sourcehut (preferred git service)</a></li>
<li><a href="https://github.com/JakeMBauer/">My GitHub</a></li>
- <li>Dungeons & Dragons
+ <li class="sublist-header">Dungeons & Dragons
<ul>
<li><a href="projects/dnd/dnd-podcast.html">D&D Podcast (We record our sessions!)</a></li>
<li><a href="projects/dnd/roll.html">D&D Simple Dice Roller</a></li>
diff --git a/pages/projects/dnd/dnd-podcast.md b/pages/projects/dnd/dnd-podcast.md
@@ -33,7 +33,7 @@ This is a test recording to ensure that the website functions as expected.
Watch the video (MP4) in your browser:
-<video width="320" height="240" controls>
+<video controls>
<source src="/share/podcasts/e0/test-recording.mp4" type="video/mp4">
Your browser does not support the HTML5 video tag.
</video>
