5ab56faadd
Partially fixes issue #3256 by updating SASS syntax in main SCSS files. To fully address the issue, FontAwesome should be updated to `v7.x` and Tabler to `v3.30` or higher (see Tabler fix [here](https://github.com/tabler/tabler-icons/pull/1256)), where the SCSS has been fixed. --------- Signed-off-by: George Araújo <george.gcac@gmail.com> Co-authored-by: George Araújo <george.gcac@gmail.com>
168 lines
2.9 KiB
SCSS
168 lines
2.9 KiB
SCSS
/*******************************************************************************
|
|
* Blog post and listing styles
|
|
******************************************************************************/
|
|
|
|
.header-bar {
|
|
border-bottom: 1px solid var(--global-divider-color);
|
|
text-align: center;
|
|
padding-top: 2rem;
|
|
padding-bottom: 3rem;
|
|
|
|
h1 {
|
|
color: var(--global-theme-color);
|
|
font-size: 5rem;
|
|
}
|
|
}
|
|
|
|
.tag-category-list {
|
|
border-bottom: 1px solid var(--global-divider-color);
|
|
text-align: center;
|
|
padding-top: 1rem;
|
|
|
|
ul {
|
|
justify-content: center;
|
|
display: flow-root;
|
|
|
|
p,
|
|
li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
padding: 1rem 0.5rem;
|
|
color: var(--global-text-color-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-title {
|
|
mjx-container[jax="CHTML"][display="true"] {
|
|
display: unset;
|
|
}
|
|
}
|
|
|
|
.post-list {
|
|
margin: 0;
|
|
margin-bottom: 40px;
|
|
padding: 0;
|
|
|
|
li {
|
|
border-bottom: 1px solid var(--global-divider-color);
|
|
list-style: none;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
|
|
.post-meta {
|
|
color: var(--global-text-color-light);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post-tags {
|
|
color: var(--global-text-color-light);
|
|
font-size: 0.875rem;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--global-text-color);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--global-theme-color);
|
|
}
|
|
}
|
|
|
|
mjx-container[jax="CHTML"][display="true"] {
|
|
display: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
.page-item {
|
|
.page-link {
|
|
color: var(--global-text-color);
|
|
padding: 0.75rem 1.15rem;
|
|
|
|
&:hover {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
&.active .page-link {
|
|
color: #fff;
|
|
background-color: var(--global-theme-color);
|
|
|
|
&:hover {
|
|
background-color: var(--global-theme-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post {
|
|
.post-meta {
|
|
color: var(--global-text-color-light);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post-tags {
|
|
color: var(--global-text-color-light);
|
|
font-size: 0.875rem;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 1rem;
|
|
|
|
a {
|
|
color: var(--global-text-color-light);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--global-theme-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.featured-posts {
|
|
a {
|
|
color: var(--global-text-color-light);
|
|
text-decoration: none;
|
|
|
|
.card-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--global-theme-color);
|
|
|
|
.card-title {
|
|
color: var(--global-theme-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-meta {
|
|
color: var(--global-text-color-light);
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0;
|
|
padding-top: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.post-description {
|
|
margin-bottom: 2rem;
|
|
font-size: 0.875rem;
|
|
|
|
a {
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
color: var(--global-theme-color);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|