Refactored project page formatting, made code blocks more readable for all screens.

projects.html

@@ -39,7 +39,7 @@
         <hr>
     </header>
     <main>
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://litelist.andrewlalis.com">LiteList</a></h2>
             <p>
                 An extremely barebones web application to demonstrate the viability of my own HTTP server. It's just your average ToDo list app, with basic JWT-based authentication.
@@ -51,9 +51,9 @@
                 <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
                 <img src="images/logo_vue.svg" class="lang-icon" alt="Vue JS framework logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/AceOfShades">Ace of Shades</a></h2>
             <p>
                 A top-down 2D shooter game inspired by <em>Ace of Spades</em>, and was made as a submission the 2021 Java Discord server's Java Jam. Includes a dedicated server, client, and server registry application.
@@ -69,9 +69,9 @@
             <div class="icons-row">
                 <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/Ace-of-Shades-2">Ace of Shades 2</a></h2>
             <p>
                 A 3D first-person shooter designed as the successor to <em>Ace of Shades</em>. This was again made as a 2022 Java Discord Java Jam submission, but I continued to develop it well beyond that.
@@ -80,9 +80,9 @@
                 <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
                 <img src="images/logo_open_gl.png" class="lang-icon" alt="OpenGL API logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/handy-httpd">Handy-Httpd</a></h2>
             <p>
 			    An extremely lightweight and flexible HTTP server implemented in the D programming language. Below is an example of a "<em>Hello world</em>" server that just says "Hello" in response to any request.
@@ -100,9 +100,9 @@
             <div class="icons-row">
                 <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://andrewlalis.github.io/movescript/">Movescript & Itemscript</a></h2>
             <p>
                 Simple grammars for concisely defining robotic movement and inventory management for ComputerCraft robots in Minecraft.
@@ -129,9 +129,9 @@
             <div class="icons-row">
                 <img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/RailSignalAPI">Rail Signal</a></h2>
             <p>
 			    API and web app for designing and managing rail systems, with real-time data updates via websockets. Originally designed for use with Minecraft and the Immersive Railroading mod, but practically can be used anywhere, as long as you've got the right device driver.
@@ -143,9 +143,9 @@
                 <img src="images/logo_vue.svg" class="lang-icon" alt="Vue JS framework logo">
                 <img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/slf4d">SLF4D</a></h2>
             <p>
                 A common logging interface for D projects, inspired by Java's SLF4J interfaces, but in an idiomatic D way. Any library can make use of SLF4D, while still letting the application developer decide how log messages are handled.
@@ -170,9 +170,9 @@
             <div class="icons-row">
                 <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/streams">Streams</a></h2>
             <p>
                 A library that defines compile-time primitives and helper functions for working with <em>streams</em> of elements. A stream is anything which provides a <code>readFromStream</code> or <code>writeToStream</code> method. Also includes many stream implementations for things like files, sockets, chunked encoding, buffering, and more.
@@ -180,9 +180,9 @@
             <div class="icons-row">
                 <img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/record-net">Record-Net</a></h2>
             <p>
                 A Java library for defining common protocol of binary messages to transmit over the network, similar to <a href="https://protobuf.dev/">Protocol Buffers</a>, but for pure Java applications, so it can take advantage of records and avoid code-generation.
@@ -190,9 +190,9 @@
             <div class="icons-row">
                 <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
             </div>
-        </article>
+        </div>
 
-        <article class="project-card">
+        <div class="project-card">
             <h2><a href="https://github.com/andrewlalis/CoyoteCredit">Coyote Credit</a></h2>
             <p>
                 A web application for students to learn the basics of real-world stock trading through a simplified user interface and simulated accounts.
@@ -201,7 +201,7 @@
                 <img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
                 <img src="images/logo_spring_sm.png" class="lang-icon" alt="Spring Framework logo">
             </div>
-        </article>
+        </div>
     </main>
 </body>
 

styles/article.css

@@ -19,3 +19,7 @@ figure {
 code {
     color: var(--code-color);
 }
+
+pre {
+    padding: 0.25em !important;
+}

styles/project.css

@@ -1,62 +1,38 @@
-body {
+.project-card {
-    max-width: 100%;
-}
-
-/* This is the container for all cards. */
-main {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: stretch;
-    align-content: flex-start;
-    gap: 2em 2em;
-}
-
-article {
     background-color: var(--background-color-2);
     padding: 0.5em;
-    width: calc((100% / 3) - 2.4em);
+    display: inline-block;
-    display: flex;
-    flex-direction: column;
 }
 
-@media(max-width: 1000px) {
+.project-card + .project-card {
-    article {
+    margin-top: 1em;
-        width: calc((100% / 2) - 2.4em);
-    }
 }
 
-@media(max-width: 480px) {
+.project-card > h2 {
-    article {
+    margin: 0 0 0.25em 0;
-        width: 100%;
-    }
 }
 
-article:nth-child(odd) {
+.project-card > h2:hover {
-    background-color: var(--background-color-3);
+    text-decoration: underline;
 }
 
-article h2 {
+.project-card > p {
-    margin-top: 0;
+    margin: 0.5em 0;
-    margin-bottom: 0.5em;
-}
-
-article p {
-    margin-top: 0.25em;
-    margin-bottom: 0.25em;
 }
 
 .icons-row {
     width: 100%;
-    margin-top: auto;
+    margin-top: 0.5em;
-    padding-top: 0.5em;
 }
 
 .lang-icon {
-    max-height: 2.5em;
+    max-height: 2em;
 }
 
 .lang-icon:not(:last-child) {
     margin-right: 0.5em;
 }
+
+pre {
+    padding: 0.25em !important;
+}

styles/style.css

@@ -24,7 +24,7 @@ body {
     font-family: "IBM Plex Sans", sans-serif;
     max-width: 50ch;
     margin: 0 auto;
-    padding: 0 1em;
+    padding: 0 0.5em;
     padding-bottom: 1em;
 }