images_gallery 1.0.1 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/Rakefile +10 -1
  4. data/lib/images_gallery/generator.rb +16 -1
  5. data/lib/images_gallery/models/collection.rb +4 -0
  6. data/lib/images_gallery/models/image.rb +9 -5
  7. data/lib/images_gallery/models/source.rb +8 -0
  8. data/lib/images_gallery/templates/_thumbnails.html.erb +3 -2
  9. data/lib/images_gallery/templates/layout.html.erb +1 -1
  10. data/lib/images_gallery/version.rb +1 -1
  11. data/lib/images_gallery/views/base.rb +6 -4
  12. data/lib/images_gallery/views/iso.rb +30 -0
  13. data/lib/images_gallery/views/model.rb +1 -0
  14. data/spec/features/iso_pages/canon_eos_20d_iso_100_page_spec.rb +14 -0
  15. data/spec/features/iso_pages/lux_d_3_iso_100_page_spec.rb +14 -0
  16. data/spec/features/iso_pages/lux_d_3_iso_200_page_spec.rb +14 -0
  17. data/spec/features/models_pages/canon_eos_20d_page_spec.rb +7 -0
  18. data/spec/features/models_pages/lux_d_3_page_spec.rb +11 -0
  19. data/spec/lib/images_gallery/models/collection_spec.rb +1 -0
  20. data/spec/lib/images_gallery/models/source_spec.rb +7 -2
  21. data/spec/lib/images_gallery/views/iso_spec.rb +12 -0
  22. data/spec/support/spec_for_image_interface.rb +4 -0
  23. data/spec/support/spec_for_iso_page.rb +15 -0
  24. data/spec/support/spec_for_view_interface.rb +49 -0
  25. data/spec/tmp/canon.html +5 -3
  26. data/spec/tmp/canon/canon_eos_20d.html +9 -1
  27. data/spec/tmp/canon/canon_eos_20d/100.html +77 -0
  28. data/spec/tmp/canon/canon_eos_400d_digital.html +9 -1
  29. data/spec/tmp/canon/canon_eos_400d_digital/200.html +77 -0
  30. data/spec/tmp/fuji_photo_film_co_ltd.html +3 -2
  31. data/spec/tmp/fuji_photo_film_co_ltd/slp1000se.html +9 -1
  32. data/spec/tmp/fuji_photo_film_co_ltd/slp1000se/speed_ratings_unknown.html +77 -0
  33. data/spec/tmp/fujifilm.html +3 -2
  34. data/spec/tmp/fujifilm/finepix_s6500fd.html +9 -1
  35. data/spec/tmp/fujifilm/finepix_s6500fd/400.html +77 -0
  36. data/spec/tmp/index.html +21 -11
  37. data/spec/tmp/leica.html +11 -6
  38. data/spec/tmp/leica/d_lux_3.html +37 -1
  39. data/spec/tmp/leica/d_lux_3/100.html +87 -0
  40. data/spec/tmp/leica/d_lux_3/200.html +77 -0
  41. data/spec/tmp/leica/d_lux_3/800.html +77 -0
  42. data/spec/tmp/nikon_corporation.html +3 -2
  43. data/spec/tmp/nikon_corporation/nikon_d80.html +9 -1
  44. data/spec/tmp/nikon_corporation/nikon_d80/100.html +77 -0
  45. data/spec/tmp/panasonic.html +5 -3
  46. data/spec/tmp/panasonic/dmc_fz30.html +15 -1
  47. data/spec/tmp/panasonic/dmc_fz30/80.html +82 -0
  48. data/spec/tmp/unknown_make.html +5 -3
  49. data/spec/tmp/unknown_make/unknown_model.html +15 -1
  50. data/spec/tmp/unknown_make/unknown_model/speed_ratings_unknown.html +82 -0
  51. metadata +80 -35
  52. data/spec/support/spec_for_view_inerface.rb +0 -19
data/spec/tmp/index.html CHANGED
@@ -35,7 +35,7 @@
35
35
  color: #333;
36
36
  font-size: .8rem;
37
37
  font-variant: small-caps;
38
- height: 3rem;
38
+ height: 4rem;
39
39
  left: 0;
40
40
  line-height: 1.2rem;
41
41
  opacity: 0;
@@ -79,9 +79,10 @@
79
79
  <div class="grid-item">
80
80
  <img alt="Image 31820" src="http://ih1.redbubble.net/work.31820.1.flat,135x135,075,f.jpg"/>
81
81
 
82
- <a class="grid-item-details" href="nikon_corporation/nikon_d80.html" title="Browse all the NIKON D80 images.">
82
+ <a class="grid-item-details" href="nikon_corporation/nikon_d80/100.html" title="Browse all the NIKON D80 @ ISO 100 images.">
83
83
  <div>NIKON CORPORATION</div>
84
84
  <div>NIKON D80</div>
85
+ <div><small>ISO 100</small></div>
85
86
  </a>
86
87
 
87
88
  </div>
@@ -89,9 +90,10 @@
89
90
  <div class="grid-item">
90
91
  <img alt="Image 2041" src="http://ih1.redbubble.net/work.2041.1.flat,135x135,075,f.jpg"/>
91
92
 
92
- <a class="grid-item-details" href="canon/canon_eos_20d.html" title="Browse all the Canon EOS 20D images.">
93
+ <a class="grid-item-details" href="canon/canon_eos_20d/100.html" title="Browse all the Canon EOS 20D @ ISO 100 images.">
93
94
  <div>Canon</div>
94
95
  <div>Canon EOS 20D</div>
96
+ <div><small>ISO 100</small></div>
95
97
  </a>
96
98
 
97
99
  </div>
@@ -99,9 +101,10 @@
99
101
  <div class="grid-item">
100
102
  <img alt="Image 240509" src="http://ih1.redbubble.net/work.240509.1.flat,135x135,075,f.jpg"/>
101
103
 
102
- <a class="grid-item-details" href="fujifilm/finepix_s6500fd.html" title="Browse all the FinePix S6500fd images.">
104
+ <a class="grid-item-details" href="fujifilm/finepix_s6500fd/400.html" title="Browse all the FinePix S6500fd @ ISO 400 images.">
103
105
  <div>FUJIFILM</div>
104
106
  <div>FinePix S6500fd</div>
107
+ <div><small>ISO 400</small></div>
105
108
  </a>
106
109
 
107
110
  </div>
@@ -109,9 +112,10 @@
109
112
  <div class="grid-item">
110
113
  <img alt="Image 26583" src="http://ih1.redbubble.net/work.26583.1.flat,135x135,075,f.jpg"/>
111
114
 
112
- <a class="grid-item-details" href="unknown_make/unknown_model.html" title="Browse all the Unknown Model images.">
115
+ <a class="grid-item-details" href="unknown_make/unknown_model/speed_ratings_unknown.html" title="Browse all the Unknown Model @ ISO speed ratings unknown images.">
113
116
  <div>Unknown Make</div>
114
117
  <div>Unknown Model</div>
118
+ <div><small>ISO speed ratings unknown</small></div>
115
119
  </a>
116
120
 
117
121
  </div>
@@ -119,9 +123,10 @@
119
123
  <div class="grid-item">
120
124
  <img alt="Image 2729606" src="http://ih1.redbubble.net/work.2729606.1.flat,135x135,075,f.jpg"/>
121
125
 
122
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
126
+ <a class="grid-item-details" href="leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
123
127
  <div>LEICA</div>
124
128
  <div>D-LUX 3</div>
129
+ <div><small>ISO 100</small></div>
125
130
  </a>
126
131
 
127
132
  </div>
@@ -129,9 +134,10 @@
129
134
  <div class="grid-item">
130
135
  <img alt="Image 2828069" src="http://ih1.redbubble.net/work.2828069.1.flat,135x135,075,f.jpg"/>
131
136
 
132
- <a class="grid-item-details" href="fuji_photo_film_co_ltd/slp1000se.html" title="Browse all the SLP1000SE images.">
137
+ <a class="grid-item-details" href="fuji_photo_film_co_ltd/slp1000se/speed_ratings_unknown.html" title="Browse all the SLP1000SE @ ISO speed ratings unknown images.">
133
138
  <div>FUJI PHOTO FILM CO., LTD.</div>
134
139
  <div>SLP1000SE</div>
140
+ <div><small>ISO speed ratings unknown</small></div>
135
141
  </a>
136
142
 
137
143
  </div>
@@ -139,9 +145,10 @@
139
145
  <div class="grid-item">
140
146
  <img alt="Image 3201430" src="http://ih1.redbubble.net/work.3201430.1.flat,135x135,075,f.jpg"/>
141
147
 
142
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
148
+ <a class="grid-item-details" href="leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
143
149
  <div>LEICA</div>
144
150
  <div>D-LUX 3</div>
151
+ <div><small>ISO 100</small></div>
145
152
  </a>
146
153
 
147
154
  </div>
@@ -149,9 +156,10 @@
149
156
  <div class="grid-item">
150
157
  <img alt="Image 3502552" src="http://ih1.redbubble.net/work.3502552.1.flat,135x135,075,f.jpg"/>
151
158
 
152
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
159
+ <a class="grid-item-details" href="leica/d_lux_3/200.html" title="Browse all the D-LUX 3 @ ISO 200 images.">
153
160
  <div>LEICA</div>
154
161
  <div>D-LUX 3</div>
162
+ <div><small>ISO 200</small></div>
155
163
  </a>
156
164
 
157
165
  </div>
@@ -159,9 +167,10 @@
159
167
  <div class="grid-item">
160
168
  <img alt="Image 3745978" src="http://ih1.redbubble.net/work.3745978.1.flat,135x135,075,f.jpg"/>
161
169
 
162
- <a class="grid-item-details" href="panasonic/dmc_fz30.html" title="Browse all the DMC-FZ30 images.">
170
+ <a class="grid-item-details" href="panasonic/dmc_fz30/80.html" title="Browse all the DMC-FZ30 @ ISO 80 images.">
163
171
  <div>Panasonic</div>
164
172
  <div>DMC-FZ30</div>
173
+ <div><small>ISO 80</small></div>
165
174
  </a>
166
175
 
167
176
  </div>
@@ -169,9 +178,10 @@
169
178
  <div class="grid-item">
170
179
  <img alt="Image 3775226" src="http://ih1.redbubble.net/work.3775226.1.flat,135x135,075,f.jpg"/>
171
180
 
172
- <a class="grid-item-details" href="panasonic/dmc_fz30.html" title="Browse all the DMC-FZ30 images.">
181
+ <a class="grid-item-details" href="panasonic/dmc_fz30/80.html" title="Browse all the DMC-FZ30 @ ISO 80 images.">
173
182
  <div>Panasonic</div>
174
183
  <div>DMC-FZ30</div>
184
+ <div><small>ISO 80</small></div>
175
185
  </a>
176
186
 
177
187
  </div>
data/spec/tmp/leica.html CHANGED
@@ -35,7 +35,7 @@
35
35
  color: #333;
36
36
  font-size: .8rem;
37
37
  font-variant: small-caps;
38
- height: 3rem;
38
+ height: 4rem;
39
39
  left: 0;
40
40
  line-height: 1.2rem;
41
41
  opacity: 0;
@@ -69,9 +69,10 @@
69
69
  <div class="grid-item">
70
70
  <img alt="Image 2729606" src="http://ih1.redbubble.net/work.2729606.1.flat,135x135,075,f.jpg"/>
71
71
 
72
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
72
+ <a class="grid-item-details" href="leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
73
73
  <div>LEICA</div>
74
74
  <div>D-LUX 3</div>
75
+ <div><small>ISO 100</small></div>
75
76
  </a>
76
77
 
77
78
  </div>
@@ -79,9 +80,10 @@
79
80
  <div class="grid-item">
80
81
  <img alt="Image 3201430" src="http://ih1.redbubble.net/work.3201430.1.flat,135x135,075,f.jpg"/>
81
82
 
82
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
83
+ <a class="grid-item-details" href="leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
83
84
  <div>LEICA</div>
84
85
  <div>D-LUX 3</div>
86
+ <div><small>ISO 100</small></div>
85
87
  </a>
86
88
 
87
89
  </div>
@@ -89,9 +91,10 @@
89
91
  <div class="grid-item">
90
92
  <img alt="Image 3502552" src="http://ih1.redbubble.net/work.3502552.1.flat,135x135,075,f.jpg"/>
91
93
 
92
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
94
+ <a class="grid-item-details" href="leica/d_lux_3/200.html" title="Browse all the D-LUX 3 @ ISO 200 images.">
93
95
  <div>LEICA</div>
94
96
  <div>D-LUX 3</div>
97
+ <div><small>ISO 200</small></div>
95
98
  </a>
96
99
 
97
100
  </div>
@@ -99,9 +102,10 @@
99
102
  <div class="grid-item">
100
103
  <img alt="Image 512919" src="http://ih1.redbubble.net/work.512919.1.flat,135x135,075,f.jpg"/>
101
104
 
102
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
105
+ <a class="grid-item-details" href="leica/d_lux_3/800.html" title="Browse all the D-LUX 3 @ ISO 800 images.">
103
106
  <div>LEICA</div>
104
107
  <div>D-LUX 3</div>
108
+ <div><small>ISO 800</small></div>
105
109
  </a>
106
110
 
107
111
  </div>
@@ -109,9 +113,10 @@
109
113
  <div class="grid-item">
110
114
  <img alt="Image 4250369" src="http://ih1.redbubble.net/work.4250369.1.flat,135x135,075,f.jpg"/>
111
115
 
112
- <a class="grid-item-details" href="leica/d_lux_3.html" title="Browse all the D-LUX 3 images.">
116
+ <a class="grid-item-details" href="leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
113
117
  <div>LEICA</div>
114
118
  <div>D-LUX 3</div>
119
+ <div><small>ISO 100</small></div>
115
120
  </a>
116
121
 
117
122
  </div>
data/spec/tmp/leica/d_lux_3.html CHANGED
@@ -35,7 +35,7 @@
35
35
  color: #333;
36
36
  font-size: .8rem;
37
37
  font-variant: small-caps;
38
- height: 3rem;
38
+ height: 4rem;
39
39
  left: 0;
40
40
  line-height: 1.2rem;
41
41
  opacity: 0;
@@ -60,6 +60,12 @@
60
60
 
61
61
  <a class="nav-link" href="../leica.html">Browse all the LEICA images</a>
62
62
 
63
+ <a class="nav-link" href="../leica/d_lux_3/100.html">ISO 100</a>
64
+
65
+ <a class="nav-link" href="../leica/d_lux_3/200.html">ISO 200</a>
66
+
67
+ <a class="nav-link" href="../leica/d_lux_3/800.html">ISO 800</a>
68
+
63
69
  </nav>
64
70
 
65
71
  </header>
@@ -69,26 +75,56 @@
69
75
  <div class="grid-item">
70
76
  <img alt="Image 2729606" src="http://ih1.redbubble.net/work.2729606.1.flat,135x135,075,f.jpg"/>
71
77
 
78
+ <a class="grid-item-details" href="../leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
79
+ <div>LEICA</div>
80
+ <div>D-LUX 3</div>
81
+ <div><small>ISO 100</small></div>
82
+ </a>
83
+
72
84
  </div>
73
85
 
74
86
  <div class="grid-item">
75
87
  <img alt="Image 3201430" src="http://ih1.redbubble.net/work.3201430.1.flat,135x135,075,f.jpg"/>
76
88
 
89
+ <a class="grid-item-details" href="../leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
90
+ <div>LEICA</div>
91
+ <div>D-LUX 3</div>
92
+ <div><small>ISO 100</small></div>
93
+ </a>
94
+
77
95
  </div>
78
96
 
79
97
  <div class="grid-item">
80
98
  <img alt="Image 3502552" src="http://ih1.redbubble.net/work.3502552.1.flat,135x135,075,f.jpg"/>
81
99
 
100
+ <a class="grid-item-details" href="../leica/d_lux_3/200.html" title="Browse all the D-LUX 3 @ ISO 200 images.">
101
+ <div>LEICA</div>
102
+ <div>D-LUX 3</div>
103
+ <div><small>ISO 200</small></div>
104
+ </a>
105
+
82
106
  </div>
83
107
 
84
108
  <div class="grid-item">
85
109
  <img alt="Image 512919" src="http://ih1.redbubble.net/work.512919.1.flat,135x135,075,f.jpg"/>
86
110
 
111
+ <a class="grid-item-details" href="../leica/d_lux_3/800.html" title="Browse all the D-LUX 3 @ ISO 800 images.">
112
+ <div>LEICA</div>
113
+ <div>D-LUX 3</div>
114
+ <div><small>ISO 800</small></div>
115
+ </a>
116
+
87
117
  </div>
88
118
 
89
119
  <div class="grid-item">
90
120
  <img alt="Image 4250369" src="http://ih1.redbubble.net/work.4250369.1.flat,135x135,075,f.jpg"/>
91
121
 
122
+ <a class="grid-item-details" href="../leica/d_lux_3/100.html" title="Browse all the D-LUX 3 @ ISO 100 images.">
123
+ <div>LEICA</div>
124
+ <div>D-LUX 3</div>
125
+ <div><small>ISO 100</small></div>
126
+ </a>
127
+
92
128
  </div>
93
129
 
94
130
  </div>
data/spec/tmp/leica/d_lux_3/100.html ADDED
@@ -0,0 +1,87 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Images by (LEICA) D-LUX 3 @ ISO 100</title>
6
+ <style type="text/css">
7
+ html, body {
8
+ font-family: "adelle", "Helvetica Neue", Helvetica, Arial, sans-serif;
9
+ font-size: 1rem;
10
+ }
11
+ nav {
12
+ border: 1px solid #ccc;
13
+ border-width: 1px 0;
14
+ margin: 2rem 0;
15
+ }
16
+ .nav-link {
17
+ display: inline-block;
18
+ line-height: 3rem;
19
+ padding: 0 1rem;
20
+ text-decoration: none;
21
+ text-transform: uppercase;
22
+ }
23
+ .grid {
24
+ max-width: 960px;
25
+ }
26
+ .grid-item {
27
+ border: 1px solid #ccc;
28
+ display: inline-block;
29
+ padding: 10px 10px 5px;
30
+ position: relative;
31
+ margin: 5px;
32
+ }
33
+ .grid-item-details {
34
+ background-color: rgba(255, 255, 255, 0.9);
35
+ color: #333;
36
+ font-size: .8rem;
37
+ font-variant: small-caps;
38
+ height: 4rem;
39
+ left: 0;
40
+ line-height: 1.2rem;
41
+ opacity: 0;
42
+ padding: .2rem 0 10px;
43
+ position: absolute;
44
+ width: 100%;
45
+ bottom: 0;
46
+ text-align: center;
47
+ text-decoration: none;
48
+ }
49
+ .grid-item:hover .grid-item-details {
50
+ opacity: 1;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <header>
56
+ <h1>Images by (LEICA) D-LUX 3 @ ISO 100</h1>
57
+ <nav>
58
+
59
+ <a class="nav-link" href="../../index.html">Browse all the images</a>
60
+
61
+ <a class="nav-link" href="../../leica/d_lux_3.html">Browse all the D-LUX 3 images</a>
62
+
63
+ </nav>
64
+
65
+ </header>
66
+
67
+ <div class="grid">
68
+
69
+ <div class="grid-item">
70
+ <img alt="Image 2729606" src="http://ih1.redbubble.net/work.2729606.1.flat,135x135,075,f.jpg"/>
71
+
72
+ </div>
73
+
74
+ <div class="grid-item">
75
+ <img alt="Image 3201430" src="http://ih1.redbubble.net/work.3201430.1.flat,135x135,075,f.jpg"/>
76
+
77
+ </div>
78
+
79
+ <div class="grid-item">
80
+ <img alt="Image 4250369" src="http://ih1.redbubble.net/work.4250369.1.flat,135x135,075,f.jpg"/>
81
+
82
+ </div>
83
+
84
+ </div>
85
+
86
+ </body>
87
+ </html>
data/spec/tmp/leica/d_lux_3/200.html ADDED
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Images by (LEICA) D-LUX 3 @ ISO 200</title>
6
+ <style type="text/css">
7
+ html, body {
8
+ font-family: "adelle", "Helvetica Neue", Helvetica, Arial, sans-serif;
9
+ font-size: 1rem;
10
+ }
11
+ nav {
12
+ border: 1px solid #ccc;
13
+ border-width: 1px 0;
14
+ margin: 2rem 0;
15
+ }
16
+ .nav-link {
17
+ display: inline-block;
18
+ line-height: 3rem;
19
+ padding: 0 1rem;
20
+ text-decoration: none;
21
+ text-transform: uppercase;
22
+ }
23
+ .grid {
24
+ max-width: 960px;
25
+ }
26
+ .grid-item {
27
+ border: 1px solid #ccc;
28
+ display: inline-block;
29
+ padding: 10px 10px 5px;
30
+ position: relative;
31
+ margin: 5px;
32
+ }
33
+ .grid-item-details {
34
+ background-color: rgba(255, 255, 255, 0.9);
35
+ color: #333;
36
+ font-size: .8rem;
37
+ font-variant: small-caps;
38
+ height: 4rem;
39
+ left: 0;
40
+ line-height: 1.2rem;
41
+ opacity: 0;
42
+ padding: .2rem 0 10px;
43
+ position: absolute;
44
+ width: 100%;
45
+ bottom: 0;
46
+ text-align: center;
47
+ text-decoration: none;
48
+ }
49
+ .grid-item:hover .grid-item-details {
50
+ opacity: 1;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <header>
56
+ <h1>Images by (LEICA) D-LUX 3 @ ISO 200</h1>
57
+ <nav>
58
+
59
+ <a class="nav-link" href="../../index.html">Browse all the images</a>
60
+
61
+ <a class="nav-link" href="../../leica/d_lux_3.html">Browse all the D-LUX 3 images</a>
62
+
63
+ </nav>
64
+
65
+ </header>
66
+
67
+ <div class="grid">
68
+
69
+ <div class="grid-item">
70
+ <img alt="Image 3502552" src="http://ih1.redbubble.net/work.3502552.1.flat,135x135,075,f.jpg"/>
71
+
72
+ </div>
73
+
74
+ </div>
75
+
76
+ </body>
77
+ </html>
data/spec/tmp/leica/d_lux_3/800.html ADDED
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Images by (LEICA) D-LUX 3 @ ISO 800</title>
6
+ <style type="text/css">
7
+ html, body {
8
+ font-family: "adelle", "Helvetica Neue", Helvetica, Arial, sans-serif;
9
+ font-size: 1rem;
10
+ }
11
+ nav {
12
+ border: 1px solid #ccc;
13
+ border-width: 1px 0;
14
+ margin: 2rem 0;
15
+ }
16
+ .nav-link {
17
+ display: inline-block;
18
+ line-height: 3rem;
19
+ padding: 0 1rem;
20
+ text-decoration: none;
21
+ text-transform: uppercase;
22
+ }
23
+ .grid {
24
+ max-width: 960px;
25
+ }
26
+ .grid-item {
27
+ border: 1px solid #ccc;
28
+ display: inline-block;
29
+ padding: 10px 10px 5px;
30
+ position: relative;
31
+ margin: 5px;
32
+ }
33
+ .grid-item-details {
34
+ background-color: rgba(255, 255, 255, 0.9);
35
+ color: #333;
36
+ font-size: .8rem;
37
+ font-variant: small-caps;
38
+ height: 4rem;
39
+ left: 0;
40
+ line-height: 1.2rem;
41
+ opacity: 0;
42
+ padding: .2rem 0 10px;
43
+ position: absolute;
44
+ width: 100%;
45
+ bottom: 0;
46
+ text-align: center;
47
+ text-decoration: none;
48
+ }
49
+ .grid-item:hover .grid-item-details {
50
+ opacity: 1;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <header>
56
+ <h1>Images by (LEICA) D-LUX 3 @ ISO 800</h1>
57
+ <nav>
58
+
59
+ <a class="nav-link" href="../../index.html">Browse all the images</a>
60
+
61
+ <a class="nav-link" href="../../leica/d_lux_3.html">Browse all the D-LUX 3 images</a>
62
+
63
+ </nav>
64
+
65
+ </header>
66
+
67
+ <div class="grid">
68
+
69
+ <div class="grid-item">
70
+ <img alt="Image 512919" src="http://ih1.redbubble.net/work.512919.1.flat,135x135,075,f.jpg"/>
71
+
72
+ </div>
73
+
74
+ </div>
75
+
76
+ </body>
77
+ </html>