Fix: correct the size of the screenshot thumbnail on the home page

OpenTTD · Dec 30, 2019 · 14a1f1b · 14a1f1b
1 parent 8cb8cc8
commit 14a1f1b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/pages/index.html b/pages/index.html
@@ -37,23 +37,21 @@
                 </div>
             </div>
             <div id="index-right">
-                <div id="screenshot">
+                <figure id="screenshot">
                     {% assign random_screenshot = site.screenshots | sample %}
-                    <div id="screenshot-image">
-                        <a href="{{ site.baseurl }}/screenshots.html">
-                            {% assign stripped_content = random_screenshot.content | strip_html | strip_newlines %}
-                            <img src="{{ site.baseurl }}{{ random_screenshot.id }}_thumb.png"
-                                alt="{{ stripped_content }}"
-                                title="{{ stripped_content | truncatewords: 5 }}"
-                                width="232"
-                                height="178"
-                                />
-                        </a>
-                    </div>
-                    <div id="screenshot-content">
+                    <a href="{{ site.baseurl }}/screenshots.html" id="screenshot-image">
+                        {% assign stripped_content = random_screenshot.content | strip_html | strip_newlines %}
+                        <img src="{{ site.baseurl }}{{ random_screenshot.id }}_thumb.png"
+                            alt=""
+                            title="{{ stripped_content | truncatewords: 5 }}"
+                            width="232"
+                            height="178"
+                            />
+                    </a>
+                    <figcaption>
                         {{ random_screenshot.content }}
-                    </div>
-                </div>
+                    </figcaption>
+                </figure>
             </div>
             <div id="section">
                 <div class="section-header">

diff --git a/static/css/index.css b/static/css/index.css
@@ -87,20 +87,29 @@
 	width: 246px;
 }
 #screenshot {
+	margin: 0;       /* it's necessary to bring the margin to 0 because figure brings its own huge margin in most browsers */
 	font-size: 11px;
 }
 #screenshot-image {
+	display: block;
 	background-color: #FCB030;
-	padding: 6px 0px 0px 0px;
-	height: 184px;
+	padding: 6px;
 	text-align: center;
 }
 #screenshot-image img {
+	display: block;
+	margin: auto;
 	border: 1px solid #FFFFFF;
+	width: 100%;
+	height: auto;
 }
-#screenshot-content {
+#screenshot figcaption {
 	background-color: #FEE7C0;
 	padding: 10px 10px 10px 10px;
+	padding: 6px;
+}
+#screenshot figcaption > * {
+	margin: 0;
 }
 #donate {
 	background: url("../img/layout/section-donate-bg.png") repeat;