Better Activity Formatting
This commit is contained in:
parent
61a54548d0
commit
58df7b091f
4 changed files with 21 additions and 16 deletions
|
@ -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)"
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue