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

Change landing page design. Use Inter as display font

Browse Source
This commit is contained in:
Araozu 2024-03-23 18:32:27 -05:00
parent 893b43e099
commit d5fcb40cda
4 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
static/index.html
View File

@ -13,10 +13,7 @@
<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&display=swap" 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"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Josefin+Sans:ital,wght@0,400;1,700&display=swap"
rel="stylesheet"> rel="stylesheet">
</head> </head>
@ -29,20 +26,40 @@
</div> </div>
</nav> </nav>
<div class="container mx-auto py-16 grid grid-cols-2 gap-4 px-10"> <div class="container mx-auto py-16 grid grid-cols-[5fr_4fr] gap-4 px-10">
<div class="pl-10"> <div class="pl-10 table">
<h1 class="font-display font-bold text-[5rem] leading-tight"> <div class="table-cell align-middle">
Typed <h1 class="font-display font-bold 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">
Inspired by Rust, Zig and Swift, THP has a modern syntax, semantics,
type system and stdlib.
</p>
<br> <br>
Hypertext
<br> <br>
Processor <div class="text-center">
</h1> <a
<p class="font-display text-c-text opacity-60 text-xl pt-4"> class="inline-block font-display text-lg border-2 border-pink-400 hover:bg-pink-400 transition-colors
Syntax, stdlib and types for PHP hover:text-c-bg py-3 px-8 mx-6 rounded"
<br> href="/learn/"
Written in Rust >
</p> Learn
</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/"
>
Install
</a>
</div>
</div>
</div> </div>
<div class="bg-[var(--code-theme-bg-color)] p-6 rounded-lg relative"> <div class="bg-[var(--code-theme-bg-color)] p-6 rounded-lg relative">
@ -61,42 +78,31 @@
<div class="h-1"></div> <div class="h-1"></div>
<pre style="padding: 0 !important; border: none !important;"> <pre style="padding: 0 !important; border: none !important;">
<code class="language-thp"> <code class="language-thp">
fun find_person(Str person_id) -> Result[Str] { // Actual generics & sum types
val person_id = try person_id.parse[Int]() fun find_person(Int person_id) -> Result[String, String] {
// Easy, explicit error bubbling
try Person::find_by_id(person_id) try Person::find_by_id(person_id)
} }
val id = POST::get("person_id") ?: die val id = POST::get("person_id") ?? exit("Null person_id")
val person = find_person(person_id: id) ?: die // Errors as values
val person = try find_person(person_id: id) with error {
eprint("Error: {error}")
exit("Person not found")
}
// First class HTML-like templates & components
print( print(
&lt;a href="/person/reports/{person.id}"&gt; &lt;a href="/person/reports/{person.id}"&gt;
Hello {person.name} welcome, {person.name}
&lt;/a&gt; &lt;/a&gt;
) )
// And more!
</code> </code>
</pre> </pre>
</div> </div>
</div> </div>
<div class="max-w-[70rem] mx-auto 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>
<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/"
>
Install
</a>
</div>
<script src="/js/prism.min.js"></script> <script src="/js/prism.min.js"></script>
<script src="/js/prism.thp.js"></script> <script src="/js/prism.thp.js"></script>
</body> </body>

5
static/template.html
View File

@ -14,10 +14,7 @@
<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&display=swap" 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"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Josefin+Sans:ital,wght@0,400;1,700&display=swap"
rel="stylesheet"> rel="stylesheet">
</head> </head>

2
tailwind.config.js
View File

@ -18,7 +18,7 @@ module.exports = {
}, },
fontFamily: { fontFamily: {
"mono": ["'Fira Code'", "Inconsolata", "Iosevka", "monospace"], "mono": ["'Fira Code'", "Inconsolata", "Iosevka", "monospace"],
"display": ["'Josefin Sans'", "'Fugaz One'", "sans-serif"], "display": ["Inter", "'Josefin Sans'", "'Fugaz One'", "sans-serif"],
"body": ["'Fira Sans'", "Inter", "sans-serif"], "body": ["'Fira Sans'", "Inter", "sans-serif"],
}, },
}, },

4
tailwind.css
View File

@ -31,7 +31,7 @@
} }
html { html {
font-size: 18px; font-size: 17px;
} }
body { body {
@ -39,7 +39,7 @@ body {
} }
pre, code { pre, code {
font-family: 'Fira Code', Inconsolata, monospace; font-family: Iosevka, 'Fira Code', monospace;
} }
.button-effect-receiver { .button-effect-receiver {