From 285e3bc6ecb541f3b4951f96f15e6f91b37bc0fe Mon Sep 17 00:00:00 2001
From: AdamBtech <60339324+AdamBtech@users.noreply.github.com>
Date: Tue, 20 May 2025 23:27:17 +0200
Subject: [PATCH] Added checkered background

---
 .../about-display.component.html              |  2 +-
 .../contact-display.component.html            |  2 +-
 .../footer-display.component.html             |  2 +-
 .../hero-display/hero-display.component.html  |  2 +-
 .../projects-list.component.html              |  2 +-
 .../main-layout/main-layout.component.html    |  2 +-
 src/styles.css                                | 19 ++++++++++++++++++-
 7 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/features/about-display/about-display.component.html b/src/app/features/about-display/about-display.component.html
index af1469b..5260f9a 100644
--- a/src/app/features/about-display/about-display.component.html
+++ b/src/app/features/about-display/about-display.component.html
@@ -1,3 +1,3 @@
-<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
+<section class="border-b-1 h-100 flex items-top justify-top checkered-bg p-6 relative">
   <app-section-title title="NEURAL PROFILE" />
 </section>
diff --git a/src/app/features/contact-display/contact-display.component.html b/src/app/features/contact-display/contact-display.component.html
index 0c7d39f..e77ac2f 100644
--- a/src/app/features/contact-display/contact-display.component.html
+++ b/src/app/features/contact-display/contact-display.component.html
@@ -1,3 +1,3 @@
-<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
+<section class="border-b-1 h-100 flex items-top justify-top checkered-bg p-6 relative">
  <app-section-title title="TRANSMISSION LINKS" />
 </section>
diff --git a/src/app/features/footer-display/footer-display.component.html b/src/app/features/footer-display/footer-display.component.html
index d54e91b..1eac217 100644
--- a/src/app/features/footer-display/footer-display.component.html
+++ b/src/app/features/footer-display/footer-display.component.html
@@ -1,3 +1,3 @@
-<footer class="bg-nier-dark border-b-1 h-100 flex items-center justify-center text-nier-light">
+<footer class="checkered-bg-dark border-b-1 h-100 flex items-center justify-center text-nier-light">
   <p class="text-6xl font-noto-jp">FOOTER</p>
 </footer>
diff --git a/src/app/features/hero-display/hero-display.component.html b/src/app/features/hero-display/hero-display.component.html
index d9045dc..bbbbb39 100644
--- a/src/app/features/hero-display/hero-display.component.html
+++ b/src/app/features/hero-display/hero-display.component.html
@@ -1,4 +1,4 @@
 <section class="">
   <article class="border-b-1 h-100 flex items-center justify-center"><p class="text-9xl font-terminal-retro">HERO SECTION</p></article>
-  <article class="border-b-1 h-100 flex items-center justify-center"><p class="font-terminal-nier text-9xl">CREATIVE DEVELOPER</p></article>
+  <article class="border-b-1 h-100 flex items-center justify-center checkered-bg-dark"><p class="font-terminal-nier text-9xl">CREATIVE DEVELOPER</p></article>
 </section>
diff --git a/src/app/features/project-display/components/projects-list/projects-list.component.html b/src/app/features/project-display/components/projects-list/projects-list.component.html
index d595ec2..6f0650a 100644
--- a/src/app/features/project-display/components/projects-list/projects-list.component.html
+++ b/src/app/features/project-display/components/projects-list/projects-list.component.html
@@ -1,4 +1,4 @@
-<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
+<section class="border-b-1 h-100 flex items-top justify-top checkered-bg p-6 relative">
   <app-section-title title="EXECUTE // DIRECTORY" />
 </section>
 
diff --git a/src/app/layout/components/main-layout/main-layout.component.html b/src/app/layout/components/main-layout/main-layout.component.html
index df4ca0f..b98aae1 100644
--- a/src/app/layout/components/main-layout/main-layout.component.html
+++ b/src/app/layout/components/main-layout/main-layout.component.html
@@ -1,5 +1,5 @@
 <app-header />
-<main class="bg-nier-bg">
+<main class="bg-nier-bg checkered-background">
   <app-hero />
   <app-projects />
   <app-about />
diff --git a/src/styles.css b/src/styles.css
index 9ea89a7..c49618f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -77,6 +77,23 @@
     border-color: var(--color-nier-accent);
   }
 
-  /* Grid background utility */
 
+  .checkered-background{
+    background-color: #d1cdb7;
+    background-size: 0.3rem 0.3rem;
+    background-image: linear-gradient(to right, #ccc8b1 1px, rgba(204,200,177,0) 1px),
+    linear-gradient(to bottom, #ccc8b1 1px, rgba(204,200,177,0) 1px);
+  }
+
+  .checkered-bg-dark {
+    background-color: #121210; /* Almost black background */
+    background-size: 4px 4px; /* Small grid pattern */
+    background-image: linear-gradient(to right, rgba(50, 50, 50, 0.3) 1px, rgba(0, 0, 0, 0) 1px),
+    linear-gradient(to bottom, rgba(50, 50, 50, 0.3) 1px, rgba(0, 0, 0, 0) 1px);
+    color: #bbb9ad; /* Light gray with slight sepia tone for text */
+    font-family: 'Major Mono Display', monospace; /* Using your terminal-nier font */
+    min-height: 100vh;
+    padding: 2rem;
+    position: relative;
+  }
 }