Matiss/Mati.ss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Buttondown email subscription form to footer with new input styling.

Browse Source
This commit is contained in:
Matiss Jurevics
2025-12-15 22:21:56 +00:00
parent 5c5af76e46
commit 495f462d03
2 changed files with 39 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Footer.jsx
View File

@@ -36,20 +36,20 @@ const Footer = () => {
<p style={{ marginBottom: '20px', color: '#888' }}>
Occasional updates on new projects and experiments.
</p>
<div style={{ display: 'flex', borderBottom: '1px solid #333' }}>
<form
action="https://buttondown.com/api/emails/embed-subscribe/matiss"
method="post"
target="_blank"
style={{ display: 'flex', borderBottom: '1px solid #333' }}
>
<input
className="footer-input"
type="email"
name="email"
placeholder="email address"
style={{
background: 'transparent',
border: 'none',
color: '#fff',
padding: '10px 0',
flex: 1,
outline: 'none'
}}
/>
<button style={{
<input type="hidden" value="1" name="embed" />
<button type="submit" style={{
background: 'transparent',
border: 'none',
color: '#ff4d00',
@@ -59,7 +59,7 @@ const Footer = () => {
}}>
Subscribe
</button>
</div>
</form>
</div>
</div>

28
src/index.css
View File

@@ -36,6 +36,34 @@ h1 {
line-height: 1.1;
}
/* Footer Input */
.footer-input {
background: transparent;
border: none;
border-bottom: 1px solid #333;
color: #fff;
padding: 15px 0;
font-size: 1.2rem;
font-family: inherit;
flex: 1;
outline: none;
transition: all 0.3s ease;
}
.footer-input:focus {
border-bottom: 1px solid #ff4d00;
}
.footer-input::placeholder {
color: #666;
font-size: 1.1rem;
transition: color 0.3s ease;
}
.footer-input:focus::placeholder {
color: #888;
}
button {
border-radius: 8px;
border: 1px solid transparent;