fundor333.com/assets/sass/add.scss

:root {
	--blockquote-border-size: 4px;
	--blockquote-background-color: rgb(248 248 248);

	--heading-border-size: 4px;

	--link-background-color: 189, 195, 199;
	--link-background-opacity: 0.5;
	--link-background-opacity-hover: 0.7;

	--pre-background-color: #272822;
	--pre-text-color: #f8f8f2;

	--code-background-color: rgba(0, 0, 0, 0.12);
	--code-text-color: #808080;

	--table-border-color: #dadada;
	--tr-even-background-color: #efefee;

	@media (prefers-color-scheme: dark) {
		--code-background-color: #272822;
		--code-text-color: rgba(255, 255, 255, 0.9);

		--table-border-color: #717171;
		--tr-even-background-color: #545454;

		--blockquote-background-color: rgb(75 75 75);
	}
}

.author {
	margin: 0;
}

.center-img {
	display: flex;
	justify-content: center;
	width: 80%;
}

.menu {
	.trigger {
		float: left;
		display: flex;
		align-items: center;
	}
}

@media screen and (max-width: 768px) {
	.menu {
		.menu-icon {
			position: relative;
		}
	}
}

@keyframes enterIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 100;
	}
}
@media only screen and (min-width: 768px) {
	#pridecodes-code-corner-svg {
		width: 150px;
	}
}
@media only screen and (max-width: 767px) {
	#pridecodes-code-corner-svg {
		width: 75px;
	}
}
#pridecodes-code-corner-svg {
	animation: enterIn 2s;
	transition: all 0.2s ease-in-out;
	&:hover {
		transform: scale(1.1);
		transform-origin: left top;
	}
}

small,
aside p {
	font-size: smaller;
	opacity: 0.9;
}

section#comments {
	#comments-wrapper {
		margin: 1.5em 0;
		padding: 0 var(--card-padding);
	}

	.comment {
		display: grid;
		column-gap: 1rem;
		grid-template-areas:
			"avatar name"
			"avatar time"
			"avatar post"
			"...... interactions";
		grid-template-columns: min-content;
		justify-items: start;
		margin: 0em auto 0em -1em;
		padding: 0.5em;

		&.comment-reply {
			margin: 0em auto 0em 1em;
		}

		.avatar-link {
			grid-area: avatar;
			height: 4rem;
			position: relative;
			width: 4rem;

			.avatar {
				height: 100%;
				width: 100%;
				border-radius: 20%;
			}

			&.op::after {
				background-color: var(--accent-color);
				border-radius: 50%;
				bottom: -0.25rem;
				color: var(--accent-color-text);
				content: "✓";
				display: block;
				font-size: 1.25rem;
				font-weight: bold;
				height: 1.5rem;
				line-height: 1.5rem;
				position: absolute;
				right: -0.25rem;
				text-align: center;
				width: 1.5rem;
			}
		}

		.author {
			align-items: center;
			display: flex;
			font-weight: bold;
			gap: 0.5em;
			grid-area: name;

			.instance {
				background-color: var(--code-background-color);
				border-radius: 9999px;
				color: var(--neutral);
				font-size: smaller;
				font-weight: normal;
				padding: 0.25em 0.75em;

				&:hover {
					opacity: 0.8;
					text-decoration: none;
				}

				&.op {
					background-color: var(
						--code-background-color
					);
					color: var(--accent-color-text);

					&::before {
						content: "✓";
						font-weight: bold;
						margin-inline-end: 0.25em;
					}
				}
			}
		}

		time {
			@extend small;

			grid-area: time;
			line-height: 1.5rem;
		}

		main {
			grid-area: post;

			p:first-child {
				margin-top: 0.25em;
			}

			p:last-child {
				margin-bottom: 0;
			}
		}

		footer {
			@extend small;

			grid-area: interactions;

			.faves {
				color: inherit;

				&:hover {
					opacity: 0.8;
					text-decoration: none;
				}

				&::before {
					color: red;
					content: "♥";
					font-size: 2rem;
					margin-inline-end: 0.25em;
				}
			}
		}

		.emoji {
			display: inline;
			height: 1.25em;
			vertical-align: middle;
			width: 1.25em;
		}

		.invisible {
			display: none;
		}

		.ellipsis::after {
			content: "…";
		}
	}
}