From 713d2c997ba04e5129af237f7355031803e7fc9f Mon Sep 17 00:00:00 2001
From: TechRunner <willow.behar@protonmail.com>
Date: Thu, 9 Oct 2025 16:06:01 -0500
Subject: [PATCH] Added home styling

---
 simulation.js |   7 ++-
 style.css     | 158 +++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 142 insertions(+), 23 deletions(-)

diff --git a/simulation.js b/simulation.js
index 250f901..b8f7aea 100644
--- a/simulation.js
+++ b/simulation.js
@@ -1,12 +1,15 @@
 var bg = document.getElementById("backgroundSim")
 var ctx = bg.getContext("2d");
-ctx.canvas.width  = window.innerWidth;
-ctx.canvas.height = window.innerHeight;
+ctx.canvas.width  = window.screen.availWidth;
+ctx.canvas.height = window.screen.availHeight;
 rock = new Image();
 rock.src = "Rock1.png";
 
 ctx.fill()
 
+var resolutionTag = document.getElementById("resolutionTag");
+resolutionTag.textContent = "document: " + window.screen.availWidth + "x" + window.screen.availHeight + ", inner window: " + window.innerWidth + "x" + window.innerHeight;
+
 function drawCircle(x, y, r){
     ctx.beginPath();
     ctx.arc(x, y, r, 0, 2*Math.PI)
diff --git a/style.css b/style.css
index 801ea4c..f8c14f9 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,18 @@
-/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
-   HTML content. To learn how to do something, just try searching Google for questions like
-   "how to change link color." */
+/*
+Authors: Luna, Willow, Tech, W175B
+Date Created: 9/28/25
 
 
+
+*/
+
+/* Main Document Stylings */
+*{
+  padding: 0;
+  margin: 0;
+
+}
+
 body {
   background-color: black;
   color: #00ACAC;
@@ -11,10 +21,33 @@ body {
   width:100%;
   height:100%;
 }
+
 #intotitle{
   text-align: center;
   size: 50pt;
+  margin: 50px;
 }
+
+.warning{
+  color: #FF0011;
+  word-wrap: break-word;
+}
+
+.title{
+  color: #330822; /*Temp*/
+}
+
+canvas{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+
+}
+
 #backgroundSim{
   position: absolute;
   top:0;
@@ -31,10 +64,17 @@ div#imagelinks{
 
 div#mainview{
   height:83vh;
-  padding-left:25%;
-  padding-right:25%;
+  padding-left: 15%;
+  padding-right: 15%;
 }
 
+::-webkit-scrollbar-track{
+  height: 25%;
+}
+
+
+/* Post Area */
+
 div#postarea{
   /*position: absolute;
   left: 25%;
@@ -55,47 +95,53 @@ div#postarea{
   margin-bottom: 10px;
 }
 
-::-webkit-scrollbar-track{
-  height: 25%;
-}
-
-
-div#blogList{
-  display: flex;
-  align-items: center;
-  width:100%;
-  
-}
-
 #blogList ul{
   padding-right: 5%;
   padding-left: 5%;
   list-style: none;
   text-align: center;
   width:inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 
+/* Individual Posts */
 
-div#post{
+div.post {
   background-color: #223344;
   border-radius: 25px;
   word-wrap:break-word;
   margin-bottom: 5px;
   border-color: #225555;
   border-style: solid;
+  width: 400px;
+  padding: 5%;
 }
 
-#post ul, a{
+.post p{
+  width: 100%;
+  height: 100%;
+}
+
+.post ul, a{
   color: #ACACAC;
 }
 
-img#post{
+.postImage{
   width: 50%;
-  height: 50%;
+  aspect-ratio: 1/1;
   border-radius: 5%;
 }
 
+.postHeader{
+  color: #77FF66;
+}
+
+
+/* Biography */
+
 #bio{
   border-style:groove;
   border-radius: 10px;
@@ -103,6 +149,9 @@ img#post{
   padding-left: 5%;
   padding-right: 5%;
   height: 45%;
+  overflow: scroll;
+  scroll-behavior: auto;
+  text-align: center;
 }
 
 #bioHeader{
@@ -110,9 +159,71 @@ img#post{
   
 }
 
+
+#memberList img{
+  width: 25%;
+}
+
+.collumRow{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: 5px;
+}
+
+@media (max-width:800px) {
+  .collumRow{
+    flex-direction: row;
+  }
+}
+
 #memberList{
   padding-left: 5%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height:100%;
 }
+
+.member{
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding: 1px;
+}
+
+li.member{
+  border-style: solid;
+  border-color: #25a89d;
+  border-radius: 4px;
+  border-width: 1px;
+  list-style: none;
+  background-color: #767e7e8c;
+  height: 100%;
+  width: 100%;
+  margin: 5px;
+}
+
+a.member{
+  color: #FF00aa;
+  display: flex;
+  flex-direction: column;
+  margin: 3px;
+}
+
+@media (max-width: 800px){
+  div.post{
+    width: auto;
+  }
+
+  ul.mebere{
+    margin: 0 0 0 0;
+  }
+  li.member{
+    width: auto;
+  }
+}
+
 @media (min-width: 1000px){
   div#postarea{
     position:absolute;
@@ -130,3 +241,8 @@ img#post{
     height:70%;
   }
 }
+
+
+
+/* Footer Related*/
+