andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

App: update link styles to match spec

Browse Source
This commit is contained in:
Tobias Fried
2020-07-31 19:52:57 -04:00
parent 4b927d746d
commit 847d80e7eb
4 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/App/App.css
View File

@@ -77,10 +77,22 @@ button.main-button:active {
transform: scale(1);
}
a {
a.main-link {
text-decoration: none;
position: relative;
color: black;
}
a:hover {
color: blue;
a.main-link:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
border-bottom: 1px solid black;
transition: 0.2s;
}
a.main-link:hover:after {
width: 0%;
}

12
src/components/App/App.tsx
View File

@@ -120,20 +120,20 @@ const App: React.FC<any> = () => {
Copyright © 2020 Phosphor Icons
<br />
Phosphor Icons is designed by{" "}
<a href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
<a href="https://tobiasfried.com">Tobias Fried</a>.
<a className="main-link" href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
<a className="main-link" href="https://tobiasfried.com">Tobias Fried</a>.
<br />
This website is set in{" "}
<a href="https://manropefont.com/">Manrope</a> by{" "}
<a href="https://gent.media/">Mikhail Sharanda</a>.
<a className="main-link" href="https://manropefont.com/">Manrope</a> by{" "}
<a className="main-link" href="https://gent.media/">Mikhail Sharanda</a>.
</p>
<p>
See also: <Droid size={20} />{" "}
<a href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
<a className="main-link" href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
Phosphor for Android
</a>
</p>
<a href="#">Back to zee top</a>
<a className="main-link" href="#">Back to zee top</a>
</div>
</div>
</Info>