Merge branch 'web-homepage' into 'master'

Web homepage

See merge request kdam0/helpthehomeless!1

2 files changed, 33 insertions, 11 deletions

diff --git a/web/public/stylesheets/home.css b/web/public/stylesheets/home.css
new file mode 100644
index 0000000..28251ed
--- /dev/null
+++ b/web/public/stylesheets/home.css
@@ -0,0 +1,18 @@
+body {
+  background-color: #faf2e4;
+  margin: 0 15%;
+  font: 18px sans-serif;
+}
+
+h1 {
+  text-align: center;
+  font-family: serif;
+  font-weight: normal;
+  border-bottom: 1px solid #57b1dc;
+  margin-top: 30px;
+}
+
+h2 {
+  color: #d1633c;
+  font-family: serif;
+}
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index 5f39fcf..fd6ed87 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -21,11 +21,14 @@ a {
   left: 5px;
   z-index: 2;
   width: 350px;
+  height: 99vh;
   position: relative;
   float: left;
-  background-color: lightgrey;
+  background-color: #7b7b7b33;
   border-radius: 10px;
   visibility: hidden;
+  display: flex;
+  flex-direction: column;
 }
 #details-header {
   text-align: center;
@@ -34,15 +37,16 @@ a {
 }
 #report-container {
   overflow: auto;
-  max-height: 500px;
+  height: 80vh;
 }
 #report {
-  background-color: #0CC5EA;
+  background-color: #5694AD;
+  box-shadow: 10px 10px 8px -5px #888;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px;
-  padding: 5px;
+  padding: 0px;
   border-radius: 10px;
   display: flex;
   justify-content: flex-end;
@@ -57,7 +61,6 @@ a {
 #report span {
   background-color: white;
   padding: 15px;
-  border-radius: 10px;
   font-weight: lighter;
   font-size: large;
   text-align: center;
@@ -65,13 +68,14 @@ a {
   word-wrap: break-word;
 }
 #btn-container {
-  height: 30px;
-  top: 250px;
-  background-color: lightgrey;
   width: 350px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  text-align: center;
+  position: absolute;
+  bottom: 0;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+#btn-container button {
+  box-shadow: 5px 5px 8px #888;
 }
 .details-btn {
   position: relative;