-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgallery
136 lines (108 loc) · 5.15 KB
/
gallery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
%% page
{% block content %}
<script type="text/javascript" src="/static/scripts/prototype.js"></script>
<script type="text/javascript" src="/static/scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/static/scripts/lightbox.js"></script>
<style type="text/css">
.content {
text-align: justify;
line-height: 1.5em;
font-size: 1.1em;
}
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
.thumbnail {
width: 200px;
height: 180px;
margin: 15px;
padding: 2px;
display: block;
float: left;
text-align: center;
}
.thumbnail .title {
color: #555555;
font-size: .8em;
}
.thumbnail img {
#border: 1px solid #dddddd;
#height: 120px;
}
</style>
<h1>Gallery</h1>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-overview.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-overview.png" alt="Overview of Melange." /></a>
<div class="title">
Overview of Melange.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-windows.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-windows.png" alt="Windows overlapping the widgets." /></a>
<div class="title">
Windows overlapping the widgets.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-windows-overlay.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-windows-overlay.png" alt="Melange Overlay overlapping the windows." /></a>
<div class="title">
Melange Overlay overlapping the windows.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-widgets.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-widgets.png" alt="Some other widgets." /></a>
<div class="title">
Some other widgets.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-identica.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-identica.png" alt="Identi.ca widget with sleek scroll handle." /></a>
<div class="title">
Identi.ca widget with sleek scroll handle.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-add-profile.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-add-profile.png" alt="Adding a Config profile." /></a>
<div class="title">
Adding a Config profile.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-hotkey.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-hotkey.png" alt="Changing the hotkey for the overlay." /></a>
<div class="title">
Changing the hotkey for the overlay.
</div>
</div>
<div class="thumbnail">
<a href="/static/images/screenshots/prev1/cream-about.png" rel="lightbox[melange]"><img src="/static/images/screenshots/prev1/thumbnails/thumb-120x120-cream-about.png" alt="About dialogs." /></a>
<div class="title">
About dialogs.
</div>
</div>
{% endblock %}
{% block sidebar %}
<h4>Further information:</h4>
<ul>
<li><a href="/wiki/releases/FirstDeveloperPreview">Install developer preview</a></li>
<li><a href="/wiki/InstallFromGit">Install from Git</a></li>
<li><a href="/wiki/GettingStarted">Get started</a></li>
</ul>
{% endblock %}