bcf66a2 · urbit.org · git.iko.soy

components/EventPreview.js+3−5

compare with master

unifiedsplit

@@ -10,7 +10,7 @@ export default function EventPreview({ event, className, title, rsvp }) {

10 {title ? <h3 className="mb-2">{title}</h3> : null}

11 <div

12 key={event.slug}

13− className={`bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat`}

13+ className={`bg-wall rounded-xl h-80 bg-cover bg-center bg-no-repeat`}

14 style={{ backgroundImage: `url(${event.extra?.image})` || "" }}

15 >

16 <Link href={`/events/${event.slug}`}>

@@ -20,10 +20,8 @@ export default function EventPreview({ event, className, title, rsvp }) {

20 <p className={grayText}>{event?.type}</p>

21 </div>

22 <div className="absolute p-4 left-0 bottom-0 w-full">

23− <p className={`${grayText} type-ui-small`}>{event.extra.host}</p>

23+ <p className={`${grayText}`}>{event.extra.host}</p>

24− <p className={`${grayText} type-ui-small`}>

25− {event.extra.guests}

24+ <p className={`${grayText}`}>{event.extra.guests}</p>

26− </p>

27 </div>

25 </div>

28 {rsvp && event.extra.registration_url && event.extra.pinned ? (

26 {rsvp && event.extra.registration_url && event.extra.pinned ? (

29 <div className="absolute right-0 bottom-0 p-4">

27 <div className="absolute right-0 bottom-0 p-4">

components/Footer.js+25−25

@@ -12,34 +12,34 @@ export default function Footer() {

12 <h4 className="mt-16 mb-8">Use Urbit</h4>

13 <Link href="/getting-started">

14 <div>

15− <a className="type-sub text-gray">Getting Started</a>

15+ <a className="type-bold text-gray">Getting Started</a>

16 </div>

17 </Link>

18 <Link href="/using">

19 <div>

20− <a className="type-sub text-gray">Operator's Manual</a>

20+ <a className="type-bold text-gray">Operator's Manual</a>

21 </div>

22 </Link>

23 <Link href="https://github.com/urbit/port/releases">

24 <div>

25− <a className="type-sub text-gray">Urbit Client</a>

25+ <a className="type-bold text-gray">Urbit Client</a>

26 </div>

27 </Link>

28 <Link href="https://github.com/urbit/urbit/releases">

29 <div>

30− <a className="mt-2 type-sub text-gray">Urbit Binaries</a>

30+ <a className="mt-2 type-bold text-gray">Urbit Binaries</a>

31 </div>

32 </Link>

33 {

34 // <Link href="">

35 // <div>

36− // <a className="mt-2 type-sub text-gray">Urbit Apps</a>

36+ // <a className="mt-2 type-bold text-gray">Urbit Apps</a>

37 // </div>

38 // </Link>

39 }

40 <Link href="/getting-started/planet/#hosting-providers">

41 <div>

42− <a className="mt-2 type-sub text-gray">Hosting Providers</a>

42+ <a className="mt-2 type-bold text-gray">Hosting Providers</a>

43 </div>

44 </Link>

45 </div>

@@ -47,22 +47,22 @@ export default function Footer() {

47 <h4 className="mt-16 mb-8">About</h4>

48 <Link href="/understanding-urbit">

49 <div>

50− <a className="type-sub text-gray">What's Urbit?</a>

50+ <a className="type-bold text-gray">What's Urbit?</a>

51 </div>

52 </Link>

53 <Link href="/understanding-urbit/urbit-id">

54 <div>

55− <a className="mt-2 type-sub text-gray">Urbit ID</a>

55+ <a className="mt-2 type-bold text-gray">Urbit ID</a>

56 </div>

57 </Link>

58 <Link href="/understanding-urbit/urbit-os">

59 <div>

60− <a className="mt-2 type-sub text-gray">Urbit OS</a>

60+ <a className="mt-2 type-bold text-gray">Urbit OS</a>

61 </div>

62 </Link>

63 <Link href="/faq">

64 <div>

65− <a className="mt-2 type-sub text-gray">FAQ</a>

65+ <a className="mt-2 type-bold text-gray">FAQ</a>

66 </div>

67 </Link>

68 </div>

@@ -70,17 +70,17 @@ export default function Footer() {

70 <h4 className="mt-16 mb-8">News</h4>

71 <Link href="/blog">

72 <div>

73− <a className="type-sub text-gray">Blog</a>

73+ <a className="type-bold text-gray">Blog</a>

74 </div>

75 </Link>

76 <Link href="/events">

77 <div>

78− <a className="mt-2 type-sub text-gray">Events</a>

78+ <a className="mt-2 type-bold text-gray">Events</a>

79 </div>

80 </Link>

81 <Link href="/updates">

82 <div>

83− <a className="mt-2 type-sub text-gray">Updates</a>

83+ <a className="mt-2 type-bold text-gray">Updates</a>

84 </div>

85 </Link>

86 </div>

@@ -89,17 +89,17 @@ export default function Footer() {

89 <h4 className="mt-16 mb-8">Develop</h4>

90 <Link href="/docs">

91 <div>

92− <a className="type-sub text-gray">Documentation</a>

92+ <a className="type-bold text-gray">Documentation</a>

93 </div>

94 </Link>

95 <Link href="https://github.com/urbit">

96 <div>

97− <a className="mt-2 type-sub text-gray">Github</a>

97+ <a className="mt-2 type-bold text-gray">Github</a>

98 </div>

99 </Link>

100 <Link href="https://github.com/urbit/awesome-urbit#http-apis-airlock">

101 <div>

102− <a className="mt-2 type-sub text-gray">Airlock APIs</a>

102+ <a className="mt-2 type-bold text-gray">Airlock APIs</a>

103 </div>

104 </Link>

105 </div>

@@ -107,12 +107,12 @@ export default function Footer() {

107 <h4 className="mt-16 mb-8">Contribute</h4>

108 <Link href="https://github.com/urbit/urbit/issues">

109 <div>

110− <a className="type-sub text-gray">Issue Tracker</a>

110+ <a className="type-bold text-gray">Issue Tracker</a>

111 </div>

112 </Link>

113 <Link href="/grants">

114 <div>

115− <a className="mt-2 type-sub text-gray">Urbit Grants</a>

115+ <a className="mt-2 type-bold text-gray">Urbit Grants</a>

116 </div>

117 </Link>

118 </div>

@@ -121,22 +121,22 @@ export default function Footer() {

121 <h4 className="mt-16 mb-8">Community</h4>

122 <Link href="https://groups.google.com/a/urbit.org/g/dev?pli=1">

123 <div>

124− <a className="type-sub text-gray">Dev Mailing List</a>

124+ <a className="type-bold text-gray">Dev Mailing List</a>

125 </div>

126 </Link>

127 <Link href="https://discord.gg/CfSKKaB2ep">

128 <div>

129− <a className="mt-2 type-sub text-gray">Support Discord</a>

129+ <a className="mt-2 type-bold text-gray">Support Discord</a>

130 </div>

131 </Link>

132 <Link href="https://github.com/urbit/azimuth">

133 <div>

134− <a className="mt-2 type-sub text-gray">Governance</a>

134+ <a className="mt-2 type-bold text-gray">Governance</a>

135 </div>

136 </Link>

137 <Link href="https://twitter.com/urbit">

138 <div>

139− <a className="mt-2 type-sub text-gray">Twitter</a>

139+ <a className="mt-2 type-bold text-gray">Twitter</a>

140 </div>

141 </Link>

142 </div>

@@ -145,14 +145,14 @@ export default function Footer() {

145 <div className="md:w-1/3">

146 <Link href="/privacy">

147 <div>

148− <a className="type-sub text-gray">Privacy Policy</a>

148+ <a className="type-bold text-gray">Privacy Policy</a>

149 </div>

150 </Link>

151 </div>

152 <div className="md:w-1/3">

153 <Link href="/terms-of-service">

154 <div>

155− <a className="type-sub text-gray">Terms of Service</a>

155+ <a className="type-bold text-gray">Terms of Service</a>

156 </div>

157 </Link>

158 </div>

@@ -160,7 +160,7 @@ export default function Footer() {

160 <div>

161 <a

162 href={"mailto:" + contact.email}

163− className="type-sub text-gray"

163+ className="type-bold text-gray"

164 >

165 {contact.email}

166 </a>

components/PostPreview.js+18−3

@@ -14,11 +14,26 @@ export default function PostPreview(props) {

14 >

15 <div>

16 <BackgroundImage

17− className="w-full h-96 rounded-lg"

17+ className="aspect-w-5 aspect-h-4 rounded-lg"

18 src={props.post.extra.image || ""}

19 />

20+

20− <p className="text-black mt-2">{props.post.title}</p>

21+ <h4 className="mt-2">{props.post.title}</h4>

22+ <div className="flex items-baseline mt-1">

23+ {props.post.extra.author ? (

24+ <div className="type-sub-bold mr-2">

25+ {props.post.extra.author}

26+ </div>

27+ ) : null}

28+ {props.post.extra.ship ? (

29+ <div className="type-sub-bold text-gray font-mono">

30+ {props.post.extra.ship}

31+ </div>

32+ ) : null}

33+ </div>

34+ <div className="text-gray type-sub mt-1">

21− <p className="text-gray">{formatDate(new Date(props.post.date))}</p>

35+ {formatDate(new Date(props.post.date))}

36+ </div>

22 </div>

37 </div>

23 </Link>

38 </Link>

24 </div>

39 </div>

components/Section.js+4−4

@@ -8,10 +8,10 @@ export default function Section({

8 narrow = false,

9}) {

10 const spacing = classnames({

11− "py-6 md:py-8 lg:py-10": short,

11+ "py-4 md:py-6 lg:py-8": short,

12− "py-10 md:py-12 lg:py-24": !short,

12+ "py-8 md:py-10 lg:py-20": !short,

13− "md:w-7/12": narrow,

13+ "md:w-6/12": narrow,

14− "md:w-9/12": !narrow,

14+ "md:w-8/12": !narrow,

15 });

16 return (

17 <section className={`w-full px-4 md:px-8 ${spacing} ${className}`}>

package-lock.json+5

@@ -1508,6 +1508,11 @@

1508 }

1509 }

1510 },

1511+ "@tailwindcss/aspect-ratio": {

1512+ "version": "0.2.1",

1513+ "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.2.1.tgz",

1514+ "integrity": "sha512-aDFi80aHQ3JM3symJ5iKU70lm151ugIGFCI0yRZGpyjgQSDS+Fbe93QwypC1tCEllQE8p0S7TUu20ih1b9IKLA=="

1515+ },

1511 "@tootallnate/once": {

1516 "@tootallnate/once": {

1512 "version": "1.1.2",

1517 "version": "1.1.2",

1513 "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",

1518 "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",

package.json+1

@@ -15,6 +15,7 @@

15 "dependencies": {

16 "@iarna/toml": "^2.2.5",

17 "@netlify/plugin-nextjs": "^3.4.2",

18+ "@tailwindcss/aspect-ratio": "^0.2.1",

18 "autoprefixer": "^10.2.6",

19 "autoprefixer": "^10.2.6",

19 "classnames": "^2.3.1",

20 "classnames": "^2.3.1",

20 "critters": "0.0.10",

21 "critters": "0.0.10",

pages/_app.js+1

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";

3import { configure, GlobalHotKeys } from "react-hotkeys";

4import Search from "../components/Search";

5import "../styles/globals.css";

6+import "../styles/markdown.css";

6import "../styles/prism.css";

7import "../styles/prism.css";

7

8

8function MyApp({ Component, pageProps }) {

9function MyApp({ Component, pageProps }) {

pages/blog.js+6−10

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

40 <Section narrow>

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

42 return (

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

43+ <div key={post.slug} className="mb-20 cursor-pointer">

44 <Link href={`/blog/${post.slug}`}>

45 <div>

46 {

@@ -48,28 +48,24 @@ export default function Blog({ posts, search }) {

48 post.extra.image ? (

49 <BackgroundImage

50 src={post.extra.image}

51− className="w-full rounded-lg tile-height"

51+ className="rounded-lg aspect-w-5 aspect-h-4"

52 />

53 ) : null

54 }

55 <h3 className="mt-4">{post.title}</h3>

56− <div className="flex items-baseline">

56+ <div className="flex items-baseline mt-2">

57 {post.extra.author ? (

58− <div className="type-ui text-gray mt-4">

58+ <div className="type-sub-bold mr-2">

59 {post.extra.author}

60 </div>

61 ) : null}

62− {post.extra.author && post.extra.ship ? (

63− <div className="mx-1 text-gray">•</div>

64− ) : null}

65 {post.extra.ship ? (

62 {post.extra.ship ? (

66− <div className="type-ui text-gray font-mono">

63+ <div className="type-sub-bold text-gray font-mono">

67 {post.extra.ship}

64 {post.extra.ship}

68 </div>

65 </div>

69 ) : null}

66 ) : null}

70 </div>

67 </div>

71−

72− <div className="type-ui text-gray mt-2">

68+ <div className="text-gray type-sub">

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

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

74 </div>

70 </div>

75 </div>

71 </div>

pages/blog/[slug].js+13−10

@@ -40,19 +40,22 @@ export default function Post({

40 <Header search={search} />

41 <Section short narrow>

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

43+ <h3 className=" mt-6">{post.description}</h3>

44+ <div className="flex items-baseline mt-6">

43− {post.extra.author ? (

45+ {post.extra.author ? (

44− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">

45− {post.extra.author}

46+ <div className="type-sub-bold mr-2">{post.extra.author}</div>

46− </div>

47− ) : null}

47+ ) : null}

48− {post.extra.ship ? (

48+ {post.extra.ship ? (

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

49+ <div className="type-sub-bold text-gray font-mono">

50+ {post.extra.ship}

51+ </div>

50− ) : null}

52+ ) : null}

53+ </div>

51− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">

54+ <div className="text-gray type-sub">

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

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

53 </div>

56 </div>

54 </Section>

57 </Section>

55− <Section narrow className="markdown large-typescale">

58+ <Section short narrow className="markdown">

56 <article

59 <article

57 dangerouslySetInnerHTML={{ __html: decode(markdown) }}

60 dangerouslySetInnerHTML={{ __html: decode(markdown) }}

58 ></article>

61 ></article>

pages/docs/[[...slug]].js+1−1

@@ -146,7 +146,7 @@ export default function DocsLayout({

146 section="Urbit Documentation"

147 params={params}

148 >

149− <div className="markdown">

149+ <div className="markdown technical">

150 <article

151 dangerouslySetInnerHTML={{ __html: decode(markdown) }}

152 ></article>

pages/events.js+1−1

@@ -17,7 +17,7 @@ export function EventCard({ event, dir, className }) {

17 return (

18 <div

19 key={event.slug}

20− className={`mb-24 cursor-pointer bg-wall rounded-xl tile-height bg-cover bg-center bg-no-repeat ${className}`}

20+ className={`mb-24 cursor-pointer bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat ${className}`}

21 style={{

22 backgroundImage:

23 `${

pages/events/[slug].js+1−1

@@ -73,7 +73,7 @@ export default function Event({

73 ></iframe>

74 ) : null}

75 </Section>

76− <Section narrow className="markdown large-typescale">

76+ <Section narrow className="markdown">

77 <article

78 className="pt-12 w-full"

79 dangerouslySetInnerHTML={{ __html: decode(markdown) }}

pages/grants/[slug].js+1−1

@@ -67,7 +67,7 @@ export default function Grant({ post, markdown, search, similarGrants }) {

67 ))}

68 </div>

69 </Section>

70− <Section narrow className="markdown large-typescale">

70+ <Section narrow className="markdown">

71 <article dangerouslySetInnerHTML={{ __html: decode(markdown) }} />

72 </Section>

73 {canApply && (

pages/index.js+4−4

@@ -70,7 +70,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {

70 // Introducing Port

71 }

72 <Section className="hidden md:flex">

73− <div className="bg-wall w-11/12 hero-card-height rounded-3xl flex">

73+ <div className="bg-wall w-11/12 port-hero-card-height rounded-3xl flex">

74 <div className="pt-20 pl-12 w-7/12">

75 <div className="pb-8">

76 <h2 className="p-0 m-0 pb-2">Introducing</h2>

@@ -89,7 +89,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {

89 View on GitHub

90 </a>

91 </div>

92− <div className="w-full hero-image-height hero-image mt-8" />

92+ <div className="w-full port-hero-image-height port-hero-image mt-8" />

93 </div>

94 </Section>

95

@@ -185,7 +185,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {

185 {

186 // Blog Posts

187 }

188− <Section narrow>

188+ <Section>

189 <div className="flex items-center measure pb-12">

190 <h2>Blog</h2>

191 </div>

@@ -212,7 +212,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {

212 {

213 // Events Posts

214 }

215− <Section narrow>

215+ <Section>

216 <div className="flex items-center measure pb-12">

217 <h2>Events</h2>

218 </div>

pages/media/[slug].js+1−1

@@ -63,7 +63,7 @@ export default function MediaPage({ post, markdown, search }) {

63 ></iframe>

64 ) : null}

65 </Section>

66− <Section narrow className="markdown large-typescale">

66+ <Section narrow className="markdown">

67 <article

68 className="pt-12 w-full"

69 dangerouslySetInnerHTML={{ __html: decode(markdown) }}

styles/globals.css+47−240

@@ -2,7 +2,7 @@

2@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap");

3

4:root {

5− font-size: 12px;

5+ --tray-time: 0ms;

6}

7

8html,

@@ -21,84 +21,93 @@ p a {

21 @apply text-green;

22}

23

24+button {

25+ border: none;

26+}

27+

28+/* Typography */

29+

24h1,

30h1,

25.type-h1 {

31.type-h1 {

26− @apply text-4xl md:text-5xl lg:text-6xl font-bold leading-tight;

32+ @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;

27}

33}

28

34

29h2,

35h2,

30.type-h2 {

36.type-h2 {

31− @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;

37+ @apply text-2xl md:text-3xl lg:text-4xl font-bold leading-tight;

32}

38}

33

39

34h3,

40h3,

35.type-h3 {

41.type-h3 {

36− @apply text-xl md:text-2xl lg:text-3xl font-bold;

42+ @apply text-lg md:text-xl lg:text-2xl font-semibold;

37}

43}

38

44

39h4,

45h4,

40.type-ui {

46.type-ui {

41− @apply text-base md:text-lg lg:text-xl font-semibold;

47+ @apply text-sm md:text-base lg:text-lg font-semibold;

42}

48}

43

49

44.type-ui-small {

50.type-ui-small {

45− @apply text-sm lg:text-base font-medium;

51+ @apply text-xs lg:text-base font-medium;

46}

52}

47

53

48p,

54p,

49.type-p {

55.type-p {

56+ @apply text-sm md:text-base lg:text-base leading-relaxed;

57+}

58+

59+.type-bold {

50− @apply text-base md:text-lg lg:text-xl leading-relaxed;

60+ @apply text-sm md:text-base lg:text-base font-semibold leading-relaxed;

51}

61}

52

62

53.type-sub {

63.type-sub {

54− @apply text-sm lg:text-base font-semibold;

64+ @apply text-xs md:text-sm;

55}

65}

56

66

57−caption,

67+.type-sub-bold {

58−.type-caption {

59− @apply text-sm lg:text-base font-medium block text-left;

68+ @apply text-xs md:text-sm font-semibold;

60}

69}

61

70

62code .type-code {

71code .type-code {

63 @apply bg-wall p-4 font-mono;

72 @apply bg-wall p-4 font-mono;

64}

73}

65

74

66−button {

75+/* Utils */

67− border: none;

76+

77+/* .tile-height {

78+ height: 32rem;

79+} */

80+

81+.measure {

82+ max-width: 34em;

68}

83}

69

84

70−.tile-height {

85+.flex-center {

71− height: 38rem;

86+ display: flex;

87+ align-items: center;

88+ justify-content: center;

72}

89}

73

90

74−.preview-tile-height {

91+.bg-img {

92+ background-repeat: no-repeat;

93+ background-position: center center;

75− @apply h-96;

94+ @apply bg-wall;

76}

95}

77

96

78.button-sm {

97.button-sm {

79− @apply table px-4 py-1 rounded-lg type-ui;

98+ @apply flex-center px-2 h-6 rounded-lg type-ui;

80}

99}

81

100

82.button-lg {

101.button-lg {

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

102+ @apply flex-center px-4 lg:px-6 py-1 rounded-xl h-10 md:h-14 type-ui;

84}

103}

85

104

86.badge-sm {

105.badge-sm {

87− @apply flex type-ui-small px-3 lg:px-4 items-center justify-center h-8 md:h-10 rounded-full;

106+ @apply flex-center type-ui-small px-2 lg:px-2 h-6 md:h-10 rounded-full;

88}

107}

89

108

90.badge-lg {

109.badge-lg {

91− @apply flex type-ui px-4 lg:px-6 items-center justify-center h-10 md:h-14 rounded-full;

110+ @apply flex-center type-ui px-4 lg:px-6 h-10 md:h-14 rounded-full;

92−}

93−

94−.tab-button-lg {

95− @apply type-h2 h-16;

96− overflow: visible;

97−}

98−

99−.tab-button-sm {

100− @apply type-ui h-12;

101− overflow: visible;

102}

111}

103

112

104.button-sm:hover,

113.button-sm:hover,

@@ -108,15 +117,17 @@ a:hover {

108 opacity: 0.66;

117 opacity: 0.66;

109}

118}

110

119

120+/* BEM Classes - Use sparingly */

121+

111−.hero-card-height {

122+.port-hero-card-height {

112− height: 562px;

123+ height: 36em;

113}

124}

114

125

115−.hero-image-height {

126+.port-hero-image-height {

116− height: 512px;

127+ height: 32em;

117}

128}

118

129

119−.hero-image {

130+.port-hero-image {

120 transform: translateX(8%);

131 transform: translateX(8%);

121 background-image: linear-gradient(

132 background-image: linear-gradient(

122 to right,

133 to right,

@@ -127,26 +138,6 @@ a:hover {

127 background-size: cover;

138 background-size: cover;

128}

139}

129

140

130−.measure {

131− max-width: 34em;

132−}

133−

134−.flex-center {

135− display: flex;

136− align-items: center;

137− justify-content: center;

138−}

139−

140−.bg-img {

141− background-repeat: no-repeat;

142− background-position: center center;

143− @apply bg-wall;

144−}

145−

146−:root {

147− --tray-time: 0ms;

148−}

149−

150.tray-menu-open {

141.tray-menu-open {

151 transform: translateX(0);

142 transform: translateX(0);

152 transition: transform var(--tray-time);

143 transition: transform var(--tray-time);

@@ -207,187 +198,3 @@ a:hover {

207 position: static !important;

198 position: static !important;

208 border-radius: 0 !important;

199 border-radius: 0 !important;

209}

200}

210−

211−.markdown *:last-child {

212− @apply pb-0 mb-0;

213−}

214−

215−.markdown *:first-child {

216− @apply pt-0 mt-0;

217−}

218−

219−.markdown *:first-child figure {

220− @apply pt-0 mt-0;

221−}

222−

223−.markdown p,

224−.markdown ul,

225−.markdown ol,

226−.markdown blockquote {

227− @apply my-8;

228−}

229−

230−.markdown h1 {

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

232−}

233−

234−.markdown.large-typescale h1 {

235− @apply text-4xl md:text-5xl lg:text-6xl font-bold mt-24 mb-12;

236−}

237−

238−.markdown h2 {

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

240−}

241−

242−.markdown.large-typescale h2 {

243− @apply text-3xl md:text-4xl lg:text-5xl font-bold mt-16 mb-12;

244−}

245−

246−.markdown h3 {

247− @apply text-lg md:text-xl lg:text-2xl font-semibold mt-8 mb-8;

248−}

249−

250−.markdown.large-typescale h3 {

251− @apply text-xl md:text-2xl lg:text-3xl font-semibold mt-8 mb-8;

252−}

253−

254−.markdown h4 {

255− @apply text-base md:text-lg lg:text-xl font-semibold mt-4 mb-4;

256−}

257−

258−.markdown.large-typescale h4 {

259− @apply text-lg md:text-xl lg:text-2xl font-semibold mt-4 mb-4;

260−}

261−

262−.markdown p {

263− @apply text-base md:text-lg lg:text-xl leading-relaxed;

264−}

265−

266−.markdown.large-typescale p {

267− @apply text-lg md:text-xl lg:text-2xl leading-relaxed;

268−}

269−

270−.markdown img {

271− width: 100%;

272− height: auto;

273− @apply rounded-lg;

274−}

275−

276−.markdown figure {

277− position: relative;

278− @apply mt-12 mb-12 z-0;

279−}

280−

281−.markdown figure {

282− width: 100%;

283− left: 0;

284−}

285−

286−@media (min-width: 768px) {

287− .markdown figure {

288− width: 125%;

289− left: -12.5%;

290− }

291−}

292−

293−.markdown pre,

294−.markdown pre[class*="language-"] {

295−}

296−

297−.markdown code,

298−.markdown code[class*="language-"] {

299− @apply px-2 py-0.5 bg-wall rounded-md;

300−}

301−

302−.markdown a code,

303−.markdown a code[class*="language-"] {

304− @apply bg-washedGreen;

305−}

306−

307−.markdown pre code,

308−.markdown pre[class*="language-"] code {

309− @apply p-4 md:p-8 rounded-xl;

310−}

311−

312−.markdown ul {

313− list-style: outside;

314− list-style-type: disc;

315−}

316−

317−.markdown ol {

318− list-style: outside;

319− list-style-type: decimal;

320−}

321−

322−.markdown li {

323− @apply py-2 ml-6 text-base md:text-lg lg:text-xl;

324−}

325−

326−.markdown.large-typescale li {

327− @apply py-2 ml-6 text-lg md:text-xl lg:text-2xl;

328−}

329−

330−.markdown li a,

331−.markdown h3 a,

332−.markdown h2 a {

333− @apply text-green;

334−}

335−

336−.markdown blockquote {

337− @apply border-l-4 border-deepWall pl-6 italic;

338−}

339−.markdown blockquote cite {

340− @apply not-italic font-semibold;

341−}

342−

343−.markdown table {

344− border-collapse: separate;

345− border-spacing: 0;

346− min-width: 350px;

347−}

348−

349−.markdown table tr th,

350−.markdown table tr td {

351− border-right-width: 2px;

352− border-right-style: solid;

353− border-bottom-width: 2px;

354− border-bottom-style: solid;

355− padding: 8px !important;

356− @apply border-wall;

357−}

358−

359−.markdown table tr th:first-child,

360−.markdown table tr td:first-child {

361− border-left-width: 2px;

362− border-left-style: solid;

363− @apply border-wall;

364−}

365−

366−.markdown table tr th {

367− background: rgba(240, 239, 236, 0.33);

368− border-top-width: 2px;

369− border-top-style: solid;

370− text-align: left;

371− vertical-align: middle;

372− @apply border-wall;

373−}

374−

375−/* top-left border-radius */

376−.markdown table tr:first-child th:first-child {

377− border-top-left-radius: 8px;

378−}

379−

380−/* top-right border-radius */

381−.markdown table tr:first-child th:last-child {

382− border-top-right-radius: 8px;

383−}

384−

385−/* bottom-left border-radius */

386−.markdown table tr:last-child td:first-child {

387− border-bottom-left-radius: 8px;

388−}

389−

390−/* bottom-right border-radius */

391−.markdown table tr:last-child td:last-child {

392− border-bottom-right-radius: 8px;

393−}

styles/markdown.cssnew file+181

@@ -0,0 +1,181 @@

1+.markdown *:last-child {

2+ @apply pb-0 mb-0;

3+}

4+

5+.markdown *:first-child {

6+ @apply pt-0 mt-0;

7+}

8+

9+.markdown *:first-child figure {

10+ @apply pt-0 mt-0;

11+}

12+

13+.markdown p,

14+.markdown ul,

15+.markdown ol,

16+.markdown blockquote {

17+ @apply my-8;

18+}

19+

20+/* Default Typography */

21+

22+.markdown h1 {

23+ @apply text-4xl font-bold mt-32 mb-16;

24+}

25+

26+.markdown h2 {

27+ @apply text-3xl font-bold mt-24 mb-12;

28+}

29+

30+.markdown h3 {

31+ @apply text-2xl font-semibold mt-16 mb-8;

32+}

33+

34+.markdown h4 {

35+ @apply text-xl font-semibold mt-8 mb-4;

36+}

37+

38+.markdown p {

39+ @apply text-sm md:text-lg leading-relaxed;

40+}

41+

42+.markdown li {

43+ @apply py-2 ml-6 text-lg;

44+}

45+

46+/* Technical Typography */

47+

48+.markdown.technical h1 {

49+ @apply text-3xl font-bold mt-32 mb-16;

50+}

51+

52+.markdown.technical h2 {

53+ @apply text-2xl font-bold mt-24 mb-12;

54+}

55+

56+.markdown.technical h3 {

57+ @apply text-xl font-semibold mt-16 mb-8;

58+}

59+

60+.markdown.technical h4 {

61+ @apply text-lg font-semibold mt-8 mb-4;

62+}

63+

64+.markdown.technical p {

65+ @apply text-base leading-relaxed;

66+}

67+

68+.markdown.technical li {

69+ @apply py-2 ml-6 text-base;

70+}

71+

72+/* Imagery */

73+

74+.markdown img {

75+ @apply rounded-lg w-full h-auto;

76+}

77+

78+.markdown figure {

79+ @apply relative my-8 z-0 w-full left-0;

80+}

81+

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

83+ .markdown figure {

84+ width: 125%;

85+ left: -12.5%;

86+ }

87+}

88+

89+.markdown pre,

90+.markdown pre[class*="language-"] {

91+}

92+

93+.markdown code,

94+.markdown code[class*="language-"] {

95+ @apply px-2 py-0.5 bg-wall rounded-md;

96+}

97+

98+.markdown a code,

99+.markdown a code[class*="language-"] {

100+ @apply bg-washedGreen text-green;

101+}

102+

103+.markdown pre code,

104+.markdown pre[class*="language-"] code {

105+ @apply p-4 md:p-8 rounded-xl;

106+}

107+

108+.markdown ul {

109+ list-style: outside;

110+ list-style-type: disc;

111+}

112+

113+.markdown ol {

114+ list-style: outside;

115+ list-style-type: decimal;

116+}

117+

118+.markdown li a,

119+.markdown h3 a,

120+.markdown h2 a {

121+ @apply text-green;

122+}

123+

124+.markdown blockquote {

125+ @apply border-l-4 border-deepWall pl-6 italic;

126+}

127+.markdown blockquote cite {

128+ @apply not-italic font-semibold;

129+}

130+

131+.markdown table {

132+ border-collapse: separate;

133+ border-spacing: 0;

134+ min-width: 350px;

135+}

136+

137+.markdown table tr th,

138+.markdown table tr td {

139+ border-right-width: 2px;

140+ border-right-style: solid;

141+ border-bottom-width: 2px;

142+ border-bottom-style: solid;

143+ padding: 8px !important;

144+ @apply border-wall;

145+}

146+

147+.markdown table tr th:first-child,

148+.markdown table tr td:first-child {

149+ border-left-width: 2px;

150+ border-left-style: solid;

151+ @apply border-wall;

152+}

153+

154+.markdown table tr th {

155+ background: rgba(240, 239, 236, 0.33);

156+ border-top-width: 2px;

157+ border-top-style: solid;

158+ text-align: left;

159+ vertical-align: middle;

160+ @apply border-wall;

161+}

162+

163+/* top-left border-radius */

164+.markdown table tr:first-child th:first-child {

165+ border-top-left-radius: 8px;

166+}

167+

168+/* top-right border-radius */

169+.markdown table tr:first-child th:last-child {

170+ border-top-right-radius: 8px;

171+}

172+

173+/* bottom-left border-radius */

174+.markdown table tr:last-child td:first-child {

175+ border-bottom-left-radius: 8px;

176+}

177+

178+/* bottom-right border-radius */

179+.markdown table tr:last-child td:last-child {

180+ border-bottom-right-radius: 8px;

181+}

tailwind.config.js+1−1

@@ -48,5 +48,5 @@ module.exports = {

48 variants: {

49 extend: {},

50 },

51− plugins: [],

51+ plugins: [require("@tailwindcss/aspect-ratio")],

52};