|
|
|
@ -23,8 +23,21 @@
|
|
|
|
|
--link-underline-hover: #3800ff;
|
|
|
|
|
--accent-color: #25dd39;
|
|
|
|
|
|
|
|
|
|
--background-color: #fbf6de;
|
|
|
|
|
--background-image: inherit;
|
|
|
|
|
--background-color: #fff6ca;
|
|
|
|
|
--article-background-color: #fff8d3;
|
|
|
|
|
--background-image: linear-gradient(
|
|
|
|
|
30deg,
|
|
|
|
|
hsl(50deg 100% 90%) 0%,
|
|
|
|
|
hsl(51deg 96% 88%) 11%,
|
|
|
|
|
hsl(51deg 93% 86%) 22%,
|
|
|
|
|
hsl(52deg 91% 84%) 33%,
|
|
|
|
|
hsl(53deg 89% 82%) 44%,
|
|
|
|
|
hsl(53deg 88% 80%) 56%,
|
|
|
|
|
hsl(54deg 87% 78%) 67%,
|
|
|
|
|
hsl(54deg 86% 76%) 78%,
|
|
|
|
|
hsl(54deg 86% 73%) 89%,
|
|
|
|
|
hsl(55deg 85% 71%) 100%
|
|
|
|
|
);
|
|
|
|
|
--image-border-color: #40dc7b87;
|
|
|
|
|
|
|
|
|
|
--backdrop-color: rgb(251, 246, 2228);
|
|
|
|
@ -47,6 +60,7 @@
|
|
|
|
|
--dialog-background: #011d37;
|
|
|
|
|
--textarea-background: #002644;
|
|
|
|
|
|
|
|
|
|
--article-background-color: #011628;
|
|
|
|
|
--background-image: linear-gradient(
|
|
|
|
|
25deg,
|
|
|
|
|
hsl(206deg 100% 14%) 0%,
|
|
|
|
@ -158,9 +172,10 @@ footer {
|
|
|
|
|
|
|
|
|
|
.posts {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 500px;
|
|
|
|
|
width: 535px;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 96px;
|
|
|
|
|
padding-bottom: 96px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.posts img {
|
|
|
|
@ -264,6 +279,35 @@ article:only-child {
|
|
|
|
|
margin-top: 64px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
article {
|
|
|
|
|
background-color: var(--article-background-color);
|
|
|
|
|
padding: 16px;
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
box-shadow: var(--shadow-elevation-medium);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
article footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: end;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon svg {
|
|
|
|
|
fill: currentColor;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.icon {
|
|
|
|
|
border-bottom: 2px solid var(--link-underline);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a:hover.icon {
|
|
|
|
|
border-bottom: 2px solid var(--link-underline-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|