nostr/blockcore-notes
1
0
Fork 0
mirror of https://github.com/block-core/blockcore-notes.git synced 2024-09-29 22:40:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add mockup for spaces

Browse Source
This commit is contained in:
missmeowness 2023-04-11 19:18:11 +03:00 committed by SondreB
parent 3753967807
commit 553da84fd1
2 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/connect/connect.css
View File

@ -44,6 +44,33 @@
align-self: flex-end;
}
.spaces {
border-radius: 10px;
margin-left: 11em;
margin-right: 2em;
padding: 1.5em;
margin-top: 1em;
margin-bottom: 1em;
}
.spaces-card {
max-width: 274px;
border-radius: 15px;
background-color: rgba(170, 255, 85, 0.75);
}
.spaces-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.spaces-header-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
}
.start-button {
border-radius: 40px;
min-width: 140px;
@ -182,12 +209,21 @@
margin-right: auto !important;
margin-left: auto !important;
}
.spaces {
max-width: 944px;
margin-right: auto !important;
margin-left: auto !important;
}
}
@media only screen and (min-width: 1024px) {
.card {
margin-right: 11em;
}
.spaces {
margin-right: 11em;
}
}
@media only screen and (max-width: 760px) {
@ -204,6 +240,13 @@
margin-right: 2em;
padding: 2em;
}
.spaces {
font-size: 0.8em;
margin-left: 2em;
margin-right: 2em;
padding: 1em;
}
}
@media only screen and (max-width: 700px) {
@ -231,6 +274,12 @@
margin-right: 0.2em;
padding: 0;
}
.spaces {
margin-left: 0.2em;
margin-right: 0.2em;
padding: 0;
}
}
@media only screen and (max-width: 400px) {

64
src/app/connect/connect.html
View File

@ -22,6 +22,70 @@
</div>
</div>
<div class="connect-content">
<mat-card class="spaces">
<mat-card-content>
<h1 class="centered">Spaces</h1>
<div class="spaces-container">
<mat-card class="spaces-card">
<mat-card-header>
<div mat-card-avatar class="spaces-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
<mat-card class="spaces-card">
<mat-card-header>
<div mat-card-avatar class="spaces-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
<mat-card class="spaces-card">
<mat-card-header>
<div mat-card-avatar class="spaces-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</mat-card-content>
</mat-card>
<mat-card class="card first-card">
<mat-card-content>
<h1 class="centered">New ways to connect with humanity</h1>