Skip to content

Commit

Permalink
Tweak CSS (#857)
Browse files Browse the repository at this point in the history
* Add a bit of spacing to navbar menus

* Created footer component

* Moved footer under the article

* Made footer a little smaller

* Add headers icons

* Added wrap to TOC sidebar

* Restored footer
  • Loading branch information
taras authored Dec 16, 2023
1 parent 4fa896a commit d89f25a
Show file tree
Hide file tree
Showing 8 changed files with 335 additions and 183 deletions.
45 changes: 45 additions & 0 deletions www/components/footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { IconExtern } from "./icons/iconextern.tsx";

export function Footer(): JSX.Element {
return (
<footer class="grid grid-cols-3 text-center text-gray-500 tracking-wide bg-gray-100 pt-5 gap-y-4 leading-10">
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
About
</h1>
<a class="text-gray-800" href="https://frontside.com">
Created by Frontside <IconExtern />
</a>
</section>
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
OSS Projects
</h1>
<a href="https://frontside.com/interactors" class="text-gray-800">
Interactors <IconExtern />
</a>
<a href="/V2" class="text-gray-800">
Effection<em class="align-super text-xs">v2</em> <IconExtern />
</a>
</section>
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
Community
</h1>
<a href="https://discord.gg/r6AvtnU" class="text-gray-800">
Discord <IconExtern />
</a>
<a
href="https://github.com/thefrontside/effection"
class="text-gray-800"
>
GitHub <IconExtern />
</a>
</section>
<p class="col-span-3 text-blue-primary text-xs py-4">
Copyright © 2019 - {new Date().getFullYear()}{" "}
The Frontside Software, Inc.
</p>
</footer>
);
}
15 changes: 15 additions & 0 deletions www/components/icons/discord.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const IconDiscord = () => (
<svg
height="16"
focusable="false"
aria-hidden="true"
role="img"
viewBox="0 0 16 16"
fill="currentColor"
stroke="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z">
</path>
</svg>
);
15 changes: 15 additions & 0 deletions www/components/icons/github.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const IconGithHub = () => (
<svg
height="16"
focusable="false"
aria-hidden="true"
role="img"
viewBox="0 0 16 16"
fill="currentColor"
stroke="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
);
15 changes: 15 additions & 0 deletions www/components/icons/iconextern.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const IconExtern = () => (
<svg
class="inline"
width="13.5"
height="13.5"
aria-hidden="true"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
>
</path>
</svg>
);
157 changes: 26 additions & 131 deletions www/routes/app.html.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,19 @@ import type { JSXChild } from "revolution";

import { useAbsoluteUrl } from "../plugins/rebase.ts";
import { ProjectSelect } from "../components/project-select.tsx";
import { IconGithHub } from "../components/icons/github.tsx";
import { IconDiscord } from "../components/icons/discord.tsx";

export interface Options {
title: string;
}

export function* useAppHtml(
{ title }: Options,
): Operation<({ children }: { children: JSXChild }) => JSX.Element> {
export function* useAppHtml({
title,
}: Options): Operation<({ children }: { children: JSXChild }) => JSX.Element> {
let homeURL = yield* useAbsoluteUrl("/");
let twitterImageURL = yield* useAbsoluteUrl(
"/assets/images/meta-effection.png",
"/assets/images/meta-effection.png"
);

return ({ children }) => (
Expand All @@ -27,10 +29,7 @@ export function* useAppHtml(
content="Introduction | Effection"
data-rh="true"
/>
<meta
property="og:url"
content={homeURL}
/>
<meta property="og:url" content={homeURL} />
<meta
property="og:description"
content="Effection is a structured concurrency and effects framework for JavaScript."
Expand All @@ -39,26 +38,12 @@ export function* useAppHtml(
name="description"
content="Effection is a structured concurrency and effects framework for JavaScript."
/>
<meta
name="twitter:image"
content={twitterImageURL}
/>
<meta name="twitter:image" content={twitterImageURL} />
<link rel="icon" href="/assets/images/favicon-effection.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="canonical"
href={homeURL}
/>
<link
rel="alternate"
href={homeURL}
hreflang="en"
/>
<link
rel="alternate"
href={homeURL}
hreflang="x-default"
/>
<link rel="canonical" href={homeURL} />
<link rel="alternate" href={homeURL} hreflang="en" />
<link rel="alternate" href={homeURL} hreflang="x-default" />
<link
href="/assets/prism-atom-one-dark.css"
rel="preload"
Expand Down Expand Up @@ -87,12 +72,11 @@ export function* useAppHtml(
<img
src="/assets/images/effection-logo.svg"
alt="Effection Logo"
width="156px"
height="24px"
width={156}
height={24}
/>
</a>
</div>

<nav aria-label="Site Nav" class="text-sm">
<ul class="flex items-center sm:gap-1.5 gap-3 md:gap-16">
<li>
Expand All @@ -101,20 +85,20 @@ export function* useAppHtml(
<li>
<a href="https://deno.land/x/effection/mod.ts">API</a>
</li>
<li class="sm:hidden">
<a href="https://github.com/thefrontside/effection">Github</a>
</li>
<li class="hidden sm:block">
<a href="https://github.com/thefrontside/effection">
<IconGithHub />
<li>
<a class="flex flex-row" href="https://github.com/thefrontside/effection">
<span class="hidden pr-1 md:inline">
<IconGithHub />
</span>
Github
</a>
</li>
<li class="sm:hidden">
<a href="https://discord.gg/r6AvtnU">Discord</a>
</li>
<li class="hidden sm:block">
<a href="https://discord.gg/r6AvtnU">
<IconDiscord />
<li>
<a class="flex flex-row" href="https://discord.gg/r6AvtnU">
<span class="hidden pr-1 md:inline">
<IconDiscord />
</span>
Discord
</a>
</li>
<li>
Expand All @@ -124,97 +108,8 @@ export function* useAppHtml(
</nav>
</div>
</header>
<main>
{children}
</main>
<footer class="grid grid-cols-3 text-center text-gray-500 tracking-wide bg-gray-100 py-10 gap-y-4 leading-10">
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
About
</h1>
<a class="" href="https://frontside.com" class="text-gray-800">
Maintained by Frontside <IconExtern />
</a>
</section>
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
OSS Projects
</h1>
<a href="https://frontside.com/interactors" class="text-gray-800">
Interactors <IconExtern />
</a>
<a href="/V2" class="text-gray-800">
Effection<em class="align-super text-xs">v2</em> <IconExtern />
</a>
</section>
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
Community
</h1>
<a href="https://discord.gg/r6AvtnU" class="text-gray-800">
Discord <IconExtern />
</a>
<a
href="https://github.com/thefrontside/effection"
class="text-gray-800"
>
GitHub <IconExtern />
</a>
</section>
<p class="col-span-3 text-blue-primary text-xs py-4">
Copyright © 2019 - {new Date().getFullYear()}{" "}
The Frontside Software, Inc.
</p>
</footer>
<main>{children}</main>
</body>
</html>
);
}

const IconExtern = () => (
<svg
class="inline"
width="13.5"
height="13.5"
aria-hidden="true"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
>
</path>
</svg>
);

const IconGithHub = () => (
<svg
height="16"
focusable="false"
aria-hidden="true"
role="img"
viewBox="0 0 16 16"
fill="currentColor"
stroke="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
);

const IconDiscord = () => (
<svg
height="16"
focusable="false"
aria-hidden="true"
role="img"
viewBox="0 0 16 16"
fill="currentColor"
stroke="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z">
</path>
</svg>
);
13 changes: 9 additions & 4 deletions www/routes/docs-route.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import rehypeSlug from "npm:[email protected]";
import rehypeAutolinkHeadings from "npm:[email protected]";
import rehypeAddClasses from "npm:[email protected]";
import rehypeToc from "npm:@jsdevtools/[email protected]";
import { Footer } from "../components/footer.tsx";

export function docsRoute(docs: Docs): JSXHandler {
return function* () {
Expand Down Expand Up @@ -51,7 +52,7 @@ export function docsRoute(docs: Docs): JSXHandler {
>
<nav class="bg-white px-2 border-r-2 h-full pt-20">
{topics.map((topic) => (
<hgroup>
<hgroup class="mb-2">
<h3 class="text-lg">{topic.name}</h3>
<menu class="text-gray-700">
{topic.items.map((item) => (
Expand Down Expand Up @@ -84,7 +85,7 @@ export function docsRoute(docs: Docs): JSXHandler {
<aside>
<nav class="hidden md:block fixed pl-4">
{topics.map((topic) => (
<hgroup>
<hgroup class="mb-2">
<h3 class="text-lg">{topic.name}</h3>
<menu class="text-gray-700">
{topic.items.map((item) => (
Expand Down Expand Up @@ -129,8 +130,9 @@ export function docsRoute(docs: Docs): JSXHandler {
[rehypeToc, {
cssClasses: {
toc:
"hidden text-sm font-light tracking-wide leading-loose lg:block relative whitespace-nowrap",
list: "fixed",
"hidden text-sm font-light tracking-wide leading-loose lg:block relative",
list: "fixed w-[200px]",
link: "hover:underline hover:underline-offset-2"
},
}],
]}
Expand All @@ -140,6 +142,9 @@ export function docsRoute(docs: Docs): JSXHandler {
<NextPrevLinks doc={doc} />
</article>
</Transform>
<div class="col-start-2 col-span-2">
<Footer />
</div>
</section>
</AppHtml>
);
Expand Down
Loading

0 comments on commit d89f25a

Please sign in to comment.