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)", "Univerter": "rgb(200, 175, 255)",
"Ko-fi": "rgb(255, 150, 150)", "Ko-fi": "rgb(255, 150, 150)",
"Revolt": "rgb(255, 50, 50)", "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); 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, a.chip {
.chip>* {
text-decoration: none; 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 { .chip:hover {
background-color: rgb(10, 0, 25); background-color: rgb(10, 0, 25);
transform: scale(1); transform: scale(1);

View file

@ -13,9 +13,7 @@
<meta name="darkreader-lock"> <meta name="darkreader-lock">
<meta content="Violet's Purgatory" property="og:title" /> <meta content="Violet's Purgatory" property="og:title" />
<meta <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" />
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="https://api.violets-purgatory.dev/v1/pfp" property="og:image" />
<meta content="#a200ff" data-react-helmet="true" name="theme-color" /> <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
</head> </head>

View file

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