refactor(root page): make fleurixos example side-by-side
This commit is contained in:
parent
920862b82f
commit
aaaa251282
|
@ -69,31 +69,32 @@
|
|||
<span>Try FleurixOS</span>
|
||||
</LinkChip>
|
||||
</div>
|
||||
<div class="flex w-fit relative pt-4">
|
||||
<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow mt-2 max-w-3xl max-sm:max-w-full">
|
||||
<Highlight
|
||||
language={nix} code={demo1}
|
||||
alt="Definition of a simple {DISTRO} system running MediaWiki with the HTTP port opened."
|
||||
<div class="grid grid-cols-[1fr,1fr] gap-4 mt-4 align-top place-items-start">
|
||||
<div class="flex relative w-full">
|
||||
<div class="text-sm bg-blue-50 p-2 rounded-md drop-shadow max-w-3xl max-sm:max-w-full h-fit w-full">
|
||||
<Highlight
|
||||
language={nix} code={demo1}
|
||||
alt="Definition of a simple {DISTRO} system running MediaWiki with the HTTP port opened."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drop-shadow flex flex-col mx-auto rounded overflow-hidden w-full max-w-3xl">
|
||||
<div class="p-2 bg-zinc-100 w-full flex justify-between grow">
|
||||
<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
|
||||
<span class="text-zinc-500">http://</span><b>localhost</b><span class="text-zinc-500">:80</span>
|
||||
</div>
|
||||
<div class="flex items-center pl-4 pr-2 gap-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-[#facc15]" />
|
||||
<div class="w-3 h-3 rounded-full bg-teal-400" />
|
||||
<div class="w-3 h-3 rounded-full bg-coral-400" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
|
||||
<enhanced:img src="./demo1/mediawiki.png?format=png"
|
||||
alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<enhanced:img src="$lib/assets/arrow-from-left-to-down.svg" width="80" height="80" alt="leaf" class="absolute left-full bottom-0 transform translate-x-5 translate-y-5 max-sm:hidden" />
|
||||
</div>
|
||||
<div class="drop-shadow flex flex-col mx-auto rounded overflow-hidden mt-8 w-full max-w-3xl">
|
||||
<div class="p-2 bg-zinc-100 w-full flex justify-between grow">
|
||||
<div class="p-1 px-3 bg-zinc-200 w-full rounded-sm">
|
||||
<span class="text-zinc-500">http://</span><b>localhost</b><span class="text-zinc-500">:80</span>
|
||||
</div>
|
||||
<div class="flex items-center pl-4 pr-2 gap-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-[#facc15]" />
|
||||
<div class="w-3 h-3 rounded-full bg-teal-400" />
|
||||
<div class="w-3 h-3 rounded-full bg-coral-400" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- screenshot taken as Responsive (3660x2121), DPR=1 in Firefox DevTools (@the phone/tablet icon) -->
|
||||
<enhanced:img src="./demo1/mediawiki.png?format=png"
|
||||
alt="The main page of a brand-new MediaWiki instance hosted on the VM. It starts: 'MediaWiki has been installed.'"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in a new issue