update local games

site.json

@@ -14,6 +14,11 @@
       "file": "blog.html",
       "showInNav": true
     },
+    {
+      "name": "Games",
+      "file": "games.html",
+      "showInNav": true
+    },
     {
       "name": "Resources",
       "file": "resources.html",

src/css/main.css

@@ -45,14 +45,11 @@ h1 {
   color: #1e1e1e;
   padding: 20px 15px;
   transform: rotate(-2deg);
-  transition: transform 1s ease-in-out;
+
   margin-bottom: 1.5rem !important;
   width: fit-content;
 }
 
-h1:hover {
-  transform: rotate(2deg);
-}
 
 h1 i {
   margin-right: 10px;
@@ -122,6 +119,26 @@ h2 i {
 
 }
 
+
+.image-container.red::after {
+
+  background-color: #EA3657;
+
+
+}
+.image-container.blue::after {
+
+  background-color: #6ACAD0;
+
+
+}
+.image-container.yellow::after {
+
+  background-color: #EDDE44;
+
+
+}
+
 .image-container:hover {
   transform: rotate(3deg);
 }
@@ -165,3 +182,52 @@ h2 i {
   margin: 150px 40px;
 }
 
+.image-caption-strong, .image-caption{
+  text-align: right;
+  margin-bottom: 0px;
+}
+
+.author-date{
+  font-style: italic;
+  font-size: 14px;
+}
+
+.btn {
+  transition: transform 0.3s;
+}
+
+.btn:hover {
+  transform: rotate3d(1, 1, 0, 10deg);
+}
+
+.game-card{
+  margin: 10px;
+
+}
+
+.card-img-container{
+  text-align: center;
+//background: black;
+max-height: 185px;
+}
+
+.card-img-top{
+  margin: 0 auto !important;
+  width: auto !important;
+  max-height: 185px;
+  max-width: 100%;
+}
+
+.game-card a img{
+  border: 2px solid transparent;
+
+}
+.game-card a img:hover{
+  border: 2px solid white;
+
+}
+
+
+.card-text{
+  margin: 0;
+}

src/pages/blog.hbs

@@ -7,10 +7,7 @@
 <div class="post" id="{{postID}}">
 <article>
      <h2>{{title}}</h2>
-        <div class="author-date">
-            <p>By {{author}}</p>
-            <p>{{date}}</p>
-        </div>
+        <p class="author-date">By {{author}}, on {{date}}</p>
 <div class="row">
 
     <div class="col-md-6">
@@ -21,9 +18,9 @@
         {{/if}}
     </div>
      <div class="col-md-6">
-        <img class="img-fluid" src="{{image}}" alt="{{title}}">
-        <strong>{{imageCaptionStrong}}</strong>
-        <p>{{imageCaptionSub}}</p>   
+        <div class="image-container"><img class="img-fluid" src="{{image}}" alt="{{title}}"></div>
+        <p class="fw-bold image-caption-strong">{{imageCaptionStrong}}</p>
+        <p class="image-caption">{{imageCaptionSub}}</p>   
     </div>
 </div>
 </article>

src/pages/blog.json

@@ -5,7 +5,7 @@
         "author": "Alex Bezuska",
         "date": "2023-02-20",
         "featured": true,
-        "blurb": "The Louisville Arcade Expo (LAX) is just around the corner, and we at Louisville Makes Games couldn't be more excited to be a part of it! This year's event is taking place from Friday, March 12 to Sunday, March 15, 2023, and it promises to be a fantastic showcase of retro gaming and local game development talent.",
+        "blurb": "The Louisville Arcade Expo (LAX) is just around the corner, and we at Louisville Makes Games couldn't be more excited to be a part of it! This year's event is taking place from Friday, March 10 to Sunday, March 12, 2023, and it promises to be a fantastic showcase of retro gaming and local game development talent.",
         "contentParagraphs": [
           "One of the main draws of the Louisville Arcade Expo is the chance to play retro arcade, console, and computer games. Whether you're a die-hard fan of classic games like Pac-Man and Space Invaders, or you're more interested in retro PC games like Doom and Quake played on a LAN, there's something for everyone at this event.",
           "But the fun doesn't stop there - Louisville Makes Games and other local game developers will be there too, showing off our latest game projects and giving attendees a chance to play them before they're released. It's a great opportunity to see what kind of creative talent is brewing right here in Kentucky, and to get a glimpse of what the future of gaming might look like.",
@@ -24,9 +24,16 @@
         "author": "Alex Bezuska",
         "date": "2023-02-19",
         "contentParagraphs": [
-          "When creating a game project, it can be tempting to use assets found online as a shortcut to creating original content. However, it is important to pay attention to the license associated with each asset to ensure that it can be used appropriately.",
-          "Creative Commons Zero (CC0) is a public domain license that allows for free use of an asset without attribution. However, most other licenses do require some form of attribution, which means giving credit to the original artist for their work. The MIT license is one example of a license that requires attribution. Game developers should also be wary of \"viral\" licenses like the GPL v3, which requires that any derivative works also be released under the GPL v3 license.",
-          "When using other people's work in game projects, it's important to make sure that the artist receives proper credit. This can be done through including the artist's name in the game credits or on the game's page on a jam site, for example."
+            "When creating a game project, it can be tempting to use assets found online as a shortcut to creating original content. However, it is important to pay attention to the license associated with each asset to ensure that it can be used appropriately.",
+            "Understanding Creative Commons Zero and Other Licenses",
+
+            "Creative Commons Zero (CC0) is a public domain license that allows for free use of an asset without attribution. However, most other licenses do require some form of attribution, which means giving credit to the original artist for their work. The MIT license is one example of a license that requires attribution. Game developers should also be wary of \"viral\" licenses like the GPL v3, which requires that any derivative works also be released under the GPL v3 license.",
+            "Giving Credit to Artists",
+
+            "When using other people's work in game projects, it's important to make sure that the artist receives proper credit. This can be done through including the artist's name in the game credits or on the game's page on a jam site, for example. Some licenses may also require a link back to the originaly work or the creator's website.",
+            "TL;DR:",
+
+            "Use Creative Commons or MIT licensed assets, be wary of GPL, and credit the artist."
         ],
         "ctaLink": "",
         "image": "/img/Jason-Thompson---Local-Louisville-composer.jpg",

src/pages/games.hbs

@@ -0,0 +1,38 @@
+{{>header}}
+
+<main class="container my-5">
+
+<h1>Games</h1>
+
+<p> A very incomplete list of games made in the Louisville area, more to come soon!</p>
+  <div class="row">
+    {{#each games}}
+    {{#if show}}
+      <div class="col-md-4">
+        <div class="card game-card bg-dark text-white">
+          <div class="card-img-container">
+          <a href="{{link}}" target="_blank" >
+            <img class="card-img-top" src="{{image}}" alt="{{name}}">
+            </a>
+          </div>
+          <div class="card-body">
+            <h5 class="card-title">{{name}}</h5>
+            {{#if complete}}
+            <p class="card-text">Released {{released}}</p>
+            {{else}}
+            <p class="card-text">In Development since {{started}}</p>
+            {{/if}}
+            <p class="card-text">By {{creator}}</p>
+            <p class="card-text">{{pitch}}</p>
+            {{!-- <a href="{{link}}" target="_blank" class="btn btn-primary">Play Now</a> --}}
+          </div>
+        </div>
+      </div>
+       {{/if}}
+    {{/each}}
+  </div>
+</div>
+
+
+</main>
+{{>footer}}