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

94
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 */
@property --border-angle-1 {
syntax: "<angle>";
syntax: '<angle>';
inherits: true;
initial-value: 0deg;
}
@property --border-angle-2 {
syntax: "<angle>";
syntax: '<angle>';
inherits: true;
initial-value: 90deg;
}
@property --border-angle-3 {
syntax: "<angle>";
syntax: '<angle>';
inherits: true;
initial-value: 180deg;
}
:root {
--color-one: #A07CFE;
--color-two: #FE8FB5;
--color-three: #FFBE7B;
--color-one: #a07cfe;
--color-two: #fe8fb5;
--color-three: #ffbe7b;
--background: #fff;
--foreground: #18181b;
--border-size: 1.5px;
--border-radius: 0.75rem;
}
[data-theme="dark"] {
[data-theme='dark'] {
--background: #18181b;
--foreground: #fff;
}
@keyframes rotateBackground {
to { --border-angle-1: 360deg; }
to {
--border-angle-1: 360deg;
}
}
@keyframes rotateBackground2 {
to { --border-angle-2: -270deg; }
to {
--border-angle-2: -270deg;
}
}
@keyframes rotateBackground3 {
to { --border-angle-3: 540deg; }
to {
--border-angle-3: 540deg;
}
}
.container {
@ -58,45 +64,46 @@
display: flex;
border-radius: var(--border-radius);
background-color: transparent;
background-image: conic-gradient(
from var(--border-angle-1) at 10% 15%,
transparent,
var(--color-one) 10%,
transparent 30%,
transparent
),
conic-gradient(
from var(--border-angle-2) at 70% 60%,
transparent,
var(--color-two) 10%,
transparent 60%,
transparent
),
conic-gradient(
from var(--border-angle-3) at 50% 20%,
transparent,
var(--color-three) 10%,
transparent 50%,
transparent
);
animation:
background-image:
conic-gradient(
from var(--border-angle-1) at 10% 15%,
transparent,
var(--color-one) 10%,
transparent 30%,
transparent
),
conic-gradient(
from var(--border-angle-2) at 70% 60%,
transparent,
var(--color-two) 10%,
transparent 60%,
transparent
),
conic-gradient(
from var(--border-angle-3) at 50% 20%,
transparent,
var(--color-three) 10%,
transparent 50%,
transparent
);
animation:
rotateBackground 3s linear infinite,
rotateBackground2 8s linear infinite,
rotateBackground3 13s linear infinite;
}
&:hover {
text-decoration: none;
}
.container:hover {
text-decoration: none;
}
.container > * {
background: var(--background);
background: var(--background);
padding: 0.75rem;
border-radius: calc(var(--border-radius) - var(--border-size));
color: var(--foreground);
}
[data-theme^="dark"] .container {
[data-theme^='dark'] .container {
border: 0;
}
@ -118,14 +125,15 @@
color: var(--ifm-color-content-secondary);
font-size: 0.75rem;
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;
}

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

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