add colophon, also, update style, suggest, thanx, index
This commit is contained in:
Roman Zolotarev
parent
fb74c4021a
commit
031e20a508
|
|
@ -1,6 +0,0 @@
|
|||
<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>
|
||||
251
_header.html
251
_header.html
|
|
@ -1,256 +1,9 @@
|
|||
<!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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<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>
|
||||
246
index.md
246
index.md
|
|
@ -1,175 +1,245 @@
|
|||
# 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,244 @@
|
|||
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; }
|
||||
46
suggest.html
46
suggest.html
|
|
@ -1,9 +1,13 @@
|
|||
<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">
|
||||
|
||||
|
|
@ -15,43 +19,41 @@
|
|||
<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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<p class="f7"><a href="/">go back home</a></p>
|
||||
|
||||
<h1>Thank you</h1>
|
||||
|
||||
<p>Yay! Your suggestion has been sent.</p>
|
||||
Loading…
Reference in New Issue