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

Improve styles

Browse Source
This commit is contained in:
Araozu 2023-06-30 20:55:29 -05:00
parent 5cb7e89087
commit 301c8540b4
5 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
md/learn/index.md
View File

@ -18,7 +18,7 @@ THP is a new programming language that compiles to PHP.
- Ship a fast, native binary (not written in PHP). - Ship a fast, native binary (not written in PHP).
- Sub 10ms watch mode. - Sub 10ms watch mode.
- Support in-place compilation. - Support in-place compilation.
- Emit readable PHP code (but not meant to be edited). - Emit readable PHP code.
- Implement a LSP server. - Implement a LSP server.
@ -26,14 +26,19 @@ THP is a new programming language that compiles to PHP.
These are **not** aspects that THP looks to solve or implement. These are **not** aspects that THP looks to solve or implement.
- Be what TypeScript is for JavaScript. - Be what TypeScript is for JavaScript (PHP with types).
- Use PHP syntax/conventions. - Use PHP syntax/conventions.
- - Be familiar for PHP developers.
## Philosophy ## Philosophy
- Consistency over familiarity
- Change over conventions
- Explicit over implicit
That is, while there is value in the items on
the right, we value the items on the left more.
## Compared to PHP ## Compared to PHP

42
static/index.html
View File

@ -17,7 +17,7 @@
<div class="px-2 grid grid-cols-2 gap-4 relative"> <div class="px-2 grid grid-cols-2 gap-4 relative">
<div class="text-center h-screen overflow-hidden sticky top-0 left-0"> <div class="text-center h-screen overflow-hidden sticky top-0 left-0">
<div class="rounded-md m-4 p-4 bg-c-bg-card" <div class="rounded-md m-4 p-4 bg-c-primary"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);" style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
> >
<h1 <h1
@ -36,18 +36,22 @@
A <b>modern, consistent</b> typed language for PHP. A <b>modern, consistent</b> typed language for PHP.
</p> </p>
<button class="m-4 py-2 px-4 rounded font-display text-white <div class="m-4 relative mb-2 button-effect inline-block bg-c-bg rounded">
bg-c-purple hover:bg-c-purple-light transition-colors" <button class="button-effect-receiver py-2 px-4 rounded font-display
> bg-c-text text-c-primary"
Get started >
</button> Get started
</button>
</div>
<a class="m-4 py-2 px-4 rounded font-display text-white <div class="m-4 relative mb-2 button-effect inline-block bg-c-bg rounded">
bg-c-purple hover:bg-c-purple-light transition-colors" <a class="button-effect-receiver py-2 px-4 rounded font-display inline-block
href="/learn/" bg-c-text text-c-primary"
> href="/learn/"
Learn >
</a> Learn
</a>
</div>
</div> </div>
</div> </div>
@ -55,7 +59,7 @@
<div> <div>
<div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card" <div class="rounded-md my-4 mx-2 p-4 bg-c-primary"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);" style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
> >
<h2 class="text-2xl mb-2"> <h2 class="text-2xl mb-2">
@ -81,11 +85,11 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
</div> </div>
<div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card" <div class="rounded-md my-4 mx-2 p-4 bg-c-primary"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);" style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
> >
<h2 class="text-2xl mb-2"> <h2 class="text-2xl mb-2">
Make the PHP stdlib <b>good</b> A <b>new</b> stdlib for PHP
</h2> </h2>
<p> <p>
thp groups all global variables and function of PHP into modules, thp groups all global variables and function of PHP into modules,
@ -108,7 +112,7 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
</div> </div>
<div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card" <div class="rounded-md my-4 mx-2 p-4 bg-c-primary"
style="box-shadow: 0 0 10px -4px var(--c-box-shadow);" style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
> >
<h2 class="text-2xl mb-2"> <h2 class="text-2xl mb-2">
@ -127,11 +131,11 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
<pre <pre
class="p-2 my-2 rounded-md bg-c-bg language-misti" class="p-2 my-2 rounded-md bg-c-bg language-misti"
style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);" style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
><span class="token keyword">val</span> colors = <span class="token class-name">Array</span>(<span class="token string">"red"</span>, <span class="token string">"blue"</span>, <span class="token string">"green"</span>) ><span class="token keyword">val</span> allowedColors = <span class="token class-name">Array</span>(<span class="token string">"red"</span>, <span class="token string">"blue"</span>, <span class="token string">"green"</span>)
<span class="token keyword">val</span> response = match colors.search(<span class="token string">"purple"</span>) { <span class="token keyword">val</span> response = match colors.search(<span class="token string">"purple"</span>) {
<span class="token class-name">Some</span>(_) -&gt; <span class="token string">"purple is a color!"</span> <span class="token class-name">Some</span>(_) -&gt; <span class="token string">"purple is allowed!"</span>
<span class="token class-name">None</span> -&gt; <span class="token string">"purple is not a color"</span> <span class="token class-name">None</span> -&gt; <span class="token string">"purple is not allowed"</span>
} }
print(response)</pre> print(response)</pre>

18
static/template.html
View File

@ -16,9 +16,9 @@
</head> </head>
<body class="bg-c-bg text-c-text"> <body class="bg-c-bg text-c-text">
<div class="grid grid-cols-[10rem_12rem_auto] gap-2"> <div class="grid grid-cols-[10rem_12rem_auto] gap-2">
<div class="p-2"> <div class="p-2 overflow-x-scroll max-h-screen sticky top-0">
<div class="relative mb-2 button-effect"> <div class="relative mb-2 button-effect">
<a class="button-effect-receiver inline-block w-[9rem] p-4 bg-c-bg-card rounded-md" <a class="button-effect-receiver inline-block w-[9rem] p-4 bg-c-primary rounded-md"
href="/" href="/"
> >
<h1 <h1
@ -32,18 +32,20 @@
<div class="w-full h-full bg-c-text absolute top-0 left-0 -z-10 rounded-md"></div> <div class="w-full h-full bg-c-text absolute top-0 left-0 -z-10 rounded-md"></div>
</div> </div>
<nav class="rounded-md p-4 bg-c-bg-card"> <nav class="rounded-md p-4 bg-c-primary">
{{pages}} {{pages}}
</nav> </nav>
</div> </div>
<nav class="rounded-md my-2 p-4 bg-c-background-2"> <div class="py-2 max-h-screen overflow-x-scroll sticky top-0">
<h2 class="text-2xl">On this page</h2> <nav class="rounded-md p-4 bg-c-secondary">
<h2 class="text-2xl">On this page</h2>
<br> <br>
{{sidebar}} {{sidebar}}
</nav> </nav>
</div>
<main class="markdown p-4 my-2"> <main class="markdown p-4 my-2">
{{markdown}} {{markdown}}

3
tailwind.config.js
View File

@ -9,9 +9,10 @@ module.exports = {
"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)",
"c-bg-card": "var(--c-bg-card)",
"c-ping": "var(--c-pink)", "c-ping": "var(--c-pink)",
"c-background-2": "var(--c-background-2)", "c-background-2": "var(--c-background-2)",
"c-primary": "var(--c-primary)",
"c-secondary": "var(--c-secondary)",
} }
}, },
fontFamily: { fontFamily: {

20
tailwind.css
View File

@ -5,11 +5,13 @@
:root { :root {
--c-bg: #121212; --c-bg: #121212;
--c-text: #fdfffc; --c-text: #fdfffc;
--c-primary: #884b6a;
--c-purple: #7F669D; --c-purple: #7F669D;
--c-purple-light: #BA94D1; --c-purple-light: #BA94D1;
--c-box-shadow: #FBFACD; --c-box-shadow: #FBFACD;
--c-bg-card: #374259;
--c-pink: #AE508D; --c-pink: #AE508D;
--c-secondary: rgba(136,75,106, 0.5);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@ -19,10 +21,10 @@
--c-purple: #374259; --c-purple: #374259;
--c-purple-light: #BA94D1; --c-purple-light: #BA94D1;
--c-box-shadow: #374259; --c-box-shadow: #374259;
--c-bg-card: #FFB4B4; --c-primary: rgb(255, 180, 180);
--c-pink: #374259; --c-pink: #374259;
--c-background-2: #FEDEFF; --c-secondary: rgba(255, 180, 180, 0.5);
} }
} }
@ -43,3 +45,15 @@ pre, code {
} }
/* Used by headers generated from markdown */
.heading-linked :hover::after{
color: var(--c-primary);
content: "#";
display: inline-block;
font-size: 1em;
line-height: 1;
margin-left: 0.5rem;
}
.heading-linked :hover {
text-decoration: underline var(--c-primary);
}