git.iko.soy/urbit.org
on master help sign in
mobile pass 1
e9fb44bGavin Atkinson
components/Header.js+49−1
compare with master
unifiedsplit
@@ -1,5 +1,6 @@
1import Link from "next/link";
1import Link from "next/link";
2import { useRouter } from "next/router";
2import { useRouter } from "next/router";
3+import { useState } from "react";
3import classnames from "classnames";
4import classnames from "classnames";
4import path from "path";
5import path from "path";
5
6
@@ -20,14 +21,26 @@ function ActiveLink({ children, href, className }) {
20 );
21 );
21}
22}
22
23
24+function MenuTray({ props }) {
25+ const activeClasses = classnames({
26+ "": props.isOpen,
27+ });
28+
29+ return <nav></nav>;
30+}
31+
23// This is the header for the index page
32// This is the header for the index page
24export default function Header() {
33export default function Header() {
34+ const [isOpen, toggleTray] = useState(false);
25 return (
35 return (
26 <header className="layout-wide flex justify-between items-center pt-8">
36 <header className="layout-wide flex justify-between items-center pt-8">
27 <Link href="/">
37 <Link href="/">
28 <a className="type-ui">Urbit</a>
38 <a className="type-ui">Urbit</a>
29 </Link>
39 </Link>
40+ {
41+ // Large screen header
42+ }
30− <nav className="flex items-center">
43+ <nav className="items-center hidden md:flex">
31 <ActiveLink className="mr-5 type-ui" href="/docs">
44 <ActiveLink className="mr-5 type-ui" href="/docs">
32 Docs
45 Docs
33 </ActiveLink>
46 </ActiveLink>
@@ -42,6 +55,41 @@ export default function Header() {
42 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
55 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
43 </button>
56 </button>
44 </nav>
57 </nav>
58+ {
59+ // Small screen header
60+ }
61+ <div className="block md:hidden">
62+ <button onClick={() => toggleTray(!isOpen)}>
63+ {isOpen ? (
64+ <svg
65+ width="16"
66+ height="16"
67+ viewBox="0 0 16 16"
68+ fill="none"
69+ xmlns="http://www.w3.org/2000/svg"
70+ >
71+ <path
72+ fill-rule="evenodd"
73+ clip-rule="evenodd"
74+ d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
75+ fill="black"
76+ />
77+ </svg>
78+ ) : (
79+ <svg
80+ width="16"
81+ height="17"
82+ viewBox="0 0 16 17"
83+ fill="none"
84+ xmlns="http://www.w3.org/2000/svg"
85+ >
86+ <rect width="16" height="3" rx="1.5" fill="black" />
87+ <rect y="7" width="16" height="3" rx="1.5" fill="black" />
88+ <rect y="14" width="16" height="3" rx="1.5" fill="black" />
89+ </svg>
90+ )}
91+ </button>
92+ </div>
45 </header>
93 </header>
46 );
94 );
47}
95}
pages/index.js+6−6
@@ -20,13 +20,13 @@ export default function Home({ posts, events }) {
20 <SingleColumn>
20 <SingleColumn>
21 <Header />
21 <Header />
22
22
23− <section className="layout-narrow pt-48">
23+ <section className="layout-narrow">
24 <h1>A general-purpose,</h1>
24 <h1>A general-purpose,</h1>
25 <h1>peer-to-peer,</h1>
25 <h1>peer-to-peer,</h1>
26 <h1>personal computing system.</h1>
26 <h1>personal computing system.</h1>
27 </section>
27 </section>
28
28
29− <section className="layout-wide pt-48">
29+ <section className="layout-wide hidden md:flex">
30 <div className="bg-wall w-11/12 hero-card-height rounded-3xl flex">
30 <div className="bg-wall w-11/12 hero-card-height rounded-3xl flex">
31 <div className="pt-20 pl-12 w-7/12">
31 <div className="pt-20 pl-12 w-7/12">
32 <div className="pb-8">
32 <div className="pb-8">
@@ -47,7 +47,7 @@ export default function Home({ posts, events }) {
47 </div>
47 </div>
48 </section>
48 </section>
49
49
50− <section className="layout-narrow pt-48">
50+ <section className="layout-narrow">
51 <div className="flex items-center measure pb-12">
51 <div className="flex items-center measure pb-12">
52 <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
52 <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
53 <button className="bg-green text-white badge-lg">32 Open</button>
53 <button className="bg-green text-white badge-lg">32 Open</button>
@@ -81,7 +81,7 @@ export default function Home({ posts, events }) {
81 </div>
81 </div>
82 </section>
82 </section>
83
83
84− <section className="layout-narrow pt-48">
84+ <section className="layout-narrow">
85 <div className="measure">
85 <div className="measure">
86 <h2 className="pb-12">Build on Urbit</h2>
86 <h2 className="pb-12">Build on Urbit</h2>
87 <h3 className="pb-12">
87 <h3 className="pb-12">
@@ -119,7 +119,7 @@ export default function Home({ posts, events }) {
119 </div>
119 </div>
120 </section>
120 </section>
121
121
122− <section className="layout-narrow pt-48">
122+ <section className="layout-narrow">
123 <div className="flex items-center measure pb-12">
123 <div className="flex items-center measure pb-12">
124 <button
124 <button
125 onClick={() => setTab(0)}
125 onClick={() => setTab(0)}
@@ -172,7 +172,7 @@ export default function Home({ posts, events }) {
172 </TabCarousel>
172 </TabCarousel>
173 </section>
173 </section>
174
174
175− <section className="layout-narrow pt-48">
175+ <section className="layout-narrow">
176 <div className="measure">
176 <div className="measure">
177 <h2 className="m-0 p-0 mr-4 pb-12">Stay In Touch</h2>
177 <h2 className="m-0 p-0 mr-4 pb-12">Stay In Touch</h2>
178 <p className="pb-6">
178 <p className="pb-6">
styles/globals.css+11−11
@@ -17,50 +17,50 @@ p a {
17 @apply text-green;
17 @apply text-green;
18}
18}
19
19
20−* {
20+/* * {
21 box-sizing: border-box;
21 box-sizing: border-box;
22−}
22+} */
23
23
24.layout-narrow {
24.layout-narrow {
25− @apply w-8/12;
25+ @apply w-full md:w-8/12 px-4 md:px-0 pb-20 md:pb-32 lg:pb-48;
26}
26}
27
27
28.layout-wide {
28.layout-wide {
29− @apply w-10/12;
29+ @apply w-full md:w-10/12 px-4 md:px-0 pb-20 md:pb-32 lg:pb-48;
30}
30}
31
31
32h1,
32h1,
33.type-h1 {
33.type-h1 {
34− @apply text-6xl tracking-tight font-bold leading-tight;
34+ @apply text-4xl md:text-5xl lg:text-6xl tracking-tight font-bold leading-tight;
35}
35}
36
36
37h2,
37h2,
38.type-h2 {
38.type-h2 {
39− @apply text-5xl font-bold leading-tight;
39+ @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
40}
40}
41
41
42h3,
42h3,
43.type-h3 {
43.type-h3 {
44− @apply text-2xl font-semibold leading-normal;
44+ @apply text-lg md:text-xl lg:text-2xl font-semibold leading-normal;
45}
45}
46
46
47h4,
47h4,
48.type-ui {
48.type-ui {
49− @apply text-xl font-semibold leading-normal;
49+ @apply text-base md:text-lg lg:text-xl font-semibold leading-normal;
50}
50}
51
51
52p,
52p,
53.type-p {
53.type-p {
54− @apply text-xl;
54+ @apply text-base md:text-lg lg:text-xl;
55}
55}
56
56
57.type-sub {
57.type-sub {
58− @apply text-base font-semibold leading-normal;
58+ @apply text-sm lg:text-base font-semibold leading-normal;
59}
59}
60
60
61caption,
61caption,
62.type-caption {
62.type-caption {
63− @apply text-base font-medium block text-left;
63+ @apply text-sm lg:text-base font-medium block text-left;
64}
64}
65
65
66code .type-code {
66code .type-code {