Footer: add 1280px breakpoint styles

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

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);
}
} */

View File

@@ -23,16 +23,12 @@ 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.
please support us with a donation.
</h2>
<button
className="main-button"
onClick={(e) => e.currentTarget.blur()}
>
<button className="main-button" onClick={(e) => e.currentTarget.blur()}>
<Heart size={24} weight="fill" style={{ marginRight: 12 }} />
Buy us a coffee
</button>
@@ -72,7 +68,6 @@ const Footer: React.FC<FooterProps> = () => {
Phosphor for Android
</a>
</p>
</div>
<div id="back-to-top">
<button
id="back-to-top-button"