Skip to content

Commit

Permalink
feat: Mobile reponsive & small design details (#1)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SushiJ
SushiJ authored Feb 10, 2024
1 parent a864db9 commit eb95177
Showing 1 changed file with 109 additions and 50 deletions.
159 changes: 109 additions & 50 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" class="h-dvh">

<head>
<meta charset="UTF-8" />
Expand All @@ -8,76 +8,135 @@
<title>Riot – A multi-core OCaml runtime</title>
<script defer data-domain="riot.ml" src="https://plausible.io/js/script.js"></script>
</head>

<body>
<section id="root" class="flex flex-col w-full">
<nav class="flex flex-row justify-between align-center items-center px-40 py-2 h-[70px] w-full">
<h1 class="font-black text-2xl text-[#ed700d]">Riot</h1>
<div class="flex flex-row justify-between align-center items-center gap-4">
<a target="_blank" class="" href="https://github.com/riot-ml/riot"><span class="icon "><svg width="32" height="32" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path class="tk-svg-path" d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z" fill="#000"></path></svg></span></a>
<a target="_blank" class="navbar-item navbar-icon tk-social" href="https://discord.gg/59Khzk2UBW"><span class="icon "><svg width="32" height="32" viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg"><path class="tk-svg-path" fill="#000" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"></path><path class="tk-svg-path" fill="#000" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"></path></svg></span></a>
</div>
</nav>
<section id="hero" class="flex flex-col justify-start align-center items-center px-10 py-20 gap-5 m-auto">
<h2 class="font-bold text-8xl text-center"> The OCaml runtime <br/>
<span class="text-[#ed700d]">for software artisans.<span> </h2>
<p class="font-light text-xl w-[900px]">
<main id="root" class="flex flex-col mx-auto lg:max-w-7xl px-4 py-6">
<header>
<nav class="flex justify-between align-center items-center md:px-2">
<h1 class="font-black text-2xl text-[#ed700d] md:text-4xl">Riot</h1>
<div class="flex flex-row justify-between align-center items-center gap-4">
<a target="_blank" class="" href="https://github.com/riot-ml/riot">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="md:w-12 md:h-12">
<path fill="currentColor" fill-rule="evenodd"
d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974c0 4.406 2.857 8.145 6.821 9.465c.499.09.679-.217.679-.481c0-.237-.008-.865-.011-1.696c-2.775.602-3.361-1.338-3.361-1.338c-.452-1.152-1.107-1.459-1.107-1.459c-.905-.619.069-.605.069-.605c1.002.07 1.527 1.028 1.527 1.028c.89 1.524 2.336 1.084 2.902.829c.091-.645.351-1.085.635-1.334c-2.214-.251-4.542-1.107-4.542-4.93c0-1.087.389-1.979 1.024-2.675c-.101-.253-.446-1.268.099-2.64c0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336a9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021c.545 1.372.203 2.387.099 2.64c.64.696 1.024 1.587 1.024 2.675c0 3.833-2.33 4.675-4.552 4.922c.355.308.675.916.675 1.846c0 1.334-.012 2.41-.012 2.737c0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974C22 6.465 17.535 2 12.026 2"
clip-rule="evenodd" />
</svg>
</a>
<a target="_blank" class="navbar-item navbar-icon tk-social" href="https://discord.gg/59Khzk2UBW">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" class="md:w-12 md:h-12">
<path fill="currentColor"
d="M9.593 10.971c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c.011-.581-.427-1.055-.968-1.055m3.468 0c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c-.001-.581-.427-1.055-.968-1.055" />
<path fill="currentColor"
d="M17.678 3H4.947A1.952 1.952 0 0 0 3 4.957v12.844c0 1.083.874 1.957 1.947 1.957H15.72l-.505-1.759l1.217 1.131l1.149 1.064L19.625 22V4.957A1.952 1.952 0 0 0 17.678 3M14.01 15.407s-.342-.408-.626-.771c1.244-.352 1.719-1.13 1.719-1.13c-.39.256-.76.438-1.093.562a6.679 6.679 0 0 1-3.838.398a7.944 7.944 0 0 1-1.396-.41a5.402 5.402 0 0 1-.693-.321c-.029-.021-.057-.029-.085-.048a.117.117 0 0 1-.039-.03c-.171-.094-.266-.16-.266-.16s.456.76 1.663 1.121c-.285.36-.637.789-.637.789c-2.099-.067-2.896-1.444-2.896-1.444c0-3.059 1.368-5.538 1.368-5.538c1.368-1.027 2.669-.998 2.669-.998l.095.114c-1.71.495-2.499 1.245-2.499 1.245s.21-.114.561-.275c1.016-.446 1.823-.57 2.156-.599c.057-.009.105-.019.162-.019a7.756 7.756 0 0 1 4.778.893s-.751-.712-2.366-1.206l.133-.152s1.302-.029 2.669.998c0 0 1.368 2.479 1.368 5.538c0-.001-.807 1.376-2.907 1.443" />
</svg>
</a>
</div>
</nav>
</header>
<section id="hero" class="my-10 md:my-12 md:px-6">
<h2 class="font-bold text-5xl md:text-7xl text-center my-10 tracking-tight leading-tight"> The
OCaml runtime
<br />
<span class="text-[#ed700d]">for software artisans.<span>
</h2>
<p class="font-semibold md:font-normal text-md md:text-3xl text-center tracking-tighter md:py-16">
Riot is a multi-core runtime for the OCaml programming language that
brings Erlang-style concurrency to OCaml via lightweight processes and
message passing. On top of it we're building all the components you
need to build reliable network services and applications.
</p>
</p>
</section>
<section id="stack" class="flex flex-col justify-start align-start items-start px-40 py-20 gap-5 w-full">
<h3 class="font-bold text-6xl"> The Stack </h3>
<p class="font-light text-xl">
<section id="stack" class="py-10 md:px-2">
<h3
class="font-bold text-4xl md:text-5xl pb-4 underline underline-offset-8 decoration-wavy decoration-[#ed700d]/75">
The Stack
</h3>
<p class="font-semibold md:text-2xl pb-10 leading-1 md:pt-2">
Apps aren't built in the void, so we are laying a foundation you can
trust – freeing you to focus on creating amazing apps.
</p>
<ul class="mt-6 space-y-8">
<li>
<h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
riot scheduler
</h3>
<p class="font-sans md:text-xl">
The scheduler includes processes, message passing, and supervision
trees across all cores. It ships with multicore friendly network
and file system I/O, timers, and more.
</p>
</li>

<h3 class="font-bold text-3xl mt-8"> riot scheduler </h3>
<p class="font-light text-xl">
The scheduler includes processes, message passing, and supervision
trees across all cores. It ships with multicore friendly network and
file system I/O, timers, and more.
</p>

<h3 class="font-bold text-3xl mt-8"> gluon </h3>
<p class="font-light text-xl">
A minimal, portable, and <i>fast</i> API on top of the
operating-system's evented I/O API.
</p>

<h3 class="font-bold text-3xl mt-8"> bytestring </h3>
<p class="font-light text-xl">
Supercharged strings with efficient, ergonomic pattern matching. Ideal
for building fast parsers over streamed data.
</p>
<li>
<h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
gluon
</h3>
<p class="font-sans md:text-xl">
A minimal, portable, and <i>fast</i> API on top of the
operating-system's evented I/O API.
</p>
</li>

<h3 class="font-bold text-3xl mt-8"> Rio </h3>
<p class="font-light text-xl">
Ergonomic, composable read/write streams for efficient IO. IO lets the
Riot stack share a common way of reading and writing from any source
into any destination.
</p>
<li>
<h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
bytestring
</h3>
<p class="font-sans md:text-xl">
Supercharged strings with efficient, ergonomic pattern matching.
Ideal for building fast parsers over streamed data.
</p>
</li>

<li>
<h3 class="font-bold text-2xl md:text-4xl underline decoration-dotted decoration-[#ed700d]">
Rio
</h3>
<p class="font-sans md:text-xl">
Ergonomic, composable read/write streams for efficient IO. IO lets
the Riot stack share a common way of reading and writing from any
source into any destination.
</p>
</li>
</ul>
</section>
<footer class="flex flex-col bg-black text-white pt-20 pb-60 justify-center items-start px-40 align-center gap-10">
<div class="flex flex-col gap-5">
<h1 class="font-black text-2xl">Riot</h1>
<div class="flex flex-row justify-between align-center items-center gap-4">
<a target="_blank" class="" href="https://github.com/riot-ml/riot"><span class="icon "><svg width="32" height="32" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path class="tk-svg-path" d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z" fill="#fff"></path></svg></span></a>
<a target="_blank" class="navbar-item navbar-icon tk-social" href="https://discord.gg/59Khzk2UBW"><span class="icon "><svg width="32" height="32" viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg"><path class="tk-svg-path" fill="#fff" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"></path><path class="tk-svg-path" fill="#fff" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"></path></svg></span></a>
</main>
<footer class="bg-black text-white p-4">
<div class="mx-auto max-w-7xl md:px-6 md:py-10 lg:px-4 lg:py-16">
<div class="flex flex-col">
<h1 class="font-black text-2xl py-2 md:text-4xl">Riot</h1>
<div class="flex align-center gap-2 md:gap-0">
<a target="_blank" class="" href="https://github.com/riot-ml/riot">
<span class="icon ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
class="md:w-12 md:h-12">
<path fill="currentColor" fill-rule="evenodd"
d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974c0 4.406 2.857 8.145 6.821 9.465c.499.09.679-.217.679-.481c0-.237-.008-.865-.011-1.696c-2.775.602-3.361-1.338-3.361-1.338c-.452-1.152-1.107-1.459-1.107-1.459c-.905-.619.069-.605.069-.605c1.002.07 1.527 1.028 1.527 1.028c.89 1.524 2.336 1.084 2.902.829c.091-.645.351-1.085.635-1.334c-2.214-.251-4.542-1.107-4.542-4.93c0-1.087.389-1.979 1.024-2.675c-.101-.253-.446-1.268.099-2.64c0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336a9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021c.545 1.372.203 2.387.099 2.64c.64.696 1.024 1.587 1.024 2.675c0 3.833-2.33 4.675-4.552 4.922c.355.308.675.916.675 1.846c0 1.334-.012 2.41-.012 2.737c0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974C22 6.465 17.535 2 12.026 2"
clip-rule="evenodd" />
</svg>
</span>
</a>
<a target="_blank" href="https://discord.gg/59Khzk2UBW">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24"
class="md:w-12 md:h-12">
<path fill="currentColor"
d="M9.593 10.971c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c.011-.581-.427-1.055-.968-1.055m3.468 0c-.542 0-.969.475-.969 1.055c0 .578.437 1.055.969 1.055c.541 0 .968-.477.968-1.055c-.001-.581-.427-1.055-.968-1.055" />
<path fill="currentColor"
d="M17.678 3H4.947A1.952 1.952 0 0 0 3 4.957v12.844c0 1.083.874 1.957 1.947 1.957H15.72l-.505-1.759l1.217 1.131l1.149 1.064L19.625 22V4.957A1.952 1.952 0 0 0 17.678 3M14.01 15.407s-.342-.408-.626-.771c1.244-.352 1.719-1.13 1.719-1.13c-.39.256-.76.438-1.093.562a6.679 6.679 0 0 1-3.838.398a7.944 7.944 0 0 1-1.396-.41a5.402 5.402 0 0 1-.693-.321c-.029-.021-.057-.029-.085-.048a.117.117 0 0 1-.039-.03c-.171-.094-.266-.16-.266-.16s.456.76 1.663 1.121c-.285.36-.637.789-.637.789c-2.099-.067-2.896-1.444-2.896-1.444c0-3.059 1.368-5.538 1.368-5.538c1.368-1.027 2.669-.998 2.669-.998l.095.114c-1.71.495-2.499 1.245-2.499 1.245s.21-.114.561-.275c1.016-.446 1.823-.57 2.156-.599c.057-.009.105-.019.162-.019a7.756 7.756 0 0 1 4.778.893s-.751-.712-2.366-1.206l.133-.152s1.302-.029 2.669.998c0 0 1.368 2.479 1.368 5.538c0-.001-.807 1.376-2.907 1.443" />
</svg>
</span>
</a>
</div>
</div>
<div>
<div class="mt-6 md:text-xl">
Built with 🧡 by
<a href="https://x.com/leostera" class="font-black">@leostera</a>
with the help of
<a href="https://github.com/riot-ml/riot/graphs/contributors" class="font-black">our contributors</a>
.
</div>
</footer>
</section>
</div>
</footer>
<!-- This path is relative to the _build/default directory -->
<script type="module" src="./output/src/main.mjs"></script>
</body>
Expand Down

0 comments on commit eb95177

Please sign in to comment.