[frontend] Refactor public pages css

This commit is contained in:
Cathy Hu 2020-09-09 15:51:28 +02:00
parent b1997e46c2
commit d92942c8bd
12 changed files with 93 additions and 131 deletions

View file

@ -1,4 +1,7 @@
<app-toolbar></app-toolbar> <app-toolbar></app-toolbar>
<div class="content"> <div class="content">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<footer>
<app-footer></app-footer>
</footer>

View file

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

View file

@ -1,7 +1,7 @@
<div class="container"> <div class="container">
<div class="heading"> <div class="heading">
<h1 class="h1">Kibicara</h1> <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 Kibicara hoods are connecting your local community - while you use your
favorite messenger. favorite messenger.
</p> </p>
@ -10,9 +10,9 @@
<div class="banner"></div> <div class="banner"></div>
</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> <p>
Kibicara is a bridge between multiple messaging platforms with the goal of Kibicara is a bridge between multiple messaging platforms with the goal of
providing real-time broadcast messages for real-life communities. Kibicara providing real-time broadcast messages for real-life communities. Kibicara
@ -20,16 +20,16 @@
different platforms. different platforms.
</p> </p>
</div> </div>
<div class="howto"> <div class="big-paragraph-font">
<h2>Community-driven</h2> <h2 class="big-h2-font">Community-driven</h2>
<p> <p>
Kibicara provides a connection to your (local) community, without the need Kibicara provides a connection to your (local) community, without the need
to install new software or to create new accounts. Just use the platforms to install new software or to create new accounts. Just use the platforms
you already know and love and subscribe to your Kibicara hood! you already know and love and subscribe to your Kibicara hood!
</p> </p>
</div> </div>
<div class="howto"> <div class="big-paragraph-font">
<h2>Inclusive and easy</h2> <h2 class="big-h2-font">Inclusive and easy</h2>
<p> <p>
Messages sent with Kibicara reach people via Telegram, Twitter and even Messages sent with Kibicara reach people via Telegram, Twitter and even
E-Mail - perfect for announcing the next neighborhood meetings, creating E-Mail - perfect for announcing the next neighborhood meetings, creating
@ -41,7 +41,7 @@
<div class="banner2"></div> <div class="banner2"></div>
<div class="container"> <div class="container">
<p class="text"> <p class="howto-container-2-text">
Kibicara is a bridge between multiple messaging platforms with the goal of Kibicara is a bridge between multiple messaging platforms with the goal of
providing broadcast communication for (local) communities. Hoods are providing broadcast communication for (local) communities. Hoods are
community-administrated instances of Kibicara, being able to customize community-administrated instances of Kibicara, being able to customize
@ -53,13 +53,13 @@
</div> </div>
<div class="howto-container-2"> <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 If you want to create your own hood for your community, you can read our
<a [routerLink]="['/organizers']">page</a> for hood-admins. <a [routerLink]="['/organizers']">page</a> for hood-admins.
</div> </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 Kibicara is Open Source software! If you want to contribute to the
development of Kibicara check out our development of Kibicara check out our
<a href="https://github.com/acipm/kibicara">Github</a>. <a href="https://github.com/acipm/kibicara">Github</a>.

View file

@ -9,14 +9,6 @@
} }
} }
.text {
padding-top: 40px;
padding-bottom: 30px;
color: white;
font-size: 1.4375rem;
line-height: 1.875rem;
}
.container { .container {
background-color: #673ab7; background-color: #673ab7;
display: grid; display: grid;
@ -46,31 +38,6 @@
margin-bottom: 5%; 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 { .banner2 {
background: url("../../../assets/hoods3.jpg"); background: url("../../../assets/hoods3.jpg");
background-size: 100%; background-size: 100%;
@ -80,17 +47,6 @@
min-height: 200px; 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 // color can be changed, i just chose a slightly better color than dark blue
a { a {
color: #673ab7; color: #673ab7;

View file

@ -1,7 +1,7 @@
<app-heading-one [title]="hood.name"></app-heading-one> <app-heading-one [title]="hood.name"></app-heading-one>
<div class="container"> <div class="public-margin container">
<div class="markdown"> <div class="markdown">
<markdown class="markdown" [data]="hood.landingpage"></markdown> <markdown [data]="hood.landingpage"></markdown>
</div> </div>
<app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page> <app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>

View file

@ -1,16 +1,8 @@
.container { .container {
display: grid; display: grid;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 5%;
gap: 30px; gap: 30px;
} }
.heading {
font-size: 2.3125rem;
margin-bottom: 20px;
}
.markdown { .markdown {
margin-top: 20px; margin-top: 20px;
} }

View file

@ -1,11 +1,11 @@
<app-heading-one [title]="title"></app-heading-one> <app-heading-one [title]="title"></app-heading-one>
<div class="page"> <div class="page">
<div class="description"> <div class="description">
<p class="text"> <p class="big-paragraph-font text">
Enter a search term below to find your local community - or create Enter a search term below to find your local community - or create
<a [routerLink]="['/organizers']">a new hood! </a> <a [routerLink]="['/organizers']">a new hood! </a>
</p> </p>
<div class="banner"></div> <img class="banner" src="assets/hoods1.jpg" />
</div> </div>
<mat-form-field class="searchbar"> <mat-form-field class="searchbar">
<mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label> <mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>

View file

@ -11,6 +11,7 @@
.page { .page {
padding-left: 10%; padding-left: 10%;
padding-right: 10%; padding-right: 10%;
padding-bottom: 5%;
} }
.list { .list {
@ -19,17 +20,11 @@
margin-right: 30px; margin-right: 30px;
} }
h1 {
text-align: center;
text-transform: uppercase;
font-size: 3.4rem;
color: white;
font-weight: bold;
}
.banner { .banner {
background: url("../../../assets/hoods1.jpg"); max-width: 100%;
background-size: 100%; max-height: 200px;
overflow: hidden;
object-fit: cover;
width: 100%; width: 100%;
} }
@ -37,27 +32,13 @@ h1 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 20px;
margin-bottom: 2%;
justify-items: center;
align-items: center;
@media (max-width: 600px) { @media (max-width: 600px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin-top: 5%;
margin-bottom: 5%;
gap: 0px; 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;
} }

View file

@ -1,19 +1,19 @@
<app-heading-one [title]="title"></app-heading-one> <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 Hood admins build a real life community by creating a network of people - be
it neighborhood communities, interest-based groups or any other squads! it neighborhood communities, interest-based groups or any other squads!
</div> </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 Kibicara provides the technology for hood admins to connect people over
different messaging platforms. Hood admins customize their Kibicara hood to different messaging platforms. Hood admins customize their Kibicara hood to
fit their community's needs. fit their community's needs.
</div> </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 Hood admins share the platform-specific broadcasting endpoints with their
community and provide the information and technology to its members. This is community and provide the information and technology to its members. This is
done by providing a <a [routerLink]="['/hoods']">public hood page</a>. done by providing a <a [routerLink]="['/hoods']">public hood page</a>.
@ -21,8 +21,8 @@
</div> </div>
<div class="container"> <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> <ol>
<li> <li>
Create a Kibicara Create a Kibicara

View file

@ -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 { .container {
background-color: #673ab7; background-color: #673ab7;
display: grid; display: grid;
@ -40,11 +23,6 @@
line-height: 1.875rem; line-height: 1.875rem;
} }
h2 {
font-weight: bold;
font-size: 1.6375rem;
}
.white-a { .white-a {
color: white; color: white;
text-decoration: underline; text-decoration: underline;

View file

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

View file

@ -22,3 +22,55 @@ body {
a { a {
text-decoration: none; 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 */