Real Vim ninjas count every keystroke - do you?

Pick a challenge, fire up Vim, and show us what you got.

Changelog, Rules & FAQ, updates: @vimgolf, RSS.

Your VimGolf key: please sign in

$ gem install vimgolf
$ vimgolf setup
$ vimgolf put 9v0067a47b9200000000069f

Reordering properties

Arrange the CSS lines for the #topbar selector based on their complete line length, from shortest to longest.

Start file

#topbar {
  background-image: url("images/abc.png");
  background-position: 12px 13px;
  font-size: 1px;
  left: 36px;
  margin-top: 10px;
  position: relative;
  top: 23px;
  vertical-align: middle;
  width: 200px;
}

#topbar .logo {
  top: 50%;
  position: absolute;
  left: 20px;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

End file

#topbar {
  top: 23px;
  left: 36px;
  width: 200px;
  font-size: 1px;
  margin-top: 10px;
  position: relative;
  vertical-align: middle;
  background-position: 12px 13px;
  background-image: url("images/abc.png");
}

#topbar .logo {
  top: 50%;
  left: 20px;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateY(-50%);
}

View Diff

2,4c2
<   background-image: url("images/abc.png");
<   background-position: 12px 13px;
<   font-size: 1px;
---
>   top: 23px;
5a4,5
>   width: 200px;
>   font-size: 1px;
8d7
<   top: 23px;
10c9,10
<   width: 200px;
---
>   background-position: 12px 13px;
>   background-image: url("images/abc.png");
15d14
<   position: absolute;
17c16
<   transform: translateY(-50%);
---
>   color: #fff;
20,21c19
<   color: #fff;
<   text-transform: uppercase;
---
>   position: absolute;
22a21,22
>   text-transform: uppercase;
>   transform: translateY(-50%);

Solutions by @PeppaPigSg:

Created by: @maharba6 Tweet

54 active golfers, 218 entries

Solutions by @PeppaPigSg:

24

#1 - Peppa Pig / @PeppaPigSg

02/21/2025 at 02:56AM