Inital commit of Astro Website
This commit is contained in:
221
src/styles/global.css
Normal file
221
src/styles/global.css
Normal file
@@ -0,0 +1,221 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
::view-transition-group(root) {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
@property --accent-base {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: 214, 134, 249;
|
||||
}
|
||||
@property --bg-image {
|
||||
syntax: '<image>';
|
||||
inherits: true;
|
||||
initial-value: url('../assets/backgrounds/bubble.svg');
|
||||
}
|
||||
@property --bg-image-static {
|
||||
syntax: '<image>';
|
||||
inherits: true;
|
||||
initial-value: url('../assets/backgrounds/bubble-static.svg');
|
||||
}
|
||||
@property --glass-bg {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: rgba(20, 25, 35, 0.4);
|
||||
}
|
||||
@property --glass-border {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
@property --glass-blur {
|
||||
syntax: '<length>';
|
||||
inherits: true;
|
||||
initial-value: 16px;
|
||||
}
|
||||
@property --glass-shadow {
|
||||
syntax: '<shadow>';
|
||||
inherits: true;
|
||||
initial-value: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
}
|
||||
@property --text-main {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: #e0e7f0;
|
||||
}
|
||||
@property --text-muted {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: #92a1b6;
|
||||
}
|
||||
@property --bg-color {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: #0d0117;
|
||||
}
|
||||
@property --accent-base--default {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: 214, 134, 249;
|
||||
}
|
||||
@property --accent-base--portfolio {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: 255, 181, 102;
|
||||
}
|
||||
@property --accent-base--blog {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: 111, 221, 246;
|
||||
}
|
||||
@property --accent-base--book {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: 247, 110, 138;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg-color: #0d0117;
|
||||
--text-main: #e0e7f0;
|
||||
--text-muted: #92a1b6;
|
||||
|
||||
--glass-bg: rgba(20, 25, 35, 0.4);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-blur: 16px;
|
||||
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
||||
|
||||
--accent-base--default: 214, 134, 249;
|
||||
--accent-base--portfolio: 255, 181, 102;
|
||||
--accent-base--blog: 111, 221, 246;
|
||||
--accent-base--book: 247, 110, 138;
|
||||
--accent-base: var(--accent-base--default);
|
||||
}
|
||||
|
||||
body[data-theme="default"] {
|
||||
--bg-image: url('../assets/backgrounds/bubble.svg');
|
||||
--bg-image-static: url('../assets/backgrounds/bubble-static.svg');
|
||||
}
|
||||
|
||||
body[data-theme="portfolio"] {
|
||||
--accent-base: var(--accent-base--portfolio);
|
||||
--bg-image: url('../assets/backgrounds/dual-ripples.svg');
|
||||
--bg-image-static: url('../assets/backgrounds/dual-ripples-static.svg');
|
||||
}
|
||||
|
||||
body[data-theme="blog"] {
|
||||
--accent-base: var(--accent-base--blog);
|
||||
--bg-image: url('../assets/backgrounds/ripple-line.svg');
|
||||
--bg-image-static: url('../assets/backgrounds/ripple-line-static.svg');
|
||||
}
|
||||
|
||||
body[data-theme="book"] {
|
||||
--accent-base: var(--accent-base--book);
|
||||
--bg-image: url('../assets/backgrounds/curve-ripple.svg');
|
||||
--bg-image-static: url('../assets/backgrounds/curve-ripple-static.svg');
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
background-image: var(--bg-image), radial-gradient(circle at 50% 0%, rgba(var(--accent-base), 0.15), transparent 60%);
|
||||
background-size: cover, auto;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
transition: background-image 0.6s ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
background-image: var(--bg-image-static), radial-gradient(circle at 50% 0%, rgba(var(--accent-base), 0.15), transparent 60%);
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: rgb(var(--accent-base));
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-shadow: 0 0 8px rgba(var(--accent-base), 0.6);
|
||||
}
|
||||
|
||||
.glass-container {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-container:hover {
|
||||
border-color: rgba(var(--accent-base), 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(var(--accent-base), 0.1);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Typography styles for markdown content */
|
||||
.prose code {
|
||||
font-family: var(--font-cascadia-code);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
background: #111827;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.prose pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
.glass-container {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
h1 { font-size: 1.75rem; }
|
||||
h2 { font-size: 1.5rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user