106 lines
2.6 KiB
CSS
106 lines
2.6 KiB
CSS
#blog {
|
|
background-attachment: local, fixed;
|
|
background-color: var(--light);
|
|
background-image: var(--dot),
|
|
linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%);
|
|
background-size: 6px, contain;
|
|
background-blend-mode: overlay, normal;
|
|
animation: none;
|
|
& article {
|
|
border-radius: 0;
|
|
background-color: var(--citrus-light);
|
|
background-image: var(--noise);
|
|
background-size: auto;
|
|
background-repeat: repeat;
|
|
box-shadow: inset 0 -2rem 3rem -4rem var(--dark), var(--shadow-heavy);
|
|
& aside {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
background-color: var(--citrus-mix-light);
|
|
border-color: var(--citrus-mix);
|
|
border-radius: 0;
|
|
}
|
|
& pre {
|
|
border-radius: 4px;
|
|
color: var(--citrus-secondary);
|
|
background-color: var(--citrus-dark-extra);
|
|
background-size: 4px;
|
|
}
|
|
& [aria-label="Post warning"] {
|
|
background-color: var(--citrus-primary);
|
|
}
|
|
& [aria-label="Addendum"] {
|
|
border-image-source: linear-gradient(
|
|
45deg,
|
|
var(--citrus-primary),
|
|
var(--citrus-secondary)
|
|
);
|
|
background-color: var(--citrus-primary);
|
|
}
|
|
& s {
|
|
text-decoration-color: #d00;
|
|
}
|
|
& [aria-label="Postscript"] {
|
|
& span:has([alt]) {
|
|
&::after {
|
|
content: "";
|
|
width: calc(var(--avatar) - 10px);
|
|
height: calc(var(--avatar) - 10px);
|
|
position: absolute;
|
|
margin: 5px;
|
|
background-image: linear-gradient(
|
|
color-mix(in lch, var(--light), transparent),
|
|
transparent
|
|
);
|
|
box-shadow: inset 0 0 2px 0 var(--dark);
|
|
}
|
|
}
|
|
& [alt="Profile picture"] {
|
|
color: unset;
|
|
border-radius: inherit;
|
|
border: 2px solid;
|
|
border-image-source: linear-gradient(
|
|
to bottom,
|
|
var(--citrus-mix-light),
|
|
var(--citrus-secondary)
|
|
);
|
|
border-image-slice: 1;
|
|
border-width: 3px;
|
|
box-sizing: inherit;
|
|
padding: 2px;
|
|
background-image: radial-gradient(
|
|
ellipse at 50% -0%,
|
|
var(--light) 20%,
|
|
var(--dark) 150%
|
|
), var(--pansexual);
|
|
background-blend-mode: overlay, normal;
|
|
background-size: cover, 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
box-shadow: 0 0 0 2px var(--citrus-mix-dark),
|
|
inset 0 0 0 2px var(--citrus-mix), var(--shadow-light);
|
|
font-size: 0;
|
|
}
|
|
}
|
|
}
|
|
& #posts {
|
|
& a {
|
|
border-width: 4px;
|
|
box-shadow: var(--shadow-light);
|
|
border-radius: 0;
|
|
& p {
|
|
color: initial;
|
|
}
|
|
& p:not(:last-child) {
|
|
color: var(--citrus-dark);
|
|
}
|
|
&:not(:hover, :focus) {
|
|
background-color: var(--citrus-light);
|
|
border-color: var(--citrus-light);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#blog:not(:has(#posts)) header {
|
|
text-align: initial !important;
|
|
}
|