Improve responsiveness
This commit is contained in:
parent
41d9aefaa4
commit
62965e3cbd
SSH key fingerprint:
SHA256:cj/YZ5VT+QOKncqSkx+ibKTIn0Obg7OIzwzl9BL8EO8
2 changed files with 149 additions and 122 deletions
124
index.html
124
index.html
|
|
@ -46,6 +46,70 @@
|
|||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="fetch-container">
|
||||
<div id="fetch">
|
||||
<!--TODO: Automate screenshot of this div as thumb.png?-->
|
||||
<div id="michael-photo-container">
|
||||
<picture>
|
||||
<!-- <source srcset="assets/MichaelBradley.jxl" type="image/jxl">
|
||||
<source srcset="assets/MichaelBradley.avif" type="image/avif">
|
||||
<source srcset="assets/MichaelBradley.webp" type="image/webp">
|
||||
<img src="assets/MichaelBradley.jpeg" alt="A picture of me in a suit smiling" id="michael-photo"> -->
|
||||
<img src="/home/mbradley/dev/website/assets/MichaelBradley.jpeg" alt="A picture of me in a suit smiling" id="michael-photo">
|
||||
</picture>
|
||||
</div>
|
||||
<div id="basic-info">
|
||||
<div class="invisible-div">
|
||||
<p><span class="text-highlight">website</span>@<span class="text-highlight">MichaelBradley</span></p>
|
||||
<p>----------------------</p>
|
||||
<p><span class="text-highlight">Degree</span>: Bachelor of Computer Science</p>
|
||||
<p><span class="text-highlight">University</span>: Carleton</p>
|
||||
<p><span class="text-highlight">Major CGPA</span>: 11.50/12 (A+)</p>
|
||||
<p><span class="text-highlight">Languages</span>: C/C++, Python, TypeScript</p>
|
||||
<p><span class="text-highlight">Skills</span>: Linux, Git, Testing</p>
|
||||
<p><span class="text-highlight">Work Experience</span>: 2 years</p>
|
||||
<p><span class="text-highlight">Applying for</span>: Full-time job</p>
|
||||
<p><span class="text-highlight">Location</span>: Toronto or Remote</p>
|
||||
</div>
|
||||
<p><br /></p>
|
||||
<p class="blocks">
|
||||
<span style="color: var(--color0)">███</span><span style="color: var(--color1)">███</span><span style="color: var(--color2)">███</span><span style="color: var(--color3)">███</span><span style="color: var(--color4)">███</span><span style="color: var(--color5)">███</span><span style="color: var(--color6)">███</span><span style="color: var(--color7)">███</span>
|
||||
</p>
|
||||
<p class="blocks">
|
||||
<span style="color: var(--color8)">███</span><span style="color: var(--color9)">███</span><span style="color: var(--color10)">███</span><span style="color: var(--color11)">███</span><span style="color: var(--color12)">███</span><span style="color: var(--color13)">███</span><span style="color: var(--color14)">███</span><span style="color: var(--color15)">███</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="https://github.com/MichaelMBradley" title="GitHub account">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" aria-description="GitHub icon">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-description="LinkedIn icon">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://mmbradley.ca/resume.pdf" title="My Résumé">
|
||||
<!-- From: https://www.svgrepo.com/svg/483015/resume-4 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-description="CV icon">
|
||||
<g>
|
||||
<path class="st0" d="M276.239,252.183c-6.37,2.127-13.165,3.308-20.239,3.308c-7.074,0-13.87-1.181-20.24-3.308 c-46.272,7.599-70.489,41.608-70.489,82.877H256h90.728C346.728,293.791,322.515,259.782,276.239,252.183z" />
|
||||
<path class="st0" d="M256,240.788c27.43,0,49.658-22.24,49.658-49.666v-14.087c0-27.426-22.228-49.659-49.658-49.659 c-27.43,0-49.658,22.233-49.658,49.659v14.087C206.342,218.548,228.57,240.788,256,240.788z" />
|
||||
<path class="st0" d="M378.4,0H133.582C86.234,0,47.7,38.542,47.7,85.899v340.22C47.7,473.476,86.234,512,133.582,512h205.695 h13.175l9.318-9.301l93.229-93.229l9.301-9.31v-13.174V85.899C464.3,38.542,425.766,0,378.4,0z M432.497,386.985H384.35 c-24.882,0-45.074,20.183-45.074,45.073v48.139H133.582c-29.866,0-54.078-24.221-54.078-54.078V85.899 c0-29.874,24.212-54.096,54.078-54.096H378.4c29.876,0,54.096,24.222,54.096,54.096V386.985z" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="me" href="https://mstdn.ca/@michaelbradley" title="Mastodon account">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-description="Mastodon icon">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
|
||||
<label for="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode">
|
||||
<svg viewBox="0 0 544 544" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
@ -106,66 +170,6 @@
|
|||
</g>
|
||||
</svg>
|
||||
</label>
|
||||
<div id="fetch-container">
|
||||
<div id="fetch">
|
||||
<!--TODO: Automate screenshot of this div as thumb.png?-->
|
||||
<div id="michael-photo-container">
|
||||
<picture>
|
||||
<source srcset="assets/MichaelBradley.jxl" type="image/jxl">
|
||||
<source srcset="assets/MichaelBradley.avif" type="image/avif">
|
||||
<source srcset="assets/MichaelBradley.webp" type="image/webp">
|
||||
<img src="assets/MichaelBradley.jpeg" alt="A picture of me in a suit smiling" id="michael-photo">
|
||||
</picture>
|
||||
</div>
|
||||
<div id="basic-info">
|
||||
<div class="invisible-div">
|
||||
<p><span class="text-highlight">website</span>@<span class="text-highlight">MichaelBradley</span></p>
|
||||
<p>----------------------</p>
|
||||
<p><span class="text-highlight">Degree</span>: Bachelor of Computer Science</p>
|
||||
<p><span class="text-highlight">University</span>: Carleton</p>
|
||||
<p><span class="text-highlight">Major CGPA</span>: 11.50/12 (A+)</p>
|
||||
<p><span class="text-highlight">Languages</span>: C/C++, Python, TypeScript</p>
|
||||
<p><span class="text-highlight">Skills</span>: Linux, Git, Agile</p>
|
||||
<p><span class="text-highlight">Work Experience</span>: 2 years</p>
|
||||
<p><span class="text-highlight">Location</span>: Toronto or Remote</p>
|
||||
<p><span class="text-highlight">Applying for</span>: Full-time starting Feb 2025</p>
|
||||
</div>
|
||||
<p><br /></p>
|
||||
<p class="blocks">
|
||||
<span style="color: var(--color0)">███</span><span style="color: var(--color1)">███</span><span style="color: var(--color2)">███</span><span style="color: var(--color3)">███</span><span style="color: var(--color4)">███</span><span style="color: var(--color5)">███</span><span style="color: var(--color6)">███</span><span style="color: var(--color7)">███</span>
|
||||
</p>
|
||||
<p class="blocks">
|
||||
<span style="color: var(--color8)">███</span><span style="color: var(--color9)">███</span><span style="color: var(--color10)">███</span><span style="color: var(--color11)">███</span><span style="color: var(--color12)">███</span><span style="color: var(--color13)">███</span><span style="color: var(--color14)">███</span><span style="color: var(--color15)">███</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="https://github.com/MichaelMBradley" title="GitHub account">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="5em" aria-description="GitHub icon">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="5em" aria-description="LinkedIn icon">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
<!-- TODO: Find better icon than "file" -->
|
||||
<a href="https://mmbradley.ca/resume.pdf" title="My Résumé">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="4.25em" aria-description="CV icon">
|
||||
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<path d="M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="me" href="https://mstdn.ca/@michaelbradley" title="Mastodon account">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="5em" aria-description="Mastodon icon">
|
||||
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
125
style.css
125
style.css
|
|
@ -1,4 +1,6 @@
|
|||
body {
|
||||
:root {
|
||||
font-size: 1.5rem;
|
||||
|
||||
/* Material Light (https://github.com/dexpota/kitty-themes/blob/master/themes/Material.conf) */
|
||||
--light-color0: #212121;
|
||||
--light-color8: #424242;
|
||||
|
|
@ -82,31 +84,10 @@ body {
|
|||
--alt-foreground: var(--dark-foreground);
|
||||
--alt-background: var(--dark-background);
|
||||
--alt-toggle-transform: var(--dark-toggle-transform);
|
||||
|
||||
/* Actual useful styles */
|
||||
--highlight: var(--color6);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
|
||||
--content-gap: 10rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
|
||||
--anim-duration: 0.25s;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: color var(--anim-duration) ease, background-color var(--anim-duration) ease;
|
||||
}
|
||||
|
||||
backdrop-filter: blur(0.15rem);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
:root {
|
||||
--main-color0: var(--dark-color0);
|
||||
--main-color8: var(--dark-color8);
|
||||
--main-color1: var(--dark-color1);
|
||||
|
|
@ -148,27 +129,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#dark-mode-toggle-label {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 2cm;
|
||||
height: 2cm;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
transition-duration: var(--anim-duration);
|
||||
}
|
||||
|
||||
#dark-mode-toggle-label:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
#dark-mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:has(#dark-mode-toggle:not(:checked)) {
|
||||
:root:has(#dark-mode-toggle:not(:checked)) {
|
||||
/* Default to light */
|
||||
--color0: var(--main-color0) !important;
|
||||
--color8: var(--main-color8) !important;
|
||||
|
|
@ -197,7 +158,7 @@ body:has(#dark-mode-toggle:not(:checked)) {
|
|||
}
|
||||
}
|
||||
|
||||
body:has(#dark-mode-toggle:checked) {
|
||||
:root:has(#dark-mode-toggle:checked) {
|
||||
--color0: var(--alt-color0) !important;
|
||||
--color8: var(--alt-color8) !important;
|
||||
--color1: var(--alt-color1) !important;
|
||||
|
|
@ -225,18 +186,47 @@ body:has(#dark-mode-toggle:checked) {
|
|||
}
|
||||
}
|
||||
|
||||
body {
|
||||
/* Actual useful styles */
|
||||
--highlight: var(--color6);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
|
||||
--content-gap: 10rem;
|
||||
|
||||
height: 100dvh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
|
||||
--anim-duration: 0.25s;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: color var(--anim-duration) ease, background-color var(--anim-duration) ease;
|
||||
}
|
||||
}
|
||||
|
||||
#fetch-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 80svh;
|
||||
}
|
||||
|
||||
#fetch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
font-family: "JetBrains Mono", "ui-monospace", "SF Mono", "Courier New", monospace;
|
||||
margin: 0 1rem;
|
||||
white-space: nowrap;
|
||||
font-size: clamp(0.5rem, 2.5dvw, 1rem);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -249,7 +239,9 @@ p {
|
|||
}
|
||||
|
||||
#michael-photo-container {
|
||||
height: 100%;
|
||||
flex: 1 1 9lh;
|
||||
max-width: 11lh;
|
||||
aspect-ratio: 1;
|
||||
padding-top: 1lh;
|
||||
|
||||
:active {
|
||||
|
|
@ -258,12 +250,13 @@ p {
|
|||
}
|
||||
|
||||
#michael-photo {
|
||||
width: 11lh;
|
||||
height: 11lh;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
object-position: 0 10%;
|
||||
border: 0.2rem solid var(--highlight);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: border ease var(--anim-duration);
|
||||
}
|
||||
|
|
@ -315,11 +308,20 @@ span {
|
|||
}
|
||||
|
||||
.links {
|
||||
min-height: 20svh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
width: min(40rem, 75%);
|
||||
|
||||
a {
|
||||
flex: 1 1 1rem;
|
||||
max-width: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
svg {
|
||||
transition: fill var(--anim-duration) ease;
|
||||
fill: var(--foreground);
|
||||
|
|
@ -329,4 +331,25 @@ span {
|
|||
fill: var(--color8);
|
||||
}
|
||||
}
|
||||
|
||||
#dark-mode-toggle-label {
|
||||
flex: 1 1 1rem;
|
||||
max-width: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
transition-duration: var(--anim-duration);
|
||||
|
||||
svg:hover {
|
||||
filter: brightness(85%);
|
||||
}
|
||||
}
|
||||
|
||||
#dark-mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue