sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

socials card testing

Browse source
This commit is contained in:
Ruben 2023-11-05 18:28:10 -06:00
commit 1ef06d965c
No known key found for this signature in database
2 changed files with 81 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

46
index.html
View file

@ -14,10 +14,11 @@
<div class="pixel-corners">
<div class="intro-box">
<header class="intro-info">
<div class="pixel-corners--wrapper">
<div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
</div>
<div class="pixel-corners--wrapper">
<div class="pfp"> <img class="pfp-image" src="/assets/pfp.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
</div>
<header class="intro-text">
<h1 class="site-intro">hey, i'm ruben.</h1>
<h2 class="site-subtitle">welcome to my site.</h2>
<nav>
@ -30,7 +31,42 @@
<div class="pixel-corners">
<article class="links-n-socials">
<h1>~/links-n-socials</h1>
<p>wip xdd</p>
<p>(in order of most prefered to least prefered!)</p>
<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>
<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>
<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>
</section>
</article>
</div>

50
style.css
View file

@ -333,7 +333,7 @@ a {
background-color: var(--bg);
}
.intro-info, .links-n-socials, .about-me, .fun-facts {
.intro-text, .links-n-socials, .about-me, .fun-facts {
flex-direction: column;
}
@ -341,23 +341,39 @@ a {
justify-content: space-evenly;
}
.links-n-socials .links-list {
flex-direction: row;
}
.pfp {
width: 150px;
height: 150px;
}
.intro-info {
.intro-text {
text-align: center;
transform: translateY(4%)
}
.links-n-socials {
position: relative;
/* -- 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 {
display: flex;
}
.social-links {
display: grid;
margin-right: auto;
align-content: start;
}
.social-links > h2 {
margin-bottom: -7px;
}
.social-links > ul {
margin-left: -22px;
}
.fedi > small > a, .revolt > small > a, .matrix > small > a, .xmpp > small > a, .shitcord > small > a {
font-size: 16px;
}
/* -- end of puke code -- */
/* -- end of styling the rest of the elements -- */
/* -- shirnk cards if screen is small -- */
@ -368,10 +384,24 @@ a {
transform: translate(4%, -3%);
}
.pfp, .intro-box {
display: grid;
.intro-box {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.pfp, .pixel-corners--wrapper {
margin-left: auto;
margin-right: auto;
}
.pixel-corners--wrapper {
margin-bottom: 20px;
}
.social-lists {
flex-direction: column;
}
}
/* -- yea -- */