change order

issues/_common/header

@@ -23,8 +23,14 @@
     margin:0.75em auto;
 }
 
-#title a {
-    text-decoration: none;
+#bsd {
+    color: red;
+    border-bottom: 1px solid red;
+}
+#open {
+    font-style: italic;
+    color: yellow;
+    border-bottom: 1px solid red;
 }
 
 #banner {
@@ -44,12 +50,12 @@
 
 .permalink {
     color: steelblue;
-    text-decoration: underline;
+    text-decoration: none;
 }
 
 a {
     color:black;
-    text-decoration:underline;
+    text-decoration: none;
 }
 
 .permalink::before { content: "↗ "; }
@@ -76,7 +82,7 @@ body {
     padding-left: 30px;
     padding-right: 30px;
     padding-bottom: 30px;
-    max-width: 80ch;
+    max-width: 1080px;
     border: 1px solid #111;
     background-color: #eee;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@@ -102,33 +108,34 @@ ul {
 
 blockquote {
     position: relative;
-    padding: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 2.2rem;
 }
 
 blockquote:before,
 blockquote:after {
     position: absolute;
     font-size: 4rem;
-    color:rgba(128,128,128,0.5);
+    color: rgba(128,128,128,0.5);
 }
 
 blockquote:before {
     content: open-quote;
     left: -1rem;
-    top: -1rem;
+    top: -1.5rem;
 }
 
 blockquote:after {
     content: close-quote;
-    right: -1rem;
-    bottom: -1rem;
+    text-align: right;
+    width: 100%;
 }
 
 cite {
     font-size: smaller;
     text-align: right;
-    width:100%;
-    display:block;
+    width: 100%;
+    display: block;
 }
 
 @media print {
@@ -145,7 +152,7 @@ cite {
     .permalink { color: deepskyblue; }
     img { border-color: #eee; }
     #banner { border-color:#eee; }
-    a { color:#eee; }
+    a { color: #eee; }
 }
         </style>
     </head>

issues/_index/00_METADATA.html

@@ -1,5 +1,5 @@
 <header>
-<h1 id="title"><a href="https://webzine.puffy.cafe">OpenBSD Webzine</a></h1>
+<h2 id="title"><a href="https://webzine.puffy.cafe"><span id="open">Open</span><span id="bsd">BSD</span> Webzine</a></h2>
 <p id="banner"><span aria-hidden="true">☕</span><em>Your tasty dose of OpenBSD news</em><span aria-hidden="true">☕</span></p>
 </header>
 <main>

issues/_template/00_METADATA.html

@@ -1,5 +1,5 @@
 <header>
-<h2 id="title"><a href="https://webzine.puffy.cafe">OpenBSD Webzine</a></h2>
+<h2 id="title"><a href="https://webzine.puffy.cafe"><span id="open">Open</span><span id="bsd">BSD</span> Webzine</a></h2>
 <div id="banner">
     <p>ISSUE #__ISSUE__</p>
     <p><time datetime="__DATETIME__">__HUMAN_DATE__</time></p>

issues/issue-1/00_METADATA.html

@@ -1,5 +1,5 @@
 <header>
-<h1 id="title"><a href="https://webzine.puffy.cafe">OpenBSD Webzine</a></h1>
+<h2 id="title"><a href="https://webzine.puffy.cafe"><span id="open">Open</span><span id="bsd">BSD</span> Webzine</a></h2>
 <div id="banner">
     <p>ISSUE #__ISSUE__</p>
     <p><time datetime="__DATETIME__">__HUMAN_DATE__</time></p>

issues/issue-1/60_COMMENTS.html

@@ -1,6 +1,6 @@
 <article id="comments">
 <div class="puffies" aria-hidden="true">🐡🐡🐡</div>
 <h2>Reader comments</h2>
-<p>I love the idea of a webzine! <cite>- many people after showing the Webzine mockup</cite></p>
-<p>Please, make an RSS feed! <cite>- anonymous</cite></p>
+<blockquote>I love the idea of a webzine! <cite>- many people after showing the Webzine mockup</cite></blockquote>
+<blockquote>Please, make an RSS feed! <cite>- anonymous</cite></blockquote>
 </article>

issues/issue-2/00_METADATA.html

@@ -1,5 +1,5 @@
 <header>
-<h2 id="title"><a href="https://webzine.puffy.cafe">OpenBSD Webzine</a></h2>
+<h2 id="title"><a href="https://webzine.puffy.cafe"><span id="open">Open</span><span id="bsd">BSD</span> Webzine</a></h2>
 <div id="banner">
     <p>ISSUE #__ISSUE__</p>
     <p><time datetime="__DATETIME__">__HUMAN_DATE__</time></p>

issues/issue-2/40_INTERVIEW.html

@@ -1,4 +1,45 @@
 <article id="interview">
 <div class="puffies" aria-hidden="true">🐡🐡🐡</div>
 <h2>Interview</h2>
+<blockquote>
+    <p>
+OpenBSD is great as an OS, but also for it's side projects. My mail
+server is using OpenSMTPD on OpenBSD. OpenSMTPD is very easy to
+configure compared to other MTA.</p>
+
+<p>
+OpenBSD includes also a lot of various network tools that makes it a
+great choice for routers. At home I set up two APU2 in redundancy as
+personal router, as a commercial box replacement. Everything is
+included: CARP makes it easy to manage IP failover mechanism, of course
+the firewall pf, and other convenient tools like dhcpd and unbound.</p>
+
+<p>BONUS: OpenBSD makes very easy to play beeper music, see <a class="permalink" href="https://man.openbsd.org/spkr.4">spkr(4)</a>.</p>
+
+<p>To play the first notes of Bach's prelude in C minor (BWV 934)
+(transposed to A minor to ease the writing), you need two OpenBSD boxes
+with beepers, and pipe the two following strings on /dev/speaker on both
+computers at the exact same time.</p>
+
+<p>On box 1:
+<pre>oll8
+abc&lt;e&gt;b&lt;d cbacea &lt;d&gt;cbdf&lt;a g+f+eg+bd
+caeac+a da&gt;e&lt;a&gt;f&lt;a bgdgbg cg&gt;d&lt;g&gt;e&lt;g
+afefac gedegc &lt;fedefc bcdbgf
+egcgeg f&gt;c&lt;g&gt;cac gcacb-c l4 acl2f
+l4dl2o4b l4 g&gt;e. l8dcbab cgl4ep
+</pre></p>
+
+<p>On box 2:
+<pre>olo2
+a&gt;ae f&lt;fp p64 &gt;fdb e&lt;ep p64
+a&gt;ag fed p64 &lt;g&gt;gf edc p64
+fao3d ego3c p64 dfd g&lt;gb p64
+c&lt;co2b- agf p64 edc l8 &gt;acfedc
+bdgfed ceag-fe l4 de&lt;e l2c
+</pre></p>
+
+<cite>Guy Godfroy</cite>
+</blockquote>
+
 </article>