Oscloud/web-mxchat
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

design: landing page effects and polish

Browse Source 
- radial gradient glow background
- card hover: translateY(-4px) + blue glow shadow
- gradient on cards for depth
- OSCloud logo in nav instead of blue M
- wider card grid and footer (1100px)
- footer separator between OSCloud and links
- vertically centered content
- faster transitions (0.15s)
This commit is contained in:
Zdenek Kreml
2026-04-29 21:01:29 +02:00
parent 43d5f3d82b
commit d12e7224ba
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -1
View File
@@ -14,7 +14,7 @@
<nav class="site-nav"> <nav class="site-nav">
<a href="/" class="nav-logo"> <a href="/" class="nav-logo">
<div class="nav-logo-icon">M</div> <img src="./index/img/logo_oscloud.png" alt="OSCloud" style="width: 32px; height: auto; border-radius: 6px;" />
<span class="nav-logo-text">mxchat.cz</span> <span class="nav-logo-text">mxchat.cz</span>
</a> </a>
<button class="nav-menu-btn" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">&#9776;</button> <button class="nav-menu-btn" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">&#9776;</button>
@@ -99,6 +99,7 @@
<footer class="site-footer"> <footer class="site-footer">
<span>&copy; 2024-2026 OSCloud</span> <span>&copy; 2024-2026 OSCloud</span>
<span style="color: var(--text-dim); margin: 0 12px;">&middot;</span>
<div class="footer-links"> <div class="footer-links">
<a href="https://mamutovo.cz/@oscloud" target="_blank" rel="noopener"><i class="fa fa-mastodon"></i> Mastodon</a> <a href="https://mamutovo.cz/@oscloud" target="_blank" rel="noopener"><i class="fa fa-mastodon"></i> Mastodon</a>
<a href="https://matrix.to/#/#podpora:mxchat.cz" target="_blank" rel="noopener"><i class="fa fa-matrix-org"></i> Matrix</a> <a href="https://matrix.to/#/#podpora:mxchat.cz" target="_blank" rel="noopener"><i class="fa fa-matrix-org"></i> Matrix</a>
style/mxchat.css
+7 -3
View File
@@ -87,6 +87,7 @@ html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothin
body { body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 15px; font-size: 15px;
@@ -328,7 +329,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px; gap: 16px;
max-width: 900px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
padding: 16px 24px 40px; padding: 16px 24px 40px;
} }
@@ -344,7 +345,9 @@ a:hover { color: var(--accent); text-decoration: underline; }
transition: all var(--transition); transition: all var(--transition);
} }
.link-card:hover { .link-card:hover {
border-color: var(--border-hover); transform: translateY(-4px);
border-color: var(--accent-light);
box-shadow: 0 4px 24px rgba(21, 101, 192, 0.25);
background: var(--bg-card-hover); background: var(--bg-card-hover);
text-decoration: none; text-decoration: none;
} }
@@ -477,7 +480,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
============================================ */ ============================================ */
.site-footer { .site-footer {
padding: 24px 32px; padding: 24px 32px;
max-width: 900px; max-width: 1100px;
margin: 48px auto 0; margin: 48px auto 0;
border-top: 0.5px solid var(--border); border-top: 0.5px solid var(--border);
display: flex; display: flex;
@@ -485,6 +488,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
color: var(--text-dim); color: var(--text-dim);
margin-top: auto;
} }
.footer-links { .footer-links {
display: flex; display: flex;