Add some responsive design whatever.

jeffdav · May 18, 2024 · 0de221f · 0de221f
1 parent 1df4c43
commit 0de221f
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -16,9 +16,9 @@
         }
 
         container {
+            align-items: center;
             display: flex;
             flex-direction: column;
-            align-items: center;
             width: 80%;
         }
 
@@ -47,9 +47,15 @@
 
         table tr td {
             border: 1px solid white;
+            font-size: 4vw;
             margin: 0px;
         }
 
+        img {
+            height: auto;
+            max-width: 100%;
+        }
+
         .invert {
             filter: invert(1);
         }
@@ -60,43 +66,43 @@
         <div class="word">lol3d.com</div>
         <table>
             <tr>
-                <td><img src="images/OpenGL_100px_June16.png" width="180px"/></td>
+                <td><img src="images/OpenGL_100px_June16.png"/></td>
                 <td>OpenGL</td>
                 <td>right-handed</td>
                 <td>y-up</td>
             </tr>
             <tr>
-                <td><img class="invert" src="images/Microsoft-DirectX-Logo-wordmark.svg.png" width="200px"/></td>
+                <td><img class="invert" src="images/Microsoft-DirectX-Logo-wordmark.svg.png"/></td>
                 <td>DirectX</td>
                 <td>left-handed</td>
                 <td>y-up</td>
             </tr>
             <tr>
-                <td><img src="images/Vulkan_100px_Dec16.png" width="180px"/></td>
+                <td><img src="images/Vulkan_100px_Dec16.png"/></td>
                 <td>Vulcan</td>
                 <td>right-handed</td>
                 <td>y-down</td>
             </tr>
             <tr>
-                <td><img src="images/blender_logo.png" width="220px"/></td>
+                <td><img src="images/blender_logo.png"/></td>
                 <td>Blender</td>
                 <td>right-handed</td>
                 <td>z-up</td>
             </tr>
             <tr>
-                <td><img src="images/lightwave-logo.png" width="240px"/></td>
+                <td><img src="images/lightwave-logo.png"/></td>
                 <td>LightWave</td>
                 <td>left-handed</td>
                 <td>y-up</td>
             </tr>
             <tr>
-                <td><img class="invert" src="images/Unity_2021.svg.png" width="200px"/></td>
+                <td><img class="invert" src="images/Unity_2021.svg.png"/></td>
                 <td>Unity</td>
                 <td>left-handed</td>
                 <td>y-up</td>
             </tr>
             <tr>
-                <td><img src="images/UE_Logo_horizontal_unreal-engine_white.svg" width="240px"/></td>
+                <td><img src="images/UE_Logo_horizontal_unreal-engine_white.svg"/></td>
                 <td>Unreal Engine</td>
                 <td>left-handed</td>
                 <td>z-up</td>