added project-table & styles

itsdanott · Oct 10, 2024 · 15e2338 · 15e2338
1 parent 63acb05
commit 15e2338
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/posts/2023-7drl/index.html b/posts/2023-7drl/index.html
@@ -17,13 +17,24 @@
             <h2>7DRL 2023 - Seven Days Roguelike Challenge</h2>
             <div class="page-date">March 2023</div>
 
-            <iframe frameborder="0" src="https://itch.io/embed/1965544?linkback=true&amp;bg_color=0a0c10&amp;fg_color=ffd76d&amp;link_color=232323&amp;border_color=ffd76d" width="552" height="167"><a href="https://rabbytegames.itch.io/7drl2023">7DRL 2023 - Grand Strategy Roguelike by rabbyte.games, DanOtt</a></iframe>
-            <h3>Engine:</h3>
-            <img src="./../../imgs/unity.png" style="filter: invert();" class="icon-small">
-            <h3>Platforms:</h3>
-            <img src="./../../imgs/webgl.png" class="icon-small">
-            <img src="./../../imgs/platform-windows.png" class="icon-small">
-            <img src="./../../imgs/platform-macos.png" style="filter: invert();" class="icon-small">
+            <iframe frameborder="0" src="https://itch.io/embed/1965544?linkback=true&amp;bg_color=0a0c10&amp;fg_color=ffd76d&amp;link_color=232323&amp;border_color=ffd76d" width="100%" height="auto"><a href="https://rabbytegames.itch.io/7drl2023">7DRL 2023 - Grand Strategy Roguelike by rabbyte.games, DanOtt</a></iframe>
+
+            <table>
+                <tr>
+                    <td class="table-first-row"><strong>Engine</strong></td>
+                    <td>
+                        <img src="./../../imgs/unity.png" style="filter: invert();" class="icon-small" alt="Unity">
+                    </td>
+                </tr>
+                <tr>
+                    <td class="table-first-row"><strong>Platforms</strong></td>
+                    <td>
+                        <img src="./../../imgs/platform-macos.png" style="filter: invert();" class="icon-small" alt="macOS">
+                        <img src="./../../imgs/platform-windows.png" class="icon-small"alt="Windows">
+                        <img src="./../../imgs/webgl.png" class="icon-small" alt="WebGL">
+                    </td>
+                </tr>
+            </table>
 
             <h3>Features</h3>
             <p>* Custom Localization</p>
@@ -79,14 +90,17 @@ <h3 id="day_night">Day/Night Cycle</h3>
 
             <div class="gallery">
                 <a href="./7DRL_TestCharacter.gif" target="_blank"><img src="./7DRL_TestCharacter.gif" alt="7DRL_TestCharacter.gif" class="page-image-wide"></a>
+                <p>To visualize the day/night cycle, I used a similar approach as in Rimworld, with shadow casting volumes for buildings</p>
                 <a href="./7DRL_TestCharacterAndHouse.gif" target="_blank"><img src="./7DRL_TestCharacterAndHouse.gif" alt="7DRL_TestCharacterAndHouse.gif" class="page-image-wide"></a>
             </div>
 
             <h3 id="terraform">Terraform Brush</h3>
-            <p>With weird looking attempts on drawing smileys onto the terrain..</p>
+            <div class="gallery">
+                <p>With weird looking attempts on drawing smileys onto the terrain..</p>
+                <a href="./7DRL_MapTool.gif" target="_blank"><img src="./7DRL_MapTool.gif" alt="7DRL_MapTool.gif" class="page-image-square"></a>
+                <a href="./7DRL_MapToolSmiley.gif" target="_blank"><img src="./7DRL_MapToolSmiley.gif" alt="7DRL_MapToolSmiley.gif" class="page-image-square"></a>
+            </div>
 
-            <a href="./7DRL_MapTool.gif" target="_blank"><img src="./7DRL_MapTool.gif" alt="7DRL_MapTool.gif" class="page-image-square"></a>
-            <a href="./7DRL_MapToolSmiley.gif" target="_blank"><img src="./7DRL_MapToolSmiley.gif" alt="7DRL_MapToolSmiley.gif" class="page-image-square"></a>
 
             <h3>Screenshots - Misc</h3>
             <div class="gallery">

diff --git a/styles.css b/styles.css
@@ -45,6 +45,21 @@ a:hover {
     color: #ffae42;
 }
 
+table {
+    border-collapse: collapse;
+    width: 100%;
+    border: 1px solid #ffd76d;
+}
+
+td {
+    padding: 15px;
+    text-align:center;
+}
+
+.table-first-row {
+    text-align: left;
+}
+
 .page-title {
     text-align: center;
 }
@@ -95,7 +110,8 @@ a:hover {
 }
 
 .icon-small {
-    width: 10%;
+    width: min(20%, 100px);
+    height: auto;
 }
 
 .circular-image {