Vladimir nett00n Budylnikov
3421275d37
Some checks failed
CI/CD Pipeline / Lint (pull_request) Has been cancelled
CI/CD Pipeline / Test (pull_request) Has been cancelled
CI/CD Pipeline / Build (386, linux, linkbeam-linux-386) (pull_request) Has been cancelled
CI/CD Pipeline / Build (386, windows, linkbeam-windows-386.exe) (pull_request) Has been cancelled
CI/CD Pipeline / Build (amd64, darwin, linkbeam-darwin-amd64) (pull_request) Has been cancelled
CI/CD Pipeline / Build (amd64, linux, linkbeam-linux-amd64) (pull_request) Has been cancelled
CI/CD Pipeline / Build (amd64, windows, linkbeam-windows-amd64.exe) (pull_request) Has been cancelled
CI/CD Pipeline / Build (arm, 7, linux, linkbeam-linux-armv7) (pull_request) Has been cancelled
CI/CD Pipeline / Build (arm64, darwin, linkbeam-darwin-arm64) (pull_request) Has been cancelled
CI/CD Pipeline / Build (arm64, linux, linkbeam-linux-arm64) (pull_request) Has been cancelled
CI/CD Pipeline / Build (arm64, windows, linkbeam-windows-arm64.exe) (pull_request) Has been cancelled
CI/CD Pipeline / Build Docker Image (pull_request) Has been cancelled
CI/CD Pipeline / Create Release (pull_request) Has been cancelled
306 lines
7.3 KiB
CSS
306 lines
7.3 KiB
CSS
/* nord.css - Nord theme for LinkBeam (Automatic light/dark) */
|
|
/* Based on the Nord color palette: https://www.nordtheme.com/ */
|
|
|
|
/* Default: Light mode */
|
|
:root {
|
|
/* Nord Snow Storm (light whites/grays) */
|
|
--bg-color: #eceff4;
|
|
--text-color: #2e3440;
|
|
--text-secondary: #3b4252;
|
|
--link-bg: #e5e9f0;
|
|
--link-hover: #d8dee9;
|
|
--border-color: #d8dee9;
|
|
|
|
/* Nord Frost (blue accent colors) */
|
|
--accent-color: #5e81ac;
|
|
--accent-light: #81a1c1;
|
|
|
|
/* Shadows with lighter tones for Nord Light */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
|
|
/* Gradients using Nord Snow Storm shades */
|
|
--bg-gradient-start: #eceff4;
|
|
--bg-gradient-end: #e5e9f0;
|
|
|
|
/* Glow effects using Nord Frost colors */
|
|
--glow-color: rgba(94, 129, 172, 0.3);
|
|
--glow-hover: rgba(94, 129, 172, 0.2);
|
|
--shimmer: rgba(94, 129, 172, 0.1);
|
|
}
|
|
|
|
/* System dark mode preference */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Nord Polar Night (dark blues/grays) */
|
|
--bg-color: #2e3440;
|
|
--text-color: #eceff4;
|
|
--text-secondary: #d8dee9;
|
|
--link-bg: #3b4252;
|
|
--link-hover: #434c5e;
|
|
--border-color: #4c566a;
|
|
|
|
/* Nord Frost (blue accent colors) */
|
|
--accent-color: #88c0d0;
|
|
--accent-light: #8fbcbb;
|
|
|
|
/* Shadows with darker tones for Nord */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Gradients using Nord Polar Night shades */
|
|
--bg-gradient-start: #2e3440;
|
|
--bg-gradient-end: #3b4252;
|
|
|
|
/* Glow effects using Nord Frost colors */
|
|
--glow-color: rgba(136, 192, 208, 0.4);
|
|
--glow-hover: rgba(136, 192, 208, 0.3);
|
|
--shimmer: rgba(136, 192, 208, 0.15);
|
|
}
|
|
}
|
|
|
|
/* Manual overrides (highest specificity) */
|
|
html[data-theme="light"] {
|
|
/* Nord Snow Storm (light whites/grays) */
|
|
--bg-color: #eceff4;
|
|
--text-color: #2e3440;
|
|
--text-secondary: #3b4252;
|
|
--link-bg: #e5e9f0;
|
|
--link-hover: #d8dee9;
|
|
--border-color: #d8dee9;
|
|
|
|
/* Nord Frost (blue accent colors) */
|
|
--accent-color: #5e81ac;
|
|
--accent-light: #81a1c1;
|
|
|
|
/* Shadows with lighter tones for Nord Light */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
|
|
/* Gradients using Nord Snow Storm shades */
|
|
--bg-gradient-start: #eceff4;
|
|
--bg-gradient-end: #e5e9f0;
|
|
|
|
/* Glow effects using Nord Frost colors */
|
|
--glow-color: rgba(94, 129, 172, 0.3);
|
|
--glow-hover: rgba(94, 129, 172, 0.2);
|
|
--shimmer: rgba(94, 129, 172, 0.1);
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
/* Nord Polar Night (dark blues/grays) */
|
|
--bg-color: #2e3440;
|
|
--text-color: #eceff4;
|
|
--text-secondary: #d8dee9;
|
|
--link-bg: #3b4252;
|
|
--link-hover: #434c5e;
|
|
--border-color: #4c566a;
|
|
|
|
/* Nord Frost (blue accent colors) */
|
|
--accent-color: #88c0d0;
|
|
--accent-light: #8fbcbb;
|
|
|
|
/* Shadows with darker tones for Nord */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Gradients using Nord Polar Night shades */
|
|
--bg-gradient-start: #2e3440;
|
|
--bg-gradient-end: #3b4252;
|
|
|
|
/* Glow effects using Nord Frost colors */
|
|
--glow-color: rgba(136, 192, 208, 0.4);
|
|
--glow-hover: rgba(136, 192, 208, 0.3);
|
|
--shimmer: rgba(136, 192, 208, 0.15);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
|
|
background-attachment: fixed;
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding: 3rem 1rem 2rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header img {
|
|
border-radius: 50%;
|
|
border: 4px solid var(--link-bg);
|
|
box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-color);
|
|
margin-bottom: 1.5rem;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
header img:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: var(--shadow-lg), 0 0 20px var(--glow-color);
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0.5rem 0;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
header p {
|
|
margin: 0.75rem 0;
|
|
color: var(--text-secondary);
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
main {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 1rem 1rem 3rem;
|
|
}
|
|
|
|
main ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
main li {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
main a,
|
|
button,
|
|
main span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 1.25rem 1.5rem;
|
|
background-color: var(--link-bg);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: var(--shadow-sm);
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
font: inherit;
|
|
}
|
|
|
|
main span {
|
|
cursor: default;
|
|
}
|
|
|
|
main a::before,
|
|
button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
main a:hover::before,
|
|
button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
main a:hover,
|
|
button:hover {
|
|
background-color: var(--link-hover);
|
|
border-color: var(--accent-color);
|
|
transform: translateY(-4px) scale(1.02);
|
|
box-shadow: var(--shadow-md), 0 0 20px var(--glow-hover);
|
|
}
|
|
|
|
main a:active,
|
|
button:active {
|
|
transform: translateY(-2px) scale(1.01);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
main code {
|
|
background-color: rgba(127, 127, 127, 0.1);
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 0.25rem;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.9em;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem 1rem 3rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
footer p {
|
|
margin: 0;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Image module styles */
|
|
.image-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 1.25rem 1.5rem;
|
|
background-color: var(--link-bg);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.image-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md), 0 0 20px var(--glow-hover);
|
|
}
|
|
|
|
.image-item img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
border: 2px solid var(--border-color);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.image-caption {
|
|
margin: 1rem 0 0;
|
|
color: var(--text-color);
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|