Skip to content

Commit

Permalink
Merge pull request #12 from sandwichfarm/enhance/mob
Browse files Browse the repository at this point in the history
basic mob support
  • Loading branch information
dskvr authored Apr 15, 2024
2 parents cfd5935 + 0244e33 commit ab1e01e
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 23 deletions.
4 changes: 2 additions & 2 deletions src/lib/assets/themes/classic.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}

#mrp-wrapper {
@apply mt-10 p-20 pt-16 max-w-screen-lg w-1/2 rounded-xl shadow-2xl dark:shadow-none
@apply p-5 mt-0 md:p-20 pt-16 max-w-screen-lg rounded-xl shadow-2xl dark:shadow-none lg:w-3/4 md:w-full sm:w-full sm:my-2 md:mt-10 sm:rounded-none
}

.mrp-wrapper-bg {
Expand Down Expand Up @@ -74,7 +74,7 @@
/* profile: card */

.mrp-profile-card {
@apply p-5 rounded-lg max-w-xs block dark:opacity-80 dark:text-black
@apply p-5 rounded-lg md:max-w-xs block dark:opacity-80 dark:text-black
}

.mrp-profile-card-bg {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,14 @@

{#if profile}
<Block headingClass="col-span-5" {key}>

<svelte:fragment slot="title">
relay operator
</svelte:fragment>
<svelte:fragment slot="content">
<div class="grid grid-cols-5 grid-flow-col">
<div class="items-center col-span-2">
<div class="mrp-profile-card mrp-profile-card-content mrp-profile-card-bg">
<div class="flex items-center space-x-4">
<div class="w-full md:grid md:grid-cols-5 md:grid-flow-col">
<div class="items-center w-full md:col-span-2">
<div class="mrp-profile-card mrp-profile-card-content mrp-profile-card-bg sm:w-full mb-2 md:mb-0">
<div class="flex items-center space-x-2">
<UserAvatar photo={owner?.photo} name={profile?.name} showTooltip={false} />
<span class="inline-block truncate text-ellipsis overflow-hidden max-w-40">
{#if profile?.name}
Expand Down Expand Up @@ -125,7 +124,7 @@
</div>
</div>

<div id="notes" class="col-span-3 flex flex-col justify-center">
<div id="notes" class="md:col-span-3 md:flex md:flex-col justify-center">
{#if browser && relays && feedArray.length}
<div class="feed w-full">
{#each feedArray as note, index}
Expand Down
8 changes: 4 additions & 4 deletions src/lib/components/layout/Header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@
</script>

<div class="relative">
<div class="relative my-2">
{#if url}
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
<h1 class="scroll-m-20 text-3xl md:text-4xl font-extrabold tracking-tight lg:text-5xl mb-6 my-2">
<span class="flex items-center space-x-4">
{#if $relay?.info?.icon}
<img src={ $relay?.info.icon } class="max-w-20 max-h-20"/>
Expand All @@ -48,15 +48,15 @@
{/if}

{#if $relay?.info?.description}
<p class="text-xl text-muted-foreground mb-4">
<p class="text-lg md:text-xl text-muted-foreground mb-4">
{ $relay?.info?.description }
</p>
{/if}
<LimitationsBoolean />
<LimitationsNumber />
<Nips />
<Software />
<div class="absolute -top-12 -right-10 flex items-center space-x-4 text-right min-w-40">
<div class="absolute -top-16 -right-7 sm:-right-3 sm:mb-3 flex items-center space-x-4 text-right min-w-40">
<Login />
<ThemeMode class="inline-block" />
</div>
Expand Down
111 changes: 100 additions & 11 deletions static/themes/classic.css
Original file line number Diff line number Diff line change
Expand Up @@ -533,11 +533,10 @@ video {
background-color: rgb(0 0 0 / 0.7);
}
#mrp-wrapper {
margin-top: 2.5rem;
width: 50%;
margin-top: 0px;
max-width: 1024px;
border-radius: 0.75rem;
padding: 5rem;
padding: 1.25rem;
padding-top: 4rem;
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
Expand All @@ -548,6 +547,29 @@ video {
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 640px) {

#mrp-wrapper {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
border-radius: 0px;
}
}
@media (min-width: 768px) {

#mrp-wrapper {
margin-top: 2.5rem;
width: 100%;
padding: 5rem;
}
}
@media (min-width: 1024px) {

#mrp-wrapper {
width: 75%;
}
}
.mrp-wrapper-bg {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -647,7 +669,6 @@ video {
/* profile: card */
.mrp-profile-card {
display: block;
max-width: 20rem;
border-radius: var(--radius);
padding: 1.25rem;
}
Expand All @@ -656,6 +677,12 @@ video {
color: rgb(0 0 0 / var(--tw-text-opacity));
opacity: 0.8;
}
@media (min-width: 768px) {

.mrp-profile-card {
max-width: 20rem;
}
}
.mrp-profile-card-bg {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
--tw-gradient-from: #c084fc var(--tw-gradient-from-position);
Expand Down Expand Up @@ -715,15 +742,18 @@ video {
.-left-12 {
left: -3rem;
}
.-right-10 {
right: -2.5rem;
}
.-right-12 {
right: -3rem;
}
.-right-7 {
right: -1.75rem;
}
.-top-12 {
top: -3rem;
}
.-top-16 {
top: -4rem;
}
.bottom-0 {
bottom: 0px;
}
Expand Down Expand Up @@ -784,6 +814,10 @@ video {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
Expand Down Expand Up @@ -1162,6 +1196,11 @@ video {
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
Expand Down Expand Up @@ -1501,10 +1540,6 @@ video {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-\[0\.8rem\] {
font-size: 0.8rem;
}
Expand Down Expand Up @@ -2258,10 +2293,22 @@ video {
}
@media (min-width: 640px) {

.sm\:-right-3 {
right: -0.75rem;
}

.sm\:mb-3 {
margin-bottom: 0.75rem;
}

.sm\:mt-0 {
margin-top: 0px;
}

.sm\:w-full {
width: 100%;
}

.sm\:max-w-sm {
max-width: 24rem;
}
Expand Down Expand Up @@ -2310,9 +2357,51 @@ video {
}
@media (min-width: 768px) {

.md\:col-span-2 {
grid-column: span 2 / span 2;
}

.md\:col-span-3 {
grid-column: span 3 / span 3;
}

.md\:mb-0 {
margin-bottom: 0px;
}

.md\:flex {
display: flex;
}

.md\:grid {
display: grid;
}

.md\:w-full {
width: 100%;
}

.md\:grid-flow-col {
grid-auto-flow: column;
}

.md\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.md\:flex-col {
flex-direction: column;
}

.md\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}

.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (min-width: 1024px) {

Expand Down

0 comments on commit ab1e01e

Please sign in to comment.