refactor: css colors
This commit is contained in:
parent
21db990ba4
commit
c6469d4493
@ -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"
|
||||
|
||||
5186
pnpm-lock.yaml
5186
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
33
public/css/colors.css
Normal file
33
public/css/colors.css
Normal 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 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -1,40 +1,53 @@
|
||||
---
|
||||
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">
|
||||
{
|
||||
showSidebarButton && (
|
||||
<button id="sidebar-toggle" class="w-10 h-full lg:hidden">
|
||||
<i class="ph-bold ph-list text-xl inline-block" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
</a>
|
||||
<a
|
||||
href={`/en/${version}/learn/`}
|
||||
class="hidden sm:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
||||
>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
href={`/en/${version}/api/std/`}
|
||||
class="hidden sm:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
||||
>
|
||||
Standard Library
|
||||
</a>
|
||||
<a
|
||||
href={`/en/${version}/spec/`}
|
||||
class="hidden sm:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
||||
>
|
||||
Language spec
|
||||
</a>
|
||||
<a href="/" class="px-4 flex gap-2 items-center">
|
||||
<img
|
||||
class="inline-block h-10"
|
||||
src="/img/thp_logo_exp.svg"
|
||||
alt="thp"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={`/en/${version}/learn/`}
|
||||
class="hidden sm:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
||||
>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
href={`/en/${version}/api/std/`}
|
||||
class="hidden sm:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
||||
>
|
||||
Standard Library
|
||||
</a>
|
||||
<a
|
||||
href={`/en/${version}/spec/`}
|
||||
class="hidden sm:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
||||
>
|
||||
Language spec
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -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
1
src/env.d.ts
vendored
@ -1 +1,2 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) => (
|
||||
<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}
|
||||
</a>
|
||||
))
|
||||
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
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
container: false,
|
||||
},
|
||||
plugins: [
|
||||
function ({ addComponents }) {
|
||||
function({ addComponents }) {
|
||||
addComponents({
|
||||
".container": {
|
||||
width: "98%",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user