diff --git a/index.html b/index.html
index 308569b1effa1dc86f23dcc4f86d65a44250d6e3..563695970f93b50614f1f8dd120b6f6c737736a4 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 d5d7109a5fcc75e38a58c84f5448bdc2243612b4..a3fdd2d7a8917b379259d9b7adad75f43d8f97db 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 44ee0812a2db3b2fff32166e82b10f252293f5b2..d59dbea5f817df9297b6cf96305232abae0b8154 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 5a44913ce632d4049370817ff09a1115d729c0c7..3c1dd6406fccee1acd5d0d66094632aaecb772d6 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 7c10b3fae663a50ba34c2be1c37391f1f247516f..a5544c28546ce2574bb0c22d857abfb192a0792e 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 51ec034ea879294555a2c3a72c2f07e967532622..902340c0f6adfee91a6c8911a8b146595d292d91 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 a247292e8c757335b1abeba4911db908d975525d..e0f3fc329504dc07044705abeca6bbfba1a06299 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 24ae3ef19c092702e1d3758aeb937d16a18148a5..cd91308649f91da5d4cd1780bd142b78423744ae 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 c135f1458ac38bc9b40290f941c3070320df4725..ed70130cb75ddd753af14ecaaada6d975cd2c5c7 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 18b43088a3965cef849ec5e13ce0db84dcdf6c00..b2493f1072f09237eac87daf8df8b027f5674e20 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 0fe088c9095ed3456c2ec2b5aba0c1319dd120ed..22120b2796a466c4a7fb6c17ce4d3d9ba5519053 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 80b261faa662c4646b59684ebcf67f86d253f86e..8088d9d252e778620231e4d47198f26b5976d384 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 8235ad65bc3d56973d8c7f09aecfd40ad70281bc..76b7bd84671fa302fdef704ff093c48e9fffe036 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 945a31ea1704c524edbc2ec40623d02c0dfa22e9..9fc5617326fe946bb68318af4581b384dd6ef63d 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 f3d19ec1ebba22da6751d3ef179019bd78e6fed6..96cf2b4aefc536459f78729a7dffd77d4282350c 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 e915b14f29ccb4aff10efd0decac34c896f5358d..970527d3e9b5465dfb28208c8129b37296958a2b 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 290a1704490d6a1f969d4bac87a013c1f5322ec1..0c2703ebca7d0a926e5619c1d13032586b86afa9 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 8d598cab67d8cf906eb272e4ebf2eadd1facb5cd..b352ae08d2cbc5f7f0db9ac4bbad13dcd35e645e 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 0f447d6ce6dc802061ae77f52a1ac700c5582146..a164230004ddf490e6cba84663c3b0d3f3c6c2bb 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 f46632144b0db66a403e42070e2376594164739e..9db7bc521dec53e79c6f687d91e1157e60a419d1 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 afc03aa1b9422bbfad760c76f282a9535492d6f0..c25f4c9c64091e3d2e5a707055405bc7bfa78f38 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 d290e8bd28fcc6f36bf5e35de91ba006190646ea..df17bb4074960fdb2ef75c26321dc41aab2c4ae7 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 7f2090daccd99c45569f57eebbdc611cb2cd83db..7b9b435041a6e39a2ff32379e709805e10a5d5c1 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 aa8e7d6c028b4e05aa268d625b6e3371a727e501..ef78ba8d32edb7b6c5b61373cf58623c656ea136 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 65e3d367ff058f269599690b25613f2c0db460fa..92cb2028879951b18f1af29088f59b24a35798ff 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 a81d147069626c32eb8577beb478f4609fe2d65f..220ae90d76e571ad9fa430d4e36d7ab0a8917de8 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 733d556b704c24a15b331b71361b9232bd9f3053..b9afcc13a298fddf56c07450ddc0279c8972324c 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 f44a84920a6f3326491614818f7846e187a819c7..063edf0ea668600156fbd4823241bca6159626e0 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