the-distro/floral.systems
1
1
Fork 1
Code Issues Pull requests 1 Packages Projects Releases Wiki Activity

refactor(root page): make fleurixos example side-by-side

Browse source
This commit is contained in:
Jake Hamilton 2024-10-26 14:40:57 -07:00
parent 920862b82f
commit aaaa251282
Signed by: jakehamilton
GPG key ID: 9762169A1B35EA68
1 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/routes/+page.svelte
View file

@ -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>