Apps/Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve keyboard navigation

Browse Source
This commit is contained in:
Cameron Cordes
2020-08-12 17:14:17 -04:00
parent b210da65c5
commit abde35c6f9
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/contact/contact.component.css
View File

@@ -21,6 +21,6 @@
} }
.icon-layout:hover { .icon-layout:hover {
color: #0FA0CE; color: var(--nord12);
cursor: pointer; cursor: pointer;
} }

18
src/app/contact/contact.component.html
View File

@@ -3,19 +3,19 @@
<h2>Social Media</h2> <h2>Social Media</h2>
<div style="display: flex; justify-content: center; width: 100%"> <div style="display: flex; justify-content: center; width: 100%">
<div class="icon-layout" (click)="linkedInClicked()"> <div class="icon-layout" (click)="linkedInClicked()" (keydown.enter)="linkedInClicked()" tabindex="0">
<img src="../../assets/linked-in.png" class="icon" alt="LinkedIn"> <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn" tabindex="-1">
<span class="icon-text">LinkedIn</span> <span class="icon-text" tabindex="-1">LinkedIn</span>
</div> </div>
<div class="icon-layout" (click)="githubClicked()"> <div class="icon-layout" (click)="githubClicked()" (keydown.enter)="githubClicked()" tabindex="0">
<img src="../../assets/github.png" class="icon" alt="Github"> <img src="../../assets/github.png" class="icon" alt="Github" tabindex="-1">
<span class="icon-text">GitHub</span> <span class="icon-text" tabindex="-1">GitHub</span>
</div> </div>
<div class="icon-layout" (click)="emailClicked()"> <div class="icon-layout" (click)="emailClicked()" (keydown.enter)="emailClicked()" tabindex="0">
<img src="../../assets/gmail.png" class="icon" alt="GMail"> <img src="../../assets/gmail.png" class="icon" alt="GMail" tabindex="-1">
<span class="icon-text">Email</span> <span class="icon-text" tabindex="-1">Email</span>
</div> </div>
</div> </div>
<p class="subtitle mt-2">Contact me to connect, collaborate or just to chat.</p> <p class="subtitle mt-2">Contact me to connect, collaborate or just to chat.</p>