mirror of
https://github.com/DidiDidi129/Website.git
synced 2026-04-05 12:04:38 +00:00
Add Matrix button, hover tooltips on icons, and mobile optimizations
Co-authored-by: DidiDidi129 <136057713+DidiDidi129@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -1841,3 +1841,66 @@ input, select, textarea {
|
|||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Matrix icon */
|
||||||
|
|
||||||
|
ul.icons li a.icon-matrix {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.icons li a.icon-matrix svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tooltips */
|
||||||
|
|
||||||
|
ul.icons li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.icons li a[data-tooltip]:hover::after {
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(100% + 0.5rem);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: rgba(0, 0, 0, 0.85);
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0.35rem 0.6rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile optimizations */
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
|
||||||
|
ul.icons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.icons li {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.icons li a {
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main article .center img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
13
index.html
13
index.html
@@ -35,11 +35,12 @@
|
|||||||
<p>Be sure to take a look at the pages below! Glad to have you here!</p>
|
<p>Be sure to take a look at the pages below! Glad to have you here!</p>
|
||||||
</div>
|
</div>
|
||||||
<ul class="icons">
|
<ul class="icons">
|
||||||
<li><a href="https://discord.gg/V43PkHfUJ8" target="_blank" class="icon brands fa-discord"><span class="label">Discord</span></a></li>
|
<li><a href="https://discord.gg/V43PkHfUJ8" target="_blank" class="icon brands fa-discord" data-tooltip="Discord"><span class="label">Discord</span></a></li>
|
||||||
<li><a href="https://reddit.com/u/DidiDidi129" target="_blank" class="icon brands fa-reddit"><span class="label">Reddit</span></a></li>
|
<li><a href="https://reddit.com/u/DidiDidi129" target="_blank" class="icon brands fa-reddit" data-tooltip="Reddit"><span class="label">Reddit</span></a></li>
|
||||||
<li><a href="https://github.com/DidiDidi129" target="_blank" class="icon brands fa-github"><span class="label">Github</span></a></li>
|
<li><a href="https://github.com/DidiDidi129" target="_blank" class="icon brands fa-github" data-tooltip="GitHub"><span class="label">GitHub</span></a></li>
|
||||||
<li><a href="https://blog.didi.party" target="_blank" class="icon fa-compass"><span class="label">Blog</span></a></li>
|
<li><a href="https://matrix.to/#/@didi:didi.party" target="_blank" class="icon icon-matrix" data-tooltip="Matrix"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor"><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024c.433-.245.936-.365 1.5-.365c.54 0 1.033.107 1.488.32c.45.214.795.555 1.025 1.016c.24-.352.56-.659.953-.923c.396-.263.862-.413 1.4-.413c.405 0 .784.053 1.142.16c.355.112.659.286.905.52c.249.237.44.537.572.9c.136.362.204.79.204 1.276v5.432h-2.07V11.19c0-.306-.017-.588-.05-.846a1.46 1.46 0 0 0-.2-.643a.96.96 0 0 0-.421-.404c-.173-.096-.393-.144-.66-.144c-.267 0-.488.056-.665.166a1.2 1.2 0 0 0-.43.433a1.8 1.8 0 0 0-.22.635a4 4 0 0 0-.063.72v5.776H9.266V11.19c0-.278-.012-.543-.036-.792a1.7 1.7 0 0 0-.168-.663a.9.9 0 0 0-.397-.453c-.17-.107-.405-.16-.703-.16c-.098 0-.227.024-.39.076a1.2 1.2 0 0 0-.445.249a1.4 1.4 0 0 0-.36.473c-.1.197-.149.462-.149.793v5.17H4.547V7.811zm14.605 14.39H21.72V24h2.28V0H21.72v.55h.56v22.9z"/></svg><span class="label">Matrix</span></a></li>
|
||||||
<li><a href="#bitcoin" class="icon brands fa-btc"><span class="label">Bitcoin</span></a></li>
|
<li><a href="https://blog.didi.party" target="_blank" class="icon fa-compass" data-tooltip="Blog"><span class="label">Blog</span></a></li>
|
||||||
|
<li><a href="#bitcoin" class="icon brands fa-btc" data-tooltip="Bitcoin"><span class="label">Bitcoin</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -67,7 +68,7 @@
|
|||||||
</style>
|
</style>
|
||||||
<div style="padding-bottom: 20px;" class="center">
|
<div style="padding-bottom: 20px;" class="center">
|
||||||
<p>Thanks for wanting to donate! Scan the QR or click the link below!</p>
|
<p>Thanks for wanting to donate! Scan the QR or click the link below!</p>
|
||||||
<img style="padding-bottom: 20px;" src="images/btc.png" width="410" height="" alt="bc1qq2tf5ahmeh4hhkn6r5a0nzpyzsht35dwmy9ts7" />
|
<img style="padding-bottom: 20px; max-width: 100%; height: auto;" src="images/btc.png" width="410" height="" alt="bc1qq2tf5ahmeh4hhkn6r5a0nzpyzsht35dwmy9ts7" />
|
||||||
<a target="_blank" class="button primary" href="bitcoin:bc1qq2tf5ahmeh4hhkn6r5a0nzpyzsht35dwmy9ts7">Click Here to donate!</a>
|
<a target="_blank" class="button primary" href="bitcoin:bc1qq2tf5ahmeh4hhkn6r5a0nzpyzsht35dwmy9ts7">Click Here to donate!</a>
|
||||||
</div>
|
</div>
|
||||||
<script defer src="https://widgets.coingecko.com/gecko-coin-price-chart-widget.js"></script>
|
<script defer src="https://widgets.coingecko.com/gecko-coin-price-chart-widget.js"></script>
|
||||||
|
|||||||
Reference in New Issue
Block a user