Improve styles
This commit is contained in:
parent
2cab819c40
commit
31cb29fe85
@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@ -11,83 +12,81 @@
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500;600;700;800;900&family=Fugaz+One&family=Inconsolata&family=Inter&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">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fugaz+One&family=Inconsolata&family=Inter&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">
|
||||
</head>
|
||||
|
||||
<body class="bg-c-bg text-c-text">
|
||||
<nav class="sticky top-0 h-16 border-b border-gray-400 bg-c-nav-bg backdrop-blur-md z-20">
|
||||
<div class="max-w-[70rem] mx-auto h-full w-full flex items-center">
|
||||
<button class="font-display font-bold italic text-4xl">
|
||||
<span
|
||||
class="text-[#F5A9B8]"
|
||||
>t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
|
||||
<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">
|
||||
<button class="font-display font-bold italic text-2xl">
|
||||
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div
|
||||
class="max-w-[70rem] mx-auto py-16 grid grid-cols-2 gap-4"
|
||||
>
|
||||
<div>
|
||||
<h1
|
||||
class="font-display font-bold italic text-[6rem] leading-tight"
|
||||
>
|
||||
<div class="container mx-auto py-16 grid grid-cols-2 gap-4 px-10">
|
||||
<div class="pl-10">
|
||||
<h1 class="font-display font-bold text-[5rem] leading-tight">
|
||||
Typed
|
||||
<br>
|
||||
Hypertext
|
||||
<br>
|
||||
Processor
|
||||
</h1>
|
||||
<p class="font-display text-3xl pt-4">
|
||||
<p class="font-display text-c-text opacity-60 text-xl pt-4">
|
||||
Syntax, stdlib and types for PHP
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-[var(--code-theme-bg-color)] p-8 rounded-lg relative"
|
||||
>
|
||||
<span class="absolute inline-block h-[40rem] w-[40rem] -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);
|
||||
filter: blur(75px); opacity: 0.75;"
|
||||
>
|
||||
<div class="bg-[var(--code-theme-bg-color)] p-6 rounded-lg relative">
|
||||
<span class="absolute inline-block 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);
|
||||
filter: blur(75px); opacity: 0.75;">
|
||||
</span>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg>
|
||||
<br>
|
||||
<pre style="padding: 0 !important;">
|
||||
<code class="language-thp">
|
||||
val person_id = POST::get("person_id") ?: die
|
||||
|
||||
match Person::find_by_id(person_id)
|
||||
| Ok(person)
|
||||
{
|
||||
JSON::encode(person)
|
||||
}
|
||||
| Err(e)
|
||||
{
|
||||
JSON::encode(Obj {"error": e})
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
|
||||
<g fill="none" fill-rule="evenodd" transform="translate(1 1)">
|
||||
<circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
|
||||
<circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
|
||||
<circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="h-1"></div>
|
||||
<pre style="padding: 0 !important;">
|
||||
<code class="language-thp">
|
||||
fun find_person(Str person_id) -> Result[Str] {
|
||||
let person_id = try person_id.parse[Int]()
|
||||
try Person::find_by_id(person_id)
|
||||
}
|
||||
|
||||
let id = POST::get("person_id") ?: die
|
||||
let person = find_person(person_id: id) ?: die
|
||||
|
||||
print(
|
||||
<a href="/person/reports/{person.id}">
|
||||
Hello {person.name}
|
||||
</div>
|
||||
)
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="max-w-[70rem] mx-auto text-center"
|
||||
>
|
||||
<a
|
||||
class="inline-block font-display text-2xl border-4 border-[#F5A9B8] py-3 px-8 mx-6 rounded"
|
||||
<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-2xl border-4 border-[#5BCEFA] py-3 px-8 mx-6 rounded"
|
||||
href="/install/"
|
||||
>
|
||||
<a class="inline-block font-display text-lg border-2 border-[#5BCEFA] py-3 px-8 mx-6 rounded" href="/install/">
|
||||
Install
|
||||
</a>
|
||||
</div>
|
||||
@ -95,4 +94,5 @@
|
||||
<script src="/js/prism.min.js"></script>
|
||||
<script src="/js/prism.thp.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -14,7 +14,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500;600;700;800;900&family=Fugaz+One&family=Inconsolata&family=Inter&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fugaz+One&family=Inconsolata&family=Inter&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"
|
||||
@ -25,34 +25,32 @@
|
||||
</head>
|
||||
|
||||
<body class="bg-c-bg text-c-text">
|
||||
<nav class="fixed w-screen top-0 h-16 border-b border-gray-400 bg-c-nav-bg backdrop-blur-md z-20">
|
||||
<div class="max-w-[70rem] mx-auto h-full w-full flex items-center">
|
||||
<button class="font-display font-bold italic text-4xl">
|
||||
<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">
|
||||
<a href="/" class="font-display font-bold italic text-2xl">
|
||||
<span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="grid grid-cols-[12rem_12rem_auto] gap-2 max-w-[70rem] mx-auto">
|
||||
<div class="pt-16 h-screen sticky top-0">
|
||||
<nav class="rounded-md p-4 mt-2 border-2 border-[#F5A9B8] overflow-x-scroll"
|
||||
style="height: calc(100vh - 4.75rem);"
|
||||
<div class="grid grid-cols-[12rem_12rem_auto] container mx-auto">
|
||||
<div class="pt-12 border-r border-[rgba(245,169,184,0.25)] h-screen sticky top-0">
|
||||
<nav class="py-4 pr-2 overflow-x-scroll"
|
||||
style="height: calc(100vh - 3rem);"
|
||||
>
|
||||
{{pages}}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="pt-16 max-h-screen overflow-x-scroll sticky top-0">
|
||||
<nav class="rounded-md mt-2 p-4 border-2 border-[#5BCEFA]">
|
||||
<h2 class="text-2xl">On this page</h2>
|
||||
|
||||
<br>
|
||||
<div class="pt-12 max-h-screen border-r border-r-[rgba(91,205,250,0.25)] overflow-x-scroll sticky top-0">
|
||||
<nav class="rounded-md mt-2 p-4">
|
||||
<h2 class="text-xl font-display pb-4">On this page</h2>
|
||||
|
||||
{{sidebar}}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main class="py-[4.5rem] markdown p-4">
|
||||
<main class="py-[3.5rem] markdown p-4 min-w-0">
|
||||
{{markdown}}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -19,10 +19,29 @@ module.exports = {
|
||||
fontFamily: {
|
||||
"mono": ["'Fira Code'", "Inconsolata", "Iosevka", "monospace"],
|
||||
"display": ["'Josefin Sans'", "'Fugaz One'", "sans-serif"],
|
||||
"body": ["'Fira Sans Condensed'", "Inter", "sans-serif"],
|
||||
"nav-title": ["'Josefin Sans'", "'Fugaz One'", "sans-serif"],
|
||||
"body": ["'Fira Sans'", "Inter", "sans-serif"],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
function ({ addComponents }) {
|
||||
addComponents({
|
||||
'.container': {
|
||||
maxWidth: '95%',
|
||||
'@screen sm': {
|
||||
maxWidth: '640px',
|
||||
},
|
||||
'@screen md': {
|
||||
maxWidth: '768px',
|
||||
},
|
||||
'@screen lg': {
|
||||
maxWidth: '1024px',
|
||||
},
|
||||
'@screen xl': {
|
||||
maxWidth: '1280px',
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
@ -30,8 +30,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fira Sans Condensed', Inter, sans-serif;
|
||||
font-family: 'Fira Sans', Inter, sans-serif;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user