mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[feih] styles tweaks

This commit is contained in:
Yangshun 2025-06-19 08:00:34 +08:00
parent bf8f0747ca
commit fd15fbf5af
2 changed files with 63 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
website/src/components/SidebarAd/styles.module.css
View File

@ -1,47 +1,53 @@
/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */ /* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 { @property --border-angle-1 {
syntax: "<angle>"; syntax: '<angle>';
inherits: true; inherits: true;
initial-value: 0deg; initial-value: 0deg;
} }
@property --border-angle-2 { @property --border-angle-2 {
syntax: "<angle>"; syntax: '<angle>';
inherits: true; inherits: true;
initial-value: 90deg; initial-value: 90deg;
} }
@property --border-angle-3 { @property --border-angle-3 {
syntax: "<angle>"; syntax: '<angle>';
inherits: true; inherits: true;
initial-value: 180deg; initial-value: 180deg;
} }
:root { :root {
--color-one: #A07CFE; --color-one: #a07cfe;
--color-two: #FE8FB5; --color-two: #fe8fb5;
--color-three: #FFBE7B; --color-three: #ffbe7b;
--background: #fff; --background: #fff;
--foreground: #18181b; --foreground: #18181b;
--border-size: 1.5px; --border-size: 1.5px;
--border-radius: 0.75rem; --border-radius: 0.75rem;
} }
[data-theme="dark"] { [data-theme='dark'] {
--background: #18181b; --background: #18181b;
--foreground: #fff; --foreground: #fff;
} }
@keyframes rotateBackground { @keyframes rotateBackground {
to { --border-angle-1: 360deg; } to {
--border-angle-1: 360deg;
}
} }
@keyframes rotateBackground2 { @keyframes rotateBackground2 {
to { --border-angle-2: -270deg; } to {
--border-angle-2: -270deg;
}
} }
@keyframes rotateBackground3 { @keyframes rotateBackground3 {
to { --border-angle-3: 540deg; } to {
--border-angle-3: 540deg;
}
} }
.container { .container {
@ -58,35 +64,36 @@
display: flex; display: flex;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: transparent; background-color: transparent;
background-image: conic-gradient( background-image:
from var(--border-angle-1) at 10% 15%, conic-gradient(
transparent, from var(--border-angle-1) at 10% 15%,
var(--color-one) 10%, transparent,
transparent 30%, var(--color-one) 10%,
transparent transparent 30%,
), transparent
conic-gradient( ),
from var(--border-angle-2) at 70% 60%, conic-gradient(
transparent, from var(--border-angle-2) at 70% 60%,
var(--color-two) 10%, transparent,
transparent 60%, var(--color-two) 10%,
transparent transparent 60%,
), transparent
conic-gradient( ),
from var(--border-angle-3) at 50% 20%, conic-gradient(
transparent, from var(--border-angle-3) at 50% 20%,
var(--color-three) 10%, transparent,
transparent 50%, var(--color-three) 10%,
transparent transparent 50%,
); transparent
);
animation: animation:
rotateBackground 3s linear infinite, rotateBackground 3s linear infinite,
rotateBackground2 8s linear infinite, rotateBackground2 8s linear infinite,
rotateBackground3 13s linear infinite; rotateBackground3 13s linear infinite;
}
&:hover { .container:hover {
text-decoration: none; text-decoration: none;
}
} }
.container > * { .container > * {
@ -96,7 +103,7 @@
color: var(--foreground); color: var(--foreground);
} }
[data-theme^="dark"] .container { [data-theme^='dark'] .container {
border: 0; border: 0;
} }
@ -118,14 +125,15 @@
color: var(--ifm-color-content-secondary); color: var(--ifm-color-content-secondary);
font-size: 0.75rem; font-size: 0.75rem;
margin-bottom: 0; margin-bottom: 0;
strong, u {
color: var(--ifm-color-content);
font-weight: 500;
}
} }
[data-theme="dark"] .tagline { .tagline strong,
.tagline u {
color: var(--ifm-color-content);
font-weight: 500;
}
[data-theme='dark'] .tagline {
color: #a1a1aa; color: #a1a1aa;
} }

26
website/src/css/custom.css
View File

@ -26,9 +26,10 @@
--ifm-color-primary-lighter: #dc4b8d; --ifm-color-primary-lighter: #dc4b8d;
--ifm-color-primary-lightest: #e26ca2; --ifm-color-primary-lightest: #e26ca2;
--ifm-font-family-base: 'Inter var', -apple-system, BlinkMacSystemFont, --ifm-font-family-base:
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Droid Sans', 'Helvetica Neue', sans-serif; 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
--ifm-footer-padding-vertical: 5rem; --ifm-footer-padding-vertical: 5rem;
} }
@ -47,11 +48,8 @@ strong {
font-weight: 600; font-weight: 600;
} }
html[data-theme='dark'] strong { .footer,
color: #fff; .footer-dark {
}
.footer, .footer-dark {
--ifm-footer-background-color: #18181b; --ifm-footer-background-color: #18181b;
} }
@ -76,12 +74,12 @@ header h1 {
line-height: 1.2em; line-height: 1.2em;
} }
html[data-theme="dark"] .markdown h1, html[data-theme='dark'] .markdown h1,
html[data-theme="dark"] .markdown h2, html[data-theme='dark'] .markdown h2,
html[data-theme="dark"] .markdown h3, html[data-theme='dark'] .markdown h3,
html[data-theme="dark"] .markdown h4, html[data-theme='dark'] .markdown h4,
html[data-theme="dark"] .markdown h5, html[data-theme='dark'] .markdown h5,
html[data-theme="dark"] .markdown h6 { html[data-theme='dark'] .markdown h6 {
color: #fff; color: #fff;
} }