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>

30
src/components/NavBar/NavBar.css
View File

@@ -39,16 +39,26 @@ nav > div {
text-align: end;
}
.links a {
color: black;
text-decoration: none;
}
.links a:hover {
/* border-bottom: 2px solid black; */
box-shadow: 0 2px 0px -1px black;
}
.links a:not(:first-child) {
margin-left: 48px;
}
a.nav-link {
text-decoration: none;
position: relative;
color: black;
}
a.nav-link:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.2s;
}
a.nav-link:hover:after {
width: 100%;
}

8
src/components/NavBar/NavBar.tsx
View File

@@ -21,10 +21,10 @@ const NavBar: React.FC<NavBarProps> = () => {
</div>
</div>
<div className="links">
<a href="#">Download</a>
<a href="#">Request</a>
<a href="#">Donate</a>
<a href="https://github.com/rektdeckard/phosphor-react">
<a className="nav-link" href="#">Download</a>
<a className="nav-link" href="https://github.com/rektdeckard/phosphor-web/issues">Request</a>
<a className="nav-link" href="#">Donate</a>
<a className="nav-link" href="https://github.com/rektdeckard/phosphor-react">
<span>Github</span>
</a>
</div>