tAdded captions to images - monochromatic - monochromatic blog: http://blog.z3bra.org
(HTM) git clone git://z3bra.org/monochromatic
(DIR) Log
(DIR) Files
(DIR) Refs
---
(DIR) commit 45f2f86eb237ce169b52b64dda6764478f199c9a
(DIR) parent aefdb2cf54a865f01351aab90914fb72f8096ee3
(HTM) Author: z3bra <willy@mailoo.org>
Date: Tue, 1 Apr 2014 11:40:22 +0200
Added captions to images
Diffstat:
M 2013/08/test-your-css.txt | 61 +++++++++++++++++++++++--------
M 2013/10/home-sweet-home.txt | 28 +++++++++++++++-------------
M 2014/01/images-in-terminal.txt | 6 +++---
M css/monochrome.css | 16 +++-------------
4 files changed, 67 insertions(+), 44 deletions(-)
---
(DIR) diff --git a/2013/08/test-your-css.txt b/2013/08/test-your-css.txt
t@@ -22,25 +22,56 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
### Images
[](/img/2013-08-ratpoison.jpg)
-← Ratpoison screenshot — Uses "ratpoison -c set border 28" to make the shot sexier
+<span class='caption'>Ratpoison screenshot
+Uses "ratpoison -c set border 28" to make the shot sexier</span>
### Tables and code
- <table>
-<thead>
+<table>
+ <thead>
+ <tr>
+ <th>column #0</th>
+ <th>column #1</th>
+ <th>column #2</th>
+ <th>column #3</th>
+ <th>column #4</th>
+ </tr>
+ </thead>
+ <tbody>
<tr>
- <th>column #0</th>
- <th>column #1</th>
- <th>column #2</th>
- <th>column #3</th>
- <th>column #4</th>
+ <td>cell 0-0</td>
+ <td>cell 0-1</td>
+ <td>cell 0-2</td>
+ <td>cell 0-3</td>
+ <td>cell 0-4</td>
+ </tr>
+ <tr>
+ <td>cell 1-0</td>
+ <td>cell 1-1</td>
+ <td>cell 1-2</td>
+ <td>cell 1-3</td>
+ <td>cell 1-4</td>
+ </tr>
+ <tr>
+ <td>cell 2-0</td>
+ <td>cell 2-1</td>
+ <td>cell 2-2</td>
+ <td>cell 2-3</td>
+ <td>cell 2-4</td>
+ </tr>
+ <tr>
+ <td>cell 3-0</td>
+ <td>cell 3-1</td>
+ <td>cell 3-2</td>
+ <td>cell 3-3</td>
+ <td>cell 3-4</td>
+ </tr>
+ <tr>
+ <td>cell 4-0</td>
+ <td>cell 4-1</td>
+ <td>cell 4-2</td>
+ <td>cell 4-3</td>
+ <td>cell 4-4</td>
</tr>
-</thead>
- <tbody>
- <tr><td>cell 0-0</td><td>cell 0-1</td><td>cell 0-2</td><td>cell 0-3</td><td>cell 0-4</td></tr>
- <tr><td>cell 1-0</td><td>cell 1-1</td><td>cell 1-2</td><td>cell 1-3</td><td>cell 1-4</td></tr>
- <tr><td>cell 2-0</td><td>cell 2-1</td><td>cell 2-2</td><td>cell 2-3</td><td>cell 2-4</td></tr>
- <tr><td>cell 3-0</td><td>cell 3-1</td><td>cell 3-2</td><td>cell 3-3</td><td>cell 3-4</td></tr>
- <tr><td>cell 4-0</td><td>cell 4-1</td><td>cell 4-2</td><td>cell 4-3</td><td>cell 4-4</td></tr>
</tbody>
</table>
(DIR) diff --git a/2013/10/home-sweet-home.txt b/2013/10/home-sweet-home.txt
t@@ -87,7 +87,8 @@ to look the way you want. Use stuff like [librgba](http://gnome-look.org/content
even prettier!
[](/img/2013-10-28-cwm.jpg)
-Here is a quick CWM setup, using compton and librgba
+<span class='caption'>Here is a quick CWM setup, using compton and
+librgba</span>
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@@ -230,8 +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:
[](/img/2013-10-28-term.jpg)
-A terminal running the script [info.sh](http://git.z3bra.org/cgit.cgi/scripts/tree/info.sh)
-that dump 16 colors along system informations
+<span class='caption'>A terminal running the script
+[info.sh](http://git.z3bra.org/cgit.cgi/scripts/tree/info.sh) that dump 16
+colors along system informations</span>
### Shell
t@@ -294,8 +296,8 @@ And my old zsh prompt:
RPROMPT="%{$fg[black]%}%M:%{$fg_bold[yellow]%}%~%{$reset_color%} "
[](/img/2013-10-28-shell.jpg)
-A few different prompts, from top to bottom:
-sh, zsh, bash, zsh
+<span class='caption'>A few different prompts, from top to bottom: sh, zsh,
+bash, zsh</span>
### CLI tools
t@@ -326,12 +328,12 @@ As an alternative, take a look at [emacs](https://www.gnu.org/software/emacs/),
[Alpine](http://sourceforge.net/projects/re-alpine/).
[](/img/2013-10-28-cli.jpg)
-
-Mandatory screenshot of the setup with those apps (and custom themes).
+<span class='caption'>Mandatory screenshot of the setup with those apps (and
+custom themes).
top-left: **vim**
top-right: **mutt**
bottom-left: **tmux**
-bottom-right: **irssi**
+bottom-right: **irssi**</span>
### Status bar
t@@ -362,9 +364,10 @@ And there you go! You can achieve really great looking stuff with that simple
process:
[](/img/2013-10-28-bar.jpg)
-You can also choose to put your status bar within a terminal multiplexer status bar,
+<span class='caption'>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
+in one of his blog post</span>
### Integration
t@@ -438,9 +441,8 @@ Finally, here is my own xinitrc
wm $1
[](/img/2013-10-28-final.jpg)
-That shot show off the whole setup, with
-prompt, bar, applications, etc...
-I hope you will like it!
+<span class='caption'>That shot show off the whole setup, with prompt, bar,
+applications, etc... I hope you will like it!</span>
### 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)
[](/img/w3mimgdisplay-crap.jpg)
-
-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 class='caption'>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/css/monochrome.css b/css/monochrome.css
t@@ -87,7 +87,6 @@ footer a {
}
p {
- margin: 0;
padding-left: 20px;
}
t@@ -239,28 +238,19 @@ blockquote {
img {
width:30%;
vertical-align: top;
- display: inline-block;
box-shadow: 0px 0px 10px #000;
border-radius: 4px;
margin:auto;
margin-top: 8px;
}
-img.a_img:hover {
- box-shadow: 0px 0px 10px #fff;
-}
-
-a.a_img:hover {
- text-decoration: none;
-}
-
/* Comment images - use with <span> or <div> */
.caption {
- width:40%;
+ width:60%;
+ display: inline-block;
font-style: italic;
font-size: 80%;
- display: inline-block;
margin-left:20px;
- margin-top:30px;
+ margin-top:20px;
}
/* }}} */