Skip to content

Instantly share code, notes, and snippets.

@fourcolors

fourcolors/rev.css

Created October 3, 2013 19:33
Show Gist options
  • Save fourcolors/6815729 to your computer and use it in GitHub Desktop.
Save fourcolors/6815729 to your computer and use it in GitHub Desktop.
Download ZIP
Styles and html structure for the WikiPagesRevisions sidebar
Raw
rev.css
.revision {
width: 70%;
}
.revisions {
min-width: 300px;
width: 25%;
height: 100%;
border: 1px solid #c1c7d0;
background-color: #f6f8fa;
}
.revisions .h2 {
text-transform: uppercase;
font-weight: bold;
color: #444545;
padding: 0px 10px 0px 10px;
height: 45px;
line-height: 45px;
border-bottom: 1px solid #dde1e6;
}
.revisions button {
margin: 13px auto;
}
.revisions .rev-details {
width: 50%;
height: 100%;
position: relative;
margin-left: 10px;
}
.revisions .rev-date {
position: absolute;
top: 13px;
line-height: 1;
}
.revisions .rev-author {
line-height: 1;
position: absolute;
top: 30px;
font-weight: 200;
}
.revisions .rev-date {
font-weight: bold;
}
.revisions .rev-right {
float: right;
width: 30%;
text-align: center;
}
.revisions li {
height: 55px;
line-height: 55px;
}
.revisions .h2 a:link {
color: #444545;
}
.revisions .current {
background-color: #FFFFFF;
border-top: 1px solid #c1c7d0;
border-bottom: 1px solid #c1c7d0;
border-left: 1px solid #FFFFFF;
margin-left: -1px;
color: #2590CF;
}
Raw
rev.html
<html>
<head>
<title>Revisions Mockup</title>
<link rel="stylesheet" type="text/css" href="rev.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" media="screen" />
</head>
<body>
<div class="revision pull-left">
<h1> Anthropology: Civilizations and City States </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus sapien quis odio ornare fringilla at auctor odio. In sodales nulla sit amet eros viverra commodo. Nullam ut tellus urna. Ut vitae libero faucibus, rhoncus magna a, sodales sapien. Fusce volutpat metus at nunc euismod tempus. Cras imperdiet fringilla nisi non iaculis. Aenean luctus, turpis nec feugiat tristique, lectus nulla convallis lectus, at varius turpis est rhoncus turpis. In hac habitasse platea dictumst. Etiam quis metus vel metus gravida tempus vel eu urna. Maecenas hendrerit velit eu varius suscipit. Nunc placerat ante eu sem mattis interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet pharetra nisi. Quisque vitae elit nunc. Nam sed suscipit diam, id lobortis justo.
</p>
<p>
Praesent luctus ligula nec lorem pellentesque, sed sagittis neque mattis. Mauris lorem leo, gravida sed massa in, mattis vehicula felis. Nulla semper cursus imperdiet. Nam fermentum nibh in est dictum, at euismod enim condimentum. Curabitur sed augue in mauris consectetur consectetur. Sed dignissim gravida porttitor. Suspendisse potenti.
</p>
<p>
Duis a metus quis ipsum ullamcorper iaculis a in dui. Ut sollicitudin, diam a pretium varius, elit dolor dictum dolor, vel porttitor massa ligula a diam. Vivamus dignissim erat elit, et semper magna posuere vitae. Sed tempor accumsan arcu, at vehicula velit tempor a. Nulla mattis condimentum lacus auctor malesuada. Quisque bibendum vitae dui sed pharetra. Morbi nisl sem, dictum id massa at, ultricies elementum felis. Suspendisse diam lacus, lacinia dictum nunc commodo, aliquam tempus felis. Nunc auctor rhoncus pulvinar. Duis condimentum bibendum congue.
</p>
<p>
Donec euismod mauris risus, accumsan sodales felis dapibus vitae. Donec et ultrices ligula. Proin iaculis augue ut est vehicula blandit. Suspendisse venenatis sapien turpis, id mattis neque fermentum nec. Sed sodales ultricies volutpat. Sed quam nunc, viverra in tempor in, consequat vitae libero. Morbi in orci sagittis, gravida lacus eu, ultricies mauris. Sed rhoncus rhoncus velit et tincidunt. Praesent euismod, nisl id iaculis eleifend, augue enim sagittis augue, ac lobortis mauris orci ut tortor.
</p>
<p>
Aenean quis tempor augue, vitae mollis eros. Donec eu posuere tellus. Aenean dictum euismod odio ut rutrum. Etiam suscipit elit a arcu condimentum hendrerit. Proin tristique eros vel egestas suscipit. Cras vulputate ante sit amet sem faucibus pulvinar. Nulla eget neque faucibus, mollis lorem ut, faucibus orci.
</p>
</div>
<aside class="pull-right revisions">
<div class="h2">Revision History <a class='rev-close pull-right' href="#">x</a></div>
<ul class="nav">
<li>
<div class="rev-details clearfix pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
<div class="rev-right">
Latest
</div>
</li>
<li class="current">
<div class="rev-details clearfix pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
<div class="rev-right">
<button type="button" class="btn btn-default">Restore</button>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
<li>
<div class="rev-details pull-left">
<span class="rev-date">Jul 29 at 1:12pm</span>
<span class="rev-author">Sterling Cobb</span>
</div>
</li>
</aside>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment