ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

homepage rework for socials and projects

Browse source
This commit is contained in:
ari melody 2025-06-16 20:32:46 +01:00
parent fe84a59326
commit 69e2e22e47
Signed by: ari
GPG key ID: CF99829C92678188
12 changed files with 432 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

88
public/style/index.css
View file

@ -96,30 +96,36 @@ hr {
overflow: visible;
}
ul.links {
ul.platform-links {
padding-left: 1em;
display: flex;
gap: 1em .5em;
gap: .5em;
flex-wrap: wrap;
}
ul.links li {
ul.platform-links li {
list-style: none;
}
ul.links li a {
ul.platform-links li a {
padding: .4em .5em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: .5em;
border: 1px solid var(--links);
color: var(--links);
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-property: color, border-color, background-color, box-shadow;
transition-duration: .2s;
animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0;
}
ul.links li a:hover {
ul.platform-links li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
@ -127,6 +133,75 @@ ul.links li a:hover {
box-shadow: 0 0 1em var(--links);
}
ul.platform-links li a img {
height: 1em;
width: 1em;
}
ul#projects {
padding: 0;
list-style: none;
}
li.project-item {
padding: .5em;
border: 1px solid var(--links);
margin: 1em 0;
display: flex;
flex-direction: row;
gap: .5em;
border-radius: 2px;
transition-property: color, border-color, background-color, box-shadow;
transition-duration: .2s;
cursor: pointer;
}
li.project-item a {
transition: color .2s linear;
}
li.project-item:hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
text-decoration: none;
box-shadow: 0 0 1em var(--links);
}
li.project-item:hover a {
color: #eee;
}
li.project-item .project-info {
display: flex;
flex-direction: column;
justify-content: center;
}
li.project-item img.project-icon {
width: 2.5em;
height: 2.5em;
object-fit: cover;
border-radius: 2px;
}
li.project-item span.project-icon {
font-size: 2em;
display: block;
width: 45px;
height: 45px;
text-align: center;
/* background: #0004; */
/* border: 1px solid var(--on-background); */
border-radius: 2px;
}
li.project-item a {
text-decoration: none;
}
li.project-item p {
margin: 0;
}
div#web-buttons {
margin: 2rem 0;
}
@ -147,4 +222,3 @@ div#web-buttons {
transform: translate(-2px, -2px);
box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
}