Skip to content

Instantly share code, notes, and snippets.

Created February 12, 2013 22:52
Show Gist options
  • Save anonymous/4774228 to your computer and use it in GitHub Desktop.
Save anonymous/4774228 to your computer and use it in GitHub Desktop.
A CodePen by Anonymous.
<!-- why not -->
<song>
<img src="http://placekitten.com/60/60">
<song-meta>
<name>Name of Song</name>
<artist>Name</artist>
<album class="hidden">add Album</album>
<composer class="hidden">add Composer</composer>
<label class="hidden">add Record Label</label>
<duration class="hidden">00:00:01</duration>
</song-meta>
<song-meta>
<song-start>
<time>9:30:00 AM</time>
</song-start>
<song-actions>
<alpha>Edit</alpha>
<beta>Cancel</beta>
<gamma>Save</gamma>
<omega>Remove Track</omega>
</song-actions>
</song-meta>
</song>
song,song-meta,song-track,song-start,song-actions,img,artist,track,album,composer,label,duration,alpha,beta,gamma,delta,omega{display:block;margin:0;padding:0;border:0;outline:0}
song {position:relative;background:gainsboro;}
img {float:left;}
song-meta {padding-left:70px}
song-meta:last-child {position:absolute;right:0;top:0}
.hidden {display:none;}
name {font-size:150%;font-weight:900;letter-spacing:-.05em;}
artist {color:#999;}
song-start {font-weight:bold}
song-actions {color:blue;font-size:75%;text-align:right}
song:after {
content: "";
display: table;
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment