my personal site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Enhance styling and responsiveness of privacy policy page. Implement fluid typography, improved spacing, and accessibility features for app icons. Add media queries for better layout across various screen sizes.

+278 -17
images/VT-Gym-Tracker-ios-Icon.png

This is a binary file and will not be displayed.

+93
privacy-policy.html
··· 1 + <!DOCTYPE html> 2 + <html lang="en"> 3 + <head> 4 + <meta charset="UTF-8" /> 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 + <title>Privacy Policy | Jack Hannon</title> 7 + <script> 8 + // Apply saved theme or OS preference before CSS loads to prevent flash 9 + if (localStorage.getItem('theme') === 'dark' || 10 + (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { 11 + document.documentElement.classList.add('dark-theme'); 12 + } 13 + </script> 14 + <link rel="stylesheet" href="style.css" /> 15 + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=match_case" /> 16 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> 17 + <style> 18 + .material-symbols-outlined { 19 + font-variation-settings: 20 + 'FILL' 0, 21 + 'wght' 400, 22 + 'GRAD' 0, 23 + 'opsz' 24 24 + } 25 + </style> 26 + </head> 27 + <body> 28 + <main class="container" id="main-content"> 29 + <div id="a11y-status" class="visually-hidden" aria-live="polite" aria-atomic="true"></div> 30 + 31 + <section class="privacy-policy"> 32 + <div class="app-icon-container"> 33 + <a href="https://apps.apple.com/us/app/vt-gym-tracker/id6736409867?itscg=30200&itsct=apps_box_link&mttnsubad=6736409867" 34 + target="_blank" 35 + rel="noopener noreferrer" 36 + aria-label="Download VT Gym Tracker on the App Store"> 37 + <img src="images/VT-Gym-Tracker-ios-Icon.png" 38 + alt="VT Gym Tracker App Icon" 39 + class="app-icon" 40 + width="140" 41 + height="140" 42 + loading="eager" 43 + decoding="async" /> 44 + </a> 45 + </div> 46 + <h1>Privacy Policy</h1> 47 + <p><strong>Last Updated:</strong> January 11, 2025</p> 48 + 49 + <p>Jack Hannon [I, Me, My] built Gym Tracker (the "App") as a free, non-commercial application. The App and any additional services provided now or in the future are provided "as is." This Privacy Policy outlines how I handle your information when you use my mobile application, Gym Tracker. By accessing or using the App, you agree to these privacy terms.</p> 50 + 51 + <h2>Information Collected</h2> 52 + <p>Gym Tracker does not collect, store, or transmit any personal or non-personal information from its users. Any data saved in the app is stored locally on the device.</p> 53 + 54 + <h2>Third-Party Services</h2> 55 + <p>The App connects to the Virginia Tech Recreational Sports website ("VT Rec Sports"). VT Rec Sports and their partners may collect personal information as outlined in their Privacy Policy. I encourage you to review their policy to understand how your information is handled when you interact with VT Rec Sports through the App.</p> 56 + 57 + <h2>Links to Third-Party Websites</h2> 58 + <p>The App may contain links to third-party websites or services that I don't operate. Once you leave the App, I have no control over these external sites and cannot be responsible for their privacy practices. Please review the privacy policies of any third-party sites you visit.</p> 59 + 60 + <h2>Changes to This Privacy Policy</h2> 61 + <p>I may update this Privacy Policy periodically. Any changes will be posted on this page with an updated "Last Updated" date.</p> 62 + 63 + <h2>Contact</h2> 64 + <p>If you have any questions or suggestions about this Privacy Policy, please contact me at <a href="mailto:hannon@vt.edu">hannon@vt.edu</a></p> 65 + </section> 66 + </main> 67 + 68 + <footer class="privacy-footer"> 69 + <div class="container"> 70 + <div class="footer-content"> 71 + <div class="footer-social"> 72 + <a href="https://www.linkedin.com/in/jackphannon/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile"> 73 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="linkedin-icon"> 74 + <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"/> 75 + </svg> 76 + </a> 77 + <a href="https://github.com/Hann8n" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile"> 78 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="github-icon"> 79 + <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"/> 80 + </svg> 81 + </a> 82 + <a href="https://bsky.app/profile/jackhannon.me" target="_blank" rel="noopener noreferrer" aria-label="Bluesky Profile"> 83 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bluesky-icon"> 84 + <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"/> 85 + </svg> 86 + </a> 87 + </div> 88 + </div> 89 + </div> 90 + </footer> 91 + <script src="script.js"></script> 92 + </body> 93 + </html>
+185 -17
style.css
··· 2258 2258 max-width: 800px; 2259 2259 margin: 0 auto; 2260 2260 line-height: 1.7; 2261 + padding: 2rem 1rem; 2262 + /* Improve readability with better spacing */ 2263 + letter-spacing: 0.01em; 2261 2264 } 2262 2265 2266 + /* Enhanced typography for better hierarchy */ 2263 2267 .privacy-policy h1 { 2264 - font-size: 2.2em; 2265 - margin: 0 0 1rem 0; 2268 + font-size: clamp(2rem, 5vw, 2.5rem); 2269 + margin: 0 0 1.5rem 0; 2266 2270 color: var(--text-color); 2267 - text-align: center; 2268 - border-bottom: 2px solid var(--link-color); 2269 - padding-bottom: 0.5rem; 2271 + text-align: left; 2272 + font-weight: 700; 2273 + letter-spacing: -0.02em; 2270 2274 } 2271 2275 2272 2276 .privacy-policy h2 { 2273 - font-size: 1.6em; 2277 + font-size: clamp(1.4rem, 4vw, 1.8rem); 2274 2278 margin: 2rem 0 1rem 0; 2275 2279 color: var(--text-color); 2276 - border-left: 4px solid var(--vt-maroon); 2277 - padding-left: 1rem; 2280 + font-weight: 600; 2281 + letter-spacing: -0.01em; 2282 + } 2283 + 2284 + .privacy-policy p { 2285 + margin-bottom: 1.2rem; 2286 + color: var(--text-color); 2287 + font-size: clamp(1rem, 2.5vw, 1.1rem); 2288 + } 2289 + 2290 + .privacy-policy a { 2291 + color: var(--vt-maroon); 2292 + text-decoration: none; 2293 + transition: color 0.2s ease; 2294 + } 2295 + 2296 + .privacy-policy a:hover { 2297 + color: var(--vt-burntOrange); 2298 + } 2299 + 2300 + .app-icon-container { 2301 + display: flex; 2302 + justify-content: flex-start; 2303 + margin-bottom: 1rem; 2304 + padding: 0.5rem 0; 2305 + } 2306 + 2307 + .app-icon-container a { 2308 + display: inline-block; 2309 + text-decoration: none; 2310 + border-radius: inherit; 2311 + } 2312 + 2313 + .app-icon { 2314 + /* Use clamp() for fluid sizing that scales with screen size */ 2315 + width: clamp(100px, 8vw, 140px); 2316 + height: clamp(100px, 8vw, 140px); 2317 + border-radius: clamp(20px, 2vw, 28px); 2318 + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); 2319 + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 2320 + /* Ensure proper aspect ratio and prevent distortion */ 2321 + object-fit: cover; 2322 + /* Add subtle border for better definition */ 2323 + border: 2px solid rgba(255, 255, 255, 0.1); 2324 + } 2325 + 2326 + .app-icon:hover { 2327 + transform: scale(1.08) translateY(-2px); 2328 + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); 2278 2329 } 2279 2330 2331 + /* Focus state for accessibility */ 2332 + .app-icon:focus { 2333 + outline: 3px solid var(--vt-maroon); 2334 + outline-offset: 4px; 2335 + } 2336 + 2337 + /* Ensure minimum touch target size for mobile */ 2338 + @media (max-width: 768px) { 2339 + .app-icon { 2340 + min-width: 44px; 2341 + min-height: 44px; 2342 + } 2343 + } 2344 + 2345 + /* High contrast mode support */ 2346 + @media (prefers-contrast: high) { 2347 + .app-icon { 2348 + border: 2px solid currentColor; 2349 + } 2350 + 2351 + .app-icon:hover { 2352 + border-color: var(--vt-maroon); 2353 + } 2354 + } 2355 + 2356 + /* Reduced motion support */ 2357 + @media (prefers-reduced-motion: reduce) { 2358 + .app-icon { 2359 + transition: none; 2360 + } 2361 + 2362 + .app-icon:hover { 2363 + transform: none; 2364 + } 2365 + } 2366 + 2367 + 2368 + 2280 2369 .privacy-policy h3 { 2281 2370 font-size: 1.3em; 2282 2371 margin: 1.5rem 0 0.8rem 0; ··· 2321 2410 opacity: 0.9; 2322 2411 } 2323 2412 2324 - /* Mobile responsive adjustments for privacy policy */ 2325 - @media (max-width: 650px) { 2413 + /* Responsive design with modern breakpoints */ 2414 + /* Large screens (1200px+) */ 2415 + @media (min-width: 1200px) { 2416 + .app-icon { 2417 + width: clamp(120px, 6vw, 160px); 2418 + height: clamp(120px, 6vw, 160px); 2419 + } 2420 + 2421 + .app-icon-container { 2422 + margin-bottom: 1.5rem; 2423 + } 2424 + } 2425 + 2426 + /* Tablets and small desktops (768px - 1199px) */ 2427 + @media (min-width: 768px) and (max-width: 1199px) { 2428 + .app-icon { 2429 + width: clamp(100px, 7vw, 130px); 2430 + height: clamp(100px, 7vw, 130px); 2431 + } 2432 + 2433 + .app-icon-container { 2434 + margin-bottom: 1.25rem; 2435 + } 2436 + } 2437 + 2438 + /* Mobile landscape and small tablets (481px - 767px) */ 2439 + @media (min-width: 481px) and (max-width: 767px) { 2440 + .app-icon { 2441 + width: clamp(80px, 8vw, 110px); 2442 + height: clamp(80px, 8vw, 110px); 2443 + } 2444 + 2445 + .app-icon-container { 2446 + margin-bottom: 1rem; 2447 + padding: 0.5rem 0; 2448 + } 2449 + 2326 2450 .privacy-policy h1 { 2327 - font-size: 1.8em; 2451 + font-size: clamp(1.8em, 4vw, 2.2em); 2328 2452 } 2329 2453 2330 2454 .privacy-policy h2 { 2331 - font-size: 1.4em; 2455 + font-size: clamp(1.4em, 3.5vw, 1.8em); 2332 2456 margin: 1.5rem 0 0.8rem 0; 2333 - padding-left: 0.8rem; 2457 + } 2458 + } 2459 + 2460 + /* Mobile portrait (320px - 480px) */ 2461 + @media (max-width: 480px) { 2462 + .app-icon { 2463 + width: clamp(70px, 12vw, 90px); 2464 + height: clamp(70px, 12vw, 90px); 2465 + border-radius: clamp(16px, 3vw, 20px); 2466 + } 2467 + 2468 + .app-icon-container { 2469 + margin-bottom: 0.75rem; 2470 + padding: 0.25rem 0; 2471 + } 2472 + 2473 + .privacy-policy h1 { 2474 + font-size: clamp(1.6em, 5vw, 2em); 2475 + margin: 0 0 0.8rem 0; 2334 2476 } 2335 2477 2336 - .privacy-policy h3 { 2337 - font-size: 1.2em; 2478 + .privacy-policy h2 { 2479 + font-size: clamp(1.3em, 4vw, 1.6em); 2338 2480 margin: 1.2rem 0 0.6rem 0; 2339 2481 } 2340 2482 2341 - .privacy-policy ul { 2342 - padding-left: 1.2rem; 2483 + .privacy-policy p { 2484 + font-size: clamp(0.9em, 3.5vw, 1em); 2485 + margin-bottom: 1rem; 2486 + line-height: 1.6; 2487 + } 2488 + 2489 + .privacy-policy { 2490 + padding: 1rem; 2491 + margin: 0.5rem; 2492 + } 2493 + } 2494 + 2495 + /* Extra small screens (below 320px) */ 2496 + @media (max-width: 319px) { 2497 + .app-icon { 2498 + width: 60px; 2499 + height: 60px; 2500 + border-radius: 14px; 2501 + } 2502 + 2503 + .app-icon-container { 2504 + margin-bottom: 0.5rem; 2505 + padding: 0.125rem 0; 2506 + } 2507 + 2508 + .privacy-policy { 2509 + padding: 0.75rem; 2510 + margin: 0.25rem; 2343 2511 } 2344 2512 } 2345 2513