ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplified the Signal Messenger integration

Browse Source 
Made it more subtle and intuitive
Maintained consistency between footer and main contact section
Improved the overall contact section design
This commit is contained in:
ben7sys
2024-11-17 05:49:50 +01:00
parent 8685e18a43
commit c96f1d006e
3 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/components/footer.html
View File

@@ -2,18 +2,18 @@
<div class="contact-block">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<a href="mailto:info@7sys.de">kontakt@7sys.de</a>
<a href="mailto:info@7sys.de">info@7sys.de</a>
</div>
<div class="contact-item">
<i class="fab fa-signal-messenger"></i>
<a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">sieben.77</a>
<a href="signal://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">Signal</a>
</div>
</div>
<div class="social-links">
<a href="https://github.com/ben7sys" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i>
</a>
<a href="https://twitter.com/ben7sys" target="_blank" rel="noopener noreferrer">
<a href="https://twitter.com/therealbaderb" target="_blank" rel="noopener noreferrer">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/in/badben/" target="_blank" rel="noopener noreferrer">

41
public/css/components.css
View File

@@ -114,24 +114,47 @@
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
margin: var(--spacing-xl) 0;
text-align: center;
}
.contact-info:hover {
border-color: var(--primary);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.contact-info a {
color: var(--primary);
text-decoration: none;
display: block;
margin: var(--spacing-sm) 0;
transition: opacity var(--transition-speed) ease;
.contact-info p {
margin-bottom: var(--spacing-lg);
color: var(--text);
}
.contact-info a:hover {
opacity: 0.8;
.contact-links {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
}
.contact-link {
color: var(--text) !important;
text-decoration: none;
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.contact-link:hover {
color: var(--primary) !important;
border-color: var(--primary);
opacity: 1;
}
.contact-link i {
font-size: 1.2em;
color: var(--primary);
}
/* Quote Styles */

13
public/index.html
View File

@@ -74,8 +74,17 @@
<h2>Kontakt</h2>
<div class="contact-info">
<p>Ich freue mich darauf, Ihr Projekt kennenzulernen und Ihnen mein Wissen zu vermitteln.</p>
<a href="mailto:kontakt@7sys.de">E-Mail: info@7sys.de</a>
<a href="https://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR">Signal: sieben.77</a>
<div class="contact-links">
<a href="mailto:kontakt@7sys.de" class="contact-link">
<i class="fas fa-envelope"></i>
info@7sys.de
</a>
<a href="signal://signal.me/#eu/aJ9SSOqcjDjvmJbFB_2p4CM4cwGjeYvbIuhGuTIU-eZ-dgDvM3BD4ocEEff8mhaR"
class="contact-link">
<i class="fab fa-signal-messenger"></i>
Signal Messenger
</a>
</div>
</div>
</section>
</div>