Merge pull request #5 from sethbern/fix-mobile

fix links on mobile

Author: sethbern

index.html

@@ -35,18 +35,20 @@ <h1>Seth Bernstein</h1>
                     <p>Incoming PhD Student, University of Michigan<br>School of Information</p>
                     <p><strong>Research:</strong> HCI & Computing Education</p>
                     <div class="social-links">
-                        <a href="mailto:sethbern@umich.edu"><i class="fas fa-envelope"></i> sethbern@umich.edu</a> |
-                        <a href="https://www.linkedin.com/in/seth-bern" target="_blank"><i class="fab fa-linkedin"></i>
-                            LinkedIn</a> |
-                        <a href="https://scholar.google.com/citations?user=mpn42u8AAAAJ&hl=en" target="_blank"><i
-                                class="fas fa-graduation-cap"></i> Google Scholar</a> |
-                        <a href="https://orcid.org/0000-0002-7552-5448" target="_blank"><i class="fab fa-orcid"></i>
-                            ORCID</a> |
-                        <a class="cv-link cv-button" href="assets/cv_418.pdf" target="_blank"
-                            rel="noopener noreferrer"><i class="fa-regular fa-file-lines"></i> View CV</a>
+                        <a href="mailto:sethbern@umich.edu"><i class="fas fa-envelope"></i> sethbern@umich.edu</a>
+                        <span class="link-separator">|</span>
+                        <a href="https://www.linkedin.com/in/seth-bern"><i class="fab fa-linkedin"></i> LinkedIn</a>
+                        <span class="link-separator">|</span>
+                        <a href="https://scholar.google.com/citations?user=mpn42u8AAAAJ"><i
+                                class="fas fa-graduation-cap"></i> Google Scholar</a>
+                        <span class="link-separator">|</span>
+                        <a href="https://orcid.org/0000-0002-7552-5448"><i class="fab fa-orcid"></i> ORCID</a>
+                        <span class="link-separator">|</span>
+                        <a href="assets/cv_418.pdf"><i class="fa-regular fa-file-lines"></i> View CV</a>
                     </div>
 
 
+
                 </div>
             </div>
         </header>
@@ -68,8 +70,10 @@ <h2>About</h2>
                     especially for students who don’t yet see themselves represented in technical spaces.
                 </p>
                 <p>
-                    In the fall of 2025, I’ll begin my PhD at the <span class="blue">University of Michigan School of
-                        Information. Go blue!</span>
+                    In the fall of 2025, I’ll begin my PhD at the <span class="blue">
+                        University of Michigan School of Information.
+                        Go blue!
+                    </span>
                 </p>
 
             </section>

style.css

@@ -263,4 +263,45 @@ h3 {
 
 strong {
     color: #00274C;
+}
+
+.link-separator {
+    padding: 0 6px;
+    color: #002f66;
+}
+
+@media (max-width: 600px) {
+    .link-separator {
+        display: none;
+    }
+
+    .social-links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 6px 10px;
+        text-align: center;
+        margin-top: 8px;
+    }
+
+    .social-links a {
+        display: inline-block;
+        font-size: 15px;
+        padding: 4px 2px;
+        white-space: nowrap;
+    }
+
+    .social-links i {
+        margin-right: 4px;
+    }
+}
+
+.mobile-break {
+    display: none;
+}
+
+@media (max-width: 600px) {
+    .mobile-break {
+        display: inline;
+    }
 }