git.iko.soy/urbit.org
on master help sign in
mobile pass 1
commite9fb44b7e72f170878b557e4636956a71316caa0 authorGavin Atkinson <gvnatknsn@protonmail.com> dateMon 21 Jun 2021, 15:10 (5 years ago) parent85b16e2
3 files changed+66−18
compare with master
unifiedsplit
components/Header.js+49−1 pages/index.js+6−6 styles/globals.css+11−11
components/Header.js+49−1
@@ -1,5 +1,6 @@
11import Link from "next/link";
22import { useRouter } from "next/router";
3+import { useState } from "react";
34import classnames from "classnames";
45import path from "path";
56
@@ -20,14 +21,26 @@ function ActiveLink({ children, href, className }) {
2021 );
2122}
2223
24+function MenuTray({ props }) {
25+ const activeClasses = classnames({
26+ "": props.isOpen,
27+ });
28+
29+ return <nav></nav>;
30+}
31+
2332// This is the header for the index page
2433export default function Header() {
34+ const [isOpen, toggleTray] = useState(false);
2535 return (
2636 <header className="layout-wide flex justify-between items-center pt-8">
2737 <Link href="/">
2838 <a className="type-ui">Urbit</a>
2939 </Link>
30− <nav className="flex items-center">
40+ {
41+ // Large screen header
42+ }
43+ <nav className="items-center hidden md:flex">
3144 <ActiveLink className="mr-5 type-ui" href="/docs">
3245 Docs
3346 </ActiveLink>
@@ -42,6 +55,41 @@ export default function Header() {
4255 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
4356 </button>
4457 </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>
4593 </header>
4694 );
4795}
pages/index.js+6−6
@@ -20,13 +20,13 @@ export default function Home({ posts, events }) {
2020 <SingleColumn>
2121 <Header />
2222
23− <section className="layout-narrow pt-48">
23+ <section className="layout-narrow">
2424 <h1>A general-purpose,</h1>
2525 <h1>peer-to-peer,</h1>
2626 <h1>personal computing system.</h1>
2727 </section>
2828
29− <section className="layout-wide pt-48">
29+ <section className="layout-wide hidden md:flex">
3030 <div className="bg-wall w-11/12 hero-card-height rounded-3xl flex">
3131 <div className="pt-20 pl-12 w-7/12">
3232 <div className="pb-8">
@@ -47,7 +47,7 @@ export default function Home({ posts, events }) {
4747 </div>
4848 </section>
4949
50− <section className="layout-narrow pt-48">
50+ <section className="layout-narrow">
5151 <div className="flex items-center measure pb-12">
5252 <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
5353 <button className="bg-green text-white badge-lg">32 Open</button>
@@ -81,7 +81,7 @@ export default function Home({ posts, events }) {
8181 </div>
8282 </section>
8383
84− <section className="layout-narrow pt-48">
84+ <section className="layout-narrow">
8585 <div className="measure">
8686 <h2 className="pb-12">Build on Urbit</h2>
8787 <h3 className="pb-12">
@@ -119,7 +119,7 @@ export default function Home({ posts, events }) {
119119 </div>
120120 </section>
121121
122− <section className="layout-narrow pt-48">
122+ <section className="layout-narrow">
123123 <div className="flex items-center measure pb-12">
124124 <button
125125 onClick={() => setTab(0)}
@@ -172,7 +172,7 @@ export default function Home({ posts, events }) {
172172 </TabCarousel>
173173 </section>
174174
175− <section className="layout-narrow pt-48">
175+ <section className="layout-narrow">
176176 <div className="measure">
177177 <h2 className="m-0 p-0 mr-4 pb-12">Stay In Touch</h2>
178178 <p className="pb-6">
styles/globals.css+11−11
@@ -17,50 +17,50 @@ p a {
1717 @apply text-green;
1818}
1919
20−* {
20+/* * {
2121 box-sizing: border-box;
22−}
22+} */
2323
2424.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;
2626}
2727
2828.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;
3030}
3131
3232h1,
3333.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;
3535}
3636
3737h2,
3838.type-h2 {
39− @apply text-5xl font-bold leading-tight;
39+ @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
4040}
4141
4242h3,
4343.type-h3 {
44− @apply text-2xl font-semibold leading-normal;
44+ @apply text-lg md:text-xl lg:text-2xl font-semibold leading-normal;
4545}
4646
4747h4,
4848.type-ui {
49− @apply text-xl font-semibold leading-normal;
49+ @apply text-base md:text-lg lg:text-xl font-semibold leading-normal;
5050}
5151
5252p,
5353.type-p {
54− @apply text-xl;
54+ @apply text-base md:text-lg lg:text-xl;
5555}
5656
5757.type-sub {
58− @apply text-base font-semibold leading-normal;
58+ @apply text-sm lg:text-base font-semibold leading-normal;
5959}
6060
6161caption,
6262.type-caption {
63− @apply text-base font-medium block text-left;
63+ @apply text-sm lg:text-base font-medium block text-left;
6464}
6565
6666code .type-code {