From d92942c8bd06f3eba6a6c65aff1285a527595a73 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Wed, 9 Sep 2020 15:51:28 +0200
Subject: [PATCH] [frontend] Refactor public pages css

---
 kibicara-frontend/src/app/app.component.html  |  5 +-
 kibicara-frontend/src/app/app.component.scss  |  1 +
 .../homepage/homepage.component.html          | 26 +++++-----
 .../homepage/homepage.component.scss          | 44 ----------------
 .../hoodpage/hoodpage.component.html          |  4 +-
 .../hoodpage/hoodpage.component.scss          |  8 ---
 .../hoodspage/hoodspage.component.html        |  4 +-
 .../hoodspage/hoodspage.component.scss        | 39 ++++----------
 .../organizerspage.component.html             | 18 +++----
 .../organizerspage.component.scss             | 22 --------
 .../public-pages/public-pages.component.html  |  1 -
 kibicara-frontend/src/sass/styles.scss        | 52 +++++++++++++++++++
 12 files changed, 93 insertions(+), 131 deletions(-)

diff --git a/kibicara-frontend/src/app/app.component.html b/kibicara-frontend/src/app/app.component.html
index 6c0b0b6..d9cc1da 100644
--- a/kibicara-frontend/src/app/app.component.html
+++ b/kibicara-frontend/src/app/app.component.html
@@ -1,4 +1,7 @@
 <app-toolbar></app-toolbar>
 <div class="content">
   <router-outlet></router-outlet>
-</div>
\ No newline at end of file
+</div>
+<footer>
+  <app-footer></app-footer>
+</footer>
diff --git a/kibicara-frontend/src/app/app.component.scss b/kibicara-frontend/src/app/app.component.scss
index 12a0921..8c499aa 100644
--- a/kibicara-frontend/src/app/app.component.scss
+++ b/kibicara-frontend/src/app/app.component.scss
@@ -2,4 +2,5 @@
 
 .content {
   margin-top: $toolbar-height;
+  min-height: 100%;
 }
diff --git a/kibicara-frontend/src/app/public-pages/homepage/homepage.component.html b/kibicara-frontend/src/app/public-pages/homepage/homepage.component.html
index 9a94249..30d56e3 100644
--- a/kibicara-frontend/src/app/public-pages/homepage/homepage.component.html
+++ b/kibicara-frontend/src/app/public-pages/homepage/homepage.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="heading">
     <h1 class="h1">Kibicara</h1>
-    <p class="text">
+    <p class="howto-container-2-text">
       Kibicara hoods are connecting your local community - while you use your
       favorite messenger.
     </p>
@@ -10,9 +10,9 @@
   <div class="banner"></div>
 </div>
 
-<div class="howto-container">
-  <div class="howto">
-    <h2>Cross-platform</h2>
+<div class="howto-container-3">
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Cross-platform</h2>
     <p>
       Kibicara is a bridge between multiple messaging platforms with the goal of
       providing real-time broadcast messages for real-life communities. Kibicara
@@ -20,16 +20,16 @@
       different platforms.
     </p>
   </div>
-  <div class="howto">
-    <h2>Community-driven</h2>
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Community-driven</h2>
     <p>
       Kibicara provides a connection to your (local) community, without the need
       to install new software or to create new accounts. Just use the platforms
       you already know and love and subscribe to your Kibicara hood!
     </p>
   </div>
-  <div class="howto">
-    <h2>Inclusive and easy</h2>
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Inclusive and easy</h2>
     <p>
       Messages sent with Kibicara reach people via Telegram, Twitter and even
       E-Mail - perfect for announcing the next neighborhood meetings, creating
@@ -41,7 +41,7 @@
 <div class="banner2"></div>
 
 <div class="container">
-  <p class="text">
+  <p class="howto-container-2-text">
     Kibicara is a bridge between multiple messaging platforms with the goal of
     providing broadcast communication for (local) communities. Hoods are
     community-administrated instances of Kibicara, being able to customize
@@ -53,13 +53,13 @@
 </div>
 
 <div class="howto-container-2">
-  <div class="howto">
-    <h2>Gather a new hood!</h2>
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Gather a new hood!</h2>
     If you want to create your own hood for your community, you can read our
     <a [routerLink]="['/organizers']">page</a> for hood-admins.
   </div>
-  <div class="howto">
-    <h2>Contribute!</h2>
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Contribute!</h2>
     Kibicara is Open Source software! If you want to contribute to the
     development of Kibicara check out our
     <a href="https://github.com/acipm/kibicara">Github</a>.
diff --git a/kibicara-frontend/src/app/public-pages/homepage/homepage.component.scss b/kibicara-frontend/src/app/public-pages/homepage/homepage.component.scss
index 37ced6f..ab290d4 100644
--- a/kibicara-frontend/src/app/public-pages/homepage/homepage.component.scss
+++ b/kibicara-frontend/src/app/public-pages/homepage/homepage.component.scss
@@ -9,14 +9,6 @@
   }
 }
 
-.text {
-  padding-top: 40px;
-  padding-bottom: 30px;
-  color: white;
-  font-size: 1.4375rem;
-  line-height: 1.875rem;
-}
-
 .container {
   background-color: #673ab7;
   display: grid;
@@ -46,31 +38,6 @@
   margin-bottom: 5%;
 }
 
-.howto-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 5%;
-  margin: 5% 10% 5% 10%;
-  @media (max-width: 800px) {
-    grid-template-columns: 1fr;
-    margin-bottom: 200px;
-    margin-top: 100px;
-  }
-}
-
-.howto-container-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5%;
-  margin: 5% 10% 5% 10%;
-  @media (max-width: 800px) {
-    grid-template-columns: 1fr;
-    gap: 10%;
-    margin-top: 100px;
-    margin-bottom: 200px;
-  }
-}
-
 .banner2 {
   background: url("../../../assets/hoods3.jpg");
   background-size: 100%;
@@ -80,17 +47,6 @@
   min-height: 200px;
 }
 
-.howto {
-  color: grey;
-  font-size: 1.4375rem;
-  line-height: 1.875rem;
-}
-
-h2 {
-  font-weight: bold;
-  font-size: 1.6375rem;
-}
-
 // color can be changed, i just chose a slightly better color than dark blue
 a {
   color: #673ab7;
diff --git a/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html b/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html
index faa37e9..991a254 100644
--- a/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html
+++ b/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html
@@ -1,7 +1,7 @@
 <app-heading-one [title]="hood.name"></app-heading-one>
-<div class="container">
+<div class="public-margin container">
   <div class="markdown">
-    <markdown class="markdown" [data]="hood.landingpage"></markdown>
+    <markdown [data]="hood.landingpage"></markdown>
   </div>
 
   <app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>
diff --git a/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.scss b/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.scss
index 3eb37b8..1479b97 100644
--- a/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.scss
+++ b/kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.scss
@@ -1,16 +1,8 @@
 .container {
   display: grid;
-  margin-left: 10%;
-  margin-right: 10%;
-  margin-bottom: 5%;
   gap: 30px;
 }
 
-.heading {
-  font-size: 2.3125rem;
-  margin-bottom: 20px;
-}
-
 .markdown {
   margin-top: 20px;
 }
diff --git a/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html b/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html
index c88f965..fe2d6b7 100644
--- a/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html
+++ b/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html
@@ -1,11 +1,11 @@
 <app-heading-one [title]="title"></app-heading-one>
 <div class="page">
   <div class="description">
-    <p class="text">
+    <p class="big-paragraph-font text">
       Enter a search term below to find your local community - or create
       <a [routerLink]="['/organizers']">a new hood! </a>
     </p>
-    <div class="banner"></div>
+    <img class="banner" src="assets/hoods1.jpg" />
   </div>
   <mat-form-field class="searchbar">
     <mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>
diff --git a/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.scss b/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.scss
index 27de6d3..e783068 100644
--- a/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.scss
+++ b/kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.scss
@@ -11,6 +11,7 @@
 .page {
   padding-left: 10%;
   padding-right: 10%;
+  padding-bottom: 5%;
 }
 
 .list {
@@ -19,17 +20,11 @@
   margin-right: 30px;
 }
 
-h1 {
-  text-align: center;
-  text-transform: uppercase;
-  font-size: 3.4rem;
-  color: white;
-  font-weight: bold;
-}
-
 .banner {
-  background: url("../../../assets/hoods1.jpg");
-  background-size: 100%;
+  max-width: 100%;
+  max-height: 200px;
+  overflow: hidden;
+  object-fit: cover;
   width: 100%;
 }
 
@@ -37,27 +32,13 @@ h1 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
+  margin-bottom: 2%;
+  justify-items: center;
+  align-items: center;
   @media (max-width: 600px) {
     grid-template-columns: 1fr;
+    margin-top: 5%;
+    margin-bottom: 5%;
     gap: 0px;
   }
-  margin-bottom: 20px;
-}
-
-.text {
-  padding-top: 15%;
-  padding-bottom: 15%;
-  color: gray;
-  font-size: 1.4375rem;
-  line-height: 1.875rem;
-  @media (max-width: 600px) {
-    grid-template-columns: 1fr;
-    text-align: center;
-    padding-bottom: 3%;
-  }
-}
-
-// color can be changed, i just chose a slightly better color than dark blue
-a {
-  color: #673ab7;
 }
diff --git a/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.html b/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.html
index 1c14017..0f00856 100644
--- a/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.html
+++ b/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.html
@@ -1,19 +1,19 @@
 <app-heading-one [title]="title"></app-heading-one>
 
-<div class="howto-container">
-  <div class="howto">
-    <h2>Build your community</h2>
+<div class="howto-container-3">
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Build your community</h2>
     Hood admins build a real life community by creating a network of people - be
     it neighborhood communities, interest-based groups or any other squads!
   </div>
-  <div class="howto">
-    <h2>Customize your hood</h2>
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Customize your hood</h2>
     Kibicara provides the technology for hood admins to connect people over
     different messaging platforms. Hood admins customize their Kibicara hood to
     fit their community's needs.
   </div>
-  <div class="howto">
-    <h2>Share the information</h2>
+  <div class="big-paragraph-font">
+    <h2 class="big-h2-font">Share the information</h2>
     Hood admins share the platform-specific broadcasting endpoints with their
     community and provide the information and technology to its members. This is
     done by providing a <a [routerLink]="['/hoods']">public hood page</a>.
@@ -21,8 +21,8 @@
 </div>
 
 <div class="container">
-  <div class="text">
-    <h2>How does it work?</h2>
+  <div class="howto-container-2-text">
+    <h2 class="big-h2-font">How does it work?</h2>
     <ol>
       <li>
         Create a Kibicara
diff --git a/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.scss b/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.scss
index 86c766b..8a0b015 100644
--- a/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.scss
+++ b/kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.scss
@@ -1,20 +1,3 @@
-.howto-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 5%;
-  margin: 5% 10% 5% 10%;
-  @media (max-width: 800px) {
-    grid-template-columns: 1fr;
-    margin-bottom: 100px;
-  }
-}
-
-.howto {
-  color: grey;
-  font-size: 1.4375rem;
-  line-height: 1.875rem;
-}
-
 .container {
   background-color: #673ab7;
   display: grid;
@@ -40,11 +23,6 @@
   line-height: 1.875rem;
 }
 
-h2 {
-  font-weight: bold;
-  font-size: 1.6375rem;
-}
-
 .white-a {
   color: white;
   text-decoration: underline;
diff --git a/kibicara-frontend/src/app/public-pages/public-pages.component.html b/kibicara-frontend/src/app/public-pages/public-pages.component.html
index 4cca73f..0680b43 100644
--- a/kibicara-frontend/src/app/public-pages/public-pages.component.html
+++ b/kibicara-frontend/src/app/public-pages/public-pages.component.html
@@ -1,2 +1 @@
 <router-outlet></router-outlet>
-<app-footer></app-footer>
diff --git a/kibicara-frontend/src/sass/styles.scss b/kibicara-frontend/src/sass/styles.scss
index e25c48d..d15258d 100644
--- a/kibicara-frontend/src/sass/styles.scss
+++ b/kibicara-frontend/src/sass/styles.scss
@@ -22,3 +22,55 @@ body {
 a {
   text-decoration: none;
 }
+
+/* public pages start */
+.howto-container-3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 5%;
+  margin: 5% 10% 5% 10%;
+  @media (max-width: 800px) {
+    grid-template-columns: 1fr;
+    margin-bottom: 200px;
+    margin-top: 100px;
+  }
+}
+
+.howto-container-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5%;
+  margin: 5% 10% 5% 10%;
+  @media (max-width: 800px) {
+    grid-template-columns: 1fr;
+    gap: 10%;
+    margin-top: 100px;
+    margin-bottom: 200px;
+  }
+}
+
+.big-paragraph-font {
+  color: grey;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}
+
+.big-h2-font {
+  font-weight: bold !important;
+  font-size: 1.6375rem !important;
+}
+
+.howto-container-2-text {
+  padding-top: 40px;
+  padding-bottom: 30px;
+  color: white;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}
+
+.public-margin {
+  margin-left: 10%;
+  margin-right: 10%;
+}
+
+/* public pages end */