on master help sign in
Merge pull request #1076 from urbit/ga/tweaks

markdown style tweaks, signup component style tweaks

commit9cc1f3c13d347f99706398088945b5145dead70f authorGavin <5265021+g-a-v-i-n@users.noreply.github.com> dateWed 25 Aug 2021, 11:54 (5 years ago) parent9b39a8f181f8dc
3 files changed+23−11
components/Contact.js+12−8 components/NewletterSignup.js+2−2 styles/markdown.css+9−1
components/Contact.js+12−8
@@ -5,6 +5,11 @@ import { useCopyToClipboard } from "../lib/hooks";
55export default function Contact({ emphasize }) {
66 const [copyStatus, copy] = useCopyToClipboard(contact.urbitCommunity);
77
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+
813 const buttonIcon =
914 copyStatus === "inactive" ? (
1015 <svg
@@ -18,7 +23,7 @@ export default function Contact({ emphasize }) {
1823 fillRule="evenodd"
1924 clipRule="evenodd"
2025 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}
2227 />
2328 </svg>
2429 ) : copyStatus === "copied" ? (
@@ -33,7 +38,7 @@ export default function Contact({ emphasize }) {
3338 fillRule="evenodd"
3439 clipRule="evenodd"
3540 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}
3742 />
3843 </svg>
3944 ) : (
@@ -48,14 +53,11 @@ export default function Contact({ emphasize }) {
4853 fillRule="evenodd"
4954 clipRule="evenodd"
5055 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}
5257 />
5358 </svg>
5459 );
5560
56− const linkText = emphasize ? "text-green-400" : "text-wall-600";
57− const border = emphasize ? "border-green-400" : "border-wall-600";
58−
5961 return (
6062 <div>
6163 <div className="measure">
@@ -86,11 +88,13 @@ export default function Contact({ emphasize }) {
8688 <h4 className="mt-6 text-wall-500 flex items-baseline flex-wrap">
8789 Boot Urbit and join{" "}
8890 <div className="md:ml-2 rounded-lg flex items-stretch">
89− <code className="rounded-l-lg px-2 md:px-4 py-2 bg-wall-100 flex items-center h-full">
91+ <code
92+ className={`rounded-l-lg px-2 md:px-4 py-2 ${washedBg} flex items-center h-full ${linkText}`}
93+ >
9094 {contact.urbitCommunity}
9195 </code>
9296 <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}`}
9498 onClick={() => copy()}
9599 >
96100 {buttonIcon}
components/NewletterSignup.js+2−2
@@ -12,8 +12,8 @@ export default function NewsletterSignup(props) {
1212 <div className="input-group" id="mc_embed_signup_scroll">
1313 <div className="mc-field-group w-full relative">
1414 <input
15− className={`appearance-none outline-none text-wall-500 type-ui black border-${
16− props.color || "black"
15+ className={`appearance-none outline-none text-wall-500 type-ui black ${
16+ props.color || "border-wall-600"
1717 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
1818 type="email"
1919 name="EMAIL"
styles/markdown.css+9−1
@@ -43,6 +43,14 @@
4343 @apply py-2 ml-6 text-lg;
4444}
4545
46+.markdown hr {
47+ @apply my-16 border-t-2 border-wall-300;
48+}
49+
50+.markdown iframe {
51+ min-height: 512px;
52+}
53+
4654/* Technical Typography */
4755
4856.markdown.technical h1 {
@@ -122,7 +130,7 @@
122130}
123131
124132.markdown blockquote {
125− @apply border-l-4 border-wall-500 pl-6 italic;
133+ @apply border-l-4 border-wall-300 pl-6 italic;
126134}
127135.markdown blockquote cite {
128136 @apply not-italic font-semibold;