Added checkered background

This commit is contained in:
AdamBtech
2025-05-20 23:27:17 +02:00
parent c4ae4eaced
commit 285e3bc6ec
7 changed files with 24 additions and 7 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -1,5 +1,5 @@
<app-header />
<main class="bg-nier-bg">
<main class="bg-nier-bg checkered-background">
<app-hero />
<app-projects />
<app-about />

View File

@@ -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;
}
}