noteslist.css

/* ================ Notes Listing Pages ================ */

.notes-list-page {
	display: flex;
	flex-direction: column;
}

.note-tag-menu {
	width: 100%;
	background: var(--clr-darker);
}

@media(min-width: 700px) {
	.notes-list-page {
		flex-direction: row;
	}

	.note-tag-menu {
		width: 20%;
	}
}


/* ===================== Notes List ===================== */

.note-tr, .note-meta, .taglist {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

.note-tr {
	flex-wrap: nowrap;
}

.note-tr {
	padding: 0.5em 0.2em;
	border-radius: 4px;
}

.note-tr:hover {
	background: var(--clr-darker);
}

.emoji {
	margin-right: 0.8em;
	align-self: flex-start;
}

.note-title {
	display: inline-flex;
	flex-grow: 1;
	flex-direction: column;
}

.note-title > span {
	flex-grow: 1;
	font-weight: 500;
}

.note-meta {
	font-size: 0.7em;
	/* align-self: flex-end; */
}
.note-meta > * {
	margin: 6px 0;
}
.note-meta  .post-tag {
	background: var(--clr-darker);
	border-radius: 4px;
	padding: 0 0.5em;
}

.note-meta time {
	font-weight: 500;
}

.pagination a {
	color: var(--main-text-color);
}

@media(min-width: 700px) {
	.note-title {
		flex-direction: row;
		align-items: center;
	}
}

/* ============ Note Tags Menu on Left =============== */

.note-tag-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.note-tag-menu li > a {
	display:inline-flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 0.4em 1em;
	font-weight: 500;
}

.note-tag-menu li[selected] {
	background: var(--clr-primary);
}

.note-tag-menu #nvtgs { display: none; }

.note-tag-menu label {
	width: 100%;
	padding: 0.5em;
	display: flex;
	align-items: center;
	font-weight: 700;
	background: var(--clr-highlight);
	color: var(--clr-dark);
}

.note-tag-menu label > svg {
	margin-right: 0.5em;
}

.note-tag-menu .menu {
	display: none;
}

.note-tag-menu #nvtgs:checked + .menu {
	display: block;
}

.note-tag-menu .hash {
	color: var(--clr-primary-txt);
    margin-right: 1px;
}

@media(min-width: 700px) {
	.note-tag-menu label {
		display: none;
	}

	.note-tag-menu .menu {
		display: block !important;
	}
}