Refactor index.html and style.css: Simplify structure of profile section, enhance styling for better layout and responsiveness, and consolidate CSS rules for improved maintainability.

+116 -280

2 changed files

expand all

index.html

style.css

+69 -91

index.html

··· 53 53 </script> 54 54 </head> 55 55 <body> 56 - <main> 57 - <div class="content-wrapper"> 58 - <div class="profile-container"> 59 - <section class="profile-section"> 60 - <figure class="profile-figure" itemscope itemtype="https://schema.org/Person"> 61 - <picture class="avatar-wrapper"> 62 - <img 63 - alt="Jack Hannon" 64 - fetchpriority="high" 65 - itemprop="image" 66 - src="headshot.jpg" 67 - width="76" 68 - height="76" 69 - class="avatar" 70 - > 71 - </picture> 72 - <figcaption class="profile-caption"> 73 - <p> 74 - <span itemprop="name" lang="en" translate="no" class="profile-name">Jack Hannon</span> 75 - </p> 76 - <div class="profile-location-wrapper"> 77 - <p itemscope itemprop="alumniOf" itemtype="https://schema.org/CollegeOrUniversity" class="profile-location"> 78 - <svg class="location-icon vt-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.1925 98.1875" aria-hidden="true"><g transform="matrix(1.25 0 0 -1.25 -127.51 602.7)"><g transform="translate(.77443 .77443)"><path class="vt-path" d="m108.14 476.89h20.034l14.814-27.544 15.446 27.544h100.79l-9.184-17.112h-27.752l-27.547-51.75h-20.24l27.751 51.54h-32.97l-26.082-48.203-35.06 65.525z"/></g></g></svg> 79 - <span itemprop="name">Class of 2025</span> 80 - </p> 81 - </div> 82 - </figcaption> 83 - </figure> 84 - <ul class="social-links"> 85 - <li> 86 - <a rel="noopener noreferrer external" target="_blank" class="social-link" href="https://www.linkedin.com/in/jackphannon/" title="LinkedIn: jackphannon"> 87 - <figure class="social-icon-wrapper"> 88 - <svg class="social-icon" focusable="false" role="img" viewBox="0 0 448 512" aria-hidden="true"> 89 - <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/> 90 - </svg> 91 - </figure> 92 - <span class="social-label">jackphannon</span> 93 - </a> 94 - </li> 95 - <li> 96 - <a rel="noopener noreferrer external" target="_blank" class="social-link" href="https://github.com/Hann8n" title="GitHub: Hann8n"> 97 - <figure class="social-icon-wrapper"> 98 - <svg class="social-icon" focusable="false" role="img" viewBox="0 0 496 512" aria-hidden="true"> 99 - <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/> 100 - </svg> 101 - </figure> 102 - <span class="social-label">Hann8n</span> 103 - </a> 104 - </li> 105 - <li> 106 - <a rel="noopener noreferrer external" target="_blank" class="social-link" href="https://www.instagram.com/yakyakjack_" title="Instagram: yakyakjack_"> 107 - <figure class="social-icon-wrapper"> 108 - <svg class="social-icon" focusable="false" role="img" viewBox="-0.5 -0.5 25 25" aria-hidden="true"> 109 - <path fill="currentColor" d="M7.03.084c-1.277.06-2.149.264-2.91.563a5.9 5.9 0 0 0-2.124 1.388a5.9 5.9 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076s-.069 1.688-.063 4.947s.021 3.667.083 4.947c.061 1.277.264 2.149.563 2.911c.308.789.72 1.457 1.388 2.123a5.9 5.9 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552c1.278.056 1.689.069 4.947.063s3.668-.021 4.947-.082c1.28-.06 2.147-.265 2.91-.563a5.9 5.9 0 0 0 2.123-1.388a5.9 5.9 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912c.056-1.28.07-1.69.063-4.948c-.006-3.258-.02-3.667-.081-4.947c-.06-1.28-.264-2.148-.564-2.911a5.9 5.9 0 0 0-1.387-2.123a5.9 5.9 0 0 0-2.128-1.38c-.764-.294-1.636-.496-2.914-.55C15.647.009 15.236-.006 11.977 0S8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.7 3.7 0 0 1-1.382-.895a3.7 3.7 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228c-.06-1.264-.072-1.644-.08-4.848c-.006-3.204.006-3.583.061-4.848c.05-1.169.246-1.805.408-2.228c.216-.561.477-.96.895-1.382a3.7 3.7 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417c1.265-.06 1.644-.072 4.848-.08c3.203-.006 3.583.006 4.85.062c1.168.05 1.804.244 2.227.408c.56.216.96.475 1.382.895s.681.817.9 1.378c.165.422.362 1.056.417 2.227c.06 1.265.074 1.645.08 4.848c.005 3.203-.006 3.583-.061 4.848c-.051 1.17-.245 1.805-.408 2.23c-.216.56-.477.96-.896 1.38a3.7 3.7 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418c-1.266.06-1.645.072-4.85.079s-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442a1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024a6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16A4 4 0 0 1 8 12.008"/> 110 - </svg> 111 - </figure> 112 - <span class="social-label">yakyakjack_</span> 113 - </a> 114 - </li> 115 - <li> 116 - <a rel="noopener noreferrer external" target="_blank" class="social-link" href="https://bsky.app/profile/jack.orbyt.video" title="Bluesky: jack.orbyt.video"> 117 - <figure class="social-icon-wrapper"> 118 - <svg class="social-icon" focusable="false" role="img" viewBox="0 0 512 512" aria-hidden="true"> 119 - <path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/> 120 - </svg> 121 - </figure> 122 - <span class="social-label">jack.orbyt.video</span> 123 - </a> 124 - </li> 125 - <li> 126 - <a rel="noopener noreferrer external" target="_blank" class="social-link" href="https://getorbyt.com/@jack.orbyt.video" title="Orbyt: @jack"> 127 - <figure class="social-icon-wrapper"> 128 - <img src="images/orbyt-icon.png" alt="" class="social-icon orbyt-icon" aria-hidden="true"> 129 - </figure> 130 - <span class="social-label">@jack</span> 131 - </a> 132 - </li> 133 - <li> 134 - <a rel="noopener noreferrer" target="_blank" class="social-link" href="Jack_Hannon__Resume_Web.pdf" title="Resume"> 135 - <figure class="social-icon-wrapper"> 136 - <svg class="social-icon" focusable="false" role="img" viewBox="0 0 24 24" aria-hidden="true"> 137 - <path fill="currentColor" fill-rule="evenodd" d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828S7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172S21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828S16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M7.25 8A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75M8 15.25a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/> 138 - </svg> 139 - </figure> 140 - <span class="social-label">Resume</span> 141 - </a> 142 - </li> 143 - </ul> 144 - </section> 145 - </div> 146 - </div> 56 + <main itemscope itemtype="https://schema.org/Person"> 57 + <article class="profile"> 58 + <header class="profile-header"> 59 + <img 60 + class="avatar" 61 + alt="Jack Hannon" 62 + fetchpriority="high" 63 + itemprop="image" 64 + src="headshot.jpg" 65 + width="76" 66 + height="76" 67 + > 68 + <div class="profile-info"> 69 + <h1 itemprop="name" class="name">Jack Hannon</h1> 70 + <p class="school" itemscope itemprop="alumniOf" itemtype="https://schema.org/CollegeOrUniversity"> 71 + <svg class="vt-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.1925 98.1875" aria-hidden="true"><g transform="matrix(1.25 0 0 -1.25 -127.51 602.7)"><g transform="translate(.77443 .77443)"><path class="vt-path" d="m108.14 476.89h20.034l14.814-27.544 15.446 27.544h100.79l-9.184-17.112h-27.752l-27.547-51.75h-20.24l27.751 51.54h-32.97l-26.082-48.203-35.06 65.525z"/></g></g></svg> 72 + <span itemprop="name">Class of 2025</span> 73 + </p> 74 + </div> 75 + </header> 76 + <ul class="social-links"> 77 + <li> 78 + <a class="social-link" href="https://www.linkedin.com/in/jackphannon/" rel="noopener noreferrer external" target="_blank"> 79 + <svg class="icon" viewBox="0 0 448 512" aria-hidden="true"> 80 + <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/> 81 + </svg> 82 + <span>jackphannon</span> 83 + </a> 84 + </li> 85 + <li> 86 + <a class="social-link" href="https://github.com/Hann8n" rel="noopener noreferrer external" target="_blank"> 87 + <svg class="icon" viewBox="0 0 496 512" aria-hidden="true"> 88 + <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/> 89 + </svg> 90 + <span>Hann8n</span> 91 + </a> 92 + </li> 93 + <li> 94 + <a class="social-link" href="https://www.instagram.com/yakyakjack_" rel="noopener noreferrer external" target="_blank"> 95 + <svg class="icon" viewBox="-0.5 -0.5 25 25" aria-hidden="true"> 96 + <path d="M7.03.084c-1.277.06-2.149.264-2.91.563a5.9 5.9 0 0 0-2.124 1.388a5.9 5.9 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076s-.069 1.688-.063 4.947s.021 3.667.083 4.947c.061 1.277.264 2.149.563 2.911c.308.789.72 1.457 1.388 2.123a5.9 5.9 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552c1.278.056 1.689.069 4.947.063s3.668-.021 4.947-.082c1.28-.06 2.147-.265 2.91-.563a5.9 5.9 0 0 0 2.123-1.388a5.9 5.9 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912c.056-1.28.07-1.69.063-4.948c-.006-3.258-.02-3.667-.081-4.947c-.06-1.28-.264-2.148-.564-2.911a5.9 5.9 0 0 0-1.387-2.123a5.9 5.9 0 0 0-2.128-1.38c-.764-.294-1.636-.496-2.914-.55C15.647.009 15.236-.006 11.977 0S8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.7 3.7 0 0 1-1.382-.895a3.7 3.7 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228c-.06-1.264-.072-1.644-.08-4.848c-.006-3.204.006-3.583.061-4.848c.05-1.169.246-1.805.408-2.228c.216-.561.477-.96.895-1.382a3.7 3.7 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417c1.265-.06 1.644-.072 4.848-.08c3.203-.006 3.583.006 4.85.062c1.168.05 1.804.244 2.227.408c.56.216.96.475 1.382.895s.681.817.9 1.378c.165.422.362 1.056.417 2.227c.06 1.265.074 1.645.08 4.848c.005 3.203-.006 3.583-.061 4.848c-.051 1.17-.245 1.805-.408 2.23c-.216.56-.477.96-.896 1.38a3.7 3.7 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418c-1.266.06-1.645.072-4.85.079s-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442a1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024a6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16A4 4 0 0 1 8 12.008"/> 97 + </svg> 98 + <span>yakyakjack_</span> 99 + </a> 100 + </li> 101 + <li> 102 + <a class="social-link" href="https://bsky.app/profile/jack.orbyt.video" rel="noopener noreferrer external" target="_blank"> 103 + <svg class="icon" viewBox="0 0 512 512" aria-hidden="true"> 104 + <path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/> 105 + </svg> 106 + <span>jack.orbyt.video</span> 107 + </a> 108 + </li> 109 + <li> 110 + <a class="social-link" href="https://getorbyt.com/@jack.orbyt.video" rel="noopener noreferrer external" target="_blank"> 111 + <img src="images/orbyt-icon.png" alt="" class="icon orbyt-icon" aria-hidden="true"> 112 + <span>@jack</span> 113 + </a> 114 + </li> 115 + <li> 116 + <a class="social-link" href="Jack_Hannon__Resume_Web.pdf" rel="noopener noreferrer" target="_blank"> 117 + <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"> 118 + <path fill="currentColor" fill-rule="evenodd" d="M4.172 3.172C3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828S7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172S21 17.771 21 14v-4c0-3.771 0-5.657-1.172-6.828S16.771 2 13 2h-2C7.229 2 5.343 2 4.172 3.172M7.25 8A.75.75 0 0 1 8 7.25h8a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 8m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75M8 15.25a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5z" clip-rule="evenodd"/> 119 + </svg> 120 + <span>Resume</span> 121 + </a> 122 + </li> 123 + </ul> 124 + </article> 147 125 </main> 148 126 </body> 149 127 </html>

+47 -189

style.css

··· 1 - /* Reset and Base Styles - Matching wongmjane.com exactly */ 2 - *, 3 - *::before, 4 - *::after { 1 + /* Reset */ 2 + *, *::before, *::after { 5 3 box-sizing: border-box; 6 - border: 0 solid; 7 4 margin: 0; 8 5 padding: 0; 9 6 } 10 7 11 - html { 12 - -webkit-text-size-adjust: 100%; 13 - tab-size: 4; 14 - -webkit-tap-highlight-color: transparent; 15 - line-height: 1.5; 16 - } 17 - 18 - img, svg, video { 19 - vertical-align: middle; 8 + img, svg { 20 9 display: block; 21 10 } 22 11 23 - img, video { 24 - max-width: 100%; 25 - height: auto; 26 - } 27 - 28 12 a { 29 13 color: inherit; 30 - text-decoration: inherit; 14 + text-decoration: none; 31 15 } 32 16 33 - ul, ol { 17 + ul { 34 18 list-style: none; 35 19 } 36 20 37 - /* CSS Custom Properties - Matching wongmjane.com */ 21 + /* Custom Properties */ 38 22 :root { 39 23 --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 40 - 41 - /* Light mode colors */ 42 24 --color-bg: oklch(100% 0.003 250); 43 - --color-bg-secondary: oklch(99% 0.003 250); 44 - --color-bg-tertiary: oklch(97% 0.005 250); 45 25 --color-border: oklch(93% 0.007 250); 46 26 --color-text: oklch(30% 0.028 250); 47 27 --color-text-muted: oklch(50% 0.022 250); 48 - --color-accent: oklch(60% 0.26 235); 49 - --color-accent-hover: oklch(74% 0.25 235); 28 + --color-vt-maroon: #581b34; 50 29 } 51 30 52 31 @media (prefers-color-scheme: dark) { 53 32 :root { 54 33 --color-bg: oklch(10% 0.034 250); 55 - --color-bg-secondary: oklch(20% 0.031 250); 56 - --color-bg-tertiary: oklch(30% 0.028 250); 57 34 --color-border: oklch(40% 0.025 250); 58 35 --color-text: oklch(97% 0.005 250); 59 36 --color-text-muted: oklch(87% 0.01 250); 60 - --color-accent: oklch(74% 0.25 235); 61 - --color-accent-hover: oklch(81% 0.2 235); 37 + --color-vt-maroon: #a64d6b; 62 38 } 63 39 } 64 40 65 - /* Font smoothing */ 66 - @media screen { 67 - html { 68 - -moz-osx-font-smoothing: grayscale; 69 - -webkit-font-smoothing: antialiased; 70 - } 71 - } 72 - 73 - /* Body */ 74 - body { 75 - background-color: var(--color-bg); 41 + /* Base */ 42 + html { 43 + background: var(--color-bg); 76 44 color: var(--color-text); 77 45 font-family: var(--font-sans); 78 - font-feature-settings: "kern" on, "liga" on, "dlig" on, "case" on; 79 - font-style: normal; 80 - font-synthesis: none; 81 - min-height: 100%; 82 - margin: 0; 83 - padding: 0; 84 - -webkit-tap-highlight-color: transparent; 85 - display: contents; 46 + line-height: 1.5; 47 + -webkit-text-size-adjust: 100%; 48 + -webkit-font-smoothing: antialiased; 49 + -moz-osx-font-smoothing: grayscale; 86 50 } 87 51 88 - /* Main */ 52 + /* Layout */ 89 53 main { 90 54 display: flex; 91 - flex-grow: 1; 92 - background-color: var(--color-bg); 93 - min-height: 100dvh; 94 55 justify-content: center; 95 56 align-items: center; 96 - } 97 - 98 - 99 - /* Content wrapper */ 100 - .content-wrapper { 101 - display: flex; 102 - flex-direction: column; 103 - align-items: center; 104 - justify-content: center; 57 + min-height: 100dvh; 105 58 padding: 2rem 1rem; 106 - width: 100%; 107 59 } 108 60 109 - /* Profile container */ 110 - .profile-container { 61 + /* Profile Card */ 62 + .profile { 111 63 display: flex; 112 64 flex-direction: column; 113 - align-items: center; 114 - justify-content: center; 115 - } 116 - 117 - /* Profile section */ 118 - .profile-section { 119 - padding: 1rem; 120 - border-radius: 1rem; 121 65 gap: 0.75rem; 122 - display: flex; 123 - flex-direction: column; 124 - align-items: flex-start; 125 - z-index: 10; 66 + max-width: 25rem; 126 67 } 127 68 128 - /* Profile figure */ 129 - .profile-figure { 130 - gap: 0.75rem; 69 + .profile-header { 131 70 display: flex; 132 71 flex-wrap: wrap; 72 + gap: 0.75rem; 133 73 font-weight: 500; 134 74 letter-spacing: -0.0125em; 135 75 } 136 76 137 - /* Avatar wrapper */ 138 - .avatar-wrapper { 139 - border-radius: 2rem; 140 - overflow: clip; 141 - aspect-ratio: 1; 142 - color: var(--color-text); 143 - width: 4.75rem; 144 - position: relative; 145 - user-select: none; 146 - } 147 - 148 - /* Avatar image */ 77 + /* Avatar */ 149 78 .avatar { 150 - max-width: 100%; 151 - position: absolute; 152 - inset-block: 0; 153 - height: auto; 79 + width: 4.75rem; 80 + height: 4.75rem; 81 + border-radius: 2rem; 82 + object-fit: cover; 154 83 } 155 84 156 - /* Profile caption */ 157 - .profile-caption { 85 + /* Profile Info */ 86 + .profile-info { 158 87 display: flex; 159 88 flex-direction: column; 160 89 justify-content: center; 161 90 } 162 91 163 - /* Profile name */ 164 - .profile-name { 165 - color: var(--color-text); 166 - display: inline-block; 92 + .name { 167 93 font-size: 1.25rem; 168 94 font-weight: 600; 169 95 letter-spacing: -0.05ch; 170 - width: fit-content; 171 - view-transition-name: author-name; 172 96 } 173 97 174 - /* Location wrapper */ 175 - .profile-location-wrapper { 176 - color: var(--color-text-muted); 177 - } 178 - 179 - /* Location */ 180 - .profile-location { 98 + .school { 99 + display: flex; 100 + align-items: center; 181 101 gap: 0.25rem; 182 - align-items: center; 183 - display: flex; 184 - font-size: 1rem; 102 + color: var(--color-vt-maroon); 185 103 } 186 104 187 - /* Location icon */ 188 - .location-icon { 189 - height: 1rem; 190 - display: inline-block; 191 - width: auto; 192 - } 193 - 194 - /* VT logo specific sizing */ 105 + /* VT Logo */ 195 106 .vt-logo { 196 107 height: 0.9rem; 197 108 width: auto; ··· 203 114 stroke-width: 8; 204 115 } 205 116 206 - /* Social links */ 117 + /* Social Links */ 207 118 .social-links { 208 - gap: 0.5ch; 209 119 display: flex; 210 120 flex-wrap: wrap; 121 + gap: 0.5ch; 211 122 font-size: 0.94em; 212 - max-width: 25rem; 213 - list-style: none; 214 - margin: 0; 215 - padding: 0; 216 123 } 217 124 218 - /* Social link */ 219 125 .social-link { 220 - border-color: var(--color-border); 221 - border-radius: 9999px; 222 - border-style: solid; 223 - border-width: 0.9px; 224 - gap: 0.6ch; 225 - padding-block: 0.5ch; 226 - padding-inline: 1ch; 227 - text-decoration: none; 228 - align-items: center; 229 - color: var(--color-text); 230 126 display: inline-flex; 231 - justify-content: center; 127 + align-items: center; 128 + gap: 0.6ch; 129 + padding: 0.5ch 1ch; 130 + border: 0.9px solid var(--color-border); 131 + border-radius: 9999px; 232 132 letter-spacing: -0.01ch; 233 - transition: color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1.3), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1.3); 234 - } 235 - 236 - .social-link:hover { 237 - color: var(--color-text); 133 + transition: transform 0.2s ease-out; 238 134 } 239 135 240 136 .social-link:active { 241 - color: var(--color-text); 242 137 transform: scale(0.9); 243 138 } 244 139 245 - /* Social icon wrapper */ 246 - .social-icon-wrapper { 247 - align-items: center; 248 - height: 1rem; 249 - display: flex; 140 + /* Icons */ 141 + .icon { 250 142 width: 1rem; 251 - justify-content: center; 252 - } 253 - 254 - /* Social icon */ 255 - .social-icon { 143 + height: 1rem; 256 144 fill: currentColor; 257 - height: 1.618cap; 258 145 flex-shrink: 0; 259 - width: auto; 260 146 } 261 147 262 - .social-icon-stroke { 263 - fill: none; 264 - stroke: currentColor; 265 - } 266 - 267 - /* Social label */ 268 - .social-label { 269 - user-select: none; 270 - } 271 - 272 - /* Orbyt icon - white PNG needs color adjustment */ 148 + /* Orbyt icon color adjustment */ 273 149 .orbyt-icon { 274 150 filter: invert(1); 275 151 } ··· 279 155 filter: none; 280 156 } 281 157 } 282 - 283 - 284 - /* View transition */ 285 - @view-transition { 286 - navigation: auto; 287 - } 288 - 289 - ::view-transition-group(*) { 290 - animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); 291 - } 292 - 293 - ::view-transition-old(*) { 294 - animation-timing-function: cubic-bezier(0.4, 0, 1, 1); 295 - } 296 - 297 - ::view-transition-new(*) { 298 - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); 299 - }

Configure Feed

Configure Feed