Add activities to socials page

This commit is contained in:
bingus_violet 2024-04-17 09:33:05 -05:00
parent 338bb7a704
commit 73cfa2e664
5 changed files with 61 additions and 54 deletions

View file

@ -27,5 +27,4 @@ For an easy to digest example, look at the socials section on the main page of [
# To-do
- [ ] Add more content to the socials page & make it more easily findable on the site
- [ ] Pull latest Youtube video & display it
- [ ] Display current Discord Activities
- [ ] Display current steam game
- [x] Display current Discord Activities

View file

@ -167,4 +167,56 @@ h2 {
.striked {
text-decoration: line-through;
text-decoration-color: white;
}
.activity {
border-width: 3px;
border-radius: 10px;
overflow: hidden;
margin: auto;
padding: 0;
display: flex;
position: relative;
z-index: 3;
/* max-height: 200px; */
}
.activity>p {
width: 100%;
max-height: 100%;
overflow-wrap: anywhere;
text-overflow: ellipsis;
padding: 3px;
line-height: 1.5rem;
align-self: center;
}
.activity>img {
width: 40%;
aspect-ratio: 1/1;
object-fit: cover;
}
.activity>img:not(.smallimg) {
min-width: 150px;
max-width: 150px;
}
.activity>.smallimg {
width: 48px;
height: 48px;
position: absolute;
bottom: 0px;
left: 0px;
border-radius: 50px;
background: black;
padding: 5px;
/* border: 2px gray solid; */
transform: scale(0.9);
}
.activity>.smallimg:hover {
transform: scale(1);
}

View file

@ -60,56 +60,6 @@
display: inline-block;
}
.activity {
border-width: 3px;
border-radius: 10px;
overflow: hidden;
margin: auto;
padding: 0;
display: flex;
position: relative;
z-index: 3;
/* max-height: 200px; */
}
.activity>p {
width: 100%;
max-height: 100%;
overflow-wrap: anywhere;
text-overflow: ellipsis;
padding: 3px;
line-height: 1.5rem;
align-self: center;
}
.activity>img {
width: 40%;
aspect-ratio: 1/1;
object-fit: cover;
}
.activity>img:not(.smallimg) {
min-width: 150px;
max-width: 150px;
}
.activity>.smallimg {
width: 48px;
height: 48px;
position: absolute;
bottom: 0px;
left: 0px;
border-radius: 50px;
background: black;
padding: 5px;
/* border: 2px gray solid; */
transform: scale(0.9);
}
.activity>.smallimg:hover {
transform: scale(1);
}
img:not(.project-inner > div > img):not(.activity>img) {
width: 100%;
max-width: 168px;

View file

@ -21,8 +21,10 @@
<body>
{WEATHER_MODIFIER}
<h1>Socials</h1>
<p>Congrats on finding the <em>Incomplete seperated version of the socials page!!!!</em></p>
<div class="mainDiv">
<main>
<p>Here's most of the sites you can find me on-<br>if you needed that for some reason?</p>
<div class="grid-container">
@ -62,6 +64,7 @@
<div id="activityHTML">
{ACTIVITIES}
</div>
</div>
</body>
</html>

View file

@ -13,8 +13,11 @@ body {
padding: 5vh 0;
}
main {
.mainDiv {
animation: fadeUp 1s cubic-bezier(0.075, 0.82, 0.165, 1);
padding: 0 2.5vw;
max-width: 800px;
margin: auto;
}
@keyframes fadeUp {