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; font-size: 0.9rem;
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: rgba(var(--accent-base), 0.15); background: rgb(from var(--accent-base) r g b / 0.15);
border: 1px solid rgba(var(--accent-base), 0.3); border: 1px solid rgb(from var(--accent-base) r g b / 0.3);
color: rgb(var(--accent-base)); color: var(--accent-base);
transition: all 0.2s ease; transition: all 0.2s ease;
user-select: none; user-select: none;
} }
.toc-label:hover { .toc-label:hover {
background: rgba(var(--accent-base), 0.25); background: rgb(from var(--accent-base) r g b / 0.25);
} }
.toc-dropdown { .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; transition: color 0.2s ease;
} }
.links a:hover { .links a:hover {
color: rgb(var(--accent-base)); color: var(--accent-base);
} }
.links a[href="/portfolio"]:hover { .links a[href="/portfolio"]:hover {
color: rgb(var(--accent-base--portfolio)); color: var(--accent-base--portfolio);
} }
.links a[href="/blog"]:hover { .links a[href="/blog"]:hover {
color: rgb(var(--accent-base--blog)); color: var(--accent-base--blog);
} }
.links a[href="/book"]:hover { .links a[href="/book"]:hover {
color: rgb(var(--accent-base--book)); color: var(--accent-base--book);
} }
.links a.active { .links a.active {
color: rgb(var(--accent-base)); color: var(--accent-base);
font-weight: 600; font-weight: 600;
} }
src/components/WelcomeTypewriter.astro
+4 -4
View File
@@ -23,7 +23,7 @@
text-align: center; text-align: center;
white-space: break-spaces; white-space: break-spaces;
word-wrap: break-word; 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; text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
} }
@@ -42,7 +42,7 @@
.welcome-typewriter-nostyle { .welcome-typewriter-nostyle {
min-height: 1em; min-height: 1em;
border-right: 2px solid rgb(var(--accent-base)); border-right: 2px solid var(--accent-base);
margin: 0 auto; margin: 0 auto;
display: block; display: block;
overflow-x: hidden; overflow-x: hidden;
@@ -70,7 +70,7 @@
display: inline-block; display: inline-block;
height: 1em; height: 1em;
width: 0px; width: 0px;
border-right: 2px solid rgb(var(--accent-base)); border-right: 2px solid var(--accent-base);
animation: blink-caret 1s step-end infinite; animation: blink-caret 1s step-end infinite;
} }
@@ -79,7 +79,7 @@
} }
@keyframes blink-caret { @keyframes blink-caret {
from, to { border-color: rgb(var(--accent-base)) } from, to { border-color: var(--accent-base); }
50% { border-color: transparent; } 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; text-decoration: none;
} }
.mini-chapter a:hover { .mini-chapter a:hover {
background: rgba(var(--accent-base), 0.1); background: rgb(from var(--accent-base) r g b / 0.1);
color: rgb(var(--accent-base)); color: var(--accent-base);
} }
.mini-chapter a.active { .mini-chapter a.active {
background: rgba(var(--accent-base), 0.2); background: rgb(from var(--accent-base) r g b / 0.2);
color: rgb(var(--accent-base)); color: var(--accent-base);
font-weight: 600; font-weight: 600;
} }
</style> </style>
src/pages/index.astro
+14 -14
View File
@@ -91,7 +91,7 @@ import socials from "../data/socials.json";
} }
.social-link { .social-link {
color: rgb(var(--accent-base)); color: var(--accent-base);
font-size: 2rem; font-size: 2rem;
height: 2rem; height: 2rem;
line-height: 1; line-height: 1;
@@ -101,7 +101,7 @@ import socials from "../data/socials.json";
} }
.social-link:hover svg { .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 { .subtitle {
@@ -192,43 +192,43 @@ import socials from "../data/socials.json";
.portfolio { .portfolio {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(var(--accent-base--portfolio), 0.5) 0%, rgb(from var(--accent-base--portfolio) r g b / 0.5) 0%,
rgba(var(--accent-base--portfolio), 0.15) 100% rgb(from var(--accent-base--portfolio) r g b / 0.15) 100%
); );
} }
.blog { .blog {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(var(--accent-base--blog), 0.8) 0%, rgb(from var(--accent-base--blog) r g b / 0.8) 0%,
rgba(var(--accent-base--blog), 0.15) 100% rgb(from var(--accent-base--blog) r g b / 0.15) 100%
); );
} }
.book { .book {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(var(--accent-base--book), 0.8) 0%, rgb(from var(--accent-base--book) r g b / 0.8) 0%,
rgba(var(--accent-base--book), 0.15) 100% rgb(from var(--accent-base--book) r g b / 0.15) 100%
); );
} }
.portfolio:hover { .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 { .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 { .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 { .portfolio .icon {
color: rgb(var(--accent-base--portfolio)); color: rgb(--accent-base--portfolio);
} }
.blog .icon { .blog .icon {
color: rgb(var(--accent-base--blog)); color: rgb(--accent-base--blog);
} }
.book .icon { .book .icon {
color: rgb(var(--accent-base--book)); color: rgb(--accent-base--book);
} }
@keyframes fadeUp { @keyframes fadeUp {
src/pages/portfolio/[...slug].astro
+2 -2
View File
@@ -57,7 +57,7 @@ const { Content } = await render(entry);
} }
.tag { .tag {
font-size: 0.8rem; 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; padding: 0.25rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
@@ -77,7 +77,7 @@ const { Content } = await render(entry);
.meta-repository { .meta-repository {
flex-shrink: 1; flex-shrink: 1;
font-size: 1.2rem; font-size: 1.2rem;
color: rgb(var(--accent-base)); color: var(--accent-base);
} }
.meta-repository a { .meta-repository a {
display: flex; 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 { .tag {
font-size: 0.8rem; 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; padding: 0.25rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
@@ -79,6 +79,6 @@ projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
font-size: 1.2rem; font-size: 1.2rem;
display: flex; display: flex;
align-items: center; align-items: center;
color: rgb(var(--accent-base)); color: var(--accent-base);
} }
</style> </style>
src/styles/global.css
+16 -22
View File
@@ -18,7 +18,7 @@
@property --accent-base { @property --accent-base {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 214, 134, 249; initial-value: rgb(214, 134, 249);
} }
@property --bg-image { @property --bg-image {
@@ -51,12 +51,6 @@
initial-value: 16px; 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 { @property --text-main {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
@@ -78,25 +72,25 @@
@property --accent-base--default { @property --accent-base--default {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 214, 134, 249; initial-value: rgb(214, 134, 249);
} }
@property --accent-base--portfolio { @property --accent-base--portfolio {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 255, 181, 102; initial-value: rgb(255, 181, 102);
} }
@property --accent-base--blog { @property --accent-base--blog {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 111, 221, 246; initial-value: rgb(111, 221, 246);
} }
@property --accent-base--book { @property --accent-base--book {
syntax: '<color>'; syntax: '<color>';
inherits: true; inherits: true;
initial-value: 247, 110, 138; initial-value: rgb(247, 110, 138);
} }
:root { :root {
@@ -110,10 +104,10 @@
--glass-blur: 16px; --glass-blur: 16px;
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
--accent-base--default: 214, 134, 249; --accent-base--default: rgb(214, 134, 249);
--accent-base--portfolio: 255, 181, 102; --accent-base--portfolio: rgb(255, 181, 102);
--accent-base--blog: 111, 221, 246; --accent-base--blog: rgb(111, 221, 246);
--accent-base--book: 247, 110, 138; --accent-base--book: rgb(247, 110, 138);
--accent-base: var(--accent-base--default); --accent-base: var(--accent-base--default);
} }
@@ -171,7 +165,7 @@ body {
padding: 0; padding: 0;
line-height: 1.6; line-height: 1.6;
min-height: 100vh; 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-size: cover, auto;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
@@ -180,7 +174,7 @@ body {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
body { 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, h4,
h5, h5,
h6 { h6 {
color: rgb(var(--accent-base)); color: var(--accent-base);
font-weight: 600; font-weight: 600;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -203,7 +197,7 @@ a {
} }
a:hover { 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 { .glass-container {
@@ -218,8 +212,8 @@ a:hover {
} }
.glass-container:hover { .glass-container:hover {
border-color: rgba(var(--accent-base), 0.3); border-color: rgba(from var(--accent-base) r g b / 0.3);
box-shadow: 0 8px 32px 0 rgba(var(--accent-base), 0.1); box-shadow: 0 8px 32px 0 rgba(from var(--accent-base) r g b / 0.1);
} }
.container { .container {
@@ -231,7 +225,7 @@ a:hover {
/* Typography styles for markdown content */ /* Typography styles for markdown content */
.prose code { .prose code {
font-family: var(--font-cascadia-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; padding: 0.2em 0.4em;
border-radius: 0.25rem; border-radius: 0.25rem;
font-size: 0.9em; font-size: 0.9em;