fernando/thp-lang.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: css colors

Browse Source
This commit is contained in:
Fernando Araoz 2025-01-12 11:52:31 -05:00
parent 21db990ba4
commit c6469d4493
11 changed files with 1831 additions and 3655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -17,6 +17,7 @@
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.6.3",
"codejar": "^4.2.0",
"lucide-astro": "^0.471.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5",
"vitest": "^1.5.0"

5132
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

33
public/css/colors.css Normal file
View File

@ -0,0 +1,33 @@
/* general site colors */
:root {
/* dark */
--c-bg-dark: #09090b;
--c-text-dark: #fafafa;
--c-border-1-dark: #3f3f46;
--c-text-2-dark: white;
--c-primary-dark: #884b6a;
--c-purple-dark: #7f669d;
--c-purple-light-dark: #ba94d1;
--c-box-shadow-dark: #fbfacd;
--c-pink-dark: #ae508d;
--c-link-dark: #38bdf8;
--c-nav-bg-dark: rgb(9, 9, 11, 0.9);
--c-secondary-dark: rgba(136, 75, 106, 0.5);
/* light */
--c-bg-light: rgb(255, 253, 255);
--c-text-light: #121212;
--c-text-2-light: black;
--c-purple-light: #374259;
--c-purple-light-light: #ba94d1;
--c-box-shadow-light: #374259;
--c-primary-light: rgb(255, 180, 180);
--c-pink-light: #374259;
--c-link-light: #0284c7;
--c-border-1-light: #909090;
--c-nav-bg-light: rgb(255, 247, 255, 0.5);
--c-secondary-light: rgba(255, 255, 240, 0.5);
}
/* code snippets colors */

79
public/css/global.css
View File

@ -31,38 +31,67 @@
[x-cloak] { display: none !important; }
:root {
--c-bg: #121212;
--c-text: rgb(200, 200, 200);
--c-text-2: white;
--c-primary: #884b6a;
--c-purple: #7f669d;
--c-purple-light: #ba94d1;
--c-box-shadow: #fbfacd;
--c-pink: #ae508d;
--c-link: #38bdf8;
--c-nav-bg: rgb(18, 18, 18, 0.5);
--c-secondary: rgba(136, 75, 106, 0.5);
--c-bg: var(--c-bg-dark);
--c-text: var(--c-text-dark);
--c-border-1: var(--c-border-1-dark);
--c-text-2: var(--c-text-2-dark);
--c-primary: var(--c-primary-dark);
--c-purple: var(--c-purple-dark);
--c-purple-dark: var(--c-purple-light-dark);
--c-box-shadow: var(--c-box-shadow-dark);
--c-pink: var(--c-pink-dark);
--c-link: var(--c-link-dark);
--c-nav-bg: var(--c-nav-bg-dark);
--c-secondary: var(--c-secondary-dark);
}
@media (prefers-color-scheme: light) {
:root {
--c-bg: rgb(255, 253, 255);
--c-text: #121212;
--c-text-2: black;
--c-purple: #374259;
--c-purple-light: #ba94d1;
--c-box-shadow: #374259;
--c-primary: rgb(255, 180, 180);
--c-pink: #374259;
--c-link: #0284c7;
--c-border-1: #909090;
--c-nav-bg: rgb(255, 247, 255, 0.5);
--c-secondary: rgba(255, 255, 240, 0.5);
--c-bg: var(--c-bg-light);
--c-text: var(--c-text-light);
--c-text-2: var(--c-text-2-light);
--c-purple: var(--c-purple-light);
--c-purple-light: var(--c-purple-light-light);
--c-box-shadow: var(--c-box-shadow-light);
--c-primary: var(--c-primary-light);
--c-pink: var(--c-pink-light);
--c-link: var(--c-link-light);
--c-border-1: var(--c-border-1-light);
--c-nav-bg: var(--c-nav-bg-light);
--c-secondary: var(--c-secondary-light);
}
}
body.dark {
--c-bg: var(--c-bg-dark);
--c-text: var(--c-text-dark);
--c-border-1: var(--c-border-1-dark);
--c-text-2: var(--c-text-2-dark);
--c-primary: var(--c-primary-dark);
--c-purple: var(--c-purple-dark);
--c-purple-dark: var(--c-purple-light-dark);
--c-box-shadow: var(--c-box-shadow-dark);
--c-pink: var(--c-pink-dark);
--c-link: var(--c-link-dark);
--c-nav-bg: var(--c-nav-bg-dark);
--c-secondary: var(--c-secondary-dark);
}
body.light {
--c-bg: var(--c-bg-light);
--c-text: var(--c-text-light);
--c-text-2: var(--c-text-2-light);
--c-purple: var(--c-purple-light);
--c-purple-light: var(--c-purple-light-light);
--c-box-shadow: var(--c-box-shadow-light);
--c-primary: var(--c-primary-light);
--c-pink: var(--c-pink-light);
--c-link: var(--c-link-light);
--c-border-1: var(--c-border-1-light);
--c-nav-bg: var(--c-nav-bg-light);
--c-secondary: var(--c-secondary-light);
}
html {
font-size: 16px;
}

4
public/css/xcode-colors.css
View File

@ -1,7 +1,7 @@
/* colors from: https://raw.githubusercontent.com/WhiteVermouth/XcodeTheme/master/assets/color-palette.png */
:root {
--code-theme-color: #dedede;
--code-theme-bg-color: #1f1f24;
--code-theme-color: #f4f4f5;
--code-theme-bg-color: #18181b;
--code-theme-bg-color_selection: #515b70;
--code-theme-color_selection: inherit;

25
src/components/Navbar.astro
View File

@ -1,21 +1,31 @@
---
import { Sun, Moon, Laptop } from "lucide-astro";
const { showSidebarButton = true, version = "latest" } = Astro.props;
---
<nav
class="fixed w-full top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20"
class="fixed w-full top-0 h-12 border-b border-c-border-1 bg-c-nav-bg backdrop-blur-md z-20"
>
<div class="container mx-auto h-full w-full flex items-center">
<div class="container mx-auto h-full w-full grid grid-cols-[auto_3rem]">
<div class="flex items-center">
{
showSidebarButton && (
<button id="sidebar-toggle" class="w-10 h-full lg:hidden">
<button
id="sidebar-toggle"
class="w-10 h-full lg:hidden"
>
<i class="ph-bold ph-list text-xl inline-block" />
</button>
)
}
<a href="/" class="px-4 flex gap-2 items-center">
<img class="inline-block h-10" src="/img/thp_logo_exp.svg" alt="thp" />
<img
class="inline-block h-10"
src="/img/thp_logo_exp.svg"
alt="thp"
/>
</a>
<a
href={`/en/${version}/learn/`}
@ -36,6 +46,9 @@ const { showSidebarButton = true, version = "latest" } = Astro.props;
Language spec
</a>
</div>
<div class="flex items-center"></div>
</div>
</nav>
<script>
@ -52,7 +65,9 @@ const { showSidebarButton = true, version = "latest" } = Astro.props;
sidebarToggle.addEventListener("click", () => {
sidebar.classList.toggle("-translate-x-64");
console.log(sidebar.classList.contains("-translate-x-64"));
console.log(
sidebar.classList.contains("-translate-x-64"),
);
});
});
</script>

1
src/env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

23
src/layouts/BaseLayout.astro
View File

@ -6,9 +6,13 @@ const { title } = Astro.props;
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>{title ?? "THP: Typed Hypertext Processor"}</title>
<link rel="stylesheet" href="/css/colors.css" />
<link rel="stylesheet" href="/css/global.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/xcode-colors.css" />
@ -22,13 +26,21 @@ const { title } = Astro.props;
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin
/>
<link
href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<script src="//unpkg.com/alpinejs" defer></script>
<script src="//unpkg.com/alpinejs" defer is:inline></script>
<script
src="https://unpkg.com/hyperscript.org@0.9.13"
defer
is:inline></script>
</head>
<body class="bg-c-bg text-c-text">
@ -37,7 +49,10 @@ const { title } = Astro.props;
<script src="/js/alpine-3.14.0.min.js" defer></script>
<script>
import { highlightOnDom } from "./thpHighlighter";
document.addEventListener("DOMContentLoaded", highlightOnDom);
document.addEventListener(
"DOMContentLoaded",
highlightOnDom,
);
</script>
</body>
</html>

37
src/layouts/NewDocsLayout.astro
View File

@ -52,7 +52,9 @@ const posts_2 = posts
// being `/spec/ast/tokens` would be `/ast/tokens`
path: post.url.substring(base_len),
}))
.sort((p1, p2) => (p1.frontmatter.order > p2.frontmatter.order ? 1 : -1));
.sort((p1, p2) =>
p1.frontmatter.order > p2.frontmatter.order ? 1 : -1,
);
// build a hierarchy of the files
const second_level: Record<string, Array<AstroFile>> = {
@ -127,13 +129,20 @@ const rc = url_components[1] ?? "";
class="pt-12 h-screen lg:sticky top-0 fixed z-10 bg-c-bg w-60 lg:w-auto border-r-2 lg:border-0
border-c-border-1 -translate-x-64 lg:translate-x-0 transition-transform"
>
<nav class="py-4 pr-2 overflow-x-scroll h-[calc(100vh-3rem)]">
<div class="mb-2 relative" x-data="{open: false}">
<nav
class="py-4 pr-2 overflow-x-scroll h-[calc(100vh-3rem)] border-r border-c-border-1"
>
<div
class="mb-2 relative"
x-data="{open: false}"
>
<button
class="bg-c-bg text-c-text border border-c-primary rounded px-3 w-full font-mono mt-2 flex items-center hover:dark:bg-zinc-800 transition-colors cursor-pointer text-left"
@click="open = !open"
>
<span class="inline-block w-full">
<span
class="inline-block w-full"
>
{version}
</span>
<svg
@ -157,14 +166,18 @@ const rc = url_components[1] ?? "";
class="absolute top-0 w-full bg-c-bg border border-c-primary rounded"
>
{
versions.map((x) => (
versions.map(
(x) => (
<a
class="px-3 py-1 hover:dark:bg-zinc-800 transition-colors font-mono inline-block w-full text-left"
href={`${lc}${x}${rc}`}
>
{x}
{
x
}
</a>
))
),
)
}
</div>
</div>
@ -172,7 +185,11 @@ const rc = url_components[1] ?? "";
<hr class="my-6" />
{entries.map((entry) => <Sidebar entry={entry} />)}
{
entries.map((entry) => (
<Sidebar entry={entry} />
))
}
</nav>
</div>
@ -186,7 +203,9 @@ const rc = url_components[1] ?? "";
class="lg:pt-12 hidden lg:block pt-4 max-h-screen overflow-x-scroll sticky top-0"
>
<nav class="rounded-md lg:mt-10">
<h2 class="font-display font-medium pb-2 text-c-text-2">
<h2
class="font-display font-medium pb-2 text-c-text-2"
>
On this page
</h2>

33
src/pages/index.astro
View File

@ -45,8 +45,9 @@ const [thp_html] = await native_highlighter(
compiled to PHP
</h1>
<p class="text-c-text text-lg pt-6 lg:pr-12">
Inspired by Rust, Zig and Kotlin, THP has a modern syntax, semantics,
type system and stdlib.
Inspired by Rust, Zig and Kotlin, THP
has a modern syntax, semantics, type
system and stdlib.
</p>
<div class="text-center pb-4">
<a
@ -85,32 +86,42 @@ const [thp_html] = await native_highlighter(
height="14"
viewBox="0 0 54 14"
>
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
<g
fill="none"
fill-rule="evenodd"
transform="translate(1 1)"
>
<circle
cx="6"
cy="6"
r="6"
fill="#FF5F56"
stroke="#E0443E"
stroke-width=".5"></circle>
stroke-width=".5"
></circle>
<circle
cx="26"
cy="6"
r="6"
fill="#FFBD2E"
stroke="#DEA123"
stroke-width=".5"></circle>
stroke-width=".5"
></circle>
<circle
cx="46"
cy="6"
r="6"
fill="#27C93F"
stroke="#1AAB29"
stroke-width=".5"></circle>
stroke-width=".5"
></circle>
</g>
</svg>
<div class="h-1"></div>
<div id="editor" class="font-mono language-thp">
<div
id="editor"
class="font-mono language-thp"
>
<pre set:html={thp_html} />
</div>
</div>
@ -140,8 +151,8 @@ const [thp_html] = await native_highlighter(
val result = mock() as String
`}
>
Type safety is enforced at compile time. Everything has a specific type.
There is no `mixed`.
Type safety is enforced at compile time. Everything has a
specific type. There is no `mixed`.
<br />
<br />
You can use generics where neccesary.
@ -195,8 +206,8 @@ const [thp_html] = await native_highlighter(
}
`}
>
Nulls are explicit and require handling. Types can be nullable, and they
must be checked before usage.
Nulls are explicit and require handling. Types can be nullable,
and they must be checked before usage.
<br />
The stdlib makes extensive use of them.
</HeroSection>