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
|
# To-do
|
||||||
- [ ] Add more content to the socials page & make it more easily findable on the site
|
- [ ] Add more content to the socials page & make it more easily findable on the site
|
||||||
- [ ] Pull latest Youtube video & display it
|
- [ ] Pull latest Youtube video & display it
|
||||||
- [ ] Display current Discord Activities
|
- [x] Display current Discord Activities
|
||||||
- [ ] Display current steam game
|
|
||||||
|
|
@ -168,3 +168,55 @@ h2 {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
text-decoration-color: white;
|
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;
|
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) {
|
img:not(.project-inner > div > img):not(.activity>img) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 168px;
|
max-width: 168px;
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,10 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{WEATHER_MODIFIER}
|
{WEATHER_MODIFIER}
|
||||||
|
|
||||||
<h1>Socials</h1>
|
<h1>Socials</h1>
|
||||||
<p>Congrats on finding the <em>Incomplete seperated version of the socials page!!!!</em></p>
|
<div class="mainDiv">
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<p>Here's most of the sites you can find me on-<br>if you needed that for some reason?</p>
|
<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">
|
<div class="grid-container">
|
||||||
|
|
@ -62,6 +64,7 @@
|
||||||
<div id="activityHTML">
|
<div id="activityHTML">
|
||||||
{ACTIVITIES}
|
{ACTIVITIES}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -13,8 +13,11 @@ body {
|
||||||
padding: 5vh 0;
|
padding: 5vh 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
.mainDiv {
|
||||||
animation: fadeUp 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
animation: fadeUp 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||||
|
padding: 0 2.5vw;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeUp {
|
@keyframes fadeUp {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue