Skip to content

Commit

Permalink
Website: Reduce usage of CSS flex gap so that it looks better with ol…
Browse files Browse the repository at this point in the history 
…der browsers
  • Loading branch information
@helgoboss
helgoboss committed Jun 14, 2024
1 parent effb593 commit c590693
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 36 deletions.
8 changes: 4 additions & 4 deletions website/src/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ type Props = {
}

export function Footer(props: Props) {
return <footer class="text-xs p-4 bg-base-300 flex flex-row gap-4 items-center"
return <footer class="text-xs p-4 bg-base-300 flex flex-row items-center"
classList={{
"justify-between": props.enablePoweredBy,
"justify-center sm:justify-between": !props.enablePoweredBy,
Expand All @@ -19,10 +19,10 @@ export function Footer(props: Props) {
<A href="/" class="text-lg font-bold link">ReaBoot</A>
</h1>
}
<div class="flex flex-row gap-4">
<div class="flex flex-row">
<A href="/faq" class="link">FAQ</A>
<A href="/beta" class="card h-warning px-4">Beta</A>
<a href="https://github.com/helgoboss/reaboot">
<A href="/beta" class="card h-warning px-4 ml-4">Beta</A>
<a href="https://github.com/helgoboss/reaboot" class="ml-4">
<FaBrandsGithub/>
</a>
</div>
Expand Down
22 changes: 8 additions & 14 deletions website/src/components/install-via-reaboot.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
import {copyTextToClipboard} from "../util/clipboard-util";
import {Step} from "./step";
import {For, JSX, Match, Show, Switch} from "solid-js";
import {
FaRegularLightbulb,
FaRegularThumbsUp,
FaSolidDownload,
FaSolidLightbulb,
FaSolidThumbsUp
} from "solid-icons/fa";
import {FaSolidDownload, FaSolidLightbulb, FaSolidThumbsUp} from "solid-icons/fa";
import {Collapsible} from "@kobalte/core";
import {CopyField} from "./copy-field";
import {UAParser} from "ua-parser-js";
Expand All @@ -26,7 +20,7 @@ export function InstallViaReaboot(props: { recipe: ParsedRecipe }) {
await copyTextToClipboard(getRecipeAsJson());
};

return <div class="grow flex flex-col max-w-lg items-stretch gap-6">
return <div class="grow flex flex-col max-w-lg items-stretch">
<div class="text-center">
ReaBoot is the easiest way to install <RecipeRef recipe={props.recipe}/>.
It automatically installs REAPER and ReaPack if necessary.
Expand All @@ -35,7 +29,7 @@ export function InstallViaReaboot(props: { recipe: ParsedRecipe }) {
<Switch>
<Match when={downloadConfig.mainDownloads.length > 0}>
<>
<div class="flex flex-row justify-center gap-2">
<div class="grid grid-flow-col justify-center gap-2">
<For each={downloadConfig.mainDownloads}>
{(d, i) =>
<a href={buildDownloadUrl(d)}
Expand All @@ -54,10 +48,10 @@ export function InstallViaReaboot(props: { recipe: ParsedRecipe }) {
</>
</Match>
</Switch>
<div class="mt-1 text-xs">
<div class="mt-3 text-xs">
{downloadConfig.downloadComment}
</div>
<div class="text-xs">
<div class="text-xs mt-3">
<div class="divider mt-1">Looking for another download?</div>
<div class="flex flex-wrap justify-center gap-3">
<For each={otherDownloads}>
Expand All @@ -77,9 +71,9 @@ export function InstallViaReaboot(props: { recipe: ParsedRecipe }) {
<div>
Start the installer and follow its instructions.
</div>
<Collapsible.Root class="collapse collapse-arrow data-[expanded]:collapse-open bg-base-300 ">
<Collapsible.Trigger class="collapse-title flex flex-row items-center justify-center gap-2">
<FaSolidLightbulb/> Having issues?
<Collapsible.Root class="mt-3 collapse collapse-arrow data-[expanded]:collapse-open bg-base-300">
<Collapsible.Trigger class="collapse-title flex flex-row items-center justify-center">
<FaSolidLightbulb class="mr-2"/> Having issues?
</Collapsible.Trigger>
<Collapsible.Content class="p-4 prose prose-sm">
<dl>
Expand Down
4 changes: 2 additions & 2 deletions website/src/components/step.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ type Props = {
}

export function Step(props: Props) {
return <div class="flex flex-col items-stretch gap-3 md:block md:relative">
return <div class="mt-6 flex flex-col items-stretch gap-3 md:block md:relative">
<div class="self-center md:absolute md:-left-16 md:top-1/2 md:-translate-y-1/2">
<div
class="w-9 h-9 rounded-full flex items-center justify-center bg-base-200 text-base-content">
Expand All @@ -17,7 +17,7 @@ export function Step(props: Props) {
<div class="card card-compact bg-base-200">
<div class="card-body text-center items-stretch">
<h2 class="card-title self-center">{props.title}</h2>
<div class="flex flex-col gap-3">
<div class="flex flex-col">
{props.children}
</div>
</div>
Expand Down
32 changes: 16 additions & 16 deletions website/src/pages/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Home() {
);
return (
<Page>
<div class="flex flex-col gap-4">
<div class="flex flex-col">
<div class="grow hero">
<div class="hero-content text-center">
<div class="flex flex-col items-center max-w-md gap-6">
Expand Down Expand Up @@ -40,7 +40,7 @@ export default function Home() {
</div>
</div>
</div>
<div class="max-w-2xl">
<div class="mt-4 max-w-2xl">
<h2 class="font-bold text-2xl text-center">Please choose!</h2>
<Tabs.Root value={userType()} onChange={setUserType} class="flex flex-col sm:items-center">
<Tabs.List class="tabs tabs-boxed m-4 self-center">
Expand All @@ -53,15 +53,15 @@ export default function Home() {
</Tabs.List>
<div class="card bg-base-200">
<div class="card-body">
<Tabs.Content value="user" class="flex flex-col gap-6">
<Tabs.Content value="user" class="flex flex-col">
<h3 class="font-bold text-lg text-center">As a normal REAPER user ...</h3>
<p>
<p class="mt-6">
... you are probably here for the&#32;
<em>default installer</em>,
which allows you to easily install some of the most
popular REAPER scripts and extensions out there.
</p>
<div class="alert alert-info">
<div class="mt-6 alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="stroke-current shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
Expand All @@ -72,14 +72,14 @@ export default function Home() {
</span>
</div>
</Tabs.Content>
<Tabs.Content value="dev" class="flex flex-col gap-6">
<Tabs.Content value="dev" class="flex flex-col">
<h3 class="font-bold text-lg text-center">Already familiar with ReaBoot?</h3>
<div class="text-center">
<div class="mt-6 text-center">
<A href="/share" class="btn btn-secondary">Start creating installation
links!</A>
</div>
<h3 class="font-bold text-lg text-center">ReaBoot is for you ...</h3>
<ul class="list-disc ml-5">
<h3 class="mt-6 font-bold text-lg text-center">ReaBoot is for you ...</h3>
<ul class="mt-6 list-disc ml-5">
<li>
If you want to offer your users a really easy way to install your own
scripts or extensions.
Expand All @@ -89,8 +89,8 @@ export default function Home() {
extensions with friends.
</li>
</ul>
<h3 class="font-bold text-lg text-center">How does it work?</h3>
<ol class="list-decimal ml-5">
<h3 class="mt-6 font-bold text-lg text-center">How does it work?</h3>
<ol class="mt-6 list-decimal ml-5">
<li>You use this website to build a so-called &#32;<em>installation
link</em>.
</li>
Expand All @@ -100,12 +100,12 @@ export default function Home() {
extensions in seconds.
</li>
</ol>
<h2 class="font-bold text-lg text-center">Some example links</h2>
<p>
<h2 class="mt-6 font-bold text-lg text-center">Some example links</h2>
<p class="mt-6">
The following links are example links, solely made for demonstrating ReaBoot's
features. Don't share them!
</p>
<div class="flex flex-wrap justify-center gap-4">
<div class="mt-6 flex flex-wrap justify-center gap-4">
<Index each={examples}>
{example =>
<RecipeLink href={example()[2]} class={example()[1]}>
Expand All @@ -114,9 +114,9 @@ export default function Home() {
}
</Index>
</div>
<h3 class="font-bold text-lg text-center">Introduction video</h3>
<h3 class="mt-6 font-bold text-lg text-center">Introduction video</h3>
<iframe
class="w-full aspect-video"
class="mt-6 w-full aspect-video"
width="560" height="315"
src="https://www.youtube-nocookie.com/embed/LFveUpUrHFA?si=04UBLIDqVSpfjMXD"
title="YouTube video player" frameborder="0"
Expand Down

0 comments on commit c590693

Please sign in to comment.