[frontend] Refactor public pages css
This commit is contained in:
parent
b1997e46c2
commit
d92942c8bd
|
@ -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>
|
||||||
|
|
|
@ -2,4 +2,5 @@
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin-top: $toolbar-height;
|
margin-top: $toolbar-height;
|
||||||
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>.
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -1,2 +1 @@
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
<app-footer></app-footer>
|
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in a new issue