more preparation for styled components

components/ContactForm/ContactForm.module.css

@@ -9,14 +9,6 @@
   border-color: var(--light);
 }
 
-textarea.input {
-  height: 12em;
-  min-height: 6em;
-  margin-bottom: 0;
-  line-height: 1.5;
-  resize: vertical;
-}
-
 .input:focus {
   outline: none;
   border-color: var(--link);
@@ -26,6 +18,14 @@ textarea.input {
   border-color: var(--error);
 }
 
+.textarea {
+  height: 12em;
+  min-height: 6em;
+  margin-bottom: 0;
+  line-height: 1.5;
+  resize: vertical;
+}
+
 .markdown_tip {
   font-size: 0.825em;
   line-height: 1.75;
@@ -71,6 +71,7 @@ textarea.input {
 .result_success,
 .result_error {
   font-weight: 600;
+  line-height: 1.5;
 }
 
 .result_success {

components/ContactForm/ContactForm.tsx

@@ -114,7 +114,7 @@ const ContactForm = () => {
             disabled={success}
           />
           <Field
-            className={cx({ input: true, missing: errors.message && touched.message })}
+            className={cx({ input: true, textarea: true, missing: errors.message && touched.message })}
             name="message"
             component="textarea"
             placeholder="Write something..."

components/Content/Content.module.css

@@ -3,6 +3,8 @@
   line-height: 1.7;
 }
 
+/* TODO: These will all be their own components... eventually. */
+
 .content h2,
 .content h3,
 .content h4 {
@@ -50,6 +52,18 @@
   background-color: var(--light);
 }
 
+/* all code */
+.content code {
+  font-size: 0.925em;
+  page-break-inside: avoid;
+  border: 1px solid var(--kinda-light);
+}
+
+/* inline code in paragraphs/elsewhere (single backticks) */
+.content :not(pre) code {
+  padding: 0.1em 0.25em;
+}
+
 /* sub-heading anchor styles */
 .content :global(.h-anchor) {
   margin: 0 0.25em;

components/Figure/Figure.module.css

@@ -11,5 +11,5 @@
 
 /* some figcaptions contain paragraphs, some don't, so reset all of them */
 .caption p {
-  margin: 0;
+  margin: 0 !important;
 }

components/Footer/Footer.module.css

@@ -40,16 +40,7 @@
 
 @media screen and (max-width: 768px) {
   .footer {
-    padding: 1em 1.25em 0;
-
-    /*
-     * Safari iOS menu bar reappears below 44px:
-     * https://www.eventbrite.com/engineering/mobile-safari-why/
-     */
-    padding-bottom: 45px !important;
-
-    /* Allows you to scroll below the viewport; default value is visible */
-    overflow-y: scroll;
+    padding: 1em 1.25em;
   }
 
   /* stack columns on left instead of flexboxing across */

components/Name/Name.module.css

@@ -1,4 +1,4 @@
-.name {
+.link {
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
@@ -6,27 +6,27 @@
   padding-bottom: 0;
 }
 
-.name .selfie {
+.link:hover {
+  color: var(--link);
+}
+
+.selfie {
   width: 50px;
   height: 50px;
   line-height: 0;
   padding: 0;
 }
 
-.name .selfie img {
+.selfie img {
   border: 1px solid var(--light) !important;
   border-radius: 50%;
 }
 
-.name:hover {
-  color: var(--link);
-}
-
-.name:hover .selfie {
+.link:hover .selfie {
   opacity: 0.9;
 }
 
-.name span:last-of-type {
+.name {
   margin: 0 0.6em;
   font-size: 1.2em;
   font-weight: 500;
@@ -34,12 +34,12 @@
 }
 
 @media screen and (max-width: 768px) {
-  .name .selfie {
+  .selfie {
     width: 70px;
     height: 70px;
   }
 
-  .name span:last-of-type {
+  .name {
     display: none;
   }
 }

components/Name/Name.tsx

@@ -8,11 +8,11 @@ import meJpg from "../../public/static/images/me.jpg";
 
 const Name = () => (
   <Link href="/">
-    <a className={styles.name}>
+    <a className={styles.link}>
       <div className={styles.selfie}>
         <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
       </div>
-      <span>Jake Jarvis</span>
+      <span className={styles.name}>Jake Jarvis</span>
     </a>
   </Link>
 );