Add a messy sidebar list

Here we add formatting to the sidebar modules to give it the look of a "messy list" - this rotates each content item a little bit each way so it looks haphazard. It's a funky and fun and a way to add some interest:

.module ul li { padding: 8px 15px; margin: 10px 0; } .module ul li:nth-child(odd) { background: rgba(50,50,50,0.1); } .module ul li:nth-child(odd):hover { background: rgba(50,50,50,0.3); } .module ul li:nth-child(even) { background: rgba(50,50,50,0.3); } .module ul li:nth-child(even):hover { background: rgba(50,50,50,0.5); } .module ul li:nth-child(3n+1) { -webkit-transform:rotate(-0.6deg); -moz-transform:rotate(-0.6deg); transform:rotate(-0.6deg); } .module ul li:nth-child(3n+2) { -webkit-transform:rotate(0.5deg); -moz-transform:rotate(0.5deg); transform:rotate(0.5deg); } .module ul li:nth-child(3n+3) { -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); transform:rotate(0.2deg); }