add some rounded corners and theme transition fading

components/CodeBlock/CodeBlock.module.css

@@ -1,14 +1,19 @@
 /* all code */
 .code {
   font-size: 0.925em;
+  color: var(--code-text);
   tab-size: 2;
   page-break-inside: avoid;
+  background-color: var(--code-background);
   border: 1px solid var(--kinda-light);
+  border-radius: var(--rounded-edge-radius);
+  /* light-dark theme switch fading */
+  transition: background 0.25s ease, border 0.25s ease;
 }
 
 /* inline code in paragraphs/elsewhere (single backticks) */
 .inline {
-  padding: 0.1em 0.25em;
+  padding: 0.2em 0.3em;
 }
 
 .block {
@@ -25,6 +30,10 @@
   color: var(--medium-dark);
   background-color: var(--background-inner);
   border: 1px solid var(--kinda-light);
+  border-top-right-radius: var(--rounded-edge-radius);
+  border-end-start-radius: var(--rounded-edge-radius);
+  /* light-dark theme switch fading */
+  transition: background 0.25s ease, border 0.25s ease;
 }
 
 .block .copy_btn:hover {
@@ -37,8 +46,6 @@
   display: block;
   overflow-x: auto;
   padding: 1em;
-  color: var(--code-text);
-  background-color: var(--code-background);
 }
 
 /* leave room for clipboard button to the right of the first line */

components/ContactForm/ContactForm.module.css

@@ -3,7 +3,7 @@
   padding: 0.8em;
   margin: 0.6em 0;
   border: 2px solid;
-  border-radius: 0.3em;
+  border-radius: var(--rounded-edge-radius);
   color: var(--text);
   background-color: var(--super-duper-light);
   border-color: var(--light);
@@ -18,6 +18,12 @@
   border-color: var(--error);
 }
 
+.input,
+.btn_submit {
+  /* light-dark theme switch fading */
+  transition: background 0.25s ease;
+}
+
 .textarea {
   height: 12em;
   min-height: 6em;
@@ -51,7 +57,7 @@
   padding: 1em 1.25em;
   margin-right: 1.5em;
   border: 0;
-  border-radius: 0.3em;
+  border-radius: var(--rounded-edge-radius);
   cursor: pointer;
   user-select: none;
   font-weight: 500;
@@ -65,7 +71,7 @@
 }
 
 .btn_submit .send_icon {
-  margin-right: 0.4em;
+  margin-right: var(--rounded-edge-radius);
 }
 
 .result_success,

components/ContactForm/ContactForm.tsx

@@ -113,7 +113,7 @@ const ContactForm = ({ className }: Props) => {
             className={cx({ input: true, missing: errors.email && touched.email })}
             name="email"
             type="email"
-            inputmode="email"
+            inputMode="email"
             placeholder="Email"
             disabled={success}
           />

components/Figure/Figure.module.css

@@ -7,6 +7,7 @@
   font-size: 0.9em;
   line-height: 1.5;
   color: var(--medium);
+  margin-top: -0.4em;
 }
 
 /* some figcaptions contain paragraphs, some don't, so reset all of them */

components/Footer/Footer.module.css

@@ -3,6 +3,8 @@
   padding: 1.25em 1.5em;
   border-top: 1px solid var(--kinda-light);
   color: var(--medium-dark);
+  /* light-dark theme switch fading */
+  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
 }
 
 .footer a {

components/Header/Header.module.css

@@ -8,6 +8,8 @@
   background-color: var(--background-header);
   backdrop-filter: saturate(180%) blur(5px);
   z-index: 1000;
+  /* light-dark theme switch fading */
+  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
 }
 
 .nav {

components/IFrame/IFrame.module.css

@@ -3,4 +3,5 @@
   display: block;
   margin: 1em auto;
   border: 2px solid var(--kinda-light);
+  border-radius: var(--rounded-edge-radius);
 }

components/Image/Image.module.css

@@ -5,3 +5,7 @@
   margin: 1em auto;
   text-align: center;
 }
+
+.wrapper img {
+  border-radius: var(--rounded-edge-radius);
+}

components/Layout/Layout.module.css

@@ -3,6 +3,8 @@
   padding: 1.5em;
   color: var(--text);
   background-color: var(--background-inner);
+  /* light-dark theme switch fading */
+  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
 }
 
 .container {

components/Menu/Menu.module.css

@@ -20,6 +20,7 @@
 
 .menu li .link:hover {
   color: var(--link);
+  transition: none;
 }
 
 .menu li .icon {

components/Name/Name.module.css

@@ -8,6 +8,7 @@
 
 .link:hover {
   color: var(--link);
+  transition: none;
 }
 
 .selfie {
@@ -22,10 +23,6 @@
   border-radius: 50%;
 }
 
-.link:hover .selfie {
-  opacity: 0.9;
-}
-
 .name {
   margin: 0 0.6em;
   font-size: 1.2em;

components/NoteMeta/NoteMeta.module.css

@@ -8,7 +8,7 @@
 }
 
 .meta a {
-  color: inherit;
+  color: var(--medium);
   background: none;
   padding-bottom: 0;
 }

components/NoteTitle/NoteTitle.module.css

@@ -8,7 +8,7 @@
 .title a {
   background: none;
   padding-bottom: 0;
-  color: inherit;
+  color: var(--text);
 }
 
 .title code {

components/OctocatLink/OctocatLink.module.css

@@ -3,7 +3,6 @@
   color: var(--text);
   background: none !important;
   padding-bottom: 0;
-  transition: none;
 }
 
 .link:hover {

components/RepositoryCard/RepositoryCard.module.css

@@ -2,10 +2,12 @@
   width: 100%;
   padding: 1.2em 1.2em 0.8em;
   border: 1px solid;
-  border-radius: 0.5em;
+  border-radius: var(--rounded-edge-radius);
   font-size: 0.85em;
   color: var(--medium-dark);
   border-color: var(--kinda-light);
+  /* light-dark theme switch fading */
+  transition: border 0.25s ease;
 }
 
 .name {
@@ -34,7 +36,7 @@
 .meta_item a {
   background: none;
   padding-bottom: 0;
-  color: inherit;
+  color: var(--medium);
 }
 
 .meta_item a:hover {

components/Video/Video.module.css

@@ -8,3 +8,7 @@
   top: 0;
   left: 0;
 }
+
+.wrapper video {
+  border-radius: var(--rounded-edge-radius);
+}

components/YouTubeEmbed/YouTubeEmbed.module.css

@@ -8,3 +8,8 @@
   top: 0;
   left: 0;
 }
+
+.wrapper :global(.react-player__preview),
+.wrapper iframe {
+  border-radius: var(--rounded-edge-radius);
+}