my personal site
Refactor social icons in privacy policy page: move icons from footer to a dedicated section, enhance styling for better alignment and responsiveness, and add mobile-specific styles for improved accessibility.
+83
-23
+17
-23
privacy-policy.html
+17
-23
privacy-policy.html
···
65
65
</section>
66
66
</main>
67
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>
68
+
<div class="social-icons">
69
+
<a href="https://www.linkedin.com/in/jackphannon/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile">
70
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="linkedin-icon">
71
+
<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"/>
72
+
</svg>
73
+
</a>
74
+
<a href="https://github.com/Hann8n" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile">
75
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="github-icon">
76
+
<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"/>
77
+
</svg>
78
+
</a>
79
+
<a href="https://bsky.app/profile/jackhannon.me" target="_blank" rel="noopener noreferrer" aria-label="Bluesky Profile">
80
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bluesky-icon">
81
+
<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"/>
82
+
</svg>
83
+
</a>
84
+
</div>
91
85
<script src="script.js"></script>
92
86
</body>
93
87
</html>
+66
style.css
+66
style.css
···
2511
2511
}
2512
2512
}
2513
2513
2514
+
/* Social Icons Styles (outside footer) */
2515
+
.social-icons {
2516
+
display: flex;
2517
+
justify-content: center;
2518
+
align-items: center;
2519
+
gap: 1rem;
2520
+
margin: 2rem 0;
2521
+
padding: 1rem 0;
2522
+
}
2523
+
2524
+
.social-icons a {
2525
+
display: flex;
2526
+
align-items: center;
2527
+
justify-content: center;
2528
+
width: 3rem;
2529
+
height: 3rem;
2530
+
border-radius: 50%;
2531
+
background: transparent;
2532
+
color: var(--text-color);
2533
+
text-decoration: none;
2534
+
transition: all 0.2s ease;
2535
+
border: none;
2536
+
/* Ensure minimum touch target size for accessibility */
2537
+
min-width: 44px;
2538
+
min-height: 44px;
2539
+
}
2540
+
2541
+
.social-icons a:hover,
2542
+
.social-icons a:focus {
2543
+
background: transparent;
2544
+
color: var(--link-hover-color);
2545
+
transform: translateY(-2px);
2546
+
}
2547
+
2548
+
.social-icons .bluesky-icon,
2549
+
.social-icons .github-icon,
2550
+
.social-icons .linkedin-icon {
2551
+
width: 1.4rem;
2552
+
height: 1.4rem;
2553
+
fill: currentColor;
2554
+
}
2555
+
2514
2556
/* Privacy Policy Footer Styles */
2515
2557
.privacy-footer {
2516
2558
background: var(--nav-bg);
···
2562
2604
fill: currentColor;
2563
2605
}
2564
2606
2607
+
2608
+
/* Mobile responsive social icons */
2609
+
@media (max-width: 650px) {
2610
+
.social-icons {
2611
+
margin: 1.5rem 0;
2612
+
padding: 0.5rem 0;
2613
+
gap: 1rem;
2614
+
}
2615
+
2616
+
.social-icons a {
2617
+
width: 3.5rem;
2618
+
height: 3.5rem;
2619
+
/* Ensure minimum touch target size on mobile */
2620
+
min-width: 48px;
2621
+
min-height: 48px;
2622
+
}
2623
+
2624
+
.social-icons .bluesky-icon,
2625
+
.social-icons .github-icon,
2626
+
.social-icons .linkedin-icon {
2627
+
width: 1.6rem;
2628
+
height: 1.6rem;
2629
+
}
2630
+
}
2565
2631
2566
2632
/* Mobile responsive footer */
2567
2633
@media (max-width: 650px) {