cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: briefer selector names

Browse source
This commit is contained in:
Cory Dransfeldt 2024-01-02 10:27:45 -08:00
parent 57cd789b06
commit 53c2211b85
No known key found for this signature in database
5 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/partials/webmentions/comments.liquid
View file

@ -1,6 +1,6 @@
{% if mentions['in-reply-to'].size > 0 %} {% if mentions['in-reply-to'].size > 0 %}
<h2>Comments</h2> <h2>Comments</h2>
<div class="interaction__wrapper comments"> <div class="interaction comments">
{% for mention in mentions['in-reply-to'] %} {% for mention in mentions['in-reply-to'] %}
<div class="comment__wrapper flex--centered"> <div class="comment__wrapper flex--centered">
<div class="comment__wrapper--interior flex--centered"> <div class="comment__wrapper--interior flex--centered">

2
src/_includes/partials/webmentions/container.liquid
View file

@ -1,6 +1,6 @@
{% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %} {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
{% if mentions %} {% if mentions %}
<div class="webmentions__wrapper"> <div class="webmentions">
{% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %} {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
{% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %} {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}
{% render "partials/webmentions/comments.liquid", mentions: mentions %} {% render "partials/webmentions/comments.liquid", mentions: mentions %}

2
src/_includes/partials/webmentions/interaction.liquid
View file

@ -7,7 +7,7 @@
{% endcapture -%} {% endcapture -%}
{% if mentions[type].size > 0 %} {% if mentions[type].size > 0 %}
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
<div class="interaction__wrapper flex--centered"> <div class="interaction flex--centered">
<ul> <ul>
{% for mention in mentions[type] %} {% for mention in mentions[type] %}
<li> <li>

2
src/_includes/partials/webmentions/links.liquid
View file

@ -1,6 +1,6 @@
{% if mentions['link-to'].size > 0 %} {% if mentions['link-to'].size > 0 %}
<h2>Links</h2> <h2>Links</h2>
<div class="interaction__wrapper"> <div class="interaction">
<ul> <ul>
{% for mention in mentions['link-to'] %} {% for mention in mentions['link-to'] %}
<li> <li>

50
src/assets/styles/index.css
View file

@ -666,59 +666,59 @@ article .now__section--header {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.webmentions__wrapper { .webmentions {
border-top: 1px solid var(--gray-200); border-top: 1px solid var(--gray-200);
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 3.25rem; margin-bottom: 3.25rem;
padding-top: 2rem; padding-top: 2rem;
} }
.webmentions__wrapper .interaction__wrapper.comments { .webmentions .interaction.comments {
flex-direction: column; flex-direction: column;
} }
.webmentions__wrapper .interaction__wrapper { .webmentions .interaction {
cursor: pointer; cursor: pointer;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.webmentions__wrapper .interaction__wrapper .comment__wrapper { .webmentions .interaction .comment__wrapper {
width: 100%; width: 100%;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.webmentions__wrapper .interaction__wrapper .comment__wrapper:last-child { .webmentions .interaction .comment__wrapper:last-child {
padding-bottom: 0; padding-bottom: 0;
} }
.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover, .webmentions .interaction .avatar__wrapper:hover,
.webmentions__wrapper .interaction__wrapper .comment__wrapper:hover .avatar__wrapper { .webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
border-color: var(--blue-800); border-color: var(--blue-800);
} }
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment { .webmentions .interaction .comment__wrapper--interior .comment {
margin-left: .75rem; margin-left: .75rem;
} }
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment a { .webmentions .interaction .comment__wrapper--interior .comment a {
color: var(--black); color: var(--black);
text-decoration: none; text-decoration: none;
} }
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment p { .webmentions .interaction .comment__wrapper--interior .comment p {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: var(--line-height-sm); line-height: var(--line-height-sm);
margin: 0; margin: 0;
} }
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment time { .webmentions .interaction .comment__wrapper--interior .comment time {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
line-height: var(--line-height-xs); line-height: var(--line-height-xs);
margin-top: .25rem; margin-top: .25rem;
} }
.webmentions__wrapper .interaction__wrapper ul { .webmentions .interaction ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -727,12 +727,12 @@ article .now__section--header {
list-style: none; list-style: none;
} }
.webmentions__wrapper .interaction__wrapper li { .webmentions .interaction li {
margin-left: -.75rem; margin-left: -.75rem;
height: 3.5rem; height: 3.5rem;
} }
.webmentions__wrapper .interaction__wrapper .avatar__wrapper { .webmentions .interaction .avatar__wrapper {
background-color: var(--black); background-color: var(--black);
width: 3.5rem; width: 3.5rem;
height: 3.5rem; height: 3.5rem;
@ -741,7 +741,7 @@ article .now__section--header {
border: 4px solid var(--white); border: 4px solid var(--white);
} }
.webmentions__wrapper .interaction__wrapper .avatar__wrapper .avatar__wrapper-image > * { .webmentions .interaction .avatar__wrapper .avatar__wrapper-image > * {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--rounded-full); border-radius: var(--rounded-full);
@ -755,7 +755,7 @@ article .now__section--header {
.author__wrapper, .author__wrapper,
.author__wrapper > .avatar__wrapper, .author__wrapper > .avatar__wrapper,
.webmentions__wrapper .interaction__wrapper .avatar__wrapper > picture { .webmentions .interaction .avatar__wrapper > picture {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -884,7 +884,7 @@ code,
} }
a, a,
.webmentions__wrapper .interaction__wrapper .avatar__wrapper, .webmentions .interaction .avatar__wrapper,
.media__grid .item__wrapper, .media__grid .item__wrapper,
.pill--button, .pill--button,
input[type="text"], input[type="text"],
@ -894,7 +894,7 @@ textarea {
transition-duration: 300ms; transition-duration: 300ms;
} }
.webmentions__wrapper .interaction__wrapper .avatar__wrapper, .webmentions .interaction .avatar__wrapper,
.media__grid .item__wrapper, .media__grid .item__wrapper,
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
@ -903,7 +903,7 @@ textarea {
} }
.pagination, .pagination,
.webmentions__wrapper .interaction__wrapper .comment__wrapper--interior, .webmentions .interaction .comment__wrapper--interior,
.author__wrapper { .author__wrapper {
justify-content: space-between; justify-content: space-between;
} }
@ -925,7 +925,7 @@ footer nav {
.image__banner, .image__banner,
.avatar__wrapper .avatar__wrapper--interior, .avatar__wrapper .avatar__wrapper--interior,
.media__grid .item__wrapper, .media__grid .item__wrapper,
.webmentions__wrapper .interaction__wrapper .avatar__wrapper, .webmentions .interaction .avatar__wrapper,
.author__wrapper > .avatar__wrapper > .avatar__wrapper--interior, .author__wrapper > .avatar__wrapper > .avatar__wrapper--interior,
.progress-bar__wrapper { .progress-bar__wrapper {
overflow: hidden; overflow: hidden;
@ -1065,7 +1065,7 @@ footer nav {
stroke: var(--blue-400); stroke: var(--blue-400);
} }
:is(.main__title, footer nav:last-child, .webmentions__wrapper .interaction__wrapper .comment__wrapper--interior .comment) a, :is(.main__title, footer nav:last-child, .webmentions .interaction .comment__wrapper--interior .comment) a,
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
textarea { textarea {
@ -1145,19 +1145,19 @@ footer nav {
/* widgets */ /* widgets */
.author__wrapper, .author__wrapper,
.webmentions__wrapper { .webmentions {
border-color: var(--gray-900); border-color: var(--gray-900);
} }
.webmentions__wrapper .interaction__wrapper .avatar__wrapper { .webmentions .interaction .avatar__wrapper {
background-color: var(--white); background-color: var(--white);
border-color: var(--black); border-color: var(--black);
} }
/* shared styles */ /* shared styles */
.media__grid .item__wrapper:hover, .media__grid .item__wrapper:hover,
.webmentions__wrapper .interaction__wrapper .avatar__wrapper:hover, .webmentions .interaction .avatar__wrapper:hover,
.webmentions__wrapper .interaction__wrapper .comment__wrapper:hover .avatar__wrapper { .webmentions .interaction .comment__wrapper:hover .avatar__wrapper {
border-color: var(--blue-200); border-color: var(--blue-200);
} }