design

src/App/App.css

@@ -3,6 +3,7 @@
 /* * * * * * * */
 :root {
   /* our colours*/ 
+  --ourgradient: linear-gradient(90deg, rgba(147,94,184,1) 0%, rgba(160,167,243,1) 100%);
   --text-primary: #850F78 ; 
   --mediumpurple: #bc15aa; 
   --lightpurple: #B85BD1; 
@@ -264,8 +265,8 @@ color: var(--text-primary);
   max-width: 100% !important; 
 }
 .header-container{
-  padding-top: 380px;
-  padding-bottom: 60px;
+  padding-top: 100px;
+  padding-bottom: 10px;
   background-color: var(--ourbeige);
 }
 .null{
@@ -1095,8 +1096,11 @@ svg{
 .container_document{
   max-width: 40%;
 }
+.download-butt{
+  color: var(--ourbeige) !important;
+}
 .download-butt{ /* @media unnötig */
-  background-color: var(--text-primary);
+  background: var(--ourgradient); 
   padding: 0.5vh !important;
   border-radius: 5px;
   margin: auto !important;
@@ -3223,7 +3227,7 @@ div[class*="boxy"] {
 }
 
 .boxy-1 {
-  background-color: var(--text-primary);
+  background: var(--ourgradient); 
   max-width: fit-content;
 }
 .boxy-2 {
@@ -3307,7 +3311,7 @@ div[class*="boxy"] {
   text-decoration: none;
   padding: 10px;
   color:var(--ourbeige) !important;
-  background: var(--text-primary);
+  background: var(--ourgradient); 
   border-radius: 100px;
   white-space: nowrap;
   margin-left: 40px;
@@ -3537,12 +3541,12 @@ svg a:hover text{
  }
 
  .active-sideitem {
-  background-color: var(--text-primary) !important;
+  background: var(--ourgradient); 
   color: var(--ourbeige) !important;
   border-radius: 5px;
   display: block;
   border-width: 5px;
-  border-color: #850F78;
+  border-color: var(--lightblue);
   padding-right: 5px;
   padding-left: 5px;
  }
@@ -4017,7 +4021,17 @@ figure img{
   border-radius: 10px;
 }
 
+.nav-item, .nav-dropdown, .dropdown-toggle{
+  border-radius: 10px !important;
+}
+
 
 .sponsor-text-left h4{
   text-align: right;
+}
+
+#hphead{
+  background-image: url("https://static.igem.wiki/teams/5247/photos/header/human-practices.webp");
+  background-size: 1650px auto;
+  background-repeat: no-repeat;
 }
\ No newline at end of file

src/components/HeaderBox.tsx

@@ -4,9 +4,10 @@ interface Props{
     title: string ,
     title2?: string,
     children?: React.ReactNode,
+    id: string
 }
 
-export default function HeaderBox({children, title, title2}: Props ){
+export default function HeaderBox({children, title, title2, id}: Props ){
   var ti: string = "";
   if (title2) {
     ti = title2;
@@ -15,7 +16,7 @@ export default function HeaderBox({children, title, title2}: Props ){
         <>
         <div className="col">
           <div className="col header-container">
-            <div className="row header-title">
+            <div className="row header-title" id={id}>
               <Hwave text={title}></Hwave>
               <Hwave text={ti}></Hwave>
 

src/headers/hp-h.tsx

 export function HPH() {
 
   return (
-    <HeaderBox title="Human" title2="Practices">
+    <HeaderBox title="Human" title2="Practices" id="hphead">
       
     </HeaderBox>
   );

src/utils/Highlight-functions.ts

@@ -11,7 +11,6 @@ export function NewHighlight({el}: {el: HTMLElement | null}, {subtitle}:{subtitl
         // console.log(el.getBoundingClientRect()) 
         if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
             subtitle.style.color = "var(--ourbeige)";
-            subtitle.style.backgroundColor = "rgb(133, 15, 120, 0.8)";
             subtitle.style.borderColor = "#850F78"; 
             subtitle.style.marginLeft = "5px"; 
             subtitle.style.paddingRight = "5px";