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 { 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)) { if (keywords.includes(value)) {
return "keyword"; return "keyword";

View File

@ -3,8 +3,9 @@ output: static
template: static/template.html template: static/template.html
headings: headings:
h1: text-3xl 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 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 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
Welcome to the documentation of the THP programming languague. Welcome to the documentation of the THP programming languague.
THP is a new programming language that compiles to PHP. THP is a new programming language that compiles to PHP.
![Accurate visual description of THP](/img/desc_thp.jpg)
<br> <br>
This page discusses some of the design decitions of the language, 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"> <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"> <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"> <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> <span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
</button> </a>
</div> </div>
</nav> </nav>
<div class="container mx-auto py-16 grid grid-cols-[auto_32rem] gap-4 px-10"> <div class="container mx-auto py-16 grid grid-cols-[auto_32rem] gap-4 px-10">
<div class="pl-10 table"> <div class="pl-10 table">
<div class="table-cell align-middle"> <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, A modern, type safe,
<br> <br>
secure language secure language
<br> <br>
compiled to PHP compiled to PHP
</h1> </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, Inspired by Rust, Zig and Swift, THP has a modern syntax, semantics,
type system and stdlib. type system and stdlib.
</p> </p>
<br> <br>
<br> <br>
<div class="text-center"> <div class="text-center">
<a class="inline-block font-display text-lg border-2 border-pink-400 hover:bg-pink-400 transition-colors <a class="inline-block font-display text-lg rounded-full border-2 border-pink-400 py-2 px-8
hover:text-c-bg py-3 px-8 mx-6 rounded" href="/learn/"> transition-colors hover:text-black hover:bg-pink-400" href="/learn">
Learn Tutorial
</a> </a>
<a class="inline-block font-display text-lg border-2 border-sky-400 py-3 px-8 mx-6 rounded <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/"> transition-colors hover:text-black hover:bg-sky-400" href="/install/">
Install Install
</a> </a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -14,21 +14,21 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <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 <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"> rel="stylesheet">
</head> </head>
<body class="bg-c-bg text-c-text"> <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"> <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"> <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> <span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
</a> </a>
</div> </div>
</nav> </nav>
<div class="grid grid-cols-[12rem_12rem_auto] container mx-auto"> <div class="grid grid-cols-[14rem_auto_12rem] container mx-auto">
<div class="pt-12 border-r border-[rgba(245,169,184,0.25)] h-screen sticky top-0"> <div class="pt-12 h-screen sticky top-0">
<nav class="py-4 pr-2 overflow-x-scroll" <nav class="py-4 pr-2 overflow-x-scroll"
style="height: calc(100vh - 3rem);" style="height: calc(100vh - 3rem);"
> >
@ -36,17 +36,17 @@
</nav> </nav>
</div> </div>
<div class="pt-12 max-h-screen border-r border-r-[rgba(91,205,250,0.25)] overflow-x-scroll sticky top-0"> <main class="py-[3.5rem] pl-12 pr-4 markdown min-w-0">
<nav class="rounded-md mt-2 p-4"> {{markdown}}
<h2 class="text-xl font-display pb-4 opacity-75">On this page</h2> </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}} {{sidebar}}
</nav> </nav>
</div> </div>
<main class="py-[3.5rem] markdown p-4 min-w-0">
{{markdown}}
</main>
</div> </div>
<script src="/js/highlighter.js"></script> <script src="/js/highlighter.js"></script>

View File

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

View File

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