chug chug, working on post formatting and tag pages
This commit is contained in:
@ -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;
|
||||
|
||||
@ -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
75
css/post.css
Normal 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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user