134 lines
2.2 KiB
CSS
134 lines
2.2 KiB
CSS
/* Article Specific Styling Below */
|
|
article {
|
|
display: flex;
|
|
max-width: min(700px, 90vw);
|
|
align-self: center;
|
|
flex-direction: column;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
article > blockquote {
|
|
align-self: center;
|
|
}
|
|
|
|
article > p {
|
|
padding: 0;
|
|
margin-top: .4rem;
|
|
margin-bottom: .4rem;
|
|
}
|
|
|
|
.article-name {
|
|
color: var(--springGreen);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.page-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.article-summary {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.article-tags > ul {
|
|
display: flex;
|
|
justify-items: flex-start;
|
|
gap: 8px;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.article-tags a {
|
|
color: unset;
|
|
background-color: color-mix(in srgb, var() 25%, transparent);
|
|
}
|
|
.article-tags > ul > li {
|
|
width: auto;
|
|
display: inline;
|
|
float: none;
|
|
}
|
|
|
|
.article-tags > ul > li:not(:last-child)::after {
|
|
content: " •";
|
|
}
|
|
|
|
.article-dates {
|
|
color: var(--fujiGray);
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: space-evenly;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.article-published::before {
|
|
content: "Published: ";
|
|
}
|
|
|
|
.article-last-updated::before {
|
|
content: "Last Updated: ";
|
|
}
|
|
|
|
.articles-container {
|
|
width: min(600px, 90vw);
|
|
}
|
|
|
|
.articles-container > ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.articles-container > ul > li {
|
|
list-style-type: none;
|
|
margin: 10px;
|
|
}
|
|
|
|
.article-frontmatter {
|
|
background-color: var(--winterGreen);
|
|
font-family: sans-serif;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.article-frontmatter:hover {
|
|
background-color: color-mix(in srgb, var(--autumnGreen) 35%, transparent);
|
|
transition-duration: 0.25s;
|
|
}
|
|
|
|
.article-frontmatter > a {
|
|
text-decoration: none;
|
|
color: var(--fujiWhite);
|
|
}
|
|
|
|
.article-frontmatter > a:hover {
|
|
font-weight: unset;
|
|
text-decoration: none;
|
|
background-color: unset;
|
|
color: var(--fujiWhite);
|
|
}
|
|
|
|
.article-frontmatter > a > .article-name {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.article-frontmatter > a > .article-dates {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.article-frontmatter-tags > ul {
|
|
gap: 8px;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.article-frontmatter-tags a {
|
|
color: unset;
|
|
background-color: color-mix(in srgb, var() 25%, transparent);
|
|
}
|
|
|
|
.article-frontmatter-tags > ul > li {
|
|
display: inline;
|
|
}
|
|
|
|
.article-frontmatter-tags > ul > li:not(:last-child)::after {
|
|
content: " •";
|
|
}
|