commit - fb74c4021a23f0ccefe3e072d17e0f98766a6694
commit + 031e20a5080942d25a1cd49c0d11b2435e916da0
blob - 954939b75f2073c81608692fc465a8fb63710609
blob + e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
--- _footer.html
+++ _footer.html
-<hr/>
-<div class="footer">
-Site is created with <a href="https://man.openbsd.org/vi.1">vi</a>, generated by <a href="https://www.romanzolotarev.com/ssg.html">ssg</a>, running on <a href="https://openbsd.org">OpenBSD</a> and hosted by <a href="https://openbsd.amsterdam">obsda.ms</a> - <a href="https://git.high5.nl/why-vi.rocks/">git</a>.
-</div>
-</body>
-</html>
blob - ee1c3b69a7908254f4fefa623973a65b1e36647f
blob + 8f00e02632b8661dbcefb5f19f68c4b9648b0107
--- _header.html
+++ _header.html
<!DOCTYPE html>
-<html lang="en" class="dark-gray bg-white sans-serif lh-copy">
+<html lang="en" class="black bg-white sans-serif lh-copy">
<title></title>
<meta charset="UTF-8">
<meta name="generator" content="romanzolotarev.com/ssg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/vi-bw.png">
-<style>
-html { font-size: 20px; -webkit-text-size-adjust: 100%; }
-a { color: #204fd5; }
-a:hover, a:visited:hover { color: #204fd5; }
-a:visited { color: #334f83; }
-hr { border: 0; margin-top: 2rem; }
-hr, h1, h2 { margin-top: 3rem; }
-li { padding: .125rem 0; }
-p img, table { max-width: 100%; }
-pre em { background-color: #fea; font-style: normal; }
-pre i { font-style: normal; color: #333; }
-pre b { color: #333; }
-pre u { text-decoration: none; background-color: #c0e0ee; }
-pre i::before { content: "> "; color: #aaa; }
-pre strong { background-color: #0000cc; color: #fff; }
-pre { font-size: 15px; overflow-x: auto; color: #888; }
-
-
-a { background-color: transparent; }
-a, blockquote, body, code, div, form, h1, h2, h3, html, input, li, ol, p, pre, table, td, textarea, th, tr, ul { box-sizing: border-box; }
-button, input[type="submit"], input[type="text"], input[type="email"] { -webkit-appearance: none; -moz-appearance: none; overflow: visible; }
-button, input, optgroup, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
-button, select { text-transform: none; }
-img { border-style: none; }
-textarea { overflow: auto; }
-h1, h2, h3, h4 { margin-bottom: 0; }
-
-.b--black, .hover-b--black:hover { border-color: #000; }
-.b--dark-gray, .hover-b--dark-gray:hover { border-color: #333; }
-.b--dark-green, .hover-b--dark-green:hover, .hover-b--dark-green:focus { border-color: #116611; }
-.b--dark-yellow, .hover-b--dark-yellow:hover, .hover-b--dark-yellow:focus { border-color: #e6e3b9; }
-.b--light-gray, .hover-b--light-gray:hover { border-color: #ccc; }
-.b--white-60, .hover-b--white-60 { border-color: rgba(255, 255, 255, .6); }
-.b--yellow, .hover-b--yellow:hover, .hover-b--yellow:focus { border-color: #ffc439; }
-.bg-black, .hover-bg-black:hover, .hover-bg-black:focus { background-color: #000; }
-.bg-blue, .hover-bg-blue:hover, .hover-bg-blue:focus { background-color: #334f83; }
-.bg-center { background-repeat: no-repeat; background-position: center center; }
-.bg-dark-gray, .hover-bg-dark-gray:hover, .hover-bg-dark-gray:focus { background-color: #181b1b; }
-.bg-gold, .hover-bg-gold:hover, .hover-bg-gold:focus { background-color: #ffb700; }
-.bg-green, .hover-bg-green:hover, .hover-bg-green:focus { background-color: #34af00; }
-.bg-light-yellow, .hover-bg-light-yellow:hover, .hover-bg-light-yellow:focus { background-color: #ffeeaa; }
-.bg-navy, .hover-bg-navy:hover, .hover-bg-navy:focus { background-color: #001b44; }
-.bg-near-white { background-color: #f4f4f4; }
-.bg-oams, .hover-bg-oams:hover, .hover-bg-oams:focus { background-color: #ec0000; }
-.bg-payp, .hover-bg-payp:hover, .hover-bg-payp:focus { background-color: #0070ba; }
-.bg-ptrn, .hover-bg-ptrn:hover, .hover-bg-ptrn:focus { background-color: #f96854; }
-.bg-vltr, .hover-bg-vltr:hover, .hover-bg-vltr:focus { background-color: #1e88e5; }
-.bg-washed-yellow { background-color: #fffceb; }
-.bg-white, .hover-bg-white:hover, .hover-bg-white:focus { background-color: #fff; }
-.bg-xrpb, .hover-bg-xrpb:hover, .hover-bg-xrpb:focus { background-color: #808080; }
-.bg-yellow, .hover-bg-yellow:hover, .hover-bg-yellow:focus { background-color: #ffc439; }
-.black, .black:visited, .hover-black:hover, .hover-black:hover:visited, .hover-black:focus, .hover-black:hover:focus { color: #000; }
-.black-60, .black-60:visited { color: rgba(0, 0, 0, .6); }
-.contain { background-size: contain !important; }
-.cover { background-size: cover !important; }
-.dark-gray, .dark-gray:visited, .hover-dark-gray:hover, .hover-dark-gray:hover:visited, .hover-dark-gray:focus, .hover-dark-gray:hover:focus { color: #333; }
-.dark-gray, .hover-dark-gray:hover { color: #333; }
-.dark-red { color: #e7040f; }
-.gray, .gray:visited, .hover-gray:hover, .hover-gray:hover:visited, .hover-gray:focus, .hover-gray:hover:focus { color: #808080; }
-.hover-b--gold:hover { border-color: #ffb700; }
-.hover-b--navy:hover { border-color: #001b44; }
-.hover-b--oams:hover { border-color: #ec0000; }
-.hover-b--payp:hover { border-color: #0070ba; }
-.hover-b--ptrn:hover { border-color: #f96854; }
-.hover-b--vltr:hover { border-color: #1e88e5; }
-.hover-b--xrpb:hover { border-color: #808080; }
-.near-white { color: #f4f4f4; }
-.red, .red:visited, .hover-red:hover, .hover-red:hover:visited, .hover-red:focus, .hover-red:hover:focus { color: #b22; }
-.white, .white:visited, .hover-white:hover, .hover-white:hover:visited, .hover-white:focus, .hover-white:hover:focus { color: #fff; }
-.white-60 { color: rgba(255, 255, 255, .6); }
-
-.blur3 { filter: blur(3px) opacity(0.3); }
-.right-1 { right: 1rem; }
-.sticky { position: sticky; }
-.top-0 { top: 0; }
-.top-1 { top: 1rem; }
-.z-index--1 { z-index: -1; }
-.z-index-1 { z-index: 1; }
-
-.b { font-weight: bold; }
-.b--dashed { border-style: dashed; }
-.ba { border-width: 1px; border-style: solid; }
-.bb { border-bottom-style: solid; border-bottom-width: 1px; }
-.bb--dashed { border-bottom-style: dashed; border-bottom-width: 1px; }
-.bn { border-width: 0; border-style: none; }
-.br-100 { border-radius: 100%; }
-.br1 { border-radius: .125rem; }
-.br2 { border-radius: .25rem; }
-.br3 { border-radius: .5rem; }
-.br4 { border-radius: 1rem; }
-.bt { border-top-style: solid; border-top-width: 1px; }
-.bw-1 { border-width: 1px; }
-.bw1 { border-width: .125rem; }
-.bw2 { border-width: .25rem; }
-.bw3 { border-width: .5rem; }
-.cb { clear: both; }
-.center { margin-right: auto; margin-left: auto; }
-.cf { *zoom: 1; }
-.cf:after { clear: both; }
-.cf:before, .cf:after { content: " "; display: table; }
-.code, pre, code { font-family: Consolas, Monaco, monospace; }
-.dib { display: inline-block; }
-.dim { opacity: 1; transition: opacity .15s ease-in; }
-.dim:active { opacity: .8; transition: opacity .15s ease-out; }
-.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
-.f1 { font-size: 3rem; }
-.f2 { font-size: 2.25rem; }
-.f3 { font-size: 1.5rem; }
-.f4 { font-size: 1.25rem; }
-.f5 { font-size: 1rem; }
-.f6 { font-size: .875rem; }
-.f7 { font-size: .75rem; }
-.fl { float: left; }
-.fs-normal{ font-style: normal; }
-.h2 { height: 2rem; }
-.h3 { height: 4rem; }
-.h4 { height: 8rem; }
-.h5 { height: 16rem; }
-.i { font-style: italic; }
-.lh-copy { line-height: 1.5; }
-.lh-solid, h1 { line-height: 1; }
-.lh-title, h2, h3, pre { line-height: 1.25; }
-.link { text-decoration: none; }
-.link:focus, .outline:focus { outline: 1px solid #333; }
-.ma0 { margin: 0; }
-.mb2 { margin-bottom: .5rem; }
-.mb3 { margin-bottom: 1rem; }
-.mb4 { margin-bottom: 2rem; }
-.ml0 { margin-left: 0; }
-.ml2 { margin-left: .5rem; }
-.mr1 { margin-right: .25rem; }
-.mr2 { margin-right: .5rem; }
-.mr3 { margin-right: 1rem; }
-.mr4 { margin-right: 2rem; }
-.mt0 { margin-top: 0; }
-.mt2 { margin-top: .5rem; }
-.mt3 { margin-top: 1rem; }
-.mt4 { margin-top: 2rem; }
-.mt5 { margin-top: 3rem; }
-.mw-100 { max-width: 100%; }
-.mw4 { max-width: 8rem; }
-.mw5 { max-width: 16rem; }
-.mw6 { max-width: 32rem; }
-.mw7 { max-width: 48rem; }
-.mw8 { max-width: 64rem; }
-.ni { text-indent: -.5rem; }
-.normal { font-weight: normal; }
-.pa0 { padding: 0; }
-.pa1 { padding: .25rem; }
-.pa2 { padding: .5rem; }
-.pa3 { padding: 1rem; }
-.pb3 { padding-bottom: 1rem; }
-.pb4 { padding-bottom: 2rem; }
-.ph1 { padding-left: .25rem; padding-right: .25rem; }
-.ph2 { padding-left: .5rem; padding-right: .5rem; }
-.ph3 { padding-left: 1rem; padding-right: 1rem; }
-.ph4 { padding-left: 2rem; padding-right: 2rem; }
-.pointer:hover { cursor: pointer; }
-.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
-.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
-.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
-.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
-.sans-serif { font-family: "Noto Sans", sans-serif; }
-.serif { font-family: "Noto Serif", Georgia, Times, serif; }
-.tc { text-align: center; }
-.tl { text-align: left; }
-.tr { text-align: right; }
-.tracked-tight { letter-spacing: -.05em; }
-.underline { text-decoration: underline; }
-.v-base { vertical-align: baseline; }
-.v-top { vertical-align: top; }
-.v-mid { vertical-align: middle; }
-.w-100 { width: 100%; }
-.w-20 { width: 20%; }
-.w-50 { width: 50%; }
-.w-80 { width: 80%; }
-.w2 { width: 2rem; }
-.w3 { width: 3rem; }
-.w4 { width: 8rem; }
-.w5 { width: 16rem; }
-.w6 { width: 32rem; }
-.w8 { width: 64rem; }
-
-@media screen and (min-width: 30em) {
- .f3-ns, h1 { font-size: 1.5rem; }
- .f4-ns, h2 { font-size: 1.25rem; }
- .f5-ns, h3 { font-size: 1rem; }
- .w-100-ns { width: 100%; }
-}
-@media screen and (min-width: 30em) and (max-width: 60em) {
- .f1-m { font-size: 3rem; }
- .f2-m { font-size: 2.25rem; }
- .f3-m, h1 { font-size: 1.5rem; }
- .f4-m, h2 { font-size: 1.25rem; }
- .f5-m, h3 { font-size: 1rem; }
- .f6-m { font-size: .875rem; }
- .f7-m { font-size: .75rem; }
- .h3-m { height: 4rem; }
- .h4-m { height: 8rem; }
- .h5-m { height: 16rem; }
- .mw6-m { max-width: 32rem; }
- .pb3-m { padding-bottom: 1rem; }
- .pl2-m { padding-left: .5rem; }
- .ph2-m { padding-left: .5rem; padding-right: .5rem; }
- .pr2-m { padding-right: .5rem; }
- .w-100-m { width: 100%; }
- .w-20-m { width: 20%; }
- .w-25-m { width: 25%; }
- .w-50-m { width: 50%; }
- .w-75-m { width: 75%; }
- .w-80-m { width: 80%; }
- .w-third-m { width: 33.33%; }
- .w4-m { width: 8rem; }
- .w5-m { width: 16rem; }
- .tr-m { text-align: right; }
- .mt5-m { margin-top: 3rem; }
-}
-@media screen and (min-width: 60em) {
- .f1-l { font-size: 3rem; }
- .f2-l, h1 { font-size: 2.25rem; }
- .f3-l, h2 { font-size: 1.5rem; }
- .f4-l, h3 { font-size: 1.25rem; }
- .f5-l { font-size: 1rem; }
- .f6-l { font-size: .875rem; }
- .f7-l { font-size: .75rem; }
- .h3-l { height: 4rem; }
- .h4-l { height: 8rem; }
- .h5-l { height: 16rem; }
- .pb3-l { padding-bottom: 1rem; }
- .ph2-l { padding-left: .5rem; padding-right: .5rem; }
- .pl2-l { padding-left: .5rem; }
- .pr2-l { padding-right: .5rem; }
- .w-100-l { width: 100%; }
- .w-20-l { width: 20%; }
- .w-25-l { width: 25%; }
- .w-50-l { width: 50%; }
- .w-75-l { width: 75%; }
- .w-80-l { width: 80%; }
- .w-third-l { width: 33.33%; }
- .w4-l { width: 8rem; }
- .w5-l { width: 16rem; }
- .tr-l { text-align: right; }
- .mt5-l { margin-top: 3rem; }
-}
-
-.cut *, .cut *::before { color: #ccc; background-color: #f4f4f4; }
-</style>
+<link rel="stylesheet" href="/style.css">
<body class="mw7 w-100 center pa3">
-<a href="/" title="Why vi Rocks!"><img src="/vi256.png" class="w4 br-100"></a>
blob - /dev/null
blob + 8064e8401ef860e85b4a3116c814c5676a92325b (mode 644)
--- /dev/null
+++ also.md
+<p class="f7"><a href="/">cool, take me back</a></p>
+
+# See also
+
+[Edit text with vi(1)](https://rgz.ee/vi.html) by Roman Zolotarev<br>
+[vi is not vim](https://hugodaniel.pt/posts/vi-is-not-vim/) by Hugo Daniel<br>
+[vi help](http://www.jeffw.com/vi/vi_help.txt) by Jeff W<br>
+[vi reference](http://www.ungerhu.com/jxh/vi.html) by Maarten Litmaath and James Hu<br>
+[extremely concise cheatsheet](http://www.alphanrrrd.org/vi.html) by alphanrrrd<br>
+[Graphical vi cheatsheet](http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html) by ViEmu<br>
+[The vi archive and FAQ](http://git.larryhynes.net/vi/) (a mirror) by Ove Ruben R Olsen<br>
blob - /dev/null
blob + 991a6bcc6cca9c16eb1c4b03001fc6c9489dc334 (mode 644)
--- /dev/null
+++ colophon.html
+<p class="f7"><a href="/">got it, nice</a></p>
+
+<h1>Colophon</h1>
+
+<p>
+This site is
+created with <a href="https://man.openbsd.org/vi.1">vi</a>,<br>
+generated by <a href="https://www.romanzolotarev.com/ssg.html">ssg</a>,<br>
+running on <a href="https://openbsd.org">OpenBSD</a> and<br>
+hosted by <a href="https://openbsd.amsterdam">obsda.ms</a>
+</p>
blob - 79f8948a27ca093d7b4dd060a20338b0b37aa638
blob + a9abf2690a1fd6baea2ddb55401d562b7bad270d
--- index.md
+++ index.md
-# Why vi Rocks
+<p class="f7">
+<a href="/suggest.html">suggestion box</a> –
+<a href="https://git.high5.nl/why-vi.rocks/log/">latest additions</a> –
+<a href="/also.html">see also</a> –
+<a href="/colophon.html">colophon</a>
+</p>
-**[vi](https://en.wikipedia.org/wiki/Vi)** is the _de facto_ standard
-Unix editor, you find it in every *NIX derived OS.
+<img src="vi128.png">
-Here you will find a collection of commands, command sequences in
-[vi(1)](https://man.openbsd.org/vi.1)/[ex(1)](https://man.openbsd.org/ex.1)
-or with 3rd party unitilities which make
-**[vi](https://en.wikipedia.org/wiki/Vi)** rock \m/. These all work
-with at least [nvi](https://en.wikipedia.org/wiki/Nvi) 1.79 and
-2.1.3 (unicode).
+_[vi](https://en.wikipedia.org/wiki/Vi) is the **de facto** standard
+text editor in any Unix-like operating system._
-We are always looking for [suggestions](/suggest.html) that go beyond the basics.<br />
-For the latest additions check the [git repo](https://git.high5.nl/why-vi.rocks).
-Helpful documents:
+Here is a collection of [vi(1)](https://man.openbsd.org/vi.1)/[ex(1)](https://man.openbsd.org/ex.1) commands and command sequences.<br>
+Tested with [nvi](https://en.wikipedia.org/wiki/Nvi) 1.79 and 2.1.3 (unicode).
-- [Roman Zolotarev: Edit text with vi(1)](https://rgz.ee/vi.html)<br />
-- [Hugo Daniel: vi is not vim](https://hugodaniel.pt/posts/vi-is-not-vim/)<br />
-- [Jeff W: vi help](http://www.jeffw.com/vi/vi_help.txt) / [Maarten Litmaath: vi reference](http://www.ungerhu.com/jxh/vi.html)<br />
-- [alphanrrrd: extremely concise cheatsheet](http://www.alphanrrrd.org/vi.html) / [ViEmu: Graphical vi cheatsheet](http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html)<br />
-- [The vi archive and FAQ (mirror)](http://git.larryhynes.net/vi/)
-#### Yank / delete an arbitrary number of lines
+## Yank/delete lines
- 1) mark the first line: mk
- 2) move to last line
- 3a) yank: y'k
- 3b) delete: d'k
- 4) move to destination line
- 5) put with P or p
+(1) mark the first line: `mk`<br>
+(2) move to last line<br>
+(3a) yank: `y'k`<br>
+(3b) delete: `d'k`<br>
+(4) move to destination line<br>
+(5) put with `P` or `p`<br>
-#### Apply regex to an arbitrary number of lines
- 1) mark the first line: mk
- 2) mark the last line: ml
- :'k,'ls/regex/power/g
+## Apply regex to lines
-#### Add # to block of text
+(1) mark the first line: `mk`<br>
+(2) mark the last line: `ml`<br>
- :'k,'ls/^/#/
+<pre>
+:'k,'ls/<em>regex</em>/<em>power</em>/g
+</pre>
-#### Remove trailing whitespace of block of text
+## Add # to a block
+
+<pre>
+:'k,'ls/^/#/
+</pre>
+
+
+## Remove trailing whitespace from a block
+
:'k,'ls/\ *$//
-#### Remove the first N (5) characters from every line
- :%s/^.\{0,5\}//
+## Remove the first N characters from every line
-#### Delete all lines N (10) characters long
+N = 5
- :g/^.\{10\}$/d
+<pre>
+:%s/^.\{0,<em>5</em>\}//
+</pre>
-#### Delete all lines _except_ N (10) characters long
- :g!/^.\{10\}$/d
+## Delete all lines N-character long
-#### Search and replace PATHs, using different delimiter
+N = 10
- :%s#/usr/local/log#/var/log#g
+<pre>
+:g/^.\{<em>10</em>\}$/d
+</pre>
-#### Write file as root
+## Delete all lines _except_ N-character long
+
+N = 10
+
+<pre>
+:g!/^.\{<em>10</em>\}$/d
+</pre>
+
+
+## Search/replace paths using # as delimiter
+
+<pre>
+:%s#<em>/usr/local/log</em>#<em>/var/log</em>#g
+</pre>
+
+
+## Write the file as root
+
:w !doas tee %
-#### Diff the file on disk with the file in the buffer
+## Diff the file on disk with the buffer
+
:w !diff -u % -
-#### Make a backup of the file on disk
+## Make a backup of the file on disk
+
:!cp % %.bak
-#### Sort all lines
+## Sort all lines
+
:%!sort
-#### Sort paragraph
- !}sort
+## Sort a block
-<sub><sup>} won't be shown in the command.</sup></sub>
+`}` won't be shown
-#### Sort from current line to EOF
+<pre>
+<u>!</u>}sort
+</pre>
- !Gsort
-<sub><sup>G won't be shown in the command.</sup></sub>
+## Sort from the current line to EOF
-#### Uniq all lines
+`G` won't be shown
+<pre>
+!<u>G</u>sort
+</pre>
+
+
+## Delete duplicated lines in the file
+
:%!uniq
-#### Uniq paragraph
+## Delete duplicated lines in the block
- !}uniq
+`}` won't be shown
-<sub><sup>} won't be shown in the command.</sup></sub>
+<pre>
+!<u>}</u>uniq
+</pre>
-#### Uniq from current line to EOF
+## Delete duplicated lines till EOF
- !Guniq
+`G` won't be shown
-<sub><sup>G won't be shown in the command.</sup></sub>
+<pre>
+!<u>G</u>uniq
+</pre>
-#### Underline all lines starting with CHAPTER
- :g/^CHAPTER /t.|s/./=/g
+## Underline all lines starting with `pattern`
-#### Search for "pattern", print the containing function (start with def) and line number
+<pre>
+:g/^<em>pattern</em> /t.|s/./=/g
+</pre>
- :g/pattern/?^ *def ?#
-#### Add # to paragraph containing "pattern"
+## Search for `pattern`, print the containing function (start with `def`) and line number
- :g/pattern/?^$?+,//-s/^/#
+<pre>
+:g/<em>pattern</em>/?^ *<em>def</em> ?#
+</pre>
-#### Sort content of multiline CSS blocks
+## Add # to paragraph containing `pattern`
+
+<pre>
+:g/<em>pattern</em>/?^$?+,//-s/^/#
+</pre>
+
+
+## Sort content of a multiline CSS block
+
:g/{$/+,/^}/-!sort
-#### Sort content of multiline CSS blocks (media queries)
+## Sort content of a multiline CSS block (media queries)
+
:g/^[^@].*{$/+,/}/-!sort
-#### Reformat HTML paragraphs to a fixed width (40)
- :g/<p>/+,/<\/p>/-!fmt -40
+## Format content of `<p>` tag to fixed width
-#### Invert the order of all lines, move (m) all lines to 0
+width = 40
+<pre>
+:g/<p>/+,/<\/p>/-!fmt -<em>40</em>
+</pre>
+
+
+## Reverse all lines, move `m` all lines to 0
+
:g/1*/m0
-#### Swap "Lastname, Firstname" to "Firstname, Lastname"
+## Swap `Lastname, Firstname` to `Firstname, Lastname`
+
:%s/\(.*\), \(.*\)/\2 \1/
-#### Change all text to lowercase
+## Convert to lowercase
+
:%s/.*/\L&/
-#### Join all lines
+## Join all lines
+
:%j
-#### Copy (t) or move (m) lines containing "pattern"
+## Copy `t` or move `m` lines containing `pattern`
- :g/pattern/t$
- :g/pattern/m$
+<pre>
+:g/<em>pattern</em>/t$
+:g/<em>pattern</em>/m$
+</pre>
-#### Select a column (3rd) from formated text seperated by ':'
+## Select a column of a table
+Select 3rd column separated by colon (`:`)
- :%!awk -F':' '{print $3}'
+<pre>
+:%!awk -F'<em>:</em>' '{print $<em>3</em>}'
+</pre>
-#### Insert the sum of a list of numbers after an arbitrary number of lines
+## Insert the sum of a list of numbers after an arbitrary number of lines
- 1) mark the first line: mk
- 2) mark the last line: ml
- :'k,'l!awk 'END{print "Total:", i}{i+=$1; print}'
+1) mark the first line: `mk`
+2) mark the last line: `ml`
- More compact version:
- :'k,'l!awk 'END{print "Total:", i} ++i || 1'
+<pre>
+:'k,'l!awk 'END{print "<em>total:</em>", i}{i+=$1; print}'
+</pre>
-#### Email the current paragraph
+or
- :?^$?+,//-w !mail -s "<subject>" email@example.com
+<pre>
+:'k,'l!awk 'END{print "<em>total:</em>", i} ++i || 1'
+</pre>
-#### Enable and use ex history
+## Email the block
- 1) Set ESC key to enable history, or add to .exrc:
- :set cedit=<CTRL-V><ESC>
+<pre>
+:?^$?+,//-w !mail -s "<em>subject</em>" <em>email@example.com</em>
+</pre>
- 2) Use it with:
- :<ESC>
+## Enable and use `ex` history
+
+<pre>
+1) Set `ESC` key to enable history or add to `~/.exrc`:
+<b>:set cedit=<u><CTRL-V><ESC></u></b>
+
+2) Use it with:
+:<u><ESC></u>
+</pre>
blob - d68a849bb9a5a7231b675dc8d20eb102c3b92186
blob + fd9c573136e5778427d8ee6ab6c8a66c5840bd90
--- suggest.html
+++ suggest.html
-<h1>Suggest your vi and/or ex commands</h1>
+<p class="f7"><a href="/">never mind</a></p>
-<p>you can not do without beyond the basics.</p>
+<p>Did we miss your favorite command?<br>Oh dear, let us fix that.</p>
+<h1 class="w5">Suggestion box</h1>
+
+<div class="cf mt4">
+
+<div class="fl w5">
<form
- class="w-100"
method="post"
action="https://high5.nl/service/form_parse.php">
<input type="hidden" name="form_fields" value="name, message">
<input type="hidden" name="form_additional_fields" value="name, credit, command, message">
-<label for="name">Type-in your name *</label>
+<label class="lh-solid" for="name">Your name</label>
<input
- class="db outline mb2 ba pa2 w-100" id="name"
+ class="db outline mb2 ba pa2 w-100 b--black bw1" id="name"
type="text"
name="name"
required="required"
placeholder="Alice">
-<label for="credit">for my commit credit use *</label>
+<label class="lh-solid" for="credit">your public profile for credits<br>(e.g. Twitter or Mastodon)</label>
<input
- class="db outline mb2 ba pa2 w-100" id="email"
+ class="db outline mb2 ba pa2 w-100 b--black bw1" id="email"
type="text"
name="credit"
required="required"
- placeholder="Twitter / Mastodon ...">
+ placeholder="alice@example.com">
-<label for="command">the vi / ex command *</label>
-<input
- class="db outline mb2 ba pa2 w-100" id="command"
- type="text"
- name="command"
- required="required"
- placeholder=":%!sort">
-
-<label for="message">description *</label>
+<label class="lh-solid" for="message">vi/ex command and description</label>
<textarea
- class="db outline mb2 ba pa2 w-100"
+ class="db outline mb2 ba b--black bw1 pa2 w-100"
id="message"
name="message"
required="required"
- rows="10">This command does
-
+ rows="3"
+ placeholder=":%!sort
+sort all lines">
</textarea>
<input
- class="db outline mb2 b ba bg-yell b--yell black ph3 pv2 w-50 mt2"
+ class="db outline mb2 b ba bg-black b--black white ph3 pv2 w-100 mt2"
type="submit"
- value="Suggest it">
+ value="Swoosh! 💨">
</form>
+</div>
+
+<div class="fl w-25"><img src="suggest.png" class="w4 pl4 mt4"></div>
+
+</div>
blob - adb0585e4ae78d06736f20633455154a6a9116d2 (mode 644)
blob + /dev/null
--- thanx.md
+++ /dev/null
-# Thanx
-
-Your suggestion is sent.
blob - /dev/null
blob + 04cece5cfb2a249c91c6a626f76537bcc620d8db (mode 644)
--- /dev/null
+++ style.css
+html { font-size: 16px; -webkit-text-size-adjust: 100%; }
+a { color: #204fd5; }
+a:hover, a:visited:hover { color: #204fd5; }
+a:visited { color: #334f83; }
+hr { border: 0; margin-top: 2rem; }
+li { padding: .125rem 0; }
+p img, table { max-width: 100%; }
+pre em { background-color: #fea; font-style: normal; }
+pre i { font-style: normal; color: #333; }
+pre b { color: #333; }
+pre u { text-decoration: none; background-color: #c0e0ee; }
+pre i::before { content: "> "; color: #aaa; }
+pre strong { background-color: #0000cc; color: #fff; }
+pre { font-size: 15px; overflow-x: auto; color: #000; }
+
+
+a { background-color: transparent; }
+a, blockquote, body, code, div, form, h1, h2, h3, html, input, li, ol, p, pre, table, td, textarea, th, tr, ul { box-sizing: border-box; }
+button, input[type="submit"], input[type="text"], input[type="email"] { -webkit-appearance: none; -moz-appearance: none; overflow: visible; }
+button, input, optgroup, select, textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; }
+button, select { text-transform: none; }
+img { border-style: none; }
+textarea { overflow: auto; }
+h1, h2 { margin-bottom: 0; }
+h1, h2 { margin-top: 2em; }
+h2 { font-size: 1.25rem; }
+
+.b--black, .hover-b--black:hover { border-color: #000; }
+.b--dark-gray, .hover-b--dark-gray:hover { border-color: #333; }
+.b--dark-green, .hover-b--dark-green:hover, .hover-b--dark-green:focus { border-color: #116611; }
+.b--dark-yellow, .hover-b--dark-yellow:hover, .hover-b--dark-yellow:focus { border-color: #e6e3b9; }
+.b--light-gray, .hover-b--light-gray:hover { border-color: #ccc; }
+.b--white-60, .hover-b--white-60 { border-color: rgba(255, 255, 255, .6); }
+.b--yellow, .hover-b--yellow:hover, .hover-b--yellow:focus { border-color: #ffc439; }
+.bg-black, .hover-bg-black:hover, .hover-bg-black:focus { background-color: #000; }
+.bg-blue, .hover-bg-blue:hover, .hover-bg-blue:focus { background-color: #334f83; }
+.bg-center { background-repeat: no-repeat; background-position: center center; }
+.bg-dark-gray, .hover-bg-dark-gray:hover, .hover-bg-dark-gray:focus { background-color: #181b1b; }
+.bg-gold, .hover-bg-gold:hover, .hover-bg-gold:focus { background-color: #ffb700; }
+.bg-green, .hover-bg-green:hover, .hover-bg-green:focus { background-color: #34af00; }
+.bg-light-yellow, .hover-bg-light-yellow:hover, .hover-bg-light-yellow:focus { background-color: #ffeeaa; }
+.bg-navy, .hover-bg-navy:hover, .hover-bg-navy:focus { background-color: #001b44; }
+.bg-near-white { background-color: #f4f4f4; }
+.bg-oams, .hover-bg-oams:hover, .hover-bg-oams:focus { background-color: #ec0000; }
+.bg-payp, .hover-bg-payp:hover, .hover-bg-payp:focus { background-color: #0070ba; }
+.bg-ptrn, .hover-bg-ptrn:hover, .hover-bg-ptrn:focus { background-color: #f96854; }
+.bg-vltr, .hover-bg-vltr:hover, .hover-bg-vltr:focus { background-color: #1e88e5; }
+.bg-washed-yellow { background-color: #fffceb; }
+.bg-white, .hover-bg-white:hover, .hover-bg-white:focus { background-color: #fff; }
+.bg-xrpb, .hover-bg-xrpb:hover, .hover-bg-xrpb:focus { background-color: #808080; }
+.bg-yellow, .hover-bg-yellow:hover, .hover-bg-yellow:focus { background-color: #ffc439; }
+.black, .black:visited, .hover-black:hover, .hover-black:hover:visited, .hover-black:focus, .hover-black:hover:focus { color: #000; }
+.black-60, .black-60:visited { color: rgba(0, 0, 0, .6); }
+.contain { background-size: contain !important; }
+.cover { background-size: cover !important; }
+.dark-gray, .dark-gray:visited, .hover-dark-gray:hover, .hover-dark-gray:hover:visited, .hover-dark-gray:focus, .hover-dark-gray:hover:focus { color: #333; }
+.dark-gray, .hover-dark-gray:hover { color: #333; }
+.dark-red { color: #e7040f; }
+.gray, .gray:visited, .hover-gray:hover, .hover-gray:hover:visited, .hover-gray:focus, .hover-gray:hover:focus { color: #808080; }
+.hover-b--gold:hover { border-color: #ffb700; }
+.hover-b--navy:hover { border-color: #001b44; }
+.hover-b--oams:hover { border-color: #ec0000; }
+.hover-b--payp:hover { border-color: #0070ba; }
+.hover-b--ptrn:hover { border-color: #f96854; }
+.hover-b--vltr:hover { border-color: #1e88e5; }
+.hover-b--xrpb:hover { border-color: #808080; }
+.near-white { color: #f4f4f4; }
+.red, .red:visited, .hover-red:hover, .hover-red:hover:visited, .hover-red:focus, .hover-red:hover:focus { color: #b22; }
+.white, .white:visited, .hover-white:hover, .hover-white:hover:visited, .hover-white:focus, .hover-white:hover:focus { color: #fff; }
+.white-60 { color: rgba(255, 255, 255, .6); }
+
+.blur3 { filter: blur(3px) opacity(0.3); }
+.right-1 { right: 1rem; }
+.sticky { position: sticky; }
+.top-0 { top: 0; }
+.top-1 { top: 1rem; }
+.z-index--1 { z-index: -1; }
+.z-index-1 { z-index: 1; }
+
+.b { font-weight: bold; }
+.b--dashed { border-style: dashed; }
+.ba { border-width: 1px; border-style: solid; }
+.bb { border-bottom-style: solid; border-bottom-width: 1px; }
+.bb--dashed { border-bottom-style: dashed; border-bottom-width: 1px; }
+.bn { border-width: 0; border-style: none; }
+.br-100 { border-radius: 100%; }
+.br1 { border-radius: .125rem; }
+.br2 { border-radius: .25rem; }
+.br3 { border-radius: .5rem; }
+.br4 { border-radius: 1rem; }
+.bt { border-top-style: solid; border-top-width: 1px; }
+.bw-1 { border-width: 1px; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.cb { clear: both; }
+.center { margin-right: auto; margin-left: auto; }
+.cf { *zoom: 1; }
+.cf:after { clear: both; }
+.cf:before, .cf:after { content: " "; display: table; }
+.code, pre, code { font-family: Consolas, Monaco, monospace; }
+.dib { display: inline-block; }
+.dim { opacity: 1; transition: opacity .15s ease-in; }
+.dim:active { opacity: .8; transition: opacity .15s ease-out; }
+.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
+.f1 { font-size: 3rem; }
+.f2 { font-size: 2.25rem; }
+.f3 { font-size: 1.5rem; }
+.f4 { font-size: 1.25rem; }
+.f5 { font-size: 1rem; }
+.f6 { font-size: .875rem; }
+.f7 { font-size: .75rem; }
+.fl { float: left; }
+.fs-normal{ font-style: normal; }
+.i { font-style: italic; }
+.lh-copy { line-height: 1.5; }
+.lh-solid, h1 { line-height: 1; }
+.lh-title, h2, h3, pre { line-height: 1.25; }
+.link { text-decoration: none; }
+.link:focus, .outline:focus { outline: 1px solid #333; }
+.ma0 { margin: 0; }
+.mb0 { margin-bottom: 0; }
+.mb2 { margin-bottom: .5rem; }
+.mb3 { margin-bottom: 1rem; }
+.mb4 { margin-bottom: 2rem; }
+.ml0 { margin-left: 0; }
+.ml2 { margin-left: .5rem; }
+.mr1 { margin-right: .25rem; }
+.mr2 { margin-right: .5rem; }
+.mr3 { margin-right: 1rem; }
+.mr4 { margin-right: 2rem; }
+.mt0 { margin-top: 0; }
+.mt2 { margin-top: .5rem; }
+.mt3 { margin-top: 1rem; }
+.mt4 { margin-top: 2rem; }
+.mt5 { margin-top: 3rem; }
+.mw-100 { max-width: 100%; }
+.mw4 { max-width: 8rem; }
+.mw5 { max-width: 16rem; }
+.mw6 { max-width: 32rem; }
+.mw7 { max-width: 48rem; }
+.mw8 { max-width: 64rem; }
+.ni { text-indent: -.5rem; }
+.normal { font-weight: normal; }
+.pa0 { padding: 0; }
+.pa1 { padding: .25rem; }
+.pa2 { padding: .5rem; }
+.pa3 { padding: 1rem; }
+.pb3 { padding-bottom: 1rem; }
+.pb4 { padding-bottom: 2rem; }
+.pl4 { padding-left: 2rem; }
+.ph1 { padding-left: .25rem; padding-right: .25rem; }
+.ph2 { padding-left: .5rem; padding-right: .5rem; }
+.ph3 { padding-left: 1rem; padding-right: 1rem; }
+.ph4 { padding-left: 2rem; padding-right: 2rem; }
+.pointer:hover { cursor: pointer; }
+.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
+.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
+.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
+.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
+.sans-serif { font-family: "Noto Sans", sans-serif; }
+.serif { font-family: "Noto Serif", Georgia, Times, serif; }
+.tc { text-align: center; }
+.tl { text-align: left; }
+.tr { text-align: right; }
+.tracked-tight { letter-spacing: -.05em; }
+.underline { text-decoration: underline; }
+.v-base { vertical-align: baseline; }
+.v-top { vertical-align: top; }
+.v-mid { vertical-align: middle; }
+.w-100 { width: 100%; }
+.w-20 { width: 20%; }
+.w-50 { width: 50%; }
+.w-80 { width: 80%; }
+.w2 { width: 2rem; }
+.w3 { width: 3rem; }
+.w4 { width: 8rem; }
+.w5 { width: 16rem; }
+.w6 { width: 32rem; }
+.w8 { width: 64rem; }
+
+@media screen and (min-width: 30em) {
+ .f3-ns { font-size: 1.5rem; }
+ .f4-ns { font-size: 1.25rem; }
+ .f5-ns { font-size: 1rem; }
+ .w-100-ns { width: 100%; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .f1-m { font-size: 3rem; }
+ .f2-m { font-size: 2.25rem; }
+ .f3-m { font-size: 1.5rem; }
+ .f4-m { font-size: 1.25rem; }
+ .f5-m, h3 { font-size: 1rem; }
+ .f6-m { font-size: .875rem; }
+ .f7-m { font-size: .75rem; }
+ .h3-m { height: 4rem; }
+ .h4-m { height: 8rem; }
+ .h5-m { height: 16rem; }
+ .mw6-m { max-width: 32rem; }
+ .pb3-m { padding-bottom: 1rem; }
+ .pl2-m { padding-left: .5rem; }
+ .ph2-m { padding-left: .5rem; padding-right: .5rem; }
+ .pr2-m { padding-right: .5rem; }
+ .w-100-m { width: 100%; }
+ .w-20-m { width: 20%; }
+ .w-25-m { width: 25%; }
+ .w-50-m { width: 50%; }
+ .w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-third-m { width: 33.33%; }
+ .w4-m { width: 8rem; }
+ .w5-m { width: 16rem; }
+ .tr-m { text-align: right; }
+ .mt5-m { margin-top: 3rem; }
+}
+@media screen and (min-width: 60em) {
+ .f1-l { font-size: 3rem; }
+ .f2-l { font-size: 2.25rem; }
+ .f3-l { font-size: 1.5rem; }
+ .f4-l { font-size: 1.25rem; }
+ .f5-l { font-size: 1rem; }
+ .f6-l { font-size: .875rem; }
+ .f7-l { font-size: .75rem; }
+ .h3-l { height: 4rem; }
+ .h4-l { height: 8rem; }
+ .h5-l { height: 16rem; }
+ .pb3-l { padding-bottom: 1rem; }
+ .ph2-l { padding-left: .5rem; padding-right: .5rem; }
+ .pl2-l { padding-left: .5rem; }
+ .pr2-l { padding-right: .5rem; }
+ .w-100-l { width: 100%; }
+ .w-20-l { width: 20%; }
+ .w-25-l { width: 25%; }
+ .w-50-l { width: 50%; }
+ .w-75-l { width: 75%; }
+ .w-80-l { width: 80%; }
+ .w-third-l { width: 33.33%; }
+ .w4-l { width: 8rem; }
+ .w5-l { width: 16rem; }
+ .tr-l { text-align: right; }
+ .mt5-l { margin-top: 3rem; }
+}
+
+.cut *, .cut *::before { color: #ccc; background-color: #f4f4f4; }
blob - /dev/null
blob + e9fd799812a265078cad651efb02ac675b580273 (mode 644)
Binary files /dev/null and suggest.png differ
blob - /dev/null
blob + 63cfb08f000c2e715b947123c15a64a0f9e02db4 (mode 644)
--- /dev/null
+++ thanx.html
+<p class="f7"><a href="/">go back home</a></p>
+
+<h1>Thank you</h1>
+
+<p>Yay! Your suggestion has been sent.</p>
blob - /dev/null
blob + 1fc74d66c0fe46f3fff2a26d688753dc0985ced0 (mode 644)
Binary files /dev/null and vi128.png differ
