overhauled old theme
This commit is contained in:
parent
f18a342ae5
commit
fb24c6a302
82 changed files with 1378 additions and 1371 deletions
|
|
@ -6,8 +6,10 @@
|
|||
}
|
||||
article {
|
||||
margin: 0 auto;
|
||||
font-family: "Rubik", sans-serif;
|
||||
max-width: var(--post);
|
||||
& > [aria-label="Postscript"]::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
& section:not(section:has(p)) {
|
||||
display: flex;
|
||||
gap: var(--pad-l);
|
||||
|
|
@ -17,7 +19,12 @@ article {
|
|||
border-radius: var(--round);
|
||||
width: 66%;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: var(--pad-m);
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
|
|
@ -26,7 +33,6 @@ article {
|
|||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
|
|
@ -36,14 +42,16 @@ article {
|
|||
}
|
||||
}
|
||||
}
|
||||
[aria-label="Addendum"], [aria-label="Post warning"], article aside {
|
||||
[aria-label="Addendum"],
|
||||
[aria-label="Post warning"],
|
||||
article aside {
|
||||
margin: var(--pad-l) 0;
|
||||
padding: var(--pad-l);
|
||||
}
|
||||
article > [aria-label="Addendum"] {
|
||||
border-image-slice: 1;
|
||||
border-image-width: 2px;
|
||||
border-image-outset: 4px;
|
||||
border-image-slice: 1;
|
||||
border-image-width: 2px;
|
||||
border-image-outset: 4px;
|
||||
}
|
||||
|
||||
article > [aria-label="Postscript"] {
|
||||
|
|
@ -66,48 +74,46 @@ article > [aria-label="Postscript"] {
|
|||
margin-top: inherit;
|
||||
margin-left: inherit;
|
||||
margin-right: var(--avatar);
|
||||
margin-bottom: var(--pad-l);
|
||||
border-radius: var(--round);
|
||||
border-bottom-right-radius: 0;
|
||||
width: fit-content;
|
||||
padding: var(--pad-m);
|
||||
background-color: #0060df;
|
||||
color: #fff;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
word-wrap: anywhere;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a76f0;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--pad-l);
|
||||
& a:has(img:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
|
||||
align-items: center;
|
||||
gap: var(--pad-m);
|
||||
}
|
||||
& > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
max-height: var(--image);
|
||||
}
|
||||
}
|
||||
& a {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
& p a:has(img:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
|
||||
align-items: center;
|
||||
gap: var(--pad-m);
|
||||
}
|
||||
& p > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
max-height: var(--image);
|
||||
}
|
||||
& img:not(p a > img) {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 100%;
|
||||
& span:has([alt]) {
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
display: flex;
|
||||
float: right;
|
||||
& [alt="Profile picture"] {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 100%;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,4 +171,15 @@ article > [aria-label="Postscript"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
article > [aria-label="Postscript"] {
|
||||
& p,
|
||||
p > img {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#blog #posts a {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue