diff options
Diffstat (limited to 'apps/website/src/components/base')
| -rw-r--r-- | apps/website/src/components/base/Button.astro | 3 | ||||
| -rw-r--r-- | apps/website/src/components/base/CodeBlock.astro | 70 | ||||
| -rw-r--r-- | apps/website/src/components/base/Section.astro | 6 |
3 files changed, 62 insertions, 17 deletions
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro index adbc656..0a4dc9f 100644 --- a/apps/website/src/components/base/Button.astro +++ b/apps/website/src/components/base/Button.astro @@ -4,8 +4,9 @@ import Icon from "@components/icons/Icon.astro"; import type { HTMLAttributes } from "astro/types"; const styles = { + // TODO: adjust active / disabled colors primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4", - secondary: "bg-blue-100 text-blue-500 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200", + secondary: "bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200", } const sizes = { diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro index 5991428..ceeecc0 100644 --- a/apps/website/src/components/base/CodeBlock.astro +++ b/apps/website/src/components/base/CodeBlock.astro @@ -2,20 +2,62 @@ --- -<pre class="flex flex-col"> - <code class="whitespace-pre bg-white-light border border-gray-50 rounded-2xl text-sm">{`public class MyConfig { - - @Switch(name = "Sub Switch", type = OptionType.SWITCH) - public static boolean subSwitch = false; - - public MyConfig() { - super(new Mod("My Mod", ModType.UTIL_QOL), "config.json"); +<pre class="flex flex-col bg-gray-800 whitespace-pre border border-gray-50 rounded-2xl text-sm"> + <!-- TODO: un-shit this --> + <code><ca>public</ca> <cb>class</cb> <cc>MyConfig</cc> <cd>{</cd></code> + <code></code> + <code> <ce>@</ce><ca>Switch</ca><cd>(</cd><ca>name</ca> <ce>=</ce> <cf>"Sub Switch"</cf><cd>,</cd> <ca>type</ca> <ce>=</ce> <ca>OptionType</ca><cd>.</cd><cb>SWITCH</cb><cd>)</cd></code> + <code> <cb>public</cb> <cc>static boolean subSwitch</cc> <ce>=</ce> <cg>false</cg><cd>;</cd></code> + <code></code> + <code> <ca>public MyConfig</ca><cd>() {</cd></code> + <code> <cb>super</cb><cd>(</cd><cb>new</cb> <ca>Mod</ca><cd>(</cd><cf>"My Mod"</cf><cd>,</cd> <ca>ModType</ca><cd>.</cd><cb>UTIL_QOL</cb><cd>),</cd> <cf>"config.json"</cf><cd>);</cd></code> + <code></code> + <code> <cb>addDependency</cb><cd>(</cd><cf>"subSwitch"</cf><cd>, ()</cd> <ce>-></ce> <cd>{</cd></code> + <code> // Do stuff here!</code> + <code> <cd>});</cd></code> + <code> <cd>}</cd></code> + <code></code> + <code><cd>}</cd></code> +</pre> - addDependency("subSwitch", () -> { - // TODO: Make codeblocks better lmao - }); +<style> + /* thanks stackoverflow! https://stackoverflow.com/a/41309213 */ + pre { + white-space: pre-wrap; + padding: 10px; + color: #546E7A; + } + pre::before { + counter-reset: listing; + } + pre code { + counter-increment: listing; + text-align: left; + float: left; + clear: left; + font-family: 'Roboto Mono', monospace !important; + font-size: 12px; + height: 1.5em; + } + pre code::before { + content: counter(listing) " "; + display: inline-block; + float: left; + height: 3em; + width: 2em; + padding: 0; + margin-left: auto; + margin-right: 10px; + text-align: right; + font-family: 'Roboto Mono', monospace !important; + font-size: 12px; } -}`}</code> -</pre> - + ca { color: #F07178; font-family: inherit; } + cb { color: #C792EA; font-family: inherit; } + cc { color: #82AAFF; font-family: inherit; } + cd { color: #EFF; font-family: inherit; } + ce { color: #89DDFF; font-family: inherit; } + cf { color: #C3E88D; font-family: inherit; } + cg { color: #F78C6C; font-family: inherit; } +</style> diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro index 0d177ef..bb7a062 100644 --- a/apps/website/src/components/base/Section.astro +++ b/apps/website/src/components/base/Section.astro @@ -5,23 +5,25 @@ interface Props extends HTMLAttributes<"section"> { maxWidth?: "none" | String; colReverse?: boolean; wrapperClass?: string; + wFull?: boolean; } const { maxWidth = "1080px", colReverse = true, wrapperClass = "", + wFull = true, ...props } = Astro.props; const twoColumn = Astro.slots.has("left") || Astro.slots.has("right"); -const className = `max-w-[${maxWidth}] w-full px-5 md:p-0 flex gap-4` +const className = `max-w-[${maxWidth}] ${wFull ? "w-full" : ""} px-5 md:p-0 flex gap-4` + (twoColumn ? ` ${maxWidth == "none" ? "justify-center" : "justify-between md:justify-evenly lg:justify-between"} ${colReverse ? "flex-col-reverse" : "flex-col"} md:flex-row md:items-center md:flex-row` : "") + (props.class ? ` ${props.class}` : ""); --- -<section class={`w-full flex justify-center${wrapperClass ? ` ${wrapperClass}` : ""}`}> +<section class={`w-full flex justify-center ${wrapperClass ?? ""}`}> <div class={className} {...props}> {twoColumn ? ( <div class="flex flex-col items-start text-left relative"> |