tReplace <span> with <em> for captions - monochromatic - monochromatic blog: http://blog.z3bra.org
(HTM) git clone git://z3bra.org/monochromatic
(DIR) Log
(DIR) Files
(DIR) Refs
---
(DIR) commit f19390275e984e18ad0f4acffa13d92b4870fc52
(DIR) parent c263ee39a4d9b00dd9f3c9fe8a0e9f2a226e8227
(HTM) Author: Willy Goiffon <contact@z3bra.org>
Date: Mon, 23 Dec 2019 14:07:47 +0100
Replace <span> with <em> for captions
Diffstat:
M 2013/08/test-your-css.txt | 4 ++--
M 2013/10/home-sweet-home.txt | 24 ++++++++++++------------
M 2014/01/images-in-terminal.txt | 4 ++--
M 2014/04/meeting-at-the-bar.txt | 8 ++++----
M 2014/04/pop-it-up.txt | 8 ++++----
M 2014/05/grok-that-workflow.txt | 12 ++++++------
M 2014/11/avoid-workspaces.txt | 4 ++--
M 2014/12/so-tox-me-maybe.txt | 8 ++++----
M 2015/01/you-are-the-wm.txt | 4 ++--
M 2016/01/make-your-own-distro.txt | 13 +++++++------
M 2016/09/pack-it-up.txt | 4 ++--
M monochrome.css | 5 ++---
12 files changed, 49 insertions(+), 49 deletions(-)
---
(DIR) diff --git a/2013/08/test-your-css.txt b/2013/08/test-your-css.txt
t@@ -23,8 +23,8 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
### Images
[](http://pub.z3bra.org/monochromatic/img/2013-08-ratpoison.jpg)
-<span class='caption'>Ratpoison screenshot
-Uses "ratpoison -c set border 28" to make the shot sexier</span>
+*Ratpoison screenshot
+Uses "ratpoison -c set border 28" to make the shot sexier*
### Tables and code
<table>
(DIR) diff --git a/2013/10/home-sweet-home.txt b/2013/10/home-sweet-home.txt
t@@ -87,8 +87,8 @@ to look the way you want. Use stuff like [librgba](http://gnome-look.org/content
even prettier!
[](http://pub.z3bra.org/monochromatic/img/2013-10-28-cwm.jpg)
-<span class='caption'>Here is a quick CWM setup, using compton and
-librgba</span>
+*Here is a quick CWM setup, using compton and
+librgba*
Oh! A last advice, **do not bind applications through your WM**. Using an
application like [xbindkeys](http://www.nongnu.org/xbindkeys/xbindkeys.html) to
t@@ -231,9 +231,9 @@ So, we have seen how to tweak the terminal, let's see what it looks like!
I wrote a small script for the purpose:
[](http://pub.z3bra.org/monochromatic/img/2013-10-28-term.jpg)
-<span class='caption'>A terminal running the script
+*A terminal running the script
[info.sh](http://pub.z3bra.org/monochromatic/misc/info.sh) that dump 16
-colors along system informations</span>
+colors along system informations*
<h3 id='sh'>Shell</h3>
t@@ -296,8 +296,8 @@ And my old zsh prompt:
RPROMPT="%{$fg[black]%}%M:%{$fg_bold[yellow]%}%~%{$reset_color%} "
[](http://pub.z3bra.org/monochromatic/img/2013-10-28-shell.jpg)
-<span class='caption'>A few different prompts, from top to bottom: sh, zsh,
-bash, zsh</span>
+*A few different prompts, from top to bottom: sh, zsh,
+bash, zsh*
<h3 id='cli'>CLI tools</h3>
t@@ -328,12 +328,12 @@ As an alternative, take a look at [emacs](https://www.gnu.org/software/emacs/),
[Alpine](http://sourceforge.net/projects/re-alpine/).
[](http://pub.z3bra.org/monochromatic/img/2013-10-28-cli.jpg)
-<span class='caption'>Mandatory screenshot of the setup with those apps (and
+*Mandatory screenshot of the setup with those apps (and
custom themes).
top-left: **vim**
top-right: **mutt**
bottom-left: **tmux**
-bottom-right: **irssi**</span>
+bottom-right: **irssi***
<h3 id='bar'>Status bar</h3>
t@@ -364,10 +364,10 @@ And there you go! You can achieve really great looking stuff with that simple
process:
[](http://pub.z3bra.org/monochromatic/img/2013-10-28-bar.jpg)
-<span class='caption'>You can also choose to put your status bar within a
+*You can also choose to put your status bar within a
terminal multiplexer status bar,
[as phyrne suggested](http://calummacrae.blogspot.fr/2012/12/dropping-status-bars-for-tmux-as-im.html)
-in one of his blog post</span>
+in one of his blog post*
<h3 id='setup'>Integration</h3>
t@@ -441,8 +441,8 @@ Finally, here is my own xinitrc
wm $1
[](http://pub.z3bra.org/monochromatic/img/2013-10-28-final.jpg)
-<span class='caption'>That shot show off the whole setup, with prompt, bar,
-applications, etc... I hope you will like it!</span>
+*That shot show off the whole setup, with prompt, bar,
+applications, etc... I hope you will like it!*
### Conclusion
(DIR) diff --git a/2014/01/images-in-terminal.txt b/2014/01/images-in-terminal.txt
t@@ -115,9 +115,9 @@ the ranger source, I ended up with this line:
**BOOM !** [It works!](http://chezmoicamarche.com)
[](http://pub.z3bra.org/monochromatic/img/w3mimgdisplay-crap.jpg)
-<span class='caption'>The result of the previous command. Our picture drawn in
+*The result of the previous command. Our picture drawn in
200x100px, at offset +0+0 in the terminal. I'm sure you're already trying it
-;)</span>
+;)*
### the wrapping
(DIR) diff --git a/2014/04/meeting-at-the-bar.txt b/2014/04/meeting-at-the-bar.txt
t@@ -538,13 +538,13 @@ you find neat tricks to improve the performances of the functions listed above,
feel free to mail me these, I'll be glad to modify them!
[](http://pub.z3bra.org/monochromatic/img/2014-04-02-barmk.png)
-<span class='caption'>Before leaving you, here is what I got using this script
-(with some tweaks, see the `diff` output)</span>
+*Before leaving you, here is what I got using this script
+(with some tweaks, see the `diff` output)*
-<span class='caption'>Oh, and for reference. It tried to get the same result
+*Oh, and for reference. It tried to get the same result
with conky and barmk, just to see the difference. Note how conky does not
display float numbers (for CPU). Also, I was not able to recreate a desktop bar with conky, so I "downgraded"
-the barmk script to make the battle more fair.</span>[](http://pub.z3bra.org/monochromatic/img/2014-04-10-conky-mkbar.png)
+the barmk script to make the battle more fair.*[](http://pub.z3bra.org/monochromatic/img/2014-04-10-conky-mkbar.png)
Now go ahead, and watch how your computer tell you how he (or she) feels...
Isn't that **amazing** ?!
(DIR) diff --git a/2014/04/pop-it-up.txt b/2014/04/pop-it-up.txt
t@@ -93,8 +93,8 @@ After that, you can style it to make it look like you want:
(echo " $@"; sleep ${duration}) | bar ${baropt}
[](http://pub.z3bra.org/monochromatic/img/2014-04-29-popup-simple.png)
-<span class='caption'>The simple script above, started with a random text.
-It's my upper left hand-corner</span>
+*The simple script above, started with a random text.
+It's my upper left hand-corner*
Obviously, that's not an informative popup at all (is it?). All you need now is
to write some simple script to grab the informations you will need to display in
t@@ -304,11 +304,11 @@ alternative to those, as I like to have :)
[](http://pub.z3bra.org/monochromatic/img/2014-04-30-popup-showoff.png)
-<span class="caption">Here is a little show case of what you can achieve. I
+*Here is a little show case of what you can achieve. I
used `stlarch_font` for the icon.
the first popup is the volume bar. It goes red when it's muted.
Next is a new mail (spawned via `touch $MAIL/new/shblah`). And finally, the
battery level, bound to a key for the purpose of the gif. Otherwise it only
-shows up under 15% (written in red)</span>
+shows up under 15% (written in red)*
Enjoy!
(DIR) diff --git a/2014/05/grok-that-workflow.txt b/2014/05/grok-that-workflow.txt
t@@ -53,11 +53,11 @@ Here is a typical crux workflow:
[](http://pub.z3bra.org/monochromatic/img/2014-05-26-prtutils.gif)
-<span class='caption'>Here is a show case of a package installation under crux.
+*Here is a show case of a package installation under crux.
[prtmk](http://git.z3bra.org/scripts/files/prtmk.html) is a small script I
wrote that will create `Pkgfile`s using templates. Once the Pkgfile is created,
you just need to download, compile the sources and install the package. Pretty
-easy :)</span>
+easy :)*
<h3 id='wm'>Managing windows</h3>
My window manager of choice is venam's [2bwm](https://github.com/venam/2bwm).
t@@ -87,9 +87,9 @@ Here is how my keybinds are organised:
[](http://pub.z3bra.org/monochromatic/img/2014-05-27-windows.gif)
-<span class='caption'>Here are the movements I use on a daily basis. There are
+*Here are the movements I use on a daily basis. There are
more features, but that's the one I use the most (other are just combination of
-those)</span>
+those)*
#### Managing groups
t@@ -118,8 +118,8 @@ behavior with a hotkey !
[](http://pub.z3bra.org/monochromatic/img/2014-05-27-groups.gif)
-<span class='caption'>Showing the two behavior: workspaces VS. groups. Each
-windows holds the number of the group it's sitting on</span>
+*Showing the two behavior: workspaces VS. groups. Each
+windows holds the number of the group it's sitting on*
<h3 id='sh'>Scripting the shell</h3>
The shell is a really powerfull toy. Not only because it looks badass, but
(DIR) diff --git a/2014/11/avoid-workspaces.txt b/2014/11/avoid-workspaces.txt
t@@ -143,6 +143,6 @@ Also, as per tradition, here is a video of what it looks like.
video: [mp4](http://pub.z3bra.org/monochromatic/vid/2014-11-18-groups.mp4)
-<span class="caption">this video illustrate the previous example showing how
+*this video illustrate the previous example showing how
groups works, using a [forked version](git://z3bra.org/2bwm) (not maintained
-anymore) of `2bwm`.</span>
+anymore) of `2bwm`.*
(DIR) diff --git a/2014/12/so-tox-me-maybe.txt b/2014/12/so-tox-me-maybe.txt
t@@ -45,9 +45,9 @@ client of choice.
[](http://pub.z3bra.org/monochromatic/img/2014-12-11-utox.png)
-<span class="caption">An [utox](http://utox.org) window. As you can see, the
+*An [utox](http://utox.org) window. As you can see, the
friend list is on the right, and the chat happens on the right pane. Fairly easy
-:)</span>
+:)*
### The Unix way
t@@ -154,8 +154,8 @@ Oh, and by the way... Here is the mandatory screenshot ;)
[](http://pub.z3bra.org/monochromatic/img/2014-12-11-ratox.png)
-<span class="caption">Ratox in action. A terminal multiplexer is of good help
+*Ratox in action. A terminal multiplexer is of good help
with it. It is also pretty easy to create an input bar for your `text_in`
-file</span>
+file*
Be creative, and keep tweaking !
(DIR) diff --git a/2015/01/you-are-the-wm.txt b/2015/01/you-are-the-wm.txt
t@@ -73,9 +73,9 @@ mode](http://pub.z3bra.org/monochromatic/img/thumb/floater.gif)](http://pub.z3br
[](http://pub.z3bra.org/monochromatic/img/tiler.gif)
-<span class="caption">\*only exception is the use of x-move-resize from
+*\*only exception is the use of x-move-resize from
[no-wm](https://github.com/patrickhaller/no-wm), which is planned to be added to
-wmutils anyway)</span>
+wmutils anyway)*
Check out the "[contrib](http://github.com/wmutils/contrib)" repo. There are
some nice scripts in there !
(DIR) diff --git a/2016/01/make-your-own-distro.txt b/2016/01/make-your-own-distro.txt
t@@ -67,8 +67,9 @@ prefix.
<video controls>
<source src="http://pub.z3bra.org/monochromatic/vid/20160131-osdev-xcompiler.webm" type="video/webm">
</video>
-<span class='caption'>Using the cross-compiler to build a software statically
-against musl libc.</span>
+
+*Using the cross-compiler to build a software statically against musl
+libc.*
#### Package management toolchain
t@@ -95,8 +96,8 @@ installation via [pm](http://git.z3bra.org/pm/log.html).
<video controls>
<source src="http://pub.z3bra.org/monochromatic/vid/20160131-osdev-mkports.webm" type="video/webm">
</video>
-<span class='caption'>Show casing the creation of a port within the mk port-tree
-and building/installing it under a specific directory</span>
+*Show casing the creation of a port within the mk port-tree
+and building/installing it under a specific directory*
#### Testing toolchain
To actually test the distro, you need a way to boot from it. I chose to use linux
t@@ -117,8 +118,8 @@ it's been a pretty successful (and fun!) experience.
<video controls>
<source src="http://pub.z3bra.org/monochromatic/vid/20160131-osdev-containers.webm" type="video/webm">
</video>
-<span class='caption'>Demonstrating the whole testing process, from creating the
-containers and saying "hello world!" from within this container</span>
+*Demonstrating the whole testing process, from creating the
+containers and saying "hello world!" from within this container*
In the process, I learnt how to spawn containers "the hard way". Here is a quick
peak at it:
(DIR) diff --git a/2016/09/pack-it-up.txt b/2016/09/pack-it-up.txt
t@@ -215,5 +215,5 @@ show off the whole process!
<video controls>
<source src="http://pub.z3bra.org/monochromatic/vid/20160916-skroll-install.webm" type="video/webm">
</video>
-<span class='caption'>Packaging, deploying and installing
-[`skroll`](http://z3bra.org/skroll) on my system</span>
+*Packaging, deploying and installing
+[`skroll`](http://z3bra.org/skroll) on my system*
(DIR) diff --git a/monochrome.css b/monochrome.css
t@@ -100,10 +100,9 @@ img {
margin:auto;
}
-/* Comment images - use with <span> or <div> */
-.caption {
+/* Image captions are <em> tags following <img> */
+img + em {
display: block;
- font-style: italic;
margin: auto;
text-align: center;
}