hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Details open animation and custom arrow, make icons use current text color

Browse Source
This commit is contained in:
daudix
2024-09-15 18:14:39 +03:00
parent 958ba09571
commit 75d2e5476c
10 changed files with 84 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
sass/_alerts.scss
View File

@ -7,7 +7,6 @@ blockquote {
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.59 0 0 3.59 0 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0 2c3.332 0 6 2.668 6 6s-2.668 6-6 6-6-2.668-6-6 2.668-6 6-6m0 1.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25M6.477 7A.5.5 0 0 0 6.5 8H7v3h-.5a.499.499 0 1 0 0 1h3a.499.499 0 1 0 0-1H9V7zm0 0'/%3E%3C/svg%3E");
background-color: var(--blue-fg);
}
}
}
@ -20,7 +19,6 @@ blockquote {
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.996 0C5.16 0 2.703 2 2.125 4.777c-.527 2.535.688 5.036 2.871 6.325L5 12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-.898c2.184-1.293 3.402-3.797 2.871-6.332A6.01 6.01 0 0 0 7.996 0m0 2a3.994 3.994 0 0 1 3.918 3.18 3.99 3.99 0 0 1-2.312 4.484 1.01 1.01 0 0 0-.602.914V11H6.996v-.418a1 1 0 0 0-.598-.914 3.994 3.994 0 0 1-2.316-4.484A3.99 3.99 0 0 1 7.996 2m-.998 4a.5.5 0 0 0-.354.852l1 1a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.707.507.507 0 0 0-.707 0l-.649.648-.644-.648A.5.5 0 0 0 6.998 6M6 14v1c0 .555.445 1 1 1h2c.555 0 1-.445 1-1v-1z'/%3E%3C/svg%3E");
background-color: var(--green-fg);
}
}
}
@ -33,7 +31,6 @@ blockquote {
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 0C1.355 0 0 1.355 0 3v7c0 1.256.893 2.14 2 2.584V15a1 1 0 0 0 1.707.707L6.414 13H13c1.645 0 3-1.355 3-3V3c0-1.645-1.355-3-3-3zm0 2h10c.571 0 1 .429 1 1v7c0 .571-.429 1-1 1H6a1 1 0 0 0-.707.293L4 12.586V12a1 1 0 0 0-1-1c-.571 0-1-.429-1-1V3c0-.571.429-1 1-1m5 1c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1s1-.446 1-1V4c0-.554-.446-1-1-1m0 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
background-color: var(--purple-fg);
}
}
}
@ -46,7 +43,6 @@ blockquote {
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
background-color: var(--yellow-fg);
}
}
}
@ -59,7 +55,6 @@ blockquote {
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 5v6a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h6a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 16 11V5a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 11 0zm.414 2h5.172L14 5.414v5.172L10.586 14H5.414L2 10.586V5.414zM8 4c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V5c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
background-color: var(--red-fg);
}
}
}

24
sass/_article-list.scss
View File

@ -30,6 +30,25 @@
h3 {
margin: 0;
a:hover::after {
transform: none;
opacity: 1;
}
a::after {
display: inline-block;
vertical-align: -0.0625em;
transform: translateX(-0.25rem);
opacity: 0;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E");
transition: var(--transition);
margin-inline-start: 0.25rem;
background-color: currentColor;
width: 1rem;
height: 1rem;
content: "";
}
}
.tags {
@ -261,7 +280,6 @@
.icon {
mask-image: var(--icon);
background-color: var(--fg-muted-5);
}
}
@ -271,7 +289,6 @@
.icon {
mask-image: var(--icon);
background-color: var(--purple-fg);
}
}
@ -281,7 +298,6 @@
.icon {
mask-image: var(--icon);
background-color: var(--yellow-fg);
}
}
@ -291,7 +307,6 @@
.icon {
mask-image: var(--icon);
background-color: var(--red-fg);
}
}
@ -301,7 +316,6 @@
.icon {
mask-image: var(--icon);
background-color: var(--brown-fg);
}
}

4
sass/_comments.scss
View File

@ -274,7 +274,7 @@
.icon {
vertical-align: -0.125em;
transition: transform var(--transition-longer);
transition: var(--transition-longer);
margin-inline-end: 0.25rem;
width: 1rem;
height: 1rem;
@ -303,7 +303,6 @@
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E");
background-color: var(--purple-fg);
}
}
@ -320,7 +319,6 @@
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
background-color: var(--yellow-fg);
}
}
}

7
sass/_footer.scss
View File

@ -84,14 +84,12 @@
transition: var(--transition);
border-radius: 999px;
padding: 0.5rem;
color: var(--fg-muted-4);
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
.icon {
background-color: var(--fg-muted-5);
}
color: var(--fg-muted-5);
}
&:active {
@ -101,7 +99,6 @@
.icon {
mask-image: var(--icon);
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1.5rem;
height: 1.5rem;
}

3
sass/_icon.scss
View File

@ -1,6 +1,7 @@
.icon {
i.icon {
display: inline-block;
mask-size: cover;
background-color: currentColor;
font-style: normal;
font-variant: normal;
line-height: 0;

82
sass/_nav.scss
View File

@ -72,7 +72,6 @@
border-radius: 999px;
background-color: transparent;
padding: 0.375rem 0.75rem;
color: var(--fg-muted-4);
font-weight: bold;
list-style: none;
text-align: center;
@ -87,14 +86,6 @@
&:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
.icon {
background-color: var(--contrast-color);
}
}
.icon {
background-color: var(--accent-color);
}
}
@ -104,10 +95,6 @@
&:hover {
color: var(--fg-color);
.icon {
background-color: var(--fg-color);
}
}
&.active {
@ -115,14 +102,6 @@
&:hover {
color: var(--contrast-color);
.icon {
background-color: var(--contrast-color);
}
}
.icon {
background-color: var(--accent-color);
}
}
@ -131,7 +110,6 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E");
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--fg-muted-5);
width: 1rem;
height: 1rem;
}
@ -154,14 +132,12 @@
#theme-switcher summary,
#theme-switcher button,
summary {
color: var(--fg-muted-4);
&:hover {
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
.icon {
background-color: var(--fg-muted-5);
}
}
&:active {
@ -170,12 +146,16 @@
}
.circle {
padding: 0.375rem 0.625rem;
padding: 0.5rem 0.625rem;
line-height: normal;
&::before {
display: none;
}
.icon {
vertical-align: -0.125em;
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1rem;
height: 1rem;
}
@ -204,41 +184,17 @@
background-color: transparent;
padding: 0;
&[open] {
.arrow {
transform: scaleY(-100%);
}
&[open] ul {
animation: dropdown-open var(--transition);
ul {
animation: dropdown-open var(--transition);
@keyframes dropdown-open {
from {
transform: translate(-50%, 0);
opacity: 0;
}
@keyframes dropdown-open {
from {
transform: translate(-50%, 0);
opacity: 0;
}
}
}
summary {
&::marker,
&::-webkit-details-marker {
display: none;
}
.arrow {
vertical-align: -0.125em;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E");
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: var(--fg-muted-4);
width: 1rem;
height: 1rem;
}
}
ul {
-webkit-backdrop-filter: var(--blur);
position: absolute;
@ -303,17 +259,11 @@
.active {
background-color: var(--accent-color-alpha);
.icon {
background-color: var(--accent-color);
}
color: var(--accent-color);
&:hover {
background-color: var(--accent-color);
.icon {
background-color: var(--contrast-color);
}
color: var(--contrast-color);
}
}

9
sass/_pre-container.scss
View File

@ -26,16 +26,14 @@
border-radius: var(--rounded-corner-small);
background-color: transparent;
padding: 0.5rem;
color: var(--fg-muted-4);
line-height: 0;
&:hover {
cursor: pointer;
box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
i {
background-color: var(--fg-muted-5);
}
color: var(--fg-muted-5);
}
&:active {
@ -55,7 +53,6 @@
.icon {
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1rem;
height: 1rem;
}
@ -67,10 +64,10 @@
button {
box-shadow: var(--edge-highlight);
background-color: var(--accent-color-alpha);
color: var(--accent-color);
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
background-color: var(--accent-color);
}
}

3
sass/_statements.scss
View File

@ -36,7 +36,6 @@
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
background-color: var(--purple-fg);
}
}
@ -46,7 +45,6 @@
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
background-color: var(--red-fg);
}
}
@ -56,7 +54,6 @@
.icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
background-color: var(--yellow-fg);
}
}
}

37
sass/_typography.scss
View File

@ -233,13 +233,48 @@ details {
background-color: var(--fg-muted-1);
padding: 0.875rem 1rem;
summary:hover {
summary {
cursor: pointer;
list-style: none;
&::marker,
&::-webkit-details-marker {
display: none;
}
&::before {
display: inline-block;
vertical-align: -0.125em;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E");
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: currentColor;
width: 1rem;
height: 1rem;
content: "";
}
}
:last-child {
margin-block-end: 0;
}
&[open] summary {
&::before {
transform: scaleY(-100%);
}
&~* {
animation: details-open var(--transition);
@keyframes details-open {
from {
transform: translateY(-1rem);
opacity: 0;
}
}
}
}
}
figure {

10
sass/_zola-anchor.scss
View File

@ -14,9 +14,10 @@ h6 {
opacity: 0;
transition: var(--transition);
margin: 0 0.25em;
color: var(--fg-muted-4);
&:hover .icon {
background-color: var(--accent-color);
&:hover {
color: var(--accent-color);
}
&:active {
@ -31,12 +32,11 @@ h6 {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
mask-size: cover;
transition: var(--transition);
background-color: var(--fg-muted-4);
width: 1em;
height: 1em;
}
}
:target .zola-anchor .icon {
background-color: var(--accent-color-alpha);
:target .zola-anchor {
color: var(--accent-color-alpha);
}