erynwells.me/content/blog/blog.css

88 lines
2 KiB
CSS
Raw Normal View History

2022-09-11 10:40:25 -07:00
:root {
--post-item-highlight-color: #efefef;
2022-09-25 07:52:22 -07:00
--tag-foreground-color: rgb(var(--super-dk-gray));
--tag-background-color: rgb(var(--super-lt-gray));
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
--tag-hover-background-color: rgb(var(--sub-lt-gray));
2022-09-11 10:40:25 -07:00
}
@media (prefers-color-scheme: dark) {
:root {
--post-item-highlight-color: #121212;
2022-09-25 07:52:22 -07:00
--tag-foreground-color: rgb(var(--sub-lt-gray));
--tag-background-color: rgb(var(--dk-gray));
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
--tag-hover-background-color: rgb(var(--super-dk-gray));
--tag-hover-foreground-color: rgb(var(--mid-gray));
2022-09-11 10:40:25 -07:00
}
}
.post-content > .highlight { margin-block-end: var(--body-item-spacing); }
.post-nav {
align-items: baseline;
display: flex;
margin-top: 3.5rem;
}
.post-nav .next {
margin-left: auto;
}
.post-single footer {
margin-block-start: 3.5rem;
}
.blog .tags {
2022-09-25 07:52:22 -07:00
display: flex;
padding-inline-start: 0;
}
.blog .tags li {
2022-09-25 07:52:22 -07:00
background-color: var(--tag-background-color);
color: var(--tag-foreground-color);
2022-09-25 07:52:22 -07:00
border-radius: 4px;
display: inline-block;
font-size: 75%;
letter-spacing: 1px;
2022-09-25 07:52:22 -07:00
}
.blog .tags li:hover {
2022-09-25 07:52:22 -07:00
background-color: var(--tag-hover-background-color);
}
.blog .tags li a {
color: inherit;
2022-09-25 07:52:22 -07:00
display: block;
height: 100%;
width: 100%;
padding: 0.6rem 1rem;
2022-09-25 07:52:22 -07:00
}
.blog .tags li a:hover {
2022-09-25 07:52:22 -07:00
color: var(--tag-hover-foreground-color);
text-decoration: none;
}
.blog .tags li + li { margin-inline-start: 1rem; }
.blog .tags li.chevron + li { margin-inline-start: 0 }
.blog .tags .chevron {
align-items: center;
border: 0;
border-radius: 0;
color: var(--tag-spacer-foreground-color);
background-color: inherit;
display: flex;
justify-content: center;
margin-inline-start: 0;
padding-inline-start: 1px;
width: 2rem;
}
.blog .tags .chevron:hover {
color: var(--tag-background-color);
background-color: inherit;
2022-09-25 07:52:22 -07:00
}