Fix iframe sizing

cyphersept · Aug 6, 2024 · f88c36b · f88c36b
1 parent e9236ec
commit f88c36b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -3,33 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Yuan Gao — Junior Web Developer </title>
+    <title>Yuan Gao — Web Developer Portfolio</title>
     <link rel="stylesheet" href="./src/output.css">
     <link rel="icon" href="data:,">
 </head>
 <body class="max-sm:flex flex-col h-screen sm:min-h-[600px] w-full font-serif text-brown-5 bg-white relative">
     <div class="bg bg-[auto_100%] bg-center absolute h-full w-full transition-opacity bg-no-repeat opacity-0 sm:opacity-100 invisible sm:visible"></div>
 
-    <aside class="left flex md:flex-col flex-wrap md:flex-nowrap justify-center md:items-end md:w-[clamp(13rem,30%,calc(50%_-_60vh))] sticky md:h-full md:ml-6 py-8 py-auto max-md:px-8">
+    <aside class="left flex md:flex-col flex-wrap md:flex-nowrap justify-between md:justify-center md:items-end md:w-[clamp(13rem,30%,calc(50%_-_60vh))] sticky md:h-full md:ml-6 py-8 py-auto max-md:px-8">
         <h1 class="name text-4xl text-brown-5 font-bold text-center grow-0 md:text-right">Yuan Gao</h1>
         <h3 class="tagline text-2xl mt-4 mb-16 text-right hidden md:block transition-[margin]">Web Developer</h3>
-        <nav class="flex items-center md:flex-col">
+        <nav class="flex items-center md:flex-col max-md:gap-4">
             <div class="text-red-3 text-nowrap md:mb-8 transition-[margin]">
-                <svg id="seal" class="hidden md:inline" height=2.5rem width=2.5rem xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="7.87 7.8 84.25 84.4">  <g>   <path fill="currentColor" d="m50 7.8125c-22.738 0-41.277 18.09-42.109 40.625h40.547v-31.184c-13.82 0.6875-26.203 10.371-29.906 23.371h22.094v-12.102c-3.6836 1.6211-6.875 4.2109-9.2695 7.4141h-3.8633l0.58594-0.87109c3.2344-4.8047 8.0703-8.4609 13.617-10.297l2.0547-0.68359v19.664h-29.152l0.40625-1.8906c3.4023-15.848 18.445-27.797 34.996-27.797 16.555 0 31.602 11.949 34.996 27.797l0.40234 1.8906h-29.148v-19.664l2.0547 0.67969c5.543 1.8359 10.383 5.4922 13.617 10.297l0.58594 0.87109h-3.8672c-2.3906-3.1992-5.582-5.7891-9.2656-7.4102v12.102h22.094c-3.6953-13-16.082-22.684-29.906-23.371v31.184h40.547c-0.83203-22.535-19.371-40.625-42.109-40.625z"></path>   <path fill="currentColor" d="m51.562 51.562v31.184c13.828-0.6875 26.211-10.371 29.906-23.371h-22.094v12.102c3.6836-1.6211 6.875-4.2109 9.2695-7.4141h3.8672l-0.58594 0.87109c-3.2344 4.8047-8.0703 8.4609-13.617 10.297l-2.0586 0.68359v-19.664h29.148l-0.40234 1.8906c-3.3945 15.848-18.441 27.797-34.996 27.797-16.551 0-31.594-11.949-34.996-27.797l-0.40625-1.8906h29.152v19.664l-2.0547-0.67969c-5.543-1.8359-10.383-5.4922-13.617-10.297l-0.58594-0.875h3.8672c2.3945 3.2031 5.5859 5.793 9.2695 7.4141l-0.003906-12.102h-22.094c3.7031 13 16.086 22.684 29.906 23.371v-31.184h-40.547c0.83203 22.535 19.371 40.625 42.109 40.625s41.277-18.09 42.109-40.625z"></path>  </g> </svg>
+                <svg id="seal" class="hidden md:inline mr-4" height=2.5rem width=2.5rem xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="7.87 7.8 84.25 84.4">  <g>   <path fill="currentColor" d="m50 7.8125c-22.738 0-41.277 18.09-42.109 40.625h40.547v-31.184c-13.82 0.6875-26.203 10.371-29.906 23.371h22.094v-12.102c-3.6836 1.6211-6.875 4.2109-9.2695 7.4141h-3.8633l0.58594-0.87109c3.2344-4.8047 8.0703-8.4609 13.617-10.297l2.0547-0.68359v19.664h-29.152l0.40625-1.8906c3.4023-15.848 18.445-27.797 34.996-27.797 16.555 0 31.602 11.949 34.996 27.797l0.40234 1.8906h-29.148v-19.664l2.0547 0.67969c5.543 1.8359 10.383 5.4922 13.617 10.297l0.58594 0.87109h-3.8672c-2.3906-3.1992-5.582-5.7891-9.2656-7.4102v12.102h22.094c-3.6953-13-16.082-22.684-29.906-23.371v31.184h40.547c-0.83203-22.535-19.371-40.625-42.109-40.625z"></path>   <path fill="currentColor" d="m51.562 51.562v31.184c13.828-0.6875 26.211-10.371 29.906-23.371h-22.094v12.102c3.6836-1.6211 6.875-4.2109 9.2695-7.4141h3.8672l-0.58594 0.87109c-3.2344 4.8047-8.0703 8.4609-13.617 10.297l-2.0586 0.68359v-19.664h29.148l-0.40234 1.8906c-3.3945 15.848-18.441 27.797-34.996 27.797-16.551 0-31.594-11.949-34.996-27.797l-0.40625-1.8906h29.152v19.664l-2.0547-0.67969c-5.543-1.8359-10.383-5.4922-13.617-10.297l-0.58594-0.875h3.8672c2.3945 3.2031 5.5859 5.793 9.2695 7.4141l-0.003906-12.102h-22.094c3.7031 13 16.086 22.684 29.906 23.371v-31.184h-40.547c0.83203 22.535 19.371 40.625 42.109 40.625s41.277-18.09 42.109-40.625z"></path>  </g> </svg>
                 <!-- https://thenounproject.com/icon/chinese-ornament-6716715/ -->
-                <a href="#about" class="inline-block font-semibold md:font-normal md:w-36 ml-4 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-red-3 max-sm:txt-col hoverline">About</a>
+                <a href="#about" class="inline-block font-semibold md:font-normal md:w-36 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-red-3 max-sm:txt-col hoverline">About</a>
             </div>
             <div class="text-pink-3 text-nowrap md:mb-8 transition-[margin]">
-                <svg class="hidden md:inline" height=2.5rem width=2.5rem><use xlink:href="#seal"/></svg>
-                <a href="#skills" class="inline-block font-semibold md:font-normal md:w-36 ml-4 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-pink-3 max-sm:txt-col hoverline">Skills</a>
+                <svg class="hidden md:inline mr-4" height=2.5rem width=2.5rem><use xlink:href="#seal"/></svg>
+                <a href="#skills" class="inline-block font-semibold md:font-normal md:w-36 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-pink-3 max-sm:txt-col hoverline">Skills</a>
             </div>
             <div class="text-teal-4 text-nowrap md:mb-8 transition-[margin]">
-                <svg class="hidden md:inline" height=2.5rem width=2.5rem><use xlink:href="#seal"/></svg>
-                <a href="#projects" class="inline-block font-semibold md:font-normal md:w-36 ml-4 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-teal-4 max-sm:txt-col hoverline">Projects</a>
+                <svg class="hidden md:inline mr-4" height=2.5rem width=2.5rem><use xlink:href="#seal"/></svg>
+                <a href="#projects" class="inline-block font-semibold md:font-normal md:w-36 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-teal-4 max-sm:txt-col hoverline">Projects</a>
             </div>
             <div class="text-orange-2 text-nowrap">
-                <svg class="hidden md:inline" height=2.5rem width=2.5rem><use xlink:href="#seal"/></svg>
-                <a href="#contact" class="inline-block font-semibold md:font-normal md:w-36 ml-4 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-orange-2 max-sm:txt-col hoverline">Contact</a>
+                <svg class="hidden md:inline mr-4" height=2.5rem width=2.5rem><use xlink:href="#seal"/></svg>
+                <a href="#contact" class="inline-block font-semibold md:font-normal md:w-36 align-middle py-1.5 text-center text-lg rounded-xl md:text-gray-1 md:bg-orange-2 max-sm:txt-col hoverline">Contact</a>
             </div>
         </nav>
     </aside>
@@ -39,7 +39,7 @@ <h3 class="tagline text-2xl mt-4 mb-16 text-right hidden md:block transition-[ma
             <h1 class="text-3xl font-bold mb-8 text-red-3">About</h1>
                         <div class="text-xl font-sans">I'm a Montreal-based web developer with a keen interest in what makes the internet tick. With my background in freelance illustration, I combine sharp visuals with user-friendly functionality to deliver unique utilities via the convenience of the world wide web.</div>
         </section>
-        <section id="skills" class="min-h-full md:pt-8 pb-8 px-8 sm:px-4 snap-start snap-always text-xl">
+        <section id="skills" class="min-h-full sm:pt-8 pb-8 px-8 sm:px-4 snap-start snap-always text-xl">
             <h1 class="text-3xl font-bold mb-8 text-pink-3">My Skills</h1>
             <h3 class="font-bold text-2xl mt-4 mb-2">Web Development</h3>
             <ul class="font-sans">
@@ -63,7 +63,7 @@ <h3 class="font-bold text-2xl mt-4 mb-2">Others</h3>
                 <li>Some proficiency in French</li>
             </ul>
         </section>
-        <section id="projects" class="min-h-full pt-2 md:pt-4 pb-4 max-sm:px-8 snap-start snap-always relative">
+        <section id="projects" class="h-full pt-2 sm:pt-4 pb-4 max-sm:px-8 snap-start snap-always relative flex flex-col">
             <nav>
                 <ul class="flex gap-x-2 gap-y-4 flex-wrap content-between justify-center mb-4">
                     <li>
@@ -87,15 +87,15 @@ <h3 class="font-bold text-2xl mt-4 mb-2">Others</h3>
                 </ul>
             </nav>
 
-            <section id="repalette" class="flex scroll-mt-36 h-[calc(100%-7rem)] max-sm:w-[calc(100%_-_4rem)] flex-col top-14">
+            <section id="repalette" class="flex grow scroll-mt-36 h-[calc(100%-7rem)] flex-col top-14">
                 <h1 class="text-3xl font-bold text-teal-4">Projects — 
                     <a href="https://cyphersept.github.io/repalette" target="_blank" rel="noopener" class="underline">Repalette</a></h1>
                 <h3 class="text-xl my-2">One-page pixel art bulk recolouring tool
                     (<a class="underline text-teal-4" href="https://github.com/cyphersept/repalette">Source</a>)</h3>
                 <img src="./src/img/repalette-demo.gif" alt="Example gif" loading="lazy" class="rounded-xl object-contain">
             </section>
 
-            <section id="doodle" class="hidden scroll-mt-36 h-[calc(100%-7rem)] max-sm:w-[calc(100%_-_4rem)] flex-col top-14">
+            <section id="doodle" class="hidden grow scroll-mt-36 h-[calc(100%-7rem)] flex-col top-14">
                 <h1 class="text-3xl font-bold text-teal-4">Projects — 
                     <a href="https://cyphersept.github.io/small-projects/etch" target="_blank" rel="noopener" class="underline">Etch-a-Sketch</a></h1>
                 <h3 class="text-xl my-2">Digital doodling
@@ -105,7 +105,7 @@ <h3 class="text-xl my-2">Digital doodling
                 </div>
             </section>
 
-            <section id="rps" class="hidden scroll-mt-36 h-[calc(100%-7rem)] max-sm:w-[calc(100%_-_4rem)] flex-col top-14">
+            <section id="rps" class="hidden grow scroll-mt-36 h-[calc(100%-7rem)] flex-col top-14">
                 <h1 class="text-3xl font-bold text-teal-4">Projects — 
                     <a href="https://cyphersept.github.io/small-projects/rps" target="_blank" rel="noopener" class="underline">Rock Paper Scissors</a></h1>
                 <h3 class="text-xl my-2">Best of three
@@ -115,7 +115,7 @@ <h3 class="text-xl my-2">Best of three
                 </div>
             </section>
 
-            <section id="calculate" class="hidden scroll-mt-36 h-[calc(100%-7rem)] max-sm:w-[calc(100%_-_4rem)] flex-col top-14">
+            <section id="calculate" class="hidden grow scroll-mt-36 h-[calc(100%-7rem)] flex-col top-14">
                 <h1 class="text-3xl font-bold text-teal-4">Projects — 
                     <a href="https://cyphersept.github.io/small-projects/calculator" target="_blank" rel="noopener" class="underline">Calculator</a></h1>
                 <h3 class="text-xl my-2">Classic four function calculator, like you used to have
@@ -125,7 +125,7 @@ <h3 class="text-xl my-2">Classic four function calculator, like you used to have
                 </div>
             </section>
 
-            <section id="signup" class="hidden scroll-mt-36 h-[calc(100%-7rem)] max-sm:w-[calc(100%_-_4rem)] flex-col top-14">
+            <section id="signup" class="hidden grow scroll-mt-36 h-[calc(100%-7rem)] flex-col top-14">
                 <h1 class="text-3xl font-bold text-teal-4">Projects — 
                     <a href="https://cyphersept.github.io/small-projects/signup" target="_blank" rel="noopener" class="underline">Signup Page</a></h1>
                 <h3 class="text-xl my-2">Create an account for a totally real service
@@ -135,24 +135,27 @@ <h3 class="text-xl my-2">Create an account for a totally real service
                 </div>
             </section>
 
-            <section id="dressup" class="hidden scroll-mt-36 h-[calc(100%-7rem)] max-sm:w-[calc(100%_-_4rem)] flex-col top-14">
+            <section id="dressup" class="hidden grow scroll-mt-36 h-[calc(100%-7rem)] flex-col top-14">
                 <h1 class="text-3xl font-bold text-teal-4">Projects — Dressup Game Maker (WIP)</h1>
                 <h3 class="text-xl my-2">Lightweight app for creating HTML paperdolls with zero code (<a class="underline text-teal-4" href="https://github.com/cyphersept/dressup-maker">Source</a>)
             </section>
         </section>
-        <section id="contact" class="min-h-full md:pt-8 pb-8 px-8 sm:px-4 snap-start snap-always">
+        <section id="contact" class="min-h-full sm:pt-8 pb-8 px-8 sm:px-4 snap-start snap-always">
             <h1 class="text-3xl font-bold mb-8 text-orange-2">Contact Me</h1>
                 <a href="mailto:[email protected]" class="pl-6 py-4 w-40 text-xl rounded-xl block bg-orange-1 text-white font-semibold mb-4">
                     <img src="./src/img/email-8-svgrepo-com.svg" width=24px height=24px alt="Email icon" class="mr-3 inline align-text-top" loading="lazy"> Email
                 </a>
                 <a href="https://github.com/cyphersept" class="pl-6 py-4 w-40 text-xl rounded-xl block bg-orange-2 text-white font-semibold mb-8">
                     <img src="./src/img/github-mark-white.svg" width=24px height=24px alt="Github logo" class="mr-3 inline align-text-bottom" loading="lazy"> Github
                 </a>
-                <div class="text-xl mb-4">SVG icons courtesy of <a class="underline text-teal-4" href="https://www.svgrepo.com/">SVG Repo.</a>
+                <div class="text-xl mb-4">SVG icons courtesy of <a class="underline text-orange-2" href="https://www.svgrepo.com/">SVG Repo.</a>
                 </div>
-                <div class="text-xl">
+                <div class="text-xl mb-4">
                     All other assets on this website are created by myself with all rights reserved.
                 </div>
+                <div class="text-xl">
+                    View this site's source code <a class="underline text-orange-3 font-bold" href="https://github.com/cyphersept/cyphersept.github.io">here.</a>
+                </div>
         </section>
     </main>
 </body>

diff --git a/src/output.css b/src/output.css
@@ -742,6 +742,10 @@ main li {
   margin-top: 1rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -838,6 +842,14 @@ main li {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -1052,6 +1064,16 @@ main li {
   color: rgb(255 249 243 / var(--tw-text-opacity));
 }
 
+.text-orange-4 {
+  --tw-text-opacity: 1;
+  color: rgb(232 59 59 / var(--tw-text-opacity));
+}
+
+.text-orange-3 {
+  --tw-text-opacity: 1;
+  color: rgb(251 107 29 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1060,12 +1082,6 @@ main li {
   opacity: 0;
 }
 
-.transition-\[left\] {
-  transition-property: left;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-\[margin\] {
   transition-property: margin;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1087,6 +1103,10 @@ main li {
 }
 
 @media not all and (min-width: 768px) {
+  .max-md\:gap-4 {
+    gap: 1rem;
+  }
+
   .max-md\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -1142,36 +1162,24 @@ main li {
     padding-right: 1rem;
   }
 
+  .sm\:pt-4 {
+    padding-top: 1rem;
+  }
+
   .sm\:pt-8 {
     padding-top: 2rem;
   }
 
+  .sm\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
   .sm\:opacity-100 {
     opacity: 1;
   }
 }
 
 @media (min-width: 768px) {
-  .md\:left-\[calc\(50\%_-_85vh\)\] {
-    left: calc(50% - 85vh);
-  }
-
-  .md\:left-\[calc\(50\%_-_80vh\)\] {
-    left: calc(50% - 80vh);
-  }
-
-  .md\:left-\[calc\(50\%_-_75vh\)\] {
-    left: calc(50% - 75vh);
-  }
-
-  .md\:left-\[calc\(50\%_-_max\(450\2c 75vh\)\)\] {
-    left: calc(50% - max(450,75vh));
-  }
-
-  .md\:left-\[calc\(50\%_-_max\(450px\2c 75vh\)\)\] {
-    left: calc(50% - max(450px,75vh));
-  }
-
   .md\:mb-8 {
     margin-bottom: 2rem;
   }
@@ -1180,6 +1188,10 @@ main li {
     margin-left: 1.5rem;
   }
 
+  .md\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -1188,10 +1200,6 @@ main li {
     display: inline;
   }
 
-  .md\:h-screen {
-    height: 100vh;
-  }
-
   .md\:h-full {
     height: 100%;
   }
@@ -1200,19 +1208,14 @@ main li {
     width: 9rem;
   }
 
-  .md\:w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  .md\:w-\[max\(13rem\2c 18\%\)\] {
-    width: max(13rem,18%);
-  }
-
   .md\:w-\[clamp\(13rem\2c 30\%\2c calc\(50\%_-_60vh\)\)\] {
     width: clamp(13rem,30%,calc(50% - 60vh));
   }
 
+  .md\:w-\[clamp\(13rem\2c 30\%\2c calc\(50\%_-_70vh\)\)\] {
+    width: clamp(13rem,30%,calc(50% - 70vh));
+  }
+
   .md\:flex-col {
     flex-direction: column;
   }
@@ -1225,6 +1228,10 @@ main li {
     align-items: flex-end;
   }
 
+  .md\:justify-center {
+    justify-content: center;
+  }
+
   .md\:bg-orange-2 {
     --tw-bg-opacity: 1;
     background-color: rgb(247 150 23 / var(--tw-bg-opacity));