fix: a few more styles

This commit is contained in:
Cory Dransfeldt 2023-12-28 09:17:33 -08:00
parent a2f628f991
commit c3f031a229
No known key found for this signature in database
3 changed files with 20 additions and 16 deletions

View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "4.0.3",
"version": "4.0.4",
"description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
"type": "module",
"scripts": {

View file

@ -602,7 +602,7 @@ ol li {
margin-bottom: 1.5rem;
}
.avatar {
.avatar__wrapper .avatar__wrapper--interior {
width: 16rem;
height: 16rem;
border: 1px solid var(--blue-600);
@ -614,7 +614,7 @@ ol li {
overflow: hidden;
}
.avatar > * {
.avatar__wrapper .avatar__wrapper--interior > * {
width: 100%;
height: 100%;
}
@ -767,6 +767,7 @@ ol li {
}
.webmentions__wrapper .interaction__wrapper {
cursor: pointer;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
@ -784,6 +785,11 @@ ol li {
padding-bottom: 0;
}
.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover,
.webmentions__wrapper .interaction__wrapper .comment__wrapper:hover .avatar__wrapper {
border-color: var(--blue-800);
}
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior {
justify-content: space-between;
}
@ -833,10 +839,6 @@ ol li {
border: 4px solid var(--white);
}
.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover {
border-color: var(--blue-800);
}
.webmentions__wrapper .interaction__wrapper .avatar__wrapper .avatar__wrapper-image > * {
width: 100%;
height: 100%;
@ -863,19 +865,20 @@ ol li {
margin-bottom: 1rem;
}
.author__wrapper > .avatar__wrapper .avatar__wrapper--interior {
.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior {
border: 1px solid var(--blue-600);
border-radius: var(--rounded-full);
overflow: hidden;
margin-bottom: 1rem;
margin-right: 0;
padding: .25rem;
display: flex;
flex-direction: column;
align-items: center;
}
.author__wrapper > .avatar__wrapper .avatar__wrapper--interior,
.author__wrapper > .avatar__wrapper .avatar__wrapper--interior .author-avatar > * {
.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior,
.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior > .author-avatar > * {
width: 5rem;
height: 5rem;
}
@ -1025,7 +1028,7 @@ textarea {
line-height: var(--line-height-2xl);
}
.avatar {
.avatar__wrapper .avatar__wrapper--interior {
width: 24rem;
height: 24rem;
}
@ -1280,15 +1283,16 @@ textarea {
border-color: var(--gray-900);
}
.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover,
.webmentions__wrapper .interaction__wrapper .comment__wrapper:hover .avatar__wrapper {
border-color: var(--blue-200);
}
.webmentions__wrapper .interaction__wrapper .avatar__wrapper {
background-color: var(--white);
border-color: var(--black);
}
.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover {
border-color: var(--blue-200);
}
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment a {
color: var(--white);
}

View file

@ -4,7 +4,7 @@ layout: default
permalink: /about.html
---
<div class="avatar__wrapper">
<div class="avatar">
<div class="avatar__wrapper--interior">
{% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %}
{% image './src/assets/img/avatar.webp', about_alt %}
</div>