iframe border

Author: davidlyons

src/components/mdx/Iframe.astro

@@ -20,7 +20,8 @@ const aspectVariants = {
   src={src}
   title={title}
   allow="accelerometer; autoplay; clipboard-write; fullscreen; encrypted-media; gyroscope; picture-in-picture; web-share"
-  class={`mb-4 ${aspectVariants[aspect]} w-full overflow-hidden rounded-lg`}
+  class={`mb-4 ${aspectVariants[aspect]} w-full border dark:border-white/10 overflow-hidden
+    rounded-lg`}
   {...props}
 >
 </iframe>

src/pages/about.astro

@@ -3,13 +3,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="About">
-  <div class="grid gap-6 sm:mt-6 md:grid-cols-2">
+  <div class="grid gap-6 md:mt-6 md:grid-cols-2">
     <div>
-      <p class="mt-6 mb-4 text-xl font-light">
+      <p class="mb-4 text-xl font-light md:mt-6">
         Hi, my name is David and I create interactive 3D web graphics.
       </p>
       <p>
-        As a 3D artist, design engineer and front end web developer with over 10 years of
+        As a 3D artist, design engineer and front end web developer with over 20 years of
         experience, I collaborate with cross-disciplinary teams to translate 2D concept art into
         real-time 3D models and animations, and translate static UX designs into clean, functional,
         responsive and accessible HTML, CSS and JavaScript.
@@ -25,7 +25,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       <img
         src="/david-lyons.jpg"
         alt="David Lyons"
-        class="mb-6 inline w-[250px] rounded-full shadow-lg"
+        class="mb-6 inline size-72 rounded-full shadow-lg"
       />
     </div>
   </div>