fixed vite

src/App/App.css

@@ -77,6 +77,14 @@
   max-width: 100% !important;
 }
 
+hr{
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  height: 5px;
+  border-width: 3px !important;
+  margin-bottom: 10px !important;
+}
 
 /* * * * * * * */
 /* * * BODY* * */
@@ -102,6 +110,9 @@ code{
   color:black !important;
 }
 
+.doi{
+  color: var(--text-primary) !important;
+}
 .codesnippet{
   padding-left: 30px;
   padding-top: 5px;
@@ -252,7 +263,7 @@ tr:nth-child(odd) {
   background-color: #f3f3f3;
 }
 tr:nth-child(1) {
-  background-color: var(--lightblue) !important;
+  background-color: var(--accent-gradient-one-of-three) !important;
 }
 
 /* * * * * * * */
@@ -284,7 +295,7 @@ margin-bottom: 10vw !important;
 }
 
 .header-title{
-  color: var(--text-primary);
+  color: var(--text-primary) !important;
   text-align: left;
   align-self: flex-start;
   padding: 0 30px;
@@ -303,23 +314,25 @@ margin-bottom: 10vw !important;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 5vw;
+  font-size: 15vh;
 	letter-spacing:0.1em;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-width: 0.3vw;
   -webkit-text-stroke-color: var(--accent-primary);
   text-shadow: 
-						0.4vw 0.4vw var(--mediumpurple),
-						0.8vw 0.8vw var(--offblack);
+						0.4vw 0.4vw var(--text-primary ),
+						1vw 1vw var(--offblack);
+}
+.popart-wrapper{
+  min-height: 5vw;
+  margin-bottom: 20px !important;
 }
 h2{
   font-size: 3rem !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-stroke-width: 2px !important;
-  -webkit-text-stroke-color: var(--text-primary) !important;
   background-clip: text !important;
-  color: transparent !important;
+  color: var(--text-primary) !important;
   padding-top: 15px !important;
+  font-weight: bolder !important;
  /*  background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
  */}
 
@@ -409,12 +422,12 @@ footer{
   background-color: var(--background);
 }
 footer a {
-  color: white;
+  color: var(--ourbeige) !important;
   font-weight: bold;
   text-decoration: none;
 }
 footer a:hover {
-  color: white;
+  color: var(--accent-gradient-three-of-three) !important;
   text-decoration: underline;
 }
 

src/components/header-box.tsx

+import { Hpopart } from "./headings";
+
 interface Props{
-    title?: string,
+    title: string,
     children?: React.ReactNode,
 }
 
@@ -9,7 +11,7 @@ export default function HeaderBox({children, title}: Props ){
         <div className="row">
           <div className="col header-container">
             <div className="header-title">
-              {title}
+              <Hpopart text={title}></Hpopart>
             </div>
             {children}
           </div>

src/components/headings.tsx

@@ -99,11 +99,15 @@ export function Hwave({text}:{text: string}){
 
 export function Hpopart({text}:{text: string}){
 return(
-    <div className="relative">
+    <div className="row">
+        <div className="col">
+    <div className="relative popart-wrapper">
         <div className="absolute popart">
             {text}
+        </div> 
         </div>
     </div>
+    </div>
 )
 }
 

src/contents/description.tsx

-import { H2 } from "../components/headings";
+import { H2, Hhighlight, Hhopp, Hshadone, Hwave } from "../components/headings";
 import { Circle } from "../components/Shapes";
 import { Complex } from "../components/svgs";
 /* import PieChart from './Graph.tsx';  */

src/contents/proof.tsx

@@ -6,24 +6,72 @@ export function Proof() {
           <h3>Seeding</h3>
           <h3>Transfection</h3>
           <h3>Microscopy</h3>
+          <table>
+            <tr>
+              <th>Plasmid</th>
+              <th>Expected results</th>
+              <th>Results</th>
+            </tr>
+            <tr>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </table>
         </section>
         <section id="pos-control-2000">
           <h2>Positiv control and optimization</h2>
           <h3>Seeding</h3>
           <h3>Transfection</h3>
           <h3>Microscopy</h3>
+          <table>
+            <tr>
+              <th>Plasmid</th>
+              <th>Expected results</th>
+              <th>Results</th>
+            </tr>
+            <tr>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </table>
         </section>
         <section id="pos-control-3000">
           <h2>Positiv control and optimization</h2>
           <h3>Seeding</h3>
           <h3>Transfection</h3>
           <h3>Microscopy</h3>
+          <table>
+            <tr>
+              <th>Plasmid</th>
+              <th>Expected results</th>
+              <th>Results</th>
+            </tr>
+            <tr>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </table>
         </section>
         <section id="poc-3000">
           <h2>Preliminary test with lipofectamine 2000</h2>
           <h3>Seeding</h3>
           <h3>Transfection</h3>
           <h3>Microscopy</h3>
+          <table>
+            <tr>
+              <th>Plasmid</th>
+              <th>Expected results</th>
+              <th>Results</th>
+            </tr>
+            <tr>
+              <th></th>
+              <th></th>
+              <th></th>
+            </tr>
+          </table>
         </section>
       </>
     );

vite.config.js

 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import { stringToSlug } from "./src/utils";
-import path from 'path';
 
 // https://vitejs.dev/config/
 export default () => {
   const env = loadEnv("dev", process.cwd());
+    // Sicherstellen, dass die Umgebungsvariable vorhanden ist
   if (!env.VITE_TEAM_NAME) {
     throw new Error("VITE_TEAM_NAME environment variable is not defined");
   }
+  // Debugging-Log, um den Wert der Umgebungsvariable zu überprüfen
+  console.log(`VITE_TEAM_NAME: ${env.VITE_TEAM_NAME}`);
+
 
   const baseSlug = stringToSlug(env.VITE_TEAM_NAME);
-  console.log(`Base URL: /${baseSlug}/`);
-  console.log(`Output directory: ${path.resolve(__dirname, 'dist')}`);
 
+  console.log("VITE_TEAM_NAME:", env.VITE_TEAM_NAME); // Debugging-Ausgabe
+  console.log("Base Slug:", baseSlug); // Debugging-Ausgabe
   
-
   return defineConfig({
-    base: `/`,
+    base: `/${stringToSlug(env.VITE_TEAM_NAME)}/`,
     plugins: [react()],
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, './src'), // Simplifies imports
-      }
-    },
-    css: {
-      preprocessorOptions: {
-        css: {
-          //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)
-        }
-      }    },
     build: {
       outDir: "dist",
-      rollupOptions: {
-        output: {
-          assetFileNames: `assets/[ext]/[name]-[hash].[ext]`
-          }      
-        }
-      },
+    },
     publicDir: 'pubpub',
   });
+  
 };