finish the site (social cards) (finally)

This commit is contained in:
Ruben 2023-11-05 22:29:29 -06:00
commit fcd59381e5
No known key found for this signature in database
14 changed files with 250 additions and 49 deletions

BIN
assets/socials/akkoma.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 544 KiB

BIN
assets/socials/firefish.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 422 KiB

BIN
assets/socials/gitgay.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/socials/github.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
assets/socials/idle.apng Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/socials/matrix.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
assets/socials/revolt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
assets/socials/shitcord.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/socials/xmpp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -5,11 +5,11 @@
<head>
<title>sneexy dot pages dot gay</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="pixel-corners">
@ -31,42 +31,120 @@
<div class="pixel-corners">
<article class="links-n-socials">
<h1>~/links-n-socials</h1>
<p>(in order of most prefered to least prefered!)</p>
<small>(in order of most prefered to least prefered! <span class="dot"></span> some of these have extra info you can find by clicking their icons)</small>
<section class="social-lists">
<section class="social-links">
<h2>socials</h2>
<ul>
<li class="fedi">@sneexy<small>@<a href="https://lea.pet/@sneexy" target="_blank">lea.pet</a></small></li>
<li class="revolt">Sneexy#3963<small>@<a href="https://revolt.chat" target="_blank">revolt.chat</a></small></li>
<li class="matrix">@sneexy<small>:<a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">tchncs.de</a></small></li>
<li class="xmpp">sneexy<small>@<a href="xmpp:sneexy@trashserver.net" target="_blank">trashserver.net</a></small></li>
<li class="shitcord">Sneexy#6488<small>@<a href="https://discord.com" target="_blank">discord.com</a></small></li>
</ul>
<section class="fedi">
<section class="firefish">
<a href="https://joinfirefish.org" target="_blank">
<img class="firefish-icon" src="/assets/socials/firefish.png" alt="Fediverse/Firefish"/>
</a>
<p>@sneexy<small><a href="https://lea.pet/@sneexy" target="_blank">@lea.pet</a></small></p>
</section>
<section class="social-links">
<h2>others</h2>
<ul>
<li class="fedi">@sneexy<small>@<a href="https://lea.pet/@sneexy" target="_blank">lea.pet</a></small></li>
<li class="revolt">Sneexy#3963<small>@<a href="https://revolt.chat" target="_blank">revolt.chat</a></small></li>
<li class="matrix">@sneexy<small>:<a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">tchncs.de</a></small></li>
<li class="xmpp">sneexy<small>@<a href="xmpp:sneexy@trashserver.net" target="_blank">trashserver.net</a></small></li>
<li class="shitcord">Sneexy#6488<small>@<a href="https://discord.com" target="_blank">discord.com</a></small></li>
</ul>
</section>
<span class="dot2"></span>
<section class="social-links">
<h2>misc.</h2>
<ul>
<li class="fedi">@sneexy<small>@<a href="https://lea.pet/@sneexy" target="_blank">lea.pet</a></small></li>
<li class="revolt">Sneexy#3963<small>@<a href="https://revolt.chat" target="_blank">revolt.chat</a></small></li>
<li class="matrix">@sneexy<small>:<a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">tchncs.de</a></small></li>
<li class="xmpp">sneexy<small>@<a href="xmpp:sneexy@trashserver.net" target="_blank">trashserver.net</a></small></li>
<li class="shitcord">Sneexy#6488<small>@<a href="https://discord.com" target="_blank">discord.com</a></small></li>
</ul>
<section class="akkoma">
<a href="https://akkoma.social" target="_blank">
<img class="akkoma-icon" src="/assets/socials/akkoma.png" alt="Fediverse/Akkoma"/>
</a>
<p>@sneexy<small><a href="https://akko.wtf/sneexy" target="_blank">@akko.wtf</a></small></p>
</section>
</section>
<span class="separator">
<small>───────────</small>
</span>
<section class="messaging">
<section class="revolt">
<a href="https://revolt.chat" target="_blank">
<img class="revolt-icon" src="/assets/socials/revolt.png" alt="Revolt"/>
</a>
<p>Sneexy#3963<small><a href="https://revolt.chat" target="_blank">@revolt.chat</a></small></p>
</section>
<span class="dot2"></span>
<section class="matrix">
<a href="https://matrix.org" target="_blank">
<img class="matrix-icon" src="/assets/socials/matrix.png" alt="Matrix"/>
</a>
<p>@sneexy<small><a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">:tchncs.de</a></small></p>
</section>
<span class="dot2"></span>
<section class="xmpp">
<a href="https://xmpp.org" target="_blank">
<img class="xmpp-icon" src="/assets/socials/xmpp.png" alt="XMPP"/>
</a>
<p>sneexy<small><a href="xmpp:sneexy@trashserver.net" target="_blank">@trashserver.net</a></small></p>
</section>
</section>
<span class="separator">
<small>───────────</small>
</span>
<section class="platforms">
<section class="listenbrainz">
<a href="https://listenbrainz.org" target="_blank">
<img class="listenbrainz-icon" src="/assets/socials/listenbrainz.png" alt="Listenbrainz"/>
</a>
<p>Sneexy<small><a href="https://listenbrainz.org/user/Sneexy" target="_blank">@listenbrainz.org</a></small></p>
</section>
<span class="dot2"></span>
<section class="gitgay">
<a href="https://git.gay" target="_blank">
<img class="gitgay-icon" src="/assets/socials/gitgay.png" alt="Forgejo on git.gay"/>
</a>
<p>Sneexy<small><a href="https://git.gay/sneexy" target="_blank">@git.gay</a></small></p>
</section>
<span class="dot2"></span>
<section class="github">
<a href="https://github.com" target="_blank">
<img class="github-icon" src="/assets/socials/github.png" alt="GitHub"/>
</a>
<p>Sneexy<small><a href="https://github.com/sneexy-boi" target="_blank">@github.com</a></small></p>
</section>
</section>
<span class="separator">
<small>───────────</small>
</span>
<section class="misc">
<section class="retrospring">
<a href="https://retrospring.net" target="_blank">
<img class="retrospring-icon" src="/assets/socials/retrospring.png" alt="Retrospring - Ask me anything!"/>
</a>
<p>@Sneexy<small><a href="https://retrospring.net/@Sneexy" target="_blank">@retrospring.net</a></small></p>
</section>
<span class="dot2"></span>
<section class="dotfiles">
<a href="https://hyprland.org" target="_blank">
<img class="idle" src="/assets/socials/idle.apng" alt="Hyprland"/>
</a>
<p><a href="https://git.gay/sneexy/el-dotfiles" target="_blank">el-dotfiles</a></p>
</section>
<span class="dot2"></span>
<section class="shitposts">
<a href="https://nextcloud.com" target="_blank">
<img class="amoguscloud" src="/assets/socials/amoguscloud.png" alt="Nextcloud"/>
</a>
<p><a href="https://amogus.cloud/s/3jFf2eoppD38g3p" target="_blank">shitposts drive!</a></p>
</section>
</section>
<small class="warning">if you ABSOLUTELY need to contact me via discord, just ask me for my username. i'd highly prefer not using it though and if you could please use something else to contact me with.</small>
</article>
</div>
@ -97,7 +175,7 @@
</article>
</div>
<img class="yoshi" src="/home/ruben/Git/pages/assets/yoshi.gif" alt="gif of a yoshi model dancing" />
<img class="yoshi" src="/assets/yoshi.gif" alt="GIF of a dancing yoshi" />
</div>

157
style.css
View file

@ -326,6 +326,32 @@ a {
font-size: 16px;
}
.dot {
color: var(--accent-1);
text-shadow: 0px 0px 8px var(--accent-1);
font-size: 16px;
}
.dot2 {
color: var(--accent-1);
text-shadow: 0px 0px 8px var(--accent-1);
margin-top: 22px;
margin-left: 14px;
margin-right: 14px;
}
.separator {
display: flex;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: -1px;
}
.separator > small {
color: var(--bg-t);
}
.intro-box, .links-n-socials, .about-me, .fun-facts {
position: relative;
display: flex;
@ -352,33 +378,126 @@ a {
}
/* -- below is all the css used only for the social cards, and its probably Very Bad so get a puke bag or something read -- */
.social-lists {
.fedi, .firefish, .firefish-icon, .akkoma, .akkoma-icon, .messaging, .revolt, .revolt-icon, .matrix, .matrix-icon, .xmpp, .xmpp-icon, .platforms, .listenbrainz, .listenbrainz-icon, .gitgay, .gitgay-icon, .github, .github-icon, .misc, .retrospring, .retrospring-icon, .dotfiles, .idle, .shitposts, .amoguscloud, .warning {
display: flex;
}
.social-links {
display: grid;
flex-direction: row;
margin-left: auto;
margin-right: auto;
align-content: start;
}
.social-links > h2 {
margin-bottom: -7px;
.firefish-icon, .akkoma-icon, .revolt-icon, .matrix-icon, .xmpp-icon, .listenbrainz-icon, .gitgay-icon, .github-icon, .retrospring-icon, .idle, .amoguscloud {
margin-top: 20px;
margin-right: 8px;
width: 30px;
height: 30px;
}
.social-links > ul {
margin-left: -22px;
}
/* -- fedi section -- */
.fedi > small > a, .revolt > small > a, .matrix > small > a, .xmpp > small > a, .shitcord > small > a {
/* -- firefish -- */
.firefish > p > small, .firefish > p > small > a {
font-size: 16px;
background: #E74788;
background: linear-gradient(to right, #E74788 0%, #F6AE4A 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 8px #F1775D;
}
/* -- */
/* -- akkoma -- */
.akkoma > p > small, .akkoma > p > small > a {
font-size: 16px;
color: #CBA6D7;
text-shadow: 0px 0px 8px #CBA6D7;
}
/* -- */
/* -- messaging section -- */
/* -- revolt -- */
.revolt > p > small, .revolt > p > small > a {
font-size: 16px;
background: #FF4654;
background: linear-gradient(to right, #FF4654 0%, #FF558B 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 8px #FF4654;
}
/* -- */
/* -- matrix -- */
.matrix > p > small, .matrix > p > small > a {
font-size: 16px;
background: #FFFFFF;
background: linear-gradient(to right, #FFFFFF 0%, #4B4B4B 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 8px #4B4B4B;
}
/* -- */
/* -- xmpp -- */
.xmpp > p > small, .xmpp > p > small > a {
font-size: 16px;
background: #EED49F;
background: linear-gradient(to right, #A6DA95 0%, #EED49F 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 8px #11A4D8;
}
/* -- */
/* -- other platforms that i guess count as social -- */
/* -- listenbrainz -- */
.listenbrainz > p > small, .listenbrainz > p > small > a {
font-size: 16px;
background: #DA9014;
background: linear-gradient(to right, #8AADf4 0%, #EB743B 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 8px #D58C17;
}
/* -- */
/* -- git.gay -- */
.gitgay > p > small, .gitgay > p > small > a {
font-size: 16px;
background: #69CB86;
background: linear-gradient(to right, #FE9494 0%, #FFC783 31%, #69CB86 56%, #83A8FF 79%, #C56AD4 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px 8px #69CB86;
}
/* -- */
/* -- gith*b -- */
.github > p > small, .github > p > small > a {
font-size: 16px;
color: #CDD6F4;
text-shadow: 0px 0px 8px #CDD6F4;
}
/* -- */
/* -- misc. links -- */
/* -- retrospring -- */
.retrospring > p > small, .retrospring > p > small > a {
font-size: 16px;
color: #CA9EE6;
text-shadow: 0px 0px 8px #5E35B1;
}
.fedi {
list-style: url("/home/ruben/Documents/Unnamed.png");
width: 10px;
height: 10px;
/* -- lil warning message :3 -- */
.warning {
margin-top: 3rem;
text-align: center;
font-size: 16px;
color: #E78284;
text-shadow: 0px 0px 8px #E78284;
}
/* -- end of puke code -- */
.yoshi {
@ -414,8 +533,12 @@ a {
margin-bottom: 20px;
}
.social-lists {
.fedi, .messaging, .platforms, .misc, .shitcord, .warning {
flex-direction: column;
}
.dot2:not(:nth-child(1)) {
display: none;
}
}
/* -- yea -- */