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

Footer: add 1280px breakpoint styles

Browse Source
This commit is contained in:
rektdeckard
2020-08-09 23:43:18 -04:00
parent d5609d3c57
commit 4dc8bc7ac6
2 changed files with 100 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Footer/Footer.css
View File

@@ -1,12 +1,65 @@
footer {
width: 100%;
height: 696px;
background-color: #925bff;
overflow: hidden;
position: absolute;
}
.outro-container {
@media screen and (min-width: 1280px) {
.outro {
position: relative;
width: 666px;
margin: 160px auto 324px;
}
.outro h2 {
font-size: 40px;
line-height: 50px;
margin-bottom: 32px;
}
.fine-print {
margin: 96px 0 0;
font-size: 20px;
line-height: 30px;
}
#back-to-top {
position: absolute;
top: 0;
left: 0;
transform: translate(-212px, 0);
}
#back-to-top-button {
width: 140px;
height: 140px;
border-radius: 50%;
}
#marker-green {
position: absolute;
top: 0;
left: 0;
transform: translate(384px, 500px);
}
#phone {
position: absolute;
top: 0;
left: 0;
transform: translate(-80px, 500px);
}
#command {
position: absolute;
top: 0;
left: 0;
transform: translate(706px, 360px);
}
}
/* .outro-container {
position: relative;
width: 1366px;
height: 100%;
@@ -69,4 +122,4 @@ footer {
top: 0;
left: 0;
transform: translate(1213px, 464px);
}
} */

93
src/components/Footer/Footer.tsx
View File

@@ -23,56 +23,51 @@ const Footer: React.FC<FooterProps> = () => {
return (
<footer>
<div className="outro-container">
<div className="outro">
<h2>
Phosphor is free and open source software. If you enjoy these icons,
please consider supporting us with a donation.
</h2>
<button
className="main-button"
onClick={(e) => e.currentTarget.blur()}
<div className="outro">
<h2>
Phosphor is free and open source software. If you enjoy these icons,
please support us with a donation.
</h2>
<button className="main-button" onClick={(e) => e.currentTarget.blur()}>
<Heart size={24} weight="fill" style={{ marginRight: 12 }} />
Buy us a coffee
</button>
<p className="fine-print">
Copyright © 2020 Phosphor Icons
<br />
Designed by{" "}
<a className="main-link" href="https://helenazhang.com">
Helena Zhang
</a>{" "}
+ built by{" "}
<a className="main-link" href="https://tobiasfried.com">
Tobias Fried
</a>{" "}
<span
role="img"
aria-label="Emoji of woman technologist, man technologist, and cat"
>
<Heart size={24} weight="fill" style={{ marginRight: 12 }} />
Buy us a coffee
</button>
<p className="fine-print">
Copyright © 2020 Phosphor Icons
<br />
Designed by{" "}
<a className="main-link" href="https://helenazhang.com">
Helena Zhang
</a>{" "}
+ built by{" "}
<a className="main-link" href="https://tobiasfried.com">
Tobias Fried
</a>{" "}
<span
role="img"
aria-label="Emoji of woman technologist, man technologist, and cat"
>
👩🏻‍💻👨‍💻🐱
</span>
<br />
This website is set in{" "}
<a className="main-link" href="https://manropefont.com/">
Manrope
</a>{" "}
by{" "}
<a className="main-link" href="https://gent.media/">
Mikhail Sharanda
</a>
.
<br />
See also:{" "}
<a
className="main-link"
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
>
Phosphor for Android
</a>
</p>
</div>
👩🏻‍💻👨‍💻🐱
</span>
<br />
This website is set in{" "}
<a className="main-link" href="https://manropefont.com/">
Manrope
</a>{" "}
by{" "}
<a className="main-link" href="https://gent.media/">
Mikhail Sharanda
</a>
.
<br />
See also:{" "}
<a
className="main-link"
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
>
Phosphor for Android
</a>
</p>
<div id="back-to-top">
<button
id="back-to-top-button"