[frontend] Refactor public pages css

kibicara-frontend/src/app/app.component.html

@@ -2,3 +2,6 @@
 <div class="content">
   <router-outlet></router-outlet>
 </div>
+<footer>
+  <app-footer></app-footer>
+</footer>

kibicara-frontend/src/app/app.component.scss

@@ -2,4 +2,5 @@
 
 .content {
   margin-top: $toolbar-height;
+  min-height: 100%;
 }

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-container-3">
-  <div class="howto">
+  <div class="big-paragraph-font">
-    <h2>Cross-platform</h2>
+    <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">
+  <div class="big-paragraph-font">
-    <h2>Community-driven</h2>
+    <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">
+  <div class="big-paragraph-font">
-    <h2>Inclusive and easy</h2>
+    <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">
+  <div class="big-paragraph-font">
-    <h2>Gather a new hood!</h2>
+    <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">
+  <div class="big-paragraph-font">
-    <h2>Contribute!</h2>
+    <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>.

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;

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>

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;
 }

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>

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");
+  max-width: 100%;
-  background-size: 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;
 }

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-container-3">
-  <div class="howto">
+  <div class="big-paragraph-font">
-    <h2>Build your community</h2>
+    <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">
+  <div class="big-paragraph-font">
-    <h2>Customize your hood</h2>
+    <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">
+  <div class="big-paragraph-font">
-    <h2>Share the information</h2>
+    <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">
+  <div class="howto-container-2-text">
-    <h2>How does it work?</h2>
+    <h2 class="big-h2-font">How does it work?</h2>
     <ol>
       <li>
         Create a Kibicara

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;

kibicara-frontend/src/app/public-pages/public-pages.component.html

@@ -1,2 +1 @@
 <router-outlet></router-outlet>
-<app-footer></app-footer>

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 */