projects: update markup

src/assets/css/main.css

@@ -69,15 +69,15 @@ html, body {
   scroll-behavior: smooth;
 }
 
-header,
+body > header,
-footer,
+body > footer,
-main {
+body > main {
   box-sizing: content-box;
   max-width: 45rem;
   padding: 3% 5%;
 }
 
-header ul {
+body > header ul {
   display: flex;
   flex-wrap: wrap;
   font-size: 1.5rem;
@@ -85,20 +85,20 @@ header ul {
   margin: 0;
 }
 
-header li {
+body > header li {
   margin-bottom: 0;
 }
 
-header li::after {
+body > header li::after {
   content: ' / ';
   white-space: pre;
 }
 
-header li:last-child::after {
+body > header li:last-child::after {
   content: '';
 }
 
-footer {
+body > footer {
   color: hsl(0, 0%, 0%, 0.6);
 }
 

src/pages/projects.md

@@ -9,11 +9,18 @@ description: 'Incomplete list of projects and experiments.'
 
 ---
 <style>
-h4 {
+  .project:last-child {
+    margin-bottom: 1.5rem;
+  }
+
+  .project > header {
+    font-family: 'Open Sans Condensed', sans-serif;
     font-size: 1.3em;
-  margin-bottom: 0.5em;
+    color: hsl(0, 0%, 0%, 0.7);
-  margin-top: 1em;
+  }
-}
+  .project > p {
+    margin-bottom: 0.5rem;
+  }
 </style>
 
 # Projects
@@ -34,116 +41,231 @@ Incomplete list of&nbsp;my&nbsp;projects and experiments.
 
 ## Interactive Fiction Tools
 
-  - #### ElseIFPlayer
+  - <article class='project'>
+      <header>
+        <strong>
+          ElseIFPlayer
+        </strong>
+      </header>
+      <p>
         Interactive fiction player for the web.
-
+      </p>
       <a href='https://github.com/He4eT/elseifplayer' target='_blank'>repository</a>
       | <a href='https://www.ifwiki.org/ElseIFPlayer' target='_blank'>ifwiki</a>
       | <a href='https://he4et.github.io/elseifplayer/' target='_blank'>app</a>
+    </article>
 
-  - #### cheap-glkote
+  - <article class='project'>
+      <header>
+        <strong>
+          cheap-glkote
+        </strong>
+      </header>
+      <p>
         Abstract implementation of&nbsp;the GlkOte library interface
         designed to&nbsp;be&nbsp;used with Emglken.
-
+      </p>
       <a href='https://github.com/He4eT/cheap-glkote' target='_blank'>repository</a>
       | <a href='https://www.npmjs.com/package/cheap-glkote' target='_blank'>npm</a>
+    </article>
 
 ---
 
 ## Games
 
-  - #### DASH DOT PIT
+  - <article class='project'>
+      <header>
+        <strong>
+          DASH DOT PIT
+        </strong>
+      </header>
+      <p>
         Endless top-down shooter for TIC-80 where Morse code is your weapon.
-
+      </p>
       <a href='https://github.com/He4eT/DotDashPit' target='_blank'>repository</a>
       | <a href='https://tic80.com/play?cart=4301' target='_blank'>play</a>
+    </article>
 
-  - #### Yet Another Experiment
+  - <article class='project'>
+      <header>
+        <strong>
+          Yet Another Experiment
+        </strong>
+      </header>
+      <p>
         Tiny “escape the room” style TADS3&nbsp;game.
         <br>Designed as&nbsp;a&nbsp;set of&nbsp;examples for developing interactive fiction.
-
+      </p>
       <a href='https://github.com/He4eT/yet-another-experiment' target='_blank'>repository</a>
       | <a href='https://ifdb.org/viewgame?id=rsssdo3anjpwnt6e' target='_blank'>ifdb</a>
       | <a href='https://he4et.github.io/elseifplayer/#/focus/https%3A%2F%2Fifarchive.org%2Fif-archive%2Fgames%2Ftads%2Fyet_another_experiment.t3/serika_dark/' target='_blank'>play</a>
+    </article>
 
 ---
 
 ## Services
 
-  - #### Simple SpaceAPI
+  - <article class='project'>
+      <header>
+        <strong>
+          Simple SpaceAPI
+        </strong>
+      </header>
+      <p>
         A lightweight SpaceAPI server with both web and REST interfaces.
-
+      </p>
       <a href='https://github.com/He4eT/simple-spaceapi' target='_blank'>repository</a>
+    </article>
 
 ---
 
 ## Inventory
 
 ### Hardware
-  - #### Cantor MX Tastatura
+
+  - <article class='project'>
+      <header>
+        <strong>
+          Cantor MX Tastatura
+        </strong>
+      </header>
+      <p>
         Small custom ergonomic mechanical keyboard.
-
+      </p>
       <a href='https://github.com/He4eT/cantor-mx-tastatura' target='_blank'>repository</a>
+    </article>
 
-  - #### oddkb
+  - <article class='project'>
+      <header>
+        <strong>
+          oddkb
+        </strong>
+      </header>
+      <p>
         Huge custom ergonomic mechanical Dactyl-Manuform (5&times;6) keyboard.
-
+      </p>
       <a href='https://github.com/He4eT/oddkb' target='_blank'>repository</a>
+    </article>
 
 ---
 
 ### Settings
-  - #### dotfiles
+
+  - <article class='project'>
+      <header>
+        <strong>
+          dotfiles
+        </strong>
+      </header>
+      <p>
         Custom-made desktop environment based on&nbsp;i3wm.
         <br>It&nbsp;comes with settings for
         i3wm, Polybar, Rofi, dunst, NeoVim, and some other applications.
-
+      </p>
       <a href='https://github.com/He4eT/dotfiles' target='_blank'>repository</a>
+    </article>
 
 ---
 
 ### Software, Plugins and Tools
-  - #### desolate.nvim
+
+  - <article class='project'>
+      <header>
+        <strong>
+          desolate.nvim
+        </strong>
+      </header>
+      <p>
         Another customizable not-so-colorful NeoVim colorscheme.
-
+      </p>
       <a href='https://github.com/He4eT/desolate.nvim' target='_blank'>repository</a>
+    </article>
 
-  - #### desolate-gtk
+  - <article class='project'>
+      <header>
+        <strong>
+          desolate-gtk
+        </strong>
+      </header>
+      <p>
         Another customizable not-so-colorful GTK theme for your tiling WM.
-
+      </p>
       <a href='https://github.com/He4eT/Desolate-GTK' target='_blank'>repository</a>
+    </article>
 
-  - #### tabswitcher
+  - <article class='project'>
+      <header>
+        <strong>
+          tabswitcher
+        </strong>
+      </header>
+      <p>
         Switch between Firefox tabs and manage them with a&nbsp;fuzzy search and basic command toolset.
-
+      </p>
       <a href='https://github.com/He4eT/tabswitcher' target='_blank'>repository</a>
       | <a href='https://addons.mozilla.org/en-GB/firefox/addon/tabswitcher/' target='_blank'>extension</a>
+    </article>
 
-  - #### tabswiper
+  - <article class='project'>
+      <header>
+        <strong>
+          tabswiper
+        </strong>
+      </header>
+      <p>
         Firefox extension that makes trimming your tabs as&nbsp;effortless as&nbsp;swiping on&nbsp;a&nbsp;dating app.
-
+      </p>
       <a href='https://github.com/He4eT/tabswiper' target='_blank'>repository</a>
       | <a href='https://addons.mozilla.org/en-GB/firefox/addon/tabswiper/' target='_blank'>extension</a>
+    </article>
 
-  - #### fuzzsoma
+  - <article class='project'>
+      <header>
+        <strong>
+          fuzzsoma
+        </strong>
+      </header>
+      <p>
         SomaFM CLI station selector.
-
+      </p>
       <a href='https://github.com/He4eT/fuzzsoma' target='_blank'>repository</a>
+    </article>
 
-  - #### fuzzy-bitwarden-clipboard
+  - <article class='project'>
+      <header>
+        <strong>
+          fuzzy-bitwarden-clipboard
+        </strong>
+      </header>
+      <p>
         Interactive Bitwarden CLI wrapper.
-
+      </p>
       <a href='https://github.com/He4eT/fuzzy-bitwarden-clipboard' target='_blank'>repository</a>
+    </article>
 
-  - #### huge-link
+  - <article class='project'>
+      <header>
+        <strong>
+          huge-link
+        </strong>
+      </header>
+      <p>
         Minimalistic serverless publishing tool for small markdown posts.
-
+      </p>
       <a href='https://github.com/He4eT/huge-link' target='_blank'>repository</a>
       | <a href='https://he4et.github.io/huge-link/' target='_blank'>app</a>
+    </article>
 
-  - #### conky-dashboard
+  - <article class='project'>
+      <header>
+        <strong>
+          conky-dashboard
+        </strong>
+      </header>
+      <p>
         Desktop widgets for system status monitoring.
-
+      </p>
       <a href='https://github.com/He4eT/conky-dashboard' target='_blank'>repository</a>
+    </article>
 
 ---