Improve styles
This commit is contained in:
Araozu
parent
5cb7e89087
commit
301c8540b4
@ -18,7 +18,7 @@ THP is a new programming language that compiles to PHP.
|
||||
- Ship a fast, native binary (not written in PHP).
|
||||
- Sub 10ms watch mode.
|
||||
- Support in-place compilation.
|
||||
- Emit readable PHP code (but not meant to be edited).
|
||||
- Emit readable PHP code.
|
||||
- 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.
|
||||
|
||||
- Be what TypeScript is for JavaScript.
|
||||
- Be what TypeScript is for JavaScript (PHP with types).
|
||||
- Use PHP syntax/conventions.
|
||||
-
|
||||
- Be familiar for PHP developers.
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<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="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);"
|
||||
>
|
||||
<h1
|
||||
@ -36,18 +36,22 @@
|
||||
A <b>modern, consistent</b> typed language for PHP.
|
||||
</p>
|
||||
|
||||
<button class="m-4 py-2 px-4 rounded font-display text-white
|
||||
bg-c-purple hover:bg-c-purple-light transition-colors"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
<div class="m-4 relative mb-2 button-effect inline-block bg-c-bg rounded">
|
||||
<button class="button-effect-receiver py-2 px-4 rounded font-display
|
||||
bg-c-text text-c-primary"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a class="m-4 py-2 px-4 rounded font-display text-white
|
||||
bg-c-purple hover:bg-c-purple-light transition-colors"
|
||||
href="/learn/"
|
||||
>
|
||||
Learn
|
||||
</a>
|
||||
<div class="m-4 relative mb-2 button-effect inline-block bg-c-bg rounded">
|
||||
<a class="button-effect-receiver py-2 px-4 rounded font-display inline-block
|
||||
bg-c-text text-c-primary"
|
||||
href="/learn/"
|
||||
>
|
||||
Learn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -55,7 +59,7 @@
|
||||
|
||||
<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);"
|
||||
>
|
||||
<h2 class="text-2xl mb-2">
|
||||
@ -81,11 +85,11 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
|
||||
|
||||
</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);"
|
||||
>
|
||||
<h2 class="text-2xl mb-2">
|
||||
Make the PHP stdlib <b>good</b>
|
||||
A <b>new</b> stdlib for PHP
|
||||
</h2>
|
||||
<p>
|
||||
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 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);"
|
||||
>
|
||||
<h2 class="text-2xl mb-2">
|
||||
@ -127,11 +131,11 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
|
||||
<pre
|
||||
class="p-2 my-2 rounded-md bg-c-bg language-misti"
|
||||
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 class-name">Some</span>(_) -> <span class="token string">"purple is a color!"</span>
|
||||
<span class="token class-name">None</span> -> <span class="token string">"purple is not a color"</span>
|
||||
<span class="token class-name">Some</span>(_) -> <span class="token string">"purple is allowed!"</span>
|
||||
<span class="token class-name">None</span> -> <span class="token string">"purple is not allowed"</span>
|
||||
}
|
||||
|
||||
print(response)</pre>
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
</head>
|
||||
<body class="bg-c-bg text-c-text">
|
||||
<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">
|
||||
<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="/"
|
||||
>
|
||||
<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>
|
||||
|
||||
<nav class="rounded-md p-4 bg-c-bg-card">
|
||||
<nav class="rounded-md p-4 bg-c-primary">
|
||||
{{pages}}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav class="rounded-md my-2 p-4 bg-c-background-2">
|
||||
<h2 class="text-2xl">On this page</h2>
|
||||
|
||||
<br>
|
||||
|
||||
{{sidebar}}
|
||||
</nav>
|
||||
<div class="py-2 max-h-screen overflow-x-scroll sticky top-0">
|
||||
<nav class="rounded-md p-4 bg-c-secondary">
|
||||
<h2 class="text-2xl">On this page</h2>
|
||||
|
||||
<br>
|
||||
|
||||
{{sidebar}}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main class="markdown p-4 my-2">
|
||||
{{markdown}}
|
||||
|
||||
@ -9,9 +9,10 @@ module.exports = {
|
||||
"c-purple": "var(--c-purple)",
|
||||
"c-purple-light": "var(--c-purple-light)",
|
||||
"c-box-shadow": "var(--c-box-shadow)",
|
||||
"c-bg-card": "var(--c-bg-card)",
|
||||
"c-ping": "var(--c-pink)",
|
||||
"c-background-2": "var(--c-background-2)",
|
||||
"c-primary": "var(--c-primary)",
|
||||
"c-secondary": "var(--c-secondary)",
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
|
||||
20
tailwind.css
20
tailwind.css
@ -5,11 +5,13 @@
|
||||
:root {
|
||||
--c-bg: #121212;
|
||||
--c-text: #fdfffc;
|
||||
--c-primary: #884b6a;
|
||||
--c-purple: #7F669D;
|
||||
--c-purple-light: #BA94D1;
|
||||
--c-box-shadow: #FBFACD;
|
||||
--c-bg-card: #374259;
|
||||
--c-pink: #AE508D;
|
||||
|
||||
--c-secondary: rgba(136,75,106, 0.5);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@ -19,10 +21,10 @@
|
||||
--c-purple: #374259;
|
||||
--c-purple-light: #BA94D1;
|
||||
--c-box-shadow: #374259;
|
||||
--c-bg-card: #FFB4B4;
|
||||
--c-primary: rgb(255, 180, 180);
|
||||
--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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user