From 0ca56186b85a561dc466728868c183dd9bddaf5e Mon Sep 17 00:00:00 2001
From: zepp <zepp@zepps.cafe>
Date: Thu, 2 Jan 2025 00:33:17 -0500
Subject: [PATCH] styling in regards to appearance. background colors and image

---
 index.php                    |   4 ++--
 site-resources/assets/bg.png | Bin 0 -> 2275 bytes
 style/style.css              |  22 +++++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 site-resources/assets/bg.png

diff --git a/index.php b/index.php
index 58e2baa..4afae39 100644
--- a/index.php
+++ b/index.php
@@ -34,9 +34,9 @@
 
       </section>
     
-     <h3 class="facts-header">Baxter facts!</h3>
 
       <section class="baxter-info">
+        <h3 class="facts-header">Baxter facts!</h3>        
         <div class="baxter-is">  
           <p>Baxter is:</p>
             <ul>
@@ -75,9 +75,9 @@
           </div>
       </section>
     
-      <h3>My favorite photos of Baxter</h3>
       
       <section class="favorite-baxter-photos">
+        <h3>My favorite photos of Baxter</h3>        
         <figure>
             <img src="./img/posed-baxter.jpg" alt="My cat Baxter laying on my chest over a blanket in bed looking at the camera. The many details and patterns of his mackeral tabby fur pattern are fully visible">
 
diff --git a/site-resources/assets/bg.png b/site-resources/assets/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..aef714708abda99df6e136f9f02d1f39d1ed11d1
GIT binary patch
literal 2275
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

literal 0
HcmV?d00001

diff --git a/style/style.css b/style/style.css
index 6a9fb4a..08895dc 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,3 +1,8 @@
+:root {
+	--section-color: #fccce4bb;
+	--border-color: #f6da92;
+}
+
 *, *::before, *::after {
 	margin: 0;
 	padding: 0;
@@ -9,6 +14,8 @@ html {
 }
 
 body {
+	background-image: url("../site-resources/assets/bg.png");
+	background-attachment: fixed;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -67,9 +74,15 @@ main {
 
 .favorite-baxter-photos {
 	display: grid;
-	grid-template-rows: 25rem 25rem;
+	grid-template-rows: 5rem 25rem 25rem;
 	grid-template-columns: 20rem 20rem;
 	justify-items: center;
+	justify-content: center;
+}
+
+.favorite-baxter-photos h3 {
+	grid-row: 1/2;
+	grid-column: 1/3;
 }
 
 .favorite-baxter-photos figure {
@@ -85,3 +98,10 @@ main {
 	object-fit: fill;
 }
 
+section {
+	background-color: var(--section-color);
+	padding: 1.25rem;
+	border: 2px solid var(--border-color);
+	border-radius: 15px;
+	width: 50rem;
+}