Add activities to socials page
This commit is contained in:
parent
338bb7a704
commit
73cfa2e664
5 changed files with 61 additions and 54 deletions
|
|
@ -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
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue