improve styles

This commit is contained in:
Araozu 2024-03-27 20:55:35 -05:00
parent e4f542b656
commit 2340f1e23a
7 changed files with 36 additions and 32 deletions

View File

@ -34,7 +34,7 @@ export function scan_identifier(input: string, starting_position: number, is_dat
}
function check_keyword(value: string): string {
const keywords = ["case", "static", "const", "enum", "loop", "use", "break", "catch", "continue", "do", "else", "finally", "for", "fun", "if", "in", "fn", "nil", "return", "throw", "try", "while", "type", "match", "with", "of", "abstract", "class", "interface", "private", "pub", "map", "override", "open", "init", "val", "var", "mut", "clone"];
const keywords = ["case", "static", "const", "enum", "loop", "use", "break", "catch", "continue", "do", "else", "finally", "for", "fun", "if", "in", "fn", "nil", "return", "throw", "try", "while", "type", "match", "with", "of", "abstract", "class", "interface", "private", "pub", "override", "open", "init", "val", "var", "mut", "clone"];
if (keywords.includes(value)) {
return "keyword";

View File

@ -3,8 +3,9 @@ output: static
template: static/template.html
headings:
h1: text-3xl mb-4 font-display opacity-90
h2: text-2xl mt-10 mb-4 font-display opacity-90
h3: text-xl mt-10 mb-4 font-display opacity-90
h1: text-4xl mb-4 mt-8 font-display opacity-90 font-black text-c-text-2
h2: text-2xl mt-10 mb-4 font-display opacity-90 font-bold text-c-text-2
h3: text-xl mt-10 mb-4 font-display opacity-90 text-c-text-2
file_tree_title_classes: "uppercase text-sm font-display"
file_tree_title_classes: "uppercase font-display text-c-text-2 font-medium"
link_classes: text-blue-500 hover:underline

View File

@ -1,12 +1,11 @@
![Accurate visual description of THP](/img/desc_thp.jpg)
# Welcome
Welcome to the documentation of the THP programming languague.
THP is a new programming language that compiles to PHP.
![Accurate visual description of THP](/img/desc_thp.jpg)
<br>
This page discusses some of the design decitions of the language,

View File

@ -20,38 +20,39 @@
<body class="bg-c-bg text-c-text">
<nav class="sticky top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20">
<div class="container mx-auto h-full w-full flex items-center">
<button class="font-display font-bold italic text-2xl">
<a href="/" class="font-display font-bold text-2xl">
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
</button>
</a>
</div>
</nav>
<div class="container mx-auto py-16 grid grid-cols-[auto_32rem] gap-4 px-10">
<div class="pl-10 table">
<div class="table-cell align-middle">
<h1 class="font-display font-bold text-5xl leading-tight">
<h1 class="font-display font-bold text-c-text-2 text-5xl leading-tight">
A modern, type safe,
<br>
secure language
<br>
compiled to PHP
</h1>
<p class="font-display text-c-text opacity-80 text-xl pt-6 pr-12">
<p class="font-display text-c-text text-xl pt-6 pr-12">
Inspired by Rust, Zig and Swift, THP has a modern syntax, semantics,
type system and stdlib.
</p>
<br>
<br>
<div class="text-center">
<a class="inline-block font-display text-lg border-2 border-pink-400 hover:bg-pink-400 transition-colors
hover:text-c-bg py-3 px-8 mx-6 rounded" href="/learn/">
Learn
<a class="inline-block font-display text-lg rounded-full border-2 border-pink-400 py-2 px-8
transition-colors hover:text-black hover:bg-pink-400" href="/learn">
Tutorial
</a>
<a class="inline-block font-display text-lg border-2 border-sky-400 py-3 px-8 mx-6 rounded
transition-colors hover:text-black hover:bg-sky-400" href="/install/">
<a class="inline-block font-display text-lg border-2 border-sky-400 py-2 px-8 mx-6 rounded-full
transition-colors hover:text-black hover:bg-sky-400" href="/install/">
Install
</a>
</div>
</div>
</div>

View File

@ -14,21 +14,21 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&family=Inter:ital,wght@0,400;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&display=swap"
rel="stylesheet">
</head>
<body class="bg-c-bg text-c-text">
<nav class="fixed w-screen top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20">
<div class="container mx-auto h-full w-full flex items-center">
<a href="/" class="font-display font-bold italic text-2xl">
<a href="/" class="font-display font-bold text-2xl">
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
</a>
</div>
</nav>
<div class="grid grid-cols-[12rem_12rem_auto] container mx-auto">
<div class="pt-12 border-r border-[rgba(245,169,184,0.25)] h-screen sticky top-0">
<div class="grid grid-cols-[14rem_auto_12rem] container mx-auto">
<div class="pt-12 h-screen sticky top-0">
<nav class="py-4 pr-2 overflow-x-scroll"
style="height: calc(100vh - 3rem);"
>
@ -36,17 +36,17 @@
</nav>
</div>
<div class="pt-12 max-h-screen border-r border-r-[rgba(91,205,250,0.25)] overflow-x-scroll sticky top-0">
<nav class="rounded-md mt-2 p-4">
<h2 class="text-xl font-display pb-4 opacity-75">On this page</h2>
<main class="py-[3.5rem] pl-12 pr-4 markdown min-w-0">
{{markdown}}
</main>
<div class="pt-12 max-h-screen overflow-x-scroll sticky top-0">
<nav class="rounded-md mt-10">
<h2 class="font-display font-medium pb-2 text-c-text-2">On this page</h2>
{{sidebar}}
</nav>
</div>
<main class="py-[3.5rem] markdown p-4 min-w-0">
{{markdown}}
</main>
</div>
<script src="/js/highlighter.js"></script>

View File

@ -6,6 +6,7 @@ module.exports = {
colors: {
"c-bg": "var(--c-bg)",
"c-text": "var(--c-text)",
"c-text-2": "var(--c-text-2)",
"c-purple": "var(--c-purple)",
"c-purple-light": "var(--c-purple-light)",
"c-box-shadow": "var(--c-box-shadow)",
@ -19,7 +20,7 @@ module.exports = {
fontFamily: {
"mono": ["Iosevka", "monospace"],
"display": ["Inter", "'Josefin Sans'", "'Fugaz One'", "sans-serif"],
"body": ["'Fira Sans'", "Inter", "sans-serif"],
"body": ["Inter", "sans-serif"],
},
},
corePlugins: {
@ -40,7 +41,7 @@ module.exports = {
maxWidth: '1024px',
},
'@screen xl': {
maxWidth: '1280px',
maxWidth: '1400px',
},
}
})

View File

@ -4,7 +4,8 @@
:root {
--c-bg: #121212;
--c-text: #fdfffc;
--c-text: rgb(200,200,200);
--c-text-2: white;
--c-primary: #884b6a;
--c-purple: #7F669D;
--c-purple-light: #BA94D1;
@ -19,6 +20,7 @@
: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;
@ -35,7 +37,7 @@ html {
}
body {
font-family: 'Fira Sans', Inter, sans-serif;
font-family: Inter, 'Fira Sans', Inter, sans-serif;
}
pre, code {