basic grid layout for project page with featured rows and non-featured 2-column grid; began converting images to image links

src/static/css/projects.css

@@ -111,7 +111,7 @@ ul { list-style-position: inside; }
     color: #CB9CF2;
 }
 .nav-link a:hover {
-    color: #F9B3D7;auto
+    color: #F9B3D7;
 }
 .nav-link a:active {
     color: #f463ad;
@@ -135,6 +135,11 @@ ul { list-style-position: inside; }
 
 .project-header {
     grid-area: 1 / 1 / 2 / 3;
+    color: #F9B3D7;
+    font-size: 15px;
+    margin-top: 25px;
+    padding-top: 10px;
+    padding-left: 10px;
 }
 
 .featured {
@@ -144,13 +149,58 @@ ul { list-style-position: inside; }
 .featured-box {
 }
 
+.featured-desc {
+    color: #F9B3D7;
+    font-size: 25px;
+    text-align: right;
+    margin-right: 10px;
+    
+}
+
+.featured-desc a:link {
+    color: #66C7F4;
+}
+.featured-desc a:visited {
+    color: #CB9CF2;
+}
+.featured-desc a:hover {
+    color: #F9B3D7;
+}
+.featured-desc a:active {
+    color: #f463ad;
+}
+
 .more {
     grid-area: 3 / 1 / 4 / 3;
+    width: 800px;
+    display: grid;
+    grid-template-columns: auto auto;
 }
 
 .more-box {
 }
 
+.more-desc {
+    color: #F9B3D7;
+    font-size: 18px;
+    text-align: center;
+    margin-right: 10px;
+    
+}
+
+.more-desc a:link {
+    color: #66C7F4;
+}
+.more-desc a:visited {
+    color: #CB9CF2;
+}
+.more-desc a:hover {
+    color: #F9B3D7;
+}
+.more-desc a:active {
+    color: #f463ad;
+}
+
 .footer-row {
     grid-area: 4 / 1 / 5 / 4;
     background-color: #080410;

src/views/projects.tpl

@@ -3,42 +3,41 @@
     <div class="content">
     
         <div class="project-header">
-            projects
+            <h1>chimchooree projects </h1>
         </div>    
         <div class="featured">
             <div class="featured-box">
-                <img src="/static/img/ent/blessfrey.png" alt="(image: blessfrey screenshot)"><br>
-                <br>
-                <a href="diary/entries/200806">blessfrey - action RPG in Godot Engine</a><br>
-                <br>
-            </div>
-            <div class="featured-box">
-                <img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> <br>
-                <br>
-                <a href="https://gitlab.com/chimchooree/cat-store">Cat Store - text-based cat show + breeding sim in Java (IntelliJ)</a> <br>
+                <a href="diary/entries/200806">
+                    <img src="/static/img/ent/blessfrey.png" alt="(image: blessfrey screenshot)">
+                </a><br>
+                <div class="featured-desc"><a href="diary/entries/200806"><b>blessfrey</b> - action RPG in Godot Engine</a><br></div>
                 <br>
             </div>
         </div>    
+        <center>
         <div class="more">
             <div class="more-box">
-                <img src="/static/img/ent/SmallThingThatMakesThings.png" alt="(image: Small Thing That Makes Things keyart)" width="400" height="179"> <br>
-                <br>
-                <a href="diary/entries/200903">Small Thing That Makes Things - game jam game in Godot Engine</a> <br>
+                <img src="/static/img/ent/CatStore_small.png" alt="(image: CatStore screenshot)"> <br>
+                <div class="more-desc"><a href="https://gitlab.com/chimchooree/cat-store"><b>Cat Store</b> - text-based cat show + breeding sim in Java (IntelliJ)</a> <br></div>
                 <br>
             </div>
             <div class="more-box">
-                <img src="/static/img/ent/pretendOS_catchat.jpeg" alt="(image: pretendOS screenshot)" width="400" height="225"> <br>
+                <img src="/static/img/ent/SmallThingThatMakesThings_small.png" alt="(image: Small Thing That Makes Things keyart)"> <br>
+                <div class="more-desc"><a href="diary/entries/200903"><b>Small Thing That Makes Things</b> - game jam game in Godot Engine</a> <br></div>
                 <br>
-                <a href="diary/entries/201126">pretendOS - pretend desktop in Godot Engine</a> <br>
+            </div>
+            <div class="more-box">
+                <img src="/static/img/ent/pretendOS_small.png" alt="(image: pretendOS screenshot)"> <br>
+                <div class="more-desc"><a href="diary/entries/201126"><b>pretendOS</b> - pretend desktop in Godot Engine</a> <br></div>
                 <br>
             </div>
             <div class="more-box">
                 <img src="/static/img/ent/gitlab_publicprojects.png" alt="(image: GitLab page screenshot)"> <br>
-                <br>
-                <a href="https://gitlab.com/users/chimchooree/projects">public GitLab repo</a> <br>
+                <div class="more-desc"><a href="https://gitlab.com/users/chimchooree/projects"><b>public GitLab repo</b></a> <br></div>
                 <br>
             </div>
-        </div>    
+        </div>  
+        </center>  
 
     </div>