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

minimal responsiveness

master
Fernando 2024-04-05 11:09:06 -03:00
parent b71db28075
commit 3070cc92f7
5 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

4
md/learn/flow-control/blocks.md Normal file
View File

@ -0,0 +1,4 @@
# Blocks
Blocks :D

35
static/index.html
View File

@ -15,28 +15,41 @@
<link <link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&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">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
</head> </head>
<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">
<a href="/" class="font-display font-bold text-2xl"> <a href="/" class="inline-block px-4 font-display font-black text-2xl hover:underline">
<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> <a href="/learn/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
Learn
</a>
<a href="/how-to/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
How to guides
</a>
<a href="/reference/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
Language reference
</a>
<a href="/api/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
Stdlib API
</a>
</div>
</nav> </nav>
<div class="container mx-auto py-16 grid grid-cols-[auto_32rem] gap-4 px-10"> <div class="container mx-auto lg:py-16 py-2 lg:grid 2xl:grid-cols-[auto_32rem] lg:grid-cols-[auto_36rem] gap-4 lg:px-10 px-2">
<div class="pl-10 table"> <div class="lg:pl-10 table">
<div class="table-cell align-middle"> <div class="table-cell align-middle">
<h1 class="font-display font-bold text-c-text-2 text-5xl leading-tight"> <h1 class="font-display font-bold text-c-text-2 lg:text-5xl text-3xl lg:text-left text-center leading-tight">
A modern, type safe, A modern, type safe,
<br> <br class="hidden lg:inline-block">
secure language secure language
<br> <br class="hidden lg:inline-block">
compiled to PHP compiled to PHP
</h1> </h1>
<p class="font-display text-c-text text-xl pt-6 pr-12"> <p class="font-display text-c-text text-xl pt-6 lg: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>
@ -57,8 +70,8 @@
</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)] lg:p-6 p-2 rounded-lg relative">
<span class="absolute inline-block h-[35rem] w-[35rem] -z-10 top-1/2 left-1/2 rounded-full <span class="absolute lg:inline-block hidden h-[35rem] w-[35rem] -z-10 top-1/2 left-1/2 rounded-full
transform -translate-x-1/2 -translate-y-1/2" style="background-image: conic-gradient(from 180deg at 50% 50%,#5BCEFA 0deg,#a853ba 180deg,#F5A9B8 1turn); transform -translate-x-1/2 -translate-y-1/2" style="background-image: conic-gradient(from 180deg at 50% 50%,#5BCEFA 0deg,#a853ba 180deg,#F5A9B8 1turn);
filter: blur(75px); opacity: 0.75;"> filter: blur(75px); opacity: 0.75;">
</span> </span>
@ -106,4 +119,4 @@ print(
</script> </script>
</body> </body>
</html> </html>

16
static/template.html
View File

@ -27,22 +27,20 @@
</div> </div>
</nav> </nav>
<div class="grid grid-cols-[14rem_auto_12rem] container mx-auto"> <div class="lg:grid lg:grid-cols-[14rem_auto_12rem] container mx-auto">
<div class="pt-12 h-screen sticky top-0"> <div class="pt-12 lg:h-screen lg:sticky top-0">
<nav id="sidebar" class="py-4 pr-2 overflow-x-scroll" <nav id="sidebar" class="py-4 pr-2 overflow-x-scroll lg:h-[calc(100vh-3rem)]"
style="height: calc(100vh - 3rem);"
> >
{{pages}} {{pages}}
</nav> </nav>
</div> </div>
<main class="py-[3.5rem] pl-12 pr-4 markdown min-w-0"> <main class="lg:py-[3.5rem] lg:pl-12 lg:pr-4 markdown min-w-0">
{{markdown}} {{markdown}}
</main> </main>
<div class="pt-12 max-h-screen overflow-x-scroll sticky top-0"> <div class="lg:pt-12 pt-4 max-h-screen overflow-x-scroll sticky top-0">
<nav class="rounded-md mt-10"> <nav class="rounded-md lg:mt-10">
<h2 class="font-display font-medium pb-2 text-c-text-2">On this page</h2> <h2 class="font-display font-medium pb-2 text-c-text-2">On this page</h2>
{{sidebar}} {{sidebar}}
@ -96,4 +94,4 @@
} }
</script> </script>
</body> </body>
</html> </html>

7
tailwind.css
View File

@ -33,9 +33,14 @@
} }
html { html {
font-size: 17px; font-size: 16px;
} }
@media screen and (min-width: 1600px) {
html {
font-size: 17px;
}
}
body { body {
font-family: Inter, 'Fira Sans', Inter, sans-serif; font-family: Inter, 'Fira Sans', Inter, sans-serif;
} }