wip: visual testing

Author: cd-bash

src/components/logo/index.ts

@@ -5,17 +5,20 @@ import LOGO from './assets/cd-labs-logo.png';
 
 export function buildMainLogo() {
     const logoContainer = document.createElement('div');
+    const logoLink = document.createElement('a');
     const logoImg = document.createElement('img');
     const logoText = document.createElement('p');
 
     logoContainer.className = 'main-logo';
 
+    logoLink.href = '/';
     logoImg.src = LOGO;
     logoImg.alt = "CD-Labs Logo";
 
     logoText.textContent = "CD-Labs";
 
-    logoContainer.appendChild(logoImg);
+    logoLink.appendChild(logoImg);
+    logoContainer.appendChild(logoLink);
     logoContainer.appendChild(logoText);
 
     return logoContainer;

src/content/about/assets/manifesto-test.png

@@ -1,9 +1,12 @@
 import { AboutPageContentStructure } from '../../views/about/';
 
+import MANIFESTO_IMG from './assets/manifesto-test.png';
+
 export const aboutContent: AboutPageContentStructure = {
     manifesto: {
         introTitle: "About cd-labs",
         header: "The manifesto for <span class='highlight'>shorter games</span>",
+        visualPath: MANIFESTO_IMG,
         paragraphs: [
             "Look at the achievements for any major blockbuster game. The trophy for completing the final chapter is often one of the rarest. The data tells a clear story: a huge percentage of players never see the credits roll.",
             "It isn't a lack of passion; it's a lack of time. As our lives get busier, 100-hour epics filled with repetitive tasks begin to feel like a second job. The industry is selling promises of vast worlds that, for most people, will remain largely unexplored.",

src/content/about/index.ts

@@ -3,6 +3,7 @@ import { writeParagraph, writeTitle, createWrapper } from "../utils";
 export type AboutSectionContent = {
     readonly introTitle?: string;
     readonly header: string;
+    readonly visualPath?: string;
     readonly paragraphs: string[];
     readonly alignment: 'left' | 'right';
 }
@@ -12,6 +13,7 @@ export type AboutSectionContent = {
 export function createAboutSection(content: AboutSectionContent) {
     const section = document.createElement('section');
     const wrapper = createWrapper();
+    const visual = document.createElement('img');
     const article = document.createElement('article');
 
     section.className = `about-section ${content.alignment}`;
@@ -20,9 +22,15 @@ export function createAboutSection(content: AboutSectionContent) {
         article.appendChild(introTitle(content.introTitle));
     }
 
+    if (content.visualPath) {
+        visual.src = content.visualPath;
+        visual.alt = content.header;
+    }
+
     article.appendChild(writeTitle("h2", content.header));
     article.appendChild(sectionParagraphs(content.paragraphs));
 
+    wrapper.appendChild(visual);
     wrapper.appendChild(article);
     section.appendChild(wrapper);
 

src/views/about/aboutSection.ts

@@ -23,4 +23,11 @@
         padding: 160px 0; 
     }
 
+    img {
+        width: 75%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 2;
+    }
 }

src/views/about/styles.css

@@ -25,7 +25,6 @@
             flex-direction: column;
             justify-content: center;
             align-items: flex-start;
-            padding: clamp(1rem, 5vw, 2rem);
         }
 
         &.right article {