c0ntroller/c0ntroller.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix css

Browse Source
This commit is contained in:
c0ntroller
2026-09-07 18:24:15 +02:00
parent efbef76a88
commit 364bb52db7
8 changed files with 51 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BookNavigation.astro
+4 -4
View File
@@ -57,14 +57,14 @@ const { prevUrl, prevTitle, nextUrl, nextTitle } = Astro.props;
font-size: 0.9rem;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
background: rgba(var(--accent-base), 0.15);
border: 1px solid rgba(var(--accent-base), 0.3);
color: rgb(var(--accent-base));
background: rgb(from var(--accent-base) r g b / 0.15);
border: 1px solid rgb(from var(--accent-base) r g b / 0.3);
color: var(--accent-base);
transition: all 0.2s ease;
user-select: none;
}
.toc-label:hover {
background: rgba(var(--accent-base), 0.25);
background: rgb(from var(--accent-base) r g b / 0.25);
}
.toc-dropdown {
src/components/Navigation.astro
+5 -5
View File
@@ -68,19 +68,19 @@ import Logo from "../assets/logo.svg";
transition: color 0.2s ease;
}
.links a:hover {
color: rgb(var(--accent-base));
color: var(--accent-base);
}
.links a[href="/portfolio"]:hover {
color: rgb(var(--accent-base--portfolio));
color: var(--accent-base--portfolio);
}
.links a[href="/blog"]:hover {
color: rgb(var(--accent-base--blog));
color: var(--accent-base--blog);
}
.links a[href="/book"]:hover {
color: rgb(var(--accent-base--book));
color: var(--accent-base--book);
}
.links a.active {
color: rgb(var(--accent-base));
color: var(--accent-base);
font-weight: 600;
}
src/components/WelcomeTypewriter.astro
+4 -4
View File
@@ -23,7 +23,7 @@
text-align: center;
white-space: break-spaces;
word-wrap: break-word;
color: rgb(var(--accent-base));
color: var(--accent-base);
text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
}
@@ -42,7 +42,7 @@
.welcome-typewriter-nostyle {
min-height: 1em;
border-right: 2px solid rgb(var(--accent-base));
border-right: 2px solid var(--accent-base);
margin: 0 auto;
display: block;
overflow-x: hidden;
@@ -70,7 +70,7 @@
display: inline-block;
height: 1em;
width: 0px;
border-right: 2px solid rgb(var(--accent-base));
border-right: 2px solid var(--accent-base);
animation: blink-caret 1s step-end infinite;
}
@@ -79,7 +79,7 @@
}
@keyframes blink-caret {
from, to { border-color: rgb(var(--accent-base)) }
from, to { border-color: var(--accent-base); }
50% { border-color: transparent; }
}
src/pages/book/[...slug].astro
+4 -4
View File
@@ -102,12 +102,12 @@ const chapters = allPages.reduce((acc, p) => {
text-decoration: none;
}
.mini-chapter a:hover {
background: rgba(var(--accent-base), 0.1);
color: rgb(var(--accent-base));
background: rgb(from var(--accent-base) r g b / 0.1);
color: var(--accent-base);
}
.mini-chapter a.active {
background: rgba(var(--accent-base), 0.2);
color: rgb(var(--accent-base));
background: rgb(from var(--accent-base) r g b / 0.2);
color: var(--accent-base);
font-weight: 600;
}
</style>
src/pages/index.astro
+14 -14
View File
@@ -91,7 +91,7 @@ import socials from "../data/socials.json";
}
.social-link {
color: rgb(var(--accent-base));
color: var(--accent-base);
font-size: 2rem;
height: 2rem;
line-height: 1;
@@ -101,7 +101,7 @@ import socials from "../data/socials.json";
}
.social-link:hover svg {
filter: drop-shadow(0px 0px 5px rgba(var(--accent-base), 0.4));
filter: drop-shadow(0px 0px 5px rgb(from var(--accent-base) r g b / 0.4));
}
.subtitle {
@@ -192,43 +192,43 @@ import socials from "../data/socials.json";
.portfolio {
background: linear-gradient(
135deg,
rgba(var(--accent-base--portfolio), 0.5) 0%,
rgba(var(--accent-base--portfolio), 0.15) 100%
rgb(from var(--accent-base--portfolio) r g b / 0.5) 0%,
rgb(from var(--accent-base--portfolio) r g b / 0.15) 100%
);
}
.blog {
background: linear-gradient(
135deg,
rgba(var(--accent-base--blog), 0.8) 0%,
rgba(var(--accent-base--blog), 0.15) 100%
rgb(from var(--accent-base--blog) r g b / 0.8) 0%,
rgb(from var(--accent-base--blog) r g b / 0.15) 100%
);
}
.book {
background: linear-gradient(
135deg,
rgba(var(--accent-base--book), 0.8) 0%,
rgba(var(--accent-base--book), 0.15) 100%
rgb(from var(--accent-base--book) r g b / 0.8) 0%,
rgb(from var(--accent-base--book) r g b / 0.15) 100%
);
}
.portfolio:hover {
box-shadow: 0 10px 40px -10px rgba(var(--accent-base--portfolio), 1);
box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--portfolio) r g b / 1);
}
.blog:hover {
box-shadow: 0 10px 40px -10px rgba(var(--accent-base--blog), 0.4);
box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--blog) r g b / 0.4);
}
.book:hover {
box-shadow: 0 10px 40px -10px rgba(var(--accent-base--book), 0.4);
box-shadow: 0 10px 40px -10px rgb(from var(--accent-base--book) r g b / 0.4);
}
.portfolio .icon {
color: rgb(var(--accent-base--portfolio));
color: rgb(--accent-base--portfolio);
}
.blog .icon {
color: rgb(var(--accent-base--blog));
color: rgb(--accent-base--blog);
}
.book .icon {
color: rgb(var(--accent-base--book));
color: rgb(--accent-base--book);
}
@keyframes fadeUp {
src/pages/portfolio/[...slug].astro
+2 -2
View File
@@ -57,7 +57,7 @@ const { Content } = await render(entry);
}
.tag {
font-size: 0.8rem;
background: rgba(var(--accent-base), 0.2);
background: rgb(from var(--accent-base) r g b / 0.2);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
@@ -77,7 +77,7 @@ const { Content } = await render(entry);
.meta-repository {
flex-shrink: 1;
font-size: 1.2rem;
color: rgb(var(--accent-base));
color: var(--accent-base);
}
.meta-repository a {
display: flex;
src/pages/portfolio/index.astro
+2 -2
View File
@@ -70,7 +70,7 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
}
.tag {
font-size: 0.8rem;
background: rgba(var(--accent-base), 0.2);
background: rgb(from var(--accent-base) r g b / 0.2);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
@@ -79,6 +79,6 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
font-size: 1.2rem;
display: flex;
align-items: center;
color: rgb(var(--accent-base));
color: var(--accent-base);
}
</style>
src/styles/global.css
+16 -22
View File
@@ -18,7 +18,7 @@
@property --accent-base {
syntax: '<color>';
inherits: true;
initial-value: 214, 134, 249;
initial-value: rgb(214, 134, 249);
}
@property --bg-image {
@@ -51,12 +51,6 @@
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;
@@ -78,25 +72,25 @@
@property --accent-base--default {
syntax: '<color>';
inherits: true;
initial-value: 214, 134, 249;
initial-value: rgb(214, 134, 249);
}
@property --accent-base--portfolio {
syntax: '<color>';
inherits: true;
initial-value: 255, 181, 102;
initial-value: rgb(255, 181, 102);
}
@property --accent-base--blog {
syntax: '<color>';
inherits: true;
initial-value: 111, 221, 246;
initial-value: rgb(111, 221, 246);
}
@property --accent-base--book {
syntax: '<color>';
inherits: true;
initial-value: 247, 110, 138;
initial-value: rgb(247, 110, 138);
}
:root {
@@ -110,10 +104,10 @@
--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--default: rgb(214, 134, 249);
--accent-base--portfolio: rgb(255, 181, 102);
--accent-base--blog: rgb(111, 221, 246);
--accent-base--book: rgb(247, 110, 138);
--accent-base: var(--accent-base--default);
}
@@ -171,7 +165,7 @@ body {
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-image: var(--bg-image), radial-gradient(circle at 50% 0%, rgba(from var(--accent-base) r g b / 0.15), transparent 60%);
background-size: cover, auto;
background-position: center;
background-attachment: fixed;
@@ -180,7 +174,7 @@ body {
@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%);
background-image: var(--bg-image-static), radial-gradient(circle at 50% 0%, rgba(from var(--accent-base) r g b / 0.15), transparent 60%);
}
}
@@ -190,7 +184,7 @@ h3,
h4,
h5,
h6 {
color: rgb(var(--accent-base));
color: var(--accent-base);
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
@@ -203,7 +197,7 @@ a {
}
a:hover {
text-shadow: 0 0 8px rgba(var(--accent-base), 0.6);
text-shadow: 0 0 8px rgba(from var(--accent-base) r g b / 0.6);
}
.glass-container {
@@ -218,8 +212,8 @@ a:hover {
}
.glass-container:hover {
border-color: rgba(var(--accent-base), 0.3);
box-shadow: 0 8px 32px 0 rgba(var(--accent-base), 0.1);
border-color: rgba(from var(--accent-base) r g b / 0.3);
box-shadow: 0 8px 32px 0 rgba(from var(--accent-base) r g b / 0.1);
}
.container {
@@ -231,7 +225,7 @@ a:hover {
/* Typography styles for markdown content */
.prose code {
font-family: var(--font-cascadia-code);
background: rgba(255, 255, 255, 0.1);
background: rgba(from var(--accent-base) r g b / 0.1);
padding: 0.2em 0.4em;
border-radius: 0.25rem;
font-size: 0.9em;