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

components/Header.js+10−5

compare with master

unifiedsplit

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

17

18 return (

19 <Link href={href}>

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

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

21 </Link>

22 );

23}

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

39

40 return (

41 <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}`}

43 >

44 {props.children}

45 </nav>

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

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

52 return (

53 <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>

54 <Link href="/">

59 <Link href="/">

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

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

56 </Link>

61 </Link>

57 {

62 {

58 // Large screen header

63 // Large screen header

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

93 </MenuTray>

98 </MenuTray>

94 <button

99 <button

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

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

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

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

97 >

102 >

98 {isOpen ? (

103 {isOpen ? (

99 <svg

104 <svg

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

113 ) : (

118 ) : (

114 <svg

119 <svg

115 width="16"

120 width="16"

116− height="17"

121+ height="16"

117 viewBox="0 0 16 17"

122 viewBox="0 0 16 17"

118 fill="none"

123 fill="none"

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

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

pages/blog.js+2−2

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

13 <Container>

14 <SingleColumn>

15 <Header />

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

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

17 <div className="measure">

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

19 <p className="pb-6">

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

26 </p>

27 </div>

28 </section>

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

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

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

31 return (

32 <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 }) {

29 <Container>

30 <SingleColumn>

31 <Header />

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

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

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

34 {post.extra.author ? (

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

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

37 {post.extra.ship ? (

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

39 ) : 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">

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

42 </div>

43 </section>

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

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

45 <Markdown post={post} />

46 </article>

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

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

48 <div className="measure">

49 <h4 className="pb-6">

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

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

77 </code>

78 </h4>

79 </section>

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

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

81 {previousPost === null ? (

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

83 ) : (

pages/events.js+3−3

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

74 <Container>

75 <SingleColumn>

76 <Header />

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

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

78 <div className="measure">

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

80 <p className="pb-6">

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

86 </p>

87 </div>

88 </section>

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

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

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

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

92 </div>

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

95 })}

96 </section>

97

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

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

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

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

101 </div>

styles/globals.css+4−4

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

22} */

23

24.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;

26}

27

28.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;

30}

31

32h1,

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

76}

77

78.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;

80}

81

82.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;

84}

85

86.tab-button-lg {

styles/markdown.module.css+28−19

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

1.markdown {

2 /* @apply leading-relaxed; */

3 /* 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; */

5}

6

7.markdown *:last-child {

8− padding-bottom: 0px;

8+ @apply pb-0 mb-0;

9− margin-bottom: 0px;

9+}

10+

11+.markdown *:first-child {

12+ @apply pt-0 mt-0;

10}

13}

11

14

12.markdown p,

15.markdown p,

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

17}

20}

18

21

19.markdown h1 {

22.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;

21}

24}

22

25

23.markdown h2 {

26.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;

25}

28}

26

29

27.markdown h3 {

30.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;

29}

32}

30

33

31.markdown h4 {

34.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;

33}

36}

34

37

35.markdown p {

38.markdown p {

36− //styleName: P;

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

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;

44}

40}

45

41

46.markdown img {

42.markdown img {

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

51

47

52.markdown figure {

48.markdown figure {

53 position: relative;

49 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+ }

57}

63}

58

64

59.markdown pre {

65.markdown pre {

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

65}

71}

66

72

67.markdown ul {

73.markdown ul {

74+ list-style: outside;

68 list-style-type: disc;

75 list-style-type: disc;

69}

76}

70

77

71.markdown ol {

78.markdown ol {

79+ list-style: outside;

80+ list-style-type: decimal;

72}

81}

73

82

74.markdown li {

83.markdown li {

75 font-size: 20px;

84 font-size: 20px;

76− @apply py-2 ml-6;

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

77}

86}