26d6dff · urbit.org · git.iko.soy

git.iko.soy/urbit.org

mobile 3

commit26d6dff1ba209f55160e3a24e8bf1578c195116e authorGavin Atkinson <gvnatknsn@protonmail.com> dateMon 21 Jun 2021, 17:30 (5 years ago) parente03e0f6

6 files changed+52−38

compare with master

unifiedsplit

components/Header.js+10−5 pages/blog.js+2−2 pages/blog/[slug].js+5−5 pages/events.js+3−3 styles/globals.css+4−4 styles/markdown.module.css+28−19

components/Header.js+10−5

@@ -17,7 +17,7 @@ function ActiveLink({ children, href, className }) {

1717

1818 return (

1919 <Link href={href}>

20− <a className={className + " " + activeClassName}>{children}</a>

20+ <a className={`${className} ${activeClassName}`}>{children}</a>

2121 </Link>

2222 );

2323}

@@ -39,7 +39,7 @@ function MenuTray(props) {

3939

4040 return (

4141 <nav

42− className={`w-screen h-screen bg-wall flex top-0 left-0 flex-col p-8 fixed ${activeClasses}`}

42+ className={`z-9 w-screen h-screen bg-wall flex top-0 left-0 flex-col p-4 pt-24 fixed ${activeClasses}`}

4343 >

4444 {props.children}

4545 </nav>

@@ -51,8 +51,13 @@ export default function Header() {

5151 const [isOpen, toggleTray] = useState(false);

5252 return (

5353 <header className="layout-wide flex justify-between items-center pt-8">

54+ <div className="absolute z-10">

55+ <Link href="/">

56+ <a className="type-ui">Urbit</a>

57+ </Link>

58+ </div>

5459 <Link href="/">

55− <a className="type-ui">Urbit</a>

60+ <a className="type-ui text-white">Urbit</a>

5661 </Link>

5762 {

5863 // Large screen header

@@ -93,7 +98,7 @@ export default function Header() {

9398 </MenuTray>

9499 <button

95100 onClick={() => toggleTray(!isOpen)}

96− className="z-10 absolute right-8"

101+ className="z-10 absolute right-4 top-8"

97102 >

98103 {isOpen ? (

99104 <svg

@@ -113,7 +118,7 @@ export default function Header() {

113118 ) : (

114119 <svg

115120 width="16"

116− height="17"

121+ height="16"

117122 viewBox="0 0 16 17"

118123 fill="none"

119124 xmlns="http://www.w3.org/2000/svg"

pages/blog.js+2−2

@@ -13,7 +13,7 @@ export default function Blog({ posts }) {

1313 <Container>

1414 <SingleColumn>

1515 <Header />

16− <section className="layout-wide pt-48">

16+ <section className="layout-wide">

1717 <div className="measure">

1818 <h2 className="pb-16">Urbit Blog</h2>

1919 <p className="pb-6">

@@ -26,7 +26,7 @@ export default function Blog({ posts }) {

2626 </p>

2727 </div>

2828 </section>

29− <section className="layout-wide pt-24">

29+ <section className="layout-wide">

3030 {posts.map((post) => {

3131 return (

3232 <div key={post.slug} className="mb-24 cursor-pointer">

pages/blog/[slug].js+5−5

@@ -29,7 +29,7 @@ export default function Post({ post, nextPost, previousPost }) {

2929 <Container>

3030 <SingleColumn>

3131 <Header />

32− <section className="flex flex-col layout-wide pt-24">

32+ <section className="flex flex-col layout-wide">

3333 <h1>{post.title}</h1>

3434 {post.extra.author ? (

3535 <div className="type-ui text-gray mt-4">{post.extra.author}</div>

@@ -37,14 +37,14 @@ export default function Post({ post, nextPost, previousPost }) {

3737 {post.extra.ship ? (

3838 <div className="type-ui text-gray font-mono">{post.extra.ship}</div>

3939 ) : null}

40− <div className="type-ui text-gray mt-16">

40+ <div className="type-ui text-gray mt-8 md:mt-12 lg:mt-16">

4141 {formatDate(new Date(post.date))}

4242 </div>

4343 </section>

44− <article className="flex justify-center pt-12">

44+ <article className="layout-wide">

4545 <Markdown post={post} />

4646 </article>

47− <section className="layout-narrow pt-24">

47+ <section className="layout-narrow">

4848 <div className="measure">

4949 <h4 className="pb-6">

5050 If you’d like to follow our progress, we send monthly updates via

@@ -77,7 +77,7 @@ export default function Post({ post, nextPost, previousPost }) {

7777 </code>

7878 </h4>

7979 </section>

80− <section className="layout-wide pt-24 flex">

80+ <section className="layout-wide flex">

8181 {previousPost === null ? (

8282 <div className={"w-1/2 mr-4"} />

8383 ) : (

pages/events.js+3−3

@@ -74,7 +74,7 @@ export default function Events({ pastEvents, currentEvents }) {

7474 <Container>

7575 <SingleColumn>

7676 <Header />

77− <section className="layout-wide pt-48">

77+ <section className="layout-wide">

7878 <div className="measure">

7979 <h2 className="pb-16">Urbit Events</h2>

8080 <p className="pb-6">

@@ -86,7 +86,7 @@ export default function Events({ pastEvents, currentEvents }) {

8686 </p>

8787 </div>

8888 </section>

89− <section className="layout-wide pt-24">

89+ <section className="layout-wide">

9090 <div className="mb-8 table">

9191 <span className="bg-green text-white badge-lg">Coming Soon</span>

9292 </div>

@@ -95,7 +95,7 @@ export default function Events({ pastEvents, currentEvents }) {

9595 })}

9696 </section>

9797

98− <section className="layout-wide pt-24">

98+ <section className="layout-wide">

9999 <div className="mb-8 table">

100100 <span className="bg-wall text-gray badge-lg">Past Events</span>

101101 </div>

styles/globals.css+4−4

@@ -22,11 +22,11 @@ p a {

2222} */

2323

2424.layout-narrow {

25− @apply w-full md:w-8/12 px-4 md:px-0 pb-20 md:pb-32 lg:pb-48;

25+ @apply w-full md:w-8/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;

2626}

2727

2828.layout-wide {

29− @apply w-full md:w-10/12 px-4 md:px-0 pb-20 md:pb-32 lg:pb-48;

29+ @apply w-full md:w-10/12 px-4 md:px-8 pb-20 md:pb-32 lg:pb-48;

3030}

3131

3232h1,

@@ -76,11 +76,11 @@ button {

7676}

7777

7878.button-lg {

79− @apply flex px-6 py-2 rounded-lg h-16 flex-center type-ui;

79+ @apply flex px-4 lg:px-6 py-2 rounded-lg h-12 md:h-16 flex-center type-ui;

8080}

8181

8282.badge-lg {

83− @apply flex type-ui px-4 items-center justify-center h-12 rounded-full;

83+ @apply flex type-ui px-4 lg:px-6 items-center justify-center h-12 md:h-16 rounded-full;

8484}

8585

8686.tab-button-lg {

styles/markdown.module.css+28−19

@@ -1,12 +1,15 @@

11.markdown {

22 /* @apply leading-relaxed; */

33 /* max-width: ; */

4− @apply w-8/12;

4+ /* @apply w-full md:w-8/12 px-4 md:px-0 pb-20 md:pb-32 lg:pb-48; */

55}

77.markdown *:last-child {

8− padding-bottom: 0px;

9− margin-bottom: 0px;

8+ @apply pb-0 mb-0;

9+}

10+

11+.markdown *:first-child {

12+ @apply pt-0 mt-0;

1013}

1114

1215.markdown p,

@@ -17,30 +20,23 @@

1720}

1821

1922.markdown h1 {

20− @apply text-5xl font-bold mt-24 mb-12;

23+ @apply text-3xl md:text-4xl lg:text-5xl font-bold mt-24 mb-12;

2124}

2225

2326.markdown h2 {

24− @apply text-4xl font-bold mt-16 mb-12;

27+ @apply text-2xl md:text-3xl lg:text-4xl font-bold mt-16 mb-12;

2528}

2629

2730.markdown h3 {

28− @apply text-2xl font-semibold mt-8 mb-8;

31+ @apply text-lg md:text-xl lg:text-2xl font-semibold mt-8 mb-8;

2932}

3033

3134.markdown h4 {

32− @apply text-xl font-semibold mt-4 mb-4;

35+ @apply text-base md:text-lg lg:text-xl font-semibold mt-4 mb-4;

3336}

3437

3538.markdown p {

36− //styleName: P;

37− font-family: Inter;

38− font-size: 20px;

39− font-style: normal;

40− font-weight: 400;

41− line-height: 32px;

42− letter-spacing: -0.011em;

43− text-align: left;

39+ @apply text-base md:text-lg lg:text-xl;

4440}

4541

4642.markdown img {

@@ -51,9 +47,19 @@

5147

5248.markdown figure {

5349 position: relative;

54− width: 125%;

55− left: -12.5%;

56− @apply mt-12 mb-12;

50+ @apply mt-12 mb-12 z-0;

51+}

52+

53+.markdown figure {

54+ width: 100%;

55+ left: 0;

56+}

57+

58+@media (min-width: 768px) {

59+ .markdown figure {

60+ width: 125%;

61+ left: -12.5%;

62+ }

5763}

5864

5965.markdown pre {

@@ -65,13 +71,16 @@

6571}

6672

6773.markdown ul {

74+ list-style: outside;

6875 list-style-type: disc;

6976}

7077

7178.markdown ol {

79+ list-style: outside;

80+ list-style-type: decimal;

7281}

7382

7483.markdown li {

7584 font-size: 20px;

76− @apply py-2 ml-6;

85+ @apply py-2 ml-6 text-base md:text-lg lg:text-xl;

7786}