Better Activity Formatting

This commit is contained in:
Bingus_Violet 2024-03-03 21:27:47 -06:00
parent 61a54548d0
commit 58df7b091f
4 changed files with 21 additions and 16 deletions

View file

@ -77,6 +77,7 @@
"Univerter": "rgb(200, 175, 255)",
"Ko-fi": "rgb(255, 150, 150)",
"Revolt": "rgb(255, 50, 50)",
"Discord": "rgb(150, 150, 255)"
"Discord": "rgb(150, 150, 255)",
"SearXNG": "rgb(100, 100, 255)"
}
}

View file

@ -105,15 +105,14 @@ h3 {
transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.chip,
.chip>* {
a.chip {
text-decoration: none;
background-image: linear-gradient(rgb(175, 225, 255), rgb(175, 225, 255));
background-size: calc(100% - 15px) 2px;
background-position: 50% 87.5%;
background-repeat: no-repeat;
}
/* span {
text-decoration: none;
} */
.chip:hover {
background-color: rgb(10, 0, 25);
transform: scale(1);

View file

@ -13,9 +13,7 @@
<meta name="darkreader-lock">
<meta content="Violet's Purgatory" property="og:title" />
<meta
content="Hi, I'm Violet, a 15 year old web developer. My site lists my projects, passions, and where you can find me, so please visit!"
property="og:description" />
<meta content="Hi, I'm Violet, a 15 year old web developer. My site lists my projects, passions, and where you can find me, so please visit!" property="og:description" />
<meta content="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" />
</head>

View file

@ -52,11 +52,14 @@
display: flex;
position: relative;
z-index: 3;
/* max-height: 200px; */
}
.activity>p {
width: 100%;
overflow-wrap: break-word;
max-height: 100%;
overflow-wrap: anywhere;
text-overflow: ellipsis;
padding: 5px;
align-self: center;
}
@ -67,12 +70,16 @@
object-fit: cover;
}
.activity>img:not(.smallimg) {
min-width: 128px;
}
.activity>.smallimg {
width: 64px;
height: 64px;
width: 48px;
height: 48px;
position: absolute;
bottom: 0px;
left: 72px;
left: 0px;
border-radius: 50px;
background: black;
padding: 5px;
@ -84,13 +91,13 @@
transform: scale(1);
}
img:not(.project-inner > div > img) {
img:not(.project-inner > div > img):not(.activity>img) {
width: 100%;
max-width: 135px;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media screen and (min-width: 750px) {
@media screen and (min-width: 850px) {
.activity-container {
display: flex;
flex-wrap: wrap;