chug chug, working on post formatting and tag pages

This commit is contained in:
2026-02-18 18:44:17 -08:00
parent ca8d4a31cd
commit f2face01a7
17 changed files with 234 additions and 19 deletions

View File

@ -69,11 +69,17 @@ body {
main {
width: 60vw;
max-width: 1200px;
max-width: 1000px;
margin: 0 auto;
scroll-margin-top: var(--header-offset);
}
@media (max-width: 1050px) {
main {
width: 75vw;
}
}
@media (max-width: 650px) {
main {
width: 92vw;

View File

@ -18,7 +18,7 @@ header a {
box-shadow: .15rem .15rem var(--color-shadow);
font-size: 1.2rem;
padding-right: .35rem;
/* click animation handling */
/* Click animation handling */
position: relative;
top: 0;
left: 0;
@ -133,6 +133,11 @@ header ul {
justify-content: center;
}
header ul,
header li {
margin: 0;
}
@media (max-width: 650px) {
.menu-text {
display: none; /* Icons only on small screens */

75
css/post.css Normal file
View File

@ -0,0 +1,75 @@
.post-metadata {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: baseline;
margin: 1.5rem 0 .5rem;
}
.post-metadata p {
font-size: .9rem;
margin: 0;
}
.post-tags {
display: flex;
flex-flow: row wrap;
gap: .5rem;
list-style: none;
margin: 0;
}
.post-tags li {
margin: 0;
}
.post-tags li a {
text-decoration: none;
color: var(--color-teal);
padding: 0 .5rem;
border-radius: 1rem;
box-shadow: .15rem .15rem var(--color-shadow);
border: .08rem solid var(--color-teal);
line-height: 2;
/* Click animation handling */
position: relative;
top: 0;
left: 0;
transition: top .1s ease-in, left .1s ease-in;
}
.post-tags li a:focus-visible {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
@media (any-hover: hover) {
.post-tags li a:hover {
outline: none;
background-color: var(--color-teal);
color: var(--color-bg);
}
}
@media (forced-colors: active) {
.post-tags li a:focus-visible {
outline-offset: .08rem;
outline: .08rem solid;
}
@media (any-hover: hover) {
.post-tags li a:hover {
outline-offset: .08rem;
outline: .08rem solid;
}
}
}
/* Click animation */
.post-tags li a:active {
top: .1rem;
left: .1rem;
box-shadow: .05rem .05rem var(--color-shadow);
}

View File

@ -49,7 +49,7 @@
margin: 2rem 0;
text-decoration: none;
border-color: var(--color-primary);
/* click animation handline */
/* Click animation handling */
position: relative;
top: 0;
left: 0;
@ -98,7 +98,7 @@
margin: 0;
}
/* h2 */
/* Headers */
.post h2 {
grid-area: h2;
padding: .25rem .5rem;
@ -131,7 +131,7 @@
}
/* Tags */
.posttags {
.postlist-tags {
grid-area: tags;
list-style: none;
display: flex;
@ -140,28 +140,28 @@
padding: .5rem;
}
.post:nth-child(odd) .posttags {
.post:nth-child(odd) .postlist-tags {
justify-content: flex-end;
}
.post:nth-child(odd) .posttags {
.post:nth-child(odd) .postlist-tags {
justify-content: flex-start;
}
.posttags li {
.postlist-tags li {
background-color: var(--color-primary);
color: var(--color-bg);
padding: 0 .5rem;
border-radius: 1rem;
}
.postlink:focus-visible .posttags li {
.postlink:focus-visible .postlist-tags li {
background-color: var(--color-bg);
color: var(--color-primary);
}
@media (any-hover: hover) {
.postlink:hover .posttags li {
.postlink:hover .postlist-tags li {
background-color: var(--color-bg);
color: var(--color-primary);
}