acid-info/Kurate
1
0
Fork 0
mirror of https://github.com/acid-info/Kurate.git synced 2025-01-12 17:04:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: fixes borders on masonry items (#127)

Browse Source
This commit is contained in:
Barbara Gomes 2023-01-26 08:31:15 -05:00 committed by GitHub
parent 1512b17ba3
commit af162d5743
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/ui/src/lib/components/post.svelte
View File

@ -20,16 +20,23 @@
<style lang="scss">
.root {
border-bottom: 1px solid var(--grey-200);
border-right: 1px solid var(--grey-200);
padding: var(--spacing-12);
display: flex;
gap: var(--spacing-12);
flex-direction: row;
break-inside: avoid-column;
break-inside: avoid-column;
@media (min-width: 640px) {
border: none;
outline-style: solid;
outline-width: 1px;
outline-color: var(--grey-200);
outline-offset: -0.5px;
}
@media (prefers-color-scheme: dark) {
border-bottom-color: var(--grey-500);
border-right-color: var(--grey-500);
outline-color: var(--grey-500);
}
}
.user-img {

13
packages/ui/src/lib/components/wallet-connect.svelte
View File

@ -32,13 +32,22 @@
align-items: center;
border-top: 1px solid var(--grey-200);
border-bottom: 1px solid var(--grey-200);
border-right: 1px solid var(--grey-200);
transition: height 0.2s, padding 0.2s, margin 0.2s, font-size 0.2s;
@media (min-width: 640px) {
border-bottom: none;
}
@media (min-width: 1280px) {
border: none;
outline: 1px solid var(--grey-200);
outline-offset: -0.5px;
}
@media (prefers-color-scheme: dark) {
border-top-color: var(--grey-500);
border-bottom-color: var(--grey-500);
border-left-color: var(--grey-500);
border-right-color: var(--grey-500);
outline-color: var(--grey-500);
}
}
.description {

9
packages/ui/src/routes/+page.svelte
View File

@ -33,7 +33,7 @@
<WalletConnect />
{/if}
<Masonry gridGap='0' colWidth={'minmax(Min(20em, 100%), 1fr)'} items={$posts.posts}>
<Masonry gridGap='0' colWidth={'minmax(Min(320px, 100%), 1fr)'} items={$posts.posts}>
{#each $posts.posts as post}
<Post {post} />
{:else}
@ -56,14 +56,13 @@
cursor: pointer;
}
.wrapper {
max-width: 1280px;
margin: 0 auto 0;
margin-left: -1px;
@media (min-width: 1280px) {
border-left: 1px solid var(--grey-200);
width: 1280px;
margin: 0 auto 0;
}
@media (prefers-color-scheme: dark) {
border-left-color: var(--grey-500);
}
}
</style>