acid-info/Kurate
1
0
Fork 0
mirror of https://github.com/acid-info/Kurate.git synced 2025-01-13 01:14:12 +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"> <style lang="scss">
.root { .root {
border-bottom: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200);
border-right: 1px solid var(--grey-200);
padding: var(--spacing-12); padding: var(--spacing-12);
display: flex; display: flex;
gap: var(--spacing-12); gap: var(--spacing-12);
flex-direction: row; 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) { @media (prefers-color-scheme: dark) {
border-bottom-color: var(--grey-500); border-bottom-color: var(--grey-500);
border-right-color: var(--grey-500); outline-color: var(--grey-500);
} }
} }
.user-img { .user-img {

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

@ -32,13 +32,22 @@
align-items: center; align-items: center;
border-top: 1px solid var(--grey-200); border-top: 1px solid var(--grey-200);
border-bottom: 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; 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) { @media (prefers-color-scheme: dark) {
border-top-color: var(--grey-500); border-top-color: var(--grey-500);
border-bottom-color: var(--grey-500); border-left-color: var(--grey-500);
border-right-color: var(--grey-500); border-right-color: var(--grey-500);
outline-color: var(--grey-500);
} }
} }
.description { .description {

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

@ -33,7 +33,7 @@
<WalletConnect /> <WalletConnect />
{/if} {/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} {#each $posts.posts as post}
<Post {post} /> <Post {post} />
{:else} {:else}
@ -56,14 +56,13 @@
cursor: pointer; cursor: pointer;
} }
.wrapper { .wrapper {
max-width: 1280px; margin-left: -1px;
margin: 0 auto 0;
@media (min-width: 1280px) { @media (min-width: 1280px) {
border-left: 1px solid var(--grey-200); width: 1280px;
margin: 0 auto 0;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-left-color: var(--grey-500);
} }
} }
</style> </style>