Centering of diagrams and other improvements.
authorRichard W.M. Jones <rjones@redhat.com>
Fri, 25 Jan 2019 19:01:28 +0000 (19:01 +0000)
committerRichard W.M. Jones <rjones@redhat.com>
Fri, 25 Jan 2019 19:01:28 +0000 (19:01 +0000)
2019-fosdem/4000-loop-vs-nbd.html
2019-fosdem/4500-about-nbdkit-layers.html
2019-fosdem/4600-about-nbdkit-layers-command.html
2019-fosdem/7400-log-filter-2.html
2019-fosdem/9000-final.html
2019-fosdem/style.css

index abf5bd2..6e74883 100644 (file)
@@ -4,4 +4,6 @@
 
 <h1>How does nbd compare to loop?</h1>
 
-<img src="4000-loop-vs-nbd.svg" width="800" />
+<div class="allcenter">
+  <img src="4000-loop-vs-nbd.svg" width="800"/>
+</div>
index 8ba4783..f8b46d2 100644 (file)
@@ -11,11 +11,11 @@ document.getElementById("filter1-cow").classList.add("highlighted")
 
 filters("2")
 
-document.getElementById("filter2-delay").classList.add("highlighted")
+document.getElementById("filter2-partition").classList.add("highlighted")
 
 filters("3")
 
-document.getElementById("filter3-partition").classList.add("highlighted")
+document.getElementById("filter3-xz").classList.add("highlighted")
 
 plugins()
 
index b62ef6d..7530d59 100644 (file)
@@ -11,36 +11,43 @@ document.getElementById("filter1-cow").classList.add("highlighted")
 
 filters("2")
 
-document.getElementById("filter2-delay").classList.add("highlighted")
+document.getElementById("filter2-partition").classList.add("highlighted")
 
 filters("3")
 
-document.getElementById("filter3-partition").classList.add("highlighted")
+document.getElementById("filter3-xz").classList.add("highlighted")
 
 plugins()
 
 document.getElementById("plugin-file").classList.add("highlighted")
 </script>
 
-<pre
+<style>
+pre.over {
+    color: white;
+    font-size: 28pt;
+    font-weight: bold;
+}
+</style>
+
+<pre class="outline over"
 style="position: absolute;
        top: 80px;
-       left: 850px;"
->nbdkit --filter=cow \</pre>
-<pre
+       left: 30%;"
+>nbdkit --filter=cow</pre>
+<pre class="outline over"
 style="position: absolute;
        top: 280px;
-       left: 850px;"
->       --filter=delay \</pre>
-<pre
+       left: 30%;"
+>       --filter=partition</pre>
+<pre class="outline over"
 style="position: absolute;
        top: 480px;
-       left: 850px;"
->       --filter=partition \</pre>
-<pre
+       left: 30%;"
+>       --filter=xz</pre>
+<pre class="outline over"
 style="position: absolute;
        top: 680px;
-       left: 850px;"
->       file disk.img \<br/>
-       partition=1 \<br/>
-       rdelay=20ms</pre>
+       left: 30%;"
+>       file disk.xz<br/>
+            partition=1</pre>
index be116c0..b16cd4b 100644 (file)
@@ -8,5 +8,8 @@
 nbdkit --filter=log <i>[...]</i> logfile=/tmp/log
 </pre>
 
-<!--<img src="7400-testing-log-2.svg" width="900" />-->
-<img src="7400-testing-log-2.svg.png" />
+<div class="allcenter">
+  <!--<img src="7400-log-filter-2.svg" width="900" />-->
+  <!-- Webkit can't render arrows in SVG, so ... -->
+  <img src="7400-log-filter-2.svg.png" />
+</div>
index 785a61c..dfab933 100644 (file)
@@ -9,7 +9,7 @@
 <li> Loop mounts with NBD and nbdkit &mdash; infinitely flexible.
 <li> Lots of plugins, or write your own.
 <li> Filesystem development and testing.
-<li> Bridge between proprietary disk storage &amp; hypervisors, and
+<li> Bridge between proprietary disk storage/hypervisors, and
 the free world.
 </ul>
 
@@ -17,6 +17,8 @@ the free world.
 
 <ul>
 <li> nbdkit &ge; 1.8.1 now available in all major Linux distros.
+<li> FreeBSD, OpenBSD, Haiku also supported as a server <small>(but
+those don't have kernel loop clients)</small>.
 <li> nbd client &ge; 3.18 and kernel &ge; 4.18 recommended.
 <li> <a href="https://github.com/libguestfs/nbdkit">https://github.com/libguestfs/nbdkit</a>
 <li> This talk: <a href="http://git.annexia.org/?p=libguestfs-talks.git">http://git.annexia.org/?p=libguestfs-talks.git</a>
index 0244be7..9c6a9da 100644 (file)
@@ -81,6 +81,8 @@ div.plugins {
     background: #f8f8ff;
     border: 1px solid rgb(204,0,0);
     border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
     width: 800px;
     height: 400px;
     /* Position relative is needed so that items may be
@@ -126,6 +128,8 @@ div.filters {
     background: #f8fff8;
     border: 1px solid rgb(204,0,0);
     border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
     width: 800px;
     height: 200px;
     /* Position relative is needed so that items may be
@@ -165,3 +169,69 @@ div.filters ul li.highlighted {
     border-radius: 20px;
     font-weight: bold;
 }
+
+/* For images which must be centered on the page. */
+div.allcenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50vw;
+}
+
+div.all-center img {
+}
+
+/* Outlined text. */
+.outline {
+    text-shadow: 2px 2px 0 rgb(204,0,0),
+                 -2px 2px 0 rgb(204,0,0),
+                 2px -2px 0 rgb(204,0,0),
+                 -2px -2px 0 rgb(204,0,0),
+                 0px 2px 0 rgb(204,0,0),
+                 0px -2px 0 rgb(204,0,0),
+                 -2px 0px 0 rgb(204,0,0),
+                 2px 0px 0 rgb(204,0,0),
+                 4px 4px 0 rgb(204,0,0),
+                 -4px 4px 0 rgb(204,0,0),
+                 4px -4px 0 rgb(204,0,0),
+                 -4px -4px 0 rgb(204,0,0),
+
+                 0px 4px 0 rgb(204,0,0),
+                 0px -4px 0 rgb(204,0,0),
+                 -4px 0px 0 rgb(204,0,0),
+                 4px 0px 0 rgb(204,0,0),
+                 2px 4px 0 rgb(204,0,0),
+                 -2px 4px 0 rgb(204,0,0),
+                 2px -4px 0 rgb(204,0,0),
+                 -2px -4px 0 rgb(204,0,0),
+                 4px 2px 0 rgb(204,0,0),
+                 -4px 2px 0 rgb(204,0,0),
+                 4px -2px 0 rgb(204,0,0),
+                 -4px -2px 0 rgb(204,0,0),
+
+                 4px 4px 0 rgb(255,128,128),
+                 -4px 4px 0 rgb(255,128,128),
+                 4px -4px 0 rgb(255,128,128),
+                 -4px -4px 0 rgb(255,128,128),
+                 0px 4px 0 rgb(255,128,128),
+                 0px -4px 0 rgb(255,128,128),
+                 -4px 0px 0 rgb(255,128,128),
+                 4px 0px 0 rgb(255,128,128),
+                 8px 8px 0 rgb(255,128,128),
+                 -8px 8px 0 rgb(255,128,128),
+                 8px -8px 0 rgb(255,128,128),
+                 -8px -8px 0 rgb(255,128,128),
+
+                 0px 8px 0 rgb(255,128,128),
+                 0px -8px 0 rgb(255,128,128),
+                 -8px 0px 0 rgb(255,128,128),
+                 8px 0px 0 rgb(255,128,128),
+                 4px 8px 0 rgb(255,128,128),
+                 -4px 8px 0 rgb(255,128,128),
+                 4px -8px 0 rgb(255,128,128),
+                 -4px -8px 0 rgb(255,128,128),
+                 8px 4px 0 rgb(255,128,128),
+                 -8px 4px 0 rgb(255,128,128),
+                 8px -4px 0 rgb(255,128,128),
+                 -8px -4px 0 rgb(255,128,128);
+}