From 8465f945b91ec47f42e19726595dda599b6f0406 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Tue, 16 Jul 2024 12:31:57 +0200
Subject: [PATCH] titles headerboxes
---
index.html | 2 +-
src/App/App.css | 30 ++++++++++++++++++---
src/App/App.tsx | 4 +--
src/{contents => components}/header-box.tsx | 9 ++++++-
src/headers/attribution-h.tsx | 5 ++--
src/headers/bhf-h.tsx | 6 +++--
src/headers/cont-h.tsx | 4 +--
src/headers/des-h.tsx | 4 +--
src/headers/desc-h.tsx | 4 +--
src/headers/dry-h.tsx | 2 +-
src/headers/eng-h.tsx | 4 +--
src/headers/eth-h.tsx | 2 +-
src/headers/exp-h.tsx | 4 +--
src/headers/home-h.tsx | 2 +-
src/headers/hp-h.tsx | 2 +-
src/headers/imp-h.tsx | 2 +-
src/headers/ints-h.tsx | 2 +-
src/headers/judge-h.tsx | 2 +-
src/headers/mes-h.tsx | 2 +-
src/headers/note-h.tsx | 2 +-
src/headers/part-h.tsx | 2 +-
src/headers/proof-h.tsx | 2 +-
src/headers/res-h.tsx | 2 +-
src/headers/safe-h.tsx | 2 +-
src/headers/spons-h.tsx | 2 +-
src/headers/sup-h.tsx | 2 +-
src/headers/team-h.tsx | 2 +-
src/headers/wiki-h.tsx | 2 +-
28 files changed, 70 insertions(+), 40 deletions(-)
rename src/{contents => components}/header-box.tsx (54%)
diff --git a/index.html b/index.html
index 308569b1..56369597 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
<title>Bielefeld-CeBiTec - iGEM 2024</title>
</head>
<body>
- <div id="root"></div>
+ <div id="root" style="background-color: #FFF6F2;"></div>
<script type="module" src="./src/main.tsx"></script>
</body>
diff --git a/src/App/App.css b/src/App/App.css
index d5d7109a..a3fdd2d7 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -16,7 +16,7 @@
/*--offwhite: #e9dff1; */
--ourbeige: #FFF6F2;
--darkerbeige: #e2dad7;
- --background: white;
+ --background: #FFF6F2;
/*igem colours*/
--igemdarkgreen: #006530;
--igemmediumgreen: #019968;
@@ -46,8 +46,8 @@
/* * * BODY* * */
/* * * * * * * */
body {
- padding-top: 56px;
- background-color: var(--background);
+ /* padding-top: 56px; */
+ background-color: var(--ourbeige);
color: #493843;
}
body.dark-mode {
@@ -119,7 +119,8 @@ color: var(--text-primary);
}
.header-container{
padding-top: 380px;
- background-color: var(--lightblue);
+ padding-bottom: 60px;
+ background-color: var(--ourbeige);
}
.null{
padding: 0% !important;
@@ -221,6 +222,23 @@ margin-bottom: 10vw !important;
/* * * * * * * */
/* *HEADINGS * */
/* * * * * * * */
+
+.base {
+ width: 100%;
+ background-color: var(--accent-primary);
+ padding: 120px 30px;
+}
+
+.header-title{
+ color: var(--text-primary);
+ text-align: left;
+ align-self: flex-start;
+ padding: 0 30px;
+ font-size: 130px;
+ font-weight: 900;
+ line-height: 130px;
+}
+
/* p:first-child::first-letter{
color:var(--text-primary);
font-weight: bold;
@@ -289,6 +307,10 @@ h2{
/* * * * * * * */
/* * CALLOUT * */
/* * * * * * * */
+
+.bg-b{
+ background-color: var(--ourbeige);
+}
.bd-callout {
padding: 1.25rem;
margin-top: 1.25rem;
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 44ee0812..d59dbea5 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -47,8 +47,8 @@ const App = () => {
{/* <Header title={title || ""} lead={lead || ""}/> */}
{/* Page content */}
<div className="container-fluid">
- <div className="row ">
- <div className="col-1 d-none d-lg-block" >
+ <div className="row bg-b">
+ <div className="col-1 d-none d-lg-block" >
{/* <!-- empty so far --> */}
</div>
{/* <div className="col-2 d-none d-lg-block">
diff --git a/src/contents/header-box.tsx b/src/components/header-box.tsx
similarity index 54%
rename from src/contents/header-box.tsx
rename to src/components/header-box.tsx
index 5a44913c..3c1dd640 100644
--- a/src/contents/header-box.tsx
+++ b/src/components/header-box.tsx
@@ -1,14 +1,21 @@
interface Props{
+ title?: string,
children?: React.ReactNode,
}
-export default function HeaderBox({children}: Props ){
+export default function HeaderBox({children, title}: Props ){
return(
<>
<div className="row">
<div className="col header-container">
+ <div className="header-title">
+ {title}
+ </div>
{children}
</div>
+ <div className="base">
+
+ </div>
</div>
<div className="row">
diff --git a/src/headers/attribution-h.tsx b/src/headers/attribution-h.tsx
index 7c10b3fa..a5544c28 100644
--- a/src/headers/attribution-h.tsx
+++ b/src/headers/attribution-h.tsx
@@ -1,10 +1,9 @@
-import HeaderBox from "../contents/header-box";
+import HeaderBox from "../components/header-box";
export function ATTH() {
return (
- <HeaderBox>
-
+ <HeaderBox title="Attributions">
</HeaderBox>
);
}
\ No newline at end of file
diff --git a/src/headers/bhf-h.tsx b/src/headers/bhf-h.tsx
index 51ec034e..902340c0 100644
--- a/src/headers/bhf-h.tsx
+++ b/src/headers/bhf-h.tsx
@@ -3,10 +3,12 @@ export function BFHH() {
return (
<>
<div className="row">
- <div className="col header-container">
+ <div className="col">
<div className="bg-video-container">
- <iframe title="Bielefeld-CeBiTec: MeetUp (2024) [English]" width="100%" height="700" src="https://video.igem.org/videos/embed/30b8a6e0-2b4a-4618-8867-4eb8e6a52936?start=27s&loop=1&autoplay=1&muted=1&title=0&warningTitle=0&controlBar=0&peertubeLink=0&p2p=0" frameBorder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+ <iframe title="Bielefeld-CeBiTec: MeetUp (2024) [English]" width="100%" height="700" src="https://video.igem.org/videos/embed/30b8a6e0-2b4a-4618-8867-4eb8e6a52936?start=27s&loop=1&autoplay=1&muted=1&title=0&warningTitle=0&controlBar=0&peertubeLink=0&p2p=0" frameBorder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>
+
+
<div className="absolute">
</div>
diff --git a/src/headers/cont-h.tsx b/src/headers/cont-h.tsx
index a247292e..e0f3fc32 100644
--- a/src/headers/cont-h.tsx
+++ b/src/headers/cont-h.tsx
@@ -1,9 +1,9 @@
-import HeaderBox from "../contents/header-box";
+import HeaderBox from "../components/header-box";
export function CONTH() {
return (
- <HeaderBox>
+ <HeaderBox title="Contribution">
</HeaderBox>
);
diff --git a/src/headers/des-h.tsx b/src/headers/des-h.tsx
index 24ae3ef1..cd913086 100644
--- a/src/headers/des-h.tsx
+++ b/src/headers/des-h.tsx
@@ -1,10 +1,10 @@
export function DESH() {
return (
- <HeaderBox>
+ <HeaderBox title="Design">
</HeaderBox>
);
}
- import HeaderBox from "../contents/header-box";
\ No newline at end of file
+ import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/desc-h.tsx b/src/headers/desc-h.tsx
index c135f145..ed70130c 100644
--- a/src/headers/desc-h.tsx
+++ b/src/headers/desc-h.tsx
@@ -1,10 +1,10 @@
export function DESCH() {
return (
- <HeaderBox>
+ <HeaderBox title="Description">
</HeaderBox>
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/dry-h.tsx b/src/headers/dry-h.tsx
index 18b43088..b2493f10 100644
--- a/src/headers/dry-h.tsx
+++ b/src/headers/dry-h.tsx
@@ -6,4 +6,4 @@ export function DRYH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/eng-h.tsx b/src/headers/eng-h.tsx
index 0fe088c9..22120b27 100644
--- a/src/headers/eng-h.tsx
+++ b/src/headers/eng-h.tsx
@@ -1,10 +1,10 @@
export function ENGH() {
return (
- <HeaderBox>
+ <HeaderBox title="Engineering">
</HeaderBox>
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/eth-h.tsx b/src/headers/eth-h.tsx
index 80b261fa..8088d9d2 100644
--- a/src/headers/eth-h.tsx
+++ b/src/headers/eth-h.tsx
@@ -7,4 +7,4 @@ export function ETHH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/exp-h.tsx b/src/headers/exp-h.tsx
index 8235ad65..76b7bd84 100644
--- a/src/headers/exp-h.tsx
+++ b/src/headers/exp-h.tsx
@@ -1,10 +1,10 @@
export function EXPH() {
return (
- <HeaderBox>
+ <HeaderBox title="Experiments">
</HeaderBox>
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/home-h.tsx b/src/headers/home-h.tsx
index 945a31ea..9fc56173 100644
--- a/src/headers/home-h.tsx
+++ b/src/headers/home-h.tsx
@@ -6,4 +6,4 @@ export function HOMEH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/hp-h.tsx b/src/headers/hp-h.tsx
index f3d19ec1..96cf2b4a 100644
--- a/src/headers/hp-h.tsx
+++ b/src/headers/hp-h.tsx
@@ -7,4 +7,4 @@ export function HPH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/imp-h.tsx b/src/headers/imp-h.tsx
index e915b14f..970527d3 100644
--- a/src/headers/imp-h.tsx
+++ b/src/headers/imp-h.tsx
@@ -7,4 +7,4 @@ export function IMPH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/ints-h.tsx b/src/headers/ints-h.tsx
index 290a1704..0c2703eb 100644
--- a/src/headers/ints-h.tsx
+++ b/src/headers/ints-h.tsx
@@ -7,4 +7,4 @@ export function INTSH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/judge-h.tsx b/src/headers/judge-h.tsx
index 8d598cab..b352ae08 100644
--- a/src/headers/judge-h.tsx
+++ b/src/headers/judge-h.tsx
@@ -1,4 +1,4 @@
-import HeaderBox from "../contents/header-box";
+import HeaderBox from "../components/header-box";
export function JUDGEH() {
diff --git a/src/headers/mes-h.tsx b/src/headers/mes-h.tsx
index 0f447d6c..a1642300 100644
--- a/src/headers/mes-h.tsx
+++ b/src/headers/mes-h.tsx
@@ -7,4 +7,4 @@ export function MESH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/note-h.tsx b/src/headers/note-h.tsx
index f4663214..9db7bc52 100644
--- a/src/headers/note-h.tsx
+++ b/src/headers/note-h.tsx
@@ -7,4 +7,4 @@ export function NOTEH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/part-h.tsx b/src/headers/part-h.tsx
index afc03aa1..c25f4c9c 100644
--- a/src/headers/part-h.tsx
+++ b/src/headers/part-h.tsx
@@ -7,4 +7,4 @@ export function PARTH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/proof-h.tsx b/src/headers/proof-h.tsx
index d290e8bd..df17bb40 100644
--- a/src/headers/proof-h.tsx
+++ b/src/headers/proof-h.tsx
@@ -7,4 +7,4 @@ export function PROOFH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/res-h.tsx b/src/headers/res-h.tsx
index 7f2090da..7b9b4350 100644
--- a/src/headers/res-h.tsx
+++ b/src/headers/res-h.tsx
@@ -7,4 +7,4 @@ export function RESH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/safe-h.tsx b/src/headers/safe-h.tsx
index aa8e7d6c..ef78ba8d 100644
--- a/src/headers/safe-h.tsx
+++ b/src/headers/safe-h.tsx
@@ -7,4 +7,4 @@ export function SAFEH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/spons-h.tsx b/src/headers/spons-h.tsx
index 65e3d367..92cb2028 100644
--- a/src/headers/spons-h.tsx
+++ b/src/headers/spons-h.tsx
@@ -7,4 +7,4 @@ export function SPONH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/sup-h.tsx b/src/headers/sup-h.tsx
index a81d1470..220ae90d 100644
--- a/src/headers/sup-h.tsx
+++ b/src/headers/sup-h.tsx
@@ -7,4 +7,4 @@ export function SUPH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/team-h.tsx b/src/headers/team-h.tsx
index 733d556b..b9afcc13 100644
--- a/src/headers/team-h.tsx
+++ b/src/headers/team-h.tsx
@@ -7,4 +7,4 @@ export function TEAMH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
diff --git a/src/headers/wiki-h.tsx b/src/headers/wiki-h.tsx
index f44a8492..063edf0e 100644
--- a/src/headers/wiki-h.tsx
+++ b/src/headers/wiki-h.tsx
@@ -7,4 +7,4 @@ export function WIKIH() {
);
}
-import HeaderBox from "../contents/header-box";
\ No newline at end of file
+import HeaderBox from "../components/header-box";
\ No newline at end of file
--
GitLab