Merge pull request #44 from fac-17/feature/css-colours

did a bit of work on the css
fac-17 · Aug 9, 2019 · 79538b0 · 79538b0
2 parents 05215f7 + ad7f9d5
commit 79538b0
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/public/bugbear-bear.png b/public/bugbear-bear.png
diff --git a/public/index.html b/public/index.html
@@ -21,14 +21,14 @@
         src="/public/Bugbear.png"
         alt="Angry bear picture"
       />
-      <h1>Bugbears!</h1>
-    </section>
-    <h1 class="section-header">Let off some steam!</h1>
-    <section class="bugbear-form-section">
-
+      <h1>Bugbears</h1>
       <h1 class="section-header">Let off some steam!</h1>
-<p>Pissed off with the world? Politics getting you down? Let it out, you'll feel better!
+      <p>Pissed off with the world? Politics getting you down? Let it out, you'll feel better!</p>
+      <hr>
 
+    </section>
+
+    <section class="bugbear-form-section">
       <form
         class="bugbear-form"
         action="/post-bugbear"
@@ -88,6 +88,7 @@ <h1 class="section-header">Let off some steam!</h1>
         <button type="submit" name="button">+ Add Bugbear</button>
       </form>
     </section>
+    <hr>
 
     <section class="bugbear-table-section">
       <h1 class="section-header">See what bugs others</h1>

diff --git a/public/style.css b/public/style.css
@@ -2,28 +2,39 @@
   font-family: "Playfair Display", serif;
   font-family: "Miriam Libre", sans-serif;
   text-align: center;
-  /* vertical-align: middle; */
-  background-color: white;
-  color: black;
+  color: color: #233F52;
+}
+
+.title-section {
+  display: flex
+  justify-content: center;
+  font-size: 2em;
 }
 
 h1 {
-  font-size: 100px;
+  color: #233F52;
+}
+
+.section-header {
+  font-size: 1.75em;
+  color: #A3590B;
 }
 
 body {
   min-width: 600px;
 }
 
 .bear-pic {
-  width: 40vw;
+  width: 30vw;
 }
 
 .bugbear-form-section {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
+  font-size: 1.5em;
+  color: #233F52;
 }
 .category {
 }
@@ -53,8 +64,20 @@ li {
 }
 
 p {
-  text-align: left;
+  text-align: center;
+  font-size: 1.5rem;
+  color: #233F52;
 }
 
 button {
+  background-color: #f7b117;
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 4px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
 }