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

2
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 -->

2
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,

2
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>

2
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"

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>

4
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>

2
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 {

4
docs/index.md
View File

@ -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"