open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design a text-based, dynamic preview card

Browse Source
This commit is contained in:
Austin Chen 2022-01-07 14:25:48 -08:00
parent 2ae2459841
commit 6caa7959a3
1 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
og-image/public/og-cover.html
View File

@ -19,10 +19,7 @@
radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%);
background-size: 100px 100px;
height: 100vh;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-family: "Readex Pro", sans-serif;
}
code {
@ -73,21 +70,65 @@
color: black;
line-height: 1.8;
}
.font-major-mono {
font-family: "Major Mono Display", monospace;
}
.text-primary {
color: #11b981;
}
</style>
<body>
<div>
<div class="spacer"></div>
<div class="logo-wrapper">
<img
class="logo"
alt="Generated Image"
src="https:&#x2F;&#x2F;manifold.markets&#x2F;logo.png"
width="auto"
height="225"
/>
<div class="px-24">
<!-- Profile image -->
<div class="absolute left-24 top-8">
<div class="flex flex-row align-bottom gap-6">
<img
class="h-24 w-24 rounded-full bg-gray-400 flex items-center justify-center"
src="https://lh3.googleusercontent.com/a-/AOh14GiZyl1lBehuBMGyJYJhZd-N-mstaUtgE4xdI22lLw=s96-c"
alt=""
/>
<div class="flex flex-col">
<p class="text-gray-900 text-3xl">Austin Chen</p>
<p class="text-gray-500 text-3xl">@AustinChen</p>
</div>
</div>
</div>
<div class="heading">
<p><strong>Helloz</strong> World</p>
<!-- Mantic logo -->
<div class="absolute right-24 top-8">
<a class="flex flex-row gap-3" href="/"
><img
class="sm:h-12 sm:w-12"
src="https:&#x2F;&#x2F;manifold.markets&#x2F;logo.png"
width="40"
height="40"
/>
<div
class="hidden sm:flex font-major-mono lowercase mt-1 sm:text-3xl md:whitespace-nowrap"
>
Manifold Markets
</div></a
>
</div>
<div class="flex flex-row justify-between gap-12 pt-36">
<div class="text-indigo-700 text-6xl">
Will Manifold switch its logo to a manatee by April?
</div>
<div class="flex flex-col text-primary">
<div class="text-8xl">30%</div>
<div class="text-4xl">chance</div>
</div>
</div>
<!-- Metadata -->
<div class="absolute bottom-16">
<div class="text-gray-500 text-3xl">
Jan 7 &nbsp;•&nbsp; Closes Mar 31, 9:59pm &nbsp;•&nbsp; M$ 448 pool
&nbsp;•&nbsp; #ManifoldMarkets #fun
</div>
</div>
</div>
</body>