From 7d79b5dbcff23f0430ad5e6b5772405c60d4c2fa Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 29 Sep 2024 23:00:57 +0200
Subject: [PATCH] header
---
src/App/App.css | 13 ++++++++++---
src/components/Headings.tsx | 31 +++++++++++++++++++++++++++----
2 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 9e3f941e..4bd2afc6 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -265,7 +265,7 @@ color: var(--text-primary);
max-width: 100% !important;
}
.header-container{
- padding-top: 100px;
+ padding-top: 0;
padding-bottom: 10px;
background-color: var(--ourbeige);
}
@@ -421,7 +421,6 @@ margin-bottom: 10vw !important;
}
.header-title{
- color: var(--text-primary) !important;
text-align: center;
align-items: center;
margin: auto !important;
@@ -4031,11 +4030,19 @@ figure img{
}
#hphead{
- background-image: url("https://static.igem.wiki/teams/5247/photos/header/human-practices.webp");
+ background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,200,0.2)), url("https://static.igem.wiki/teams/5247/photos/header/human-practices.webp");
+
+}
+
+#hphead{
background-size: 1650px auto;
background-repeat: no-repeat;
}
+.header-title{
+ min-height: 900px;
+}
+
.download-butt span {
display: inline-block;
padding: 10px;
diff --git a/src/components/Headings.tsx b/src/components/Headings.tsx
index dbcf1fac..df4a4124 100644
--- a/src/components/Headings.tsx
+++ b/src/components/Headings.tsx
@@ -150,7 +150,7 @@ export function Hwave({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text);
}
return(
- <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
+ /* <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stopColor="#850F78"/>
@@ -169,9 +169,32 @@ export function Hwave({text, id}:{text: string, id?: string}){
</path>
</pattern>
</defs>
- <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)" fillOpacity="0.6">{text}</text>
- <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.3">{text}</text>
- </svg>
+ <text textAnchor="middle" x="50" y="15" fontSize="13" fill="white" fillOpacity="1">{text}</text>
+ <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)" fillOpacity="0.7">{text}</text>
+ <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#gradient)" fillOpacity="0.9">{text}</text>
+ </svg> */
+ <svg id={idtext} className="bigtitle" viewBox="0 0 100 20">
+ <defs>
+ <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+ <stop offset="5%" stopColor="#850F78" />
+ <stop offset="95%" stopColor="#A0A7F3" />
+ </linearGradient>
+ <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
+ <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)">
+ <animateTransform
+ attributeName="transform"
+ begin="0s"
+ dur="3s"
+ type="translate"
+ from="0,0"
+ to="40,0"
+ repeatCount="indefinite" />
+ </path>
+ </pattern>
+ </defs>
+ <text textAnchor="middle" x="50" y="15" fontSize="13" stroke="var(--ourbeige)" strokeWidth={"0.2px"} fill="url(#gradient)">{text}</text>
+ <text textAnchor="middle" x="50" y="15" fontSize="13" fill="url(#wave)"stroke="var(--ourbeige)" strokeWidth={"0.2px"} fillOpacity="1">{text}</text>
+</svg>
)
}
--
GitLab