git.iko.soy/urbit.org
on master help sign in
markdown style tweaks, signup component style tweaks
181f8dcGavin Atkinson
components/Contact.js+12−8
compare with master
unifiedsplit
@@ -5,6 +5,11 @@ import { useCopyToClipboard } from "../lib/hooks";
5export default function Contact({ emphasize }) {
5export default function Contact({ emphasize }) {
6 const [copyStatus, copy] = useCopyToClipboard(contact.urbitCommunity);
6 const [copyStatus, copy] = useCopyToClipboard(contact.urbitCommunity);
7
7
8+ const linkText = emphasize ? "text-green-400" : "text-wall-600";
9+ const border = emphasize ? "border-green-400" : "border-wall-600";
10+ const washedBg = emphasize ? "bg-green-100" : "bg-wall-100";
11+ const iconColor = emphasize ? "#00B171" : "#24221E";
12+
8 const buttonIcon =
13 const buttonIcon =
9 copyStatus === "inactive" ? (
14 copyStatus === "inactive" ? (
10 <svg
15 <svg
@@ -18,7 +23,7 @@ export default function Contact({ emphasize }) {
18 fillRule="evenodd"
23 fillRule="evenodd"
19 clipRule="evenodd"
24 clipRule="evenodd"
20 d="M3.2 1.6C3.2 0.716344 3.91634 0 4.8 0H11.3615L14.9333 2.38124V12.2667C14.9333 13.1503 14.217 13.8667 13.3333 13.8667H12.8V14.4C12.8 15.2837 12.0837 16 11.2 16H2.66667C1.78301 16 1.06667 15.2837 1.06667 14.4V3.73333C1.06667 2.84968 1.78301 2.13333 2.66667 2.13333H3.2V1.6ZM3.2 3.2H2.66667C2.37211 3.2 2.13333 3.43878 2.13333 3.73333V14.4C2.13333 14.6946 2.37211 14.9333 2.66667 14.9333H11.2C11.4946 14.9333 11.7333 14.6946 11.7333 14.4V13.8667H4.8C3.91634 13.8667 3.2 13.1503 3.2 12.2667V3.2Z"
25 d="M3.2 1.6C3.2 0.716344 3.91634 0 4.8 0H11.3615L14.9333 2.38124V12.2667C14.9333 13.1503 14.217 13.8667 13.3333 13.8667H12.8V14.4C12.8 15.2837 12.0837 16 11.2 16H2.66667C1.78301 16 1.06667 15.2837 1.06667 14.4V3.73333C1.06667 2.84968 1.78301 2.13333 2.66667 2.13333H3.2V1.6ZM3.2 3.2H2.66667C2.37211 3.2 2.13333 3.43878 2.13333 3.73333V14.4C2.13333 14.6946 2.37211 14.9333 2.66667 14.9333H11.2C11.4946 14.9333 11.7333 14.6946 11.7333 14.4V13.8667H4.8C3.91634 13.8667 3.2 13.1503 3.2 12.2667V3.2Z"
21− fill="#666666"
26+ fill={iconColor}
22 />
27 />
23 </svg>
28 </svg>
24 ) : copyStatus === "copied" ? (
29 ) : copyStatus === "copied" ? (
@@ -33,7 +38,7 @@ export default function Contact({ emphasize }) {
33 fillRule="evenodd"
38 fillRule="evenodd"
34 clipRule="evenodd"
39 clipRule="evenodd"
35 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM7.54325 11.4247L12.1498 5.66647L11.3169 5.00013L7.39013 9.90859L4.60812 7.59025L3.92526 8.40969L7.54325 11.4247Z"
40 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM7.54325 11.4247L12.1498 5.66647L11.3169 5.00013L7.39013 9.90859L4.60812 7.59025L3.92526 8.40969L7.54325 11.4247Z"
36− fill="#666666"
41+ fill={iconColor}
37 />
42 />
38 </svg>
43 </svg>
39 ) : (
44 ) : (
@@ -48,14 +53,11 @@ export default function Contact({ emphasize }) {
48 fillRule="evenodd"
53 fillRule="evenodd"
49 clipRule="evenodd"
54 clipRule="evenodd"
50 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM10.8229 11.5772L8.00004 8.75429L5.17716 11.5772L4.42292 10.8229L7.24579 8.00004L4.42292 5.17716L5.17716 4.42292L8.00004 7.24579L10.8229 4.42292L11.5772 5.17716L8.75429 8.00004L11.5772 10.8229L10.8229 11.5772Z"
55 d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM10.8229 11.5772L8.00004 8.75429L5.17716 11.5772L4.42292 10.8229L7.24579 8.00004L4.42292 5.17716L5.17716 4.42292L8.00004 7.24579L10.8229 4.42292L11.5772 5.17716L8.75429 8.00004L11.5772 10.8229L10.8229 11.5772Z"
51− fill="#666666"
56+ fill={iconColor}
52 />
57 />
53 </svg>
58 </svg>
54 );
59 );
55
60
56− const linkText = emphasize ? "text-green-400" : "text-wall-600";
57− const border = emphasize ? "border-green-400" : "border-wall-600";
58−
59 return (
61 return (
60 <div>
62 <div>
61 <div className="measure">
63 <div className="measure">
@@ -86,11 +88,13 @@ export default function Contact({ emphasize }) {
86 <h4 className="mt-6 text-wall-500 flex items-baseline flex-wrap">
88 <h4 className="mt-6 text-wall-500 flex items-baseline flex-wrap">
87 Boot Urbit and join{" "}
89 Boot Urbit and join{" "}
88 <div className="md:ml-2 rounded-lg flex items-stretch">
90 <div className="md:ml-2 rounded-lg flex items-stretch">
91+ <code
89− <code className="rounded-l-lg px-2 md:px-4 py-2 bg-wall-100 flex items-center h-full">
92+ className={`rounded-l-lg px-2 md:px-4 py-2 ${washedBg} flex items-center h-full ${linkText}`}
93+ >
90 {contact.urbitCommunity}
94 {contact.urbitCommunity}
91 </code>
95 </code>
92 <button
96 <button
93− className="rounded-r-lg px-4 bg-wall-100 ml-0.5 flex-1 flex justify-center items-center"
97+ className={`rounded-r-lg px-4 ml-0.5 flex-1 flex justify-center items-center ${washedBg}`}
94 onClick={() => copy()}
98 onClick={() => copy()}
95 >
99 >
96 {buttonIcon}
100 {buttonIcon}
components/NewletterSignup.js+2−2
@@ -12,8 +12,8 @@ export default function NewsletterSignup(props) {
12 <div className="input-group" id="mc_embed_signup_scroll">
12 <div className="input-group" id="mc_embed_signup_scroll">
13 <div className="mc-field-group w-full relative">
13 <div className="mc-field-group w-full relative">
14 <input
14 <input
15− className={`appearance-none outline-none text-wall-500 type-ui black border-${
15+ className={`appearance-none outline-none text-wall-500 type-ui black ${
16− props.color || "black"
16+ props.color || "border-wall-600"
17 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
17 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
18 type="email"
18 type="email"
19 name="EMAIL"
19 name="EMAIL"
styles/markdown.css+9−1
@@ -43,6 +43,14 @@
43 @apply py-2 ml-6 text-lg;
43 @apply py-2 ml-6 text-lg;
44}
44}
45
45
46+.markdown hr {
47+ @apply my-16 border-t-2 border-wall-300;
48+}
49+
50+.markdown iframe {
51+ min-height: 512px;
52+}
53+
46/* Technical Typography */
54/* Technical Typography */
47
55
48.markdown.technical h1 {
56.markdown.technical h1 {
@@ -122,7 +130,7 @@
122}
130}
123
131
124.markdown blockquote {
132.markdown blockquote {
125− @apply border-l-4 border-wall-500 pl-6 italic;
133+ @apply border-l-4 border-wall-300 pl-6 italic;
126}
134}
127.markdown blockquote cite {
135.markdown blockquote cite {
128 @apply not-italic font-semibold;
136 @apply not-italic font-semibold;