IT4Change/IT4C.dev
3
0
Fork 0
mirror of https://github.com/IT4Change/IT4C.dev.git synced 2025-12-13 09:25:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode (#300)

Browse Source
This commit is contained in:
Max 2025-03-20 15:34:02 +01:00 committed by GitHub
parent ab189464b6
commit 8cefe9f0fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vuepress/components/ContactForm.vue
View File

@ -1,5 +1,5 @@
<template>
<p class="text-gray-600 mb-8">Wir freuen uns auf Ihre Nachricht. Als Ansprechpartner steht Ihnen <strong>Ulf Gebhardt</strong> für Ihre Fragen gerne zur Verfügung.</p>
<p class="text-gray-600 dark:text-gray-300 mb-8">Wir freuen uns auf Ihre Nachricht. Als Ansprechpartner steht Ihnen <strong>Ulf Gebhardt</strong> für Ihre Fragen gerne zur Verfügung.</p>
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
<!-- Left side: Portrait - takes 2/5 of space -->
@ -164,4 +164,4 @@ button {
background-color: color-mix(in srgb, var(--highlight-color), black 15%);
}
}
</style>
</style>

4
docs/.vuepress/components/ContentSection.vue
View File

@ -19,7 +19,7 @@ export default {
},
backgroundColor: {
type: String,
default: 'bg-white'
default: 'bg-white dark:bg-gray-900'
},
id: {
type: String,
@ -27,4 +27,4 @@ export default {
}
}
}
</script>
</script>

4
docs/.vuepress/components/ProcessStep.vue
View File

@ -5,7 +5,7 @@
</div>
<div class="col-span-9 pt-0 sm:pt-2">
<h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
<p class="text-gray-600">{{ description }}</p>
<p class="text-gray-600 dark:text-gray-300">{{ description }}</p>
</div>
</div>
</template>
@ -22,4 +22,4 @@ defineProps<{
.highlight-number {
color: var(--highlight-color);
}
</style>
</style>

4
docs/.vuepress/components/ProjectCard.vue
View File

@ -3,7 +3,7 @@
<div class="border border-gray-300 rounded-lg p-6">
<img :src="image" :alt="title" class="rounded-lg mb-4 w-full h-auto object-contain">
<h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
<p class="text-gray-600 mb-4">{{ description }}</p>
<p class="text-gray-600 dark:text-gray-300 mb-4">{{ description }}</p>
<div class="flex flex-wrap gap-2">
<span
v-for="tag in tags"
@ -32,4 +32,4 @@ defineProps<{
color: var(--highlight-color);
background: var(--highlight-color-light);
}
</style>
</style>

2
docs/.vuepress/components/ServiceCard.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-6 border border-gray-300 rounded-lg">
<h3 class="text-xl font-semibold mb-4">{{ title }}</h3>
<ul class="space-y-2 text-gray-600">
<ul class="space-y-2 text-gray-600 dark:text-gray-300">
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>

6
docs/.vuepress/components/TeamMember.vue
View File

@ -17,10 +17,10 @@
</div>
</div>
<h4 class="font-semibold text-gray-900 transition-colors duration-200 group-hover:text-gray-600">
<h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">
{{ name }}
</h4>
<p class="text-sm text-gray-600">{{ role }}</p>
<p class="text-sm text-gray-600 dark:text-gray-300">{{ role }}</p>
</a>
</template>
@ -37,4 +37,4 @@
.overlay-bg {
background-color: var(--highlight-color-light);
}
</style>
</style>

4
docs/.vuepress/layouts/BlankLayout.vue
View File

@ -18,6 +18,8 @@ export default {
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
/* Conflicts with vuepress */
@layer base {
.vp-sidebar {
@ -54,4 +56,4 @@ export default {
padding: 0 1rem;
}
}
</style>
</style>

2
docs/.vuepress/styles/index.scss
View File

@ -17,4 +17,4 @@ h1, h2, h3, h4, h5, h6 {
.font-sourcesans {
font-family: 'Source Sans 3', sans-serif !important;
}
}

32
docs/index.md
View File

@ -4,9 +4,9 @@ layout: BlankLayout
<section class="full-width-section h-screen relative">
<!-- Desktop background image -->
<img
src="/images/hero-bg-desktop.jpg"
alt="Softwareentwicklung für eine bessere Welt"
<img
src="/images/hero-bg-desktop.jpg"
alt="Softwareentwicklung für eine bessere Welt"
class="w-full h-screen object-cover hidden md:block"
/>
@ -24,12 +24,12 @@ layout: BlankLayout
</div>
<!-- Mobile gradient -->
<div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent"
<div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent"
style="height: 70vh;">
</div>
<!-- XS Mobile gradient -->
<div class="absolute left-0 right-0 bottom-0 sm:hidden"
<div class="absolute left-0 right-0 bottom-0 sm:hidden"
style="height: 80vh; background-image: linear-gradient(to top, #22596c 70%, transparent 100%);">
</div>
@ -41,26 +41,26 @@ layout: BlankLayout
<!-- Für Mobile: Am unteren Rand fixiert ohne margin -->
<div class="w-full md:w-3/5 lg:w-1/2 z-10 md:mt-0 relative">
<div
role="heading"
role="heading"
aria-level="1"
class="text-3xl md:text-4xl lg:text-5xl mb-6 text-white text-center sm:text-left font-montserrat leading-tight text-shadow"
>
Software­entwicklung für eine bessere Welt
</div>
<p
<p
class="text-xl md:text-2xl text-white text-center sm:text-left font-sourcesans mb-8 max-w-2xl text-shadow-sm"
>
Wir sind Softwareentwickler, die deine alternative Vision verstehen und umsetzen. Mit technischer Expertise und persönlicher Betreuung unterstützen wir Projekte, die Positives bewirken.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a
href="#kontakt"
<a
href="#kontakt"
class="hero-button hero-button-primary px-6 py-3 bg-[#ececec] !text-black rounded-full font-medium text-center shadow-md no-underline relative overflow-hidden"
>
<span class="relative z-10">Projekt starten</span>
</a>
<a
href="#leistungen"
<a
href="#leistungen"
class="hero-button hero-button-secondary px-6 py-3 bg-black/20 !text-white rounded-full font-medium text-center border border-white shadow-md no-underline relative overflow-hidden"
>
<span class="relative z-10">Unsere Leistungen</span>
@ -96,7 +96,7 @@ layout: BlankLayout
</div>
</ContentSection>
<ContentSection id="team" title="Team & Werte" backgroundColor="bg-gray-50">
<ContentSection id="team" title="Team & Werte" backgroundColor="bg-gray-50 dark:bg-gray-800">
<p>Wir glauben an die Kraft von Technologie für positiven Wandel. Unser Team verbindet technische Expertise mit nachhaltigem Denken und sozialer Verantwortung.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-10">
<TeamMember
@ -163,7 +163,7 @@ layout: BlankLayout
</div>
</ContentSection>
<ContentSection id="prozess" title="Unser Prozess" backgroundColor="bg-gray-50">
<ContentSection id="prozess" title="Unser Prozess" backgroundColor="bg-gray-50 dark:bg-gray-800">
<ProcessStep
number="1"
title="Kennenlernen & Vision"
@ -193,7 +193,7 @@ layout: BlankLayout
<style lang="scss">
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
&-sm {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
@ -209,7 +209,7 @@ layout: BlankLayout
&-button {
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
@ -244,4 +244,4 @@ layout: BlankLayout
}
}
</style>
</style>