diff --git a/src/App/App.css b/src/App/App.css
index 3400610a3e40944f6fa7834ef9784dd46cac3dd2..4f65c5a6f3d7a86a67ea5167d7d75ffe19fa5ce3 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -74,6 +74,10 @@ html{
display: none;
}
+.scrolllink span{
+ color: var(--background) !important;
+}
+
.small-row{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
@@ -128,10 +132,24 @@ hr{
/* * * * * * * */
/* * * BODY* * */
/* * * * * * * */
+
+@font-face { font-family: "AcuminPro"; src: url('https://static.igem.wiki/teams/5247/design/fonts/acumium-pro-book.ttf') format("truetype"); }
+
+.progress-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 5;
+ height: 4.5rem;
+ background: var(--darkerbeige) !important;
+ transform-origin: 0%;
+}
body {
/* padding-top: 56px; */
background-color: var(--ourbeige);
color: var(--offblack);
+ font-family: AcuminPro !important;
}
body.dark-mode {
background-color: var(--offblack);
@@ -144,9 +162,16 @@ a {
color: var(--accent-gradient-one-of-three) !important;
text-decoration: none !important;
}
-h3{
- margin-bottom: 2vw !important;
+.our-h3{
+ margin-top: 20px !important;
+ margin-bottom: 5px !important;
}
+.short-hr{
+ height: 1px !important;
+ border-width: 2px !important;
+}
+
+
code{
color:black !important;
}
@@ -225,9 +250,8 @@ color: var(--text-primary);
.sticky-top {
position: -webkit-sticky;
position: sticky !important;
- top: 0;
z-index: 1020;
- top: 80px !important;
+ top: 100px !important;
overflow-wrap: break-word;
}
.small-only{
@@ -329,7 +353,21 @@ tr:nth-child(1) {
.bg-video-container{
margin-bottom: 10vw !important;
}
-
+.b-lg{
+ border-color: var(--igemlightgreen) !important;
+}
+.b-lo{
+ border-color: var(--light-secondary) !important;
+}
+.bg-lg{
+ background-color: var(--igemlightgreen) !important;
+}
+.bg-lp{
+ background-color: var(--lightpurple) !important;
+}
+.bg-lo{
+ background-color: var(--light-secondary) !important;
+}
.bg-db{
background-color: var(--darkerbeige) !important;
}
@@ -379,7 +417,7 @@ margin-bottom: 10vw !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- font-size: 15vh;
+ font-size: 5rem;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw;
@@ -392,14 +430,24 @@ margin-bottom: 10vw !important;
min-height: 5vw;
margin-bottom: 20px !important;
}
-h2{
- font-size: 3rem !important;
- background-clip: text !important;
+.h2{
+ text-align:center;
+ text-transform:uppercase;
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;
- */}
+ font-size: 3rem !important ;
+ letter-spacing: 1px;
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ grid-template-rows: 16px 0;
+ grid-gap: 22px;
+ height: auto;
+}
+.h2-box{
+ margin-top: 8vh !important;
+ margin-bottom: 8vh !important;
+ height: auto;
+}
+
h1{
font-size: 4rem !important;
background-clip: text !important;
@@ -408,6 +456,78 @@ h2{
font-weight: bolder !important;
/* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
*/}
+ .h3{
+ margin-bottom: 40px !important;
+ text-align: center;
+ font-size: 2.5rem !important ;
+ text-transform: uppercase;
+ padding-bottom: 5px;
+ color: var(--text-primary) !important;
+ margin-top: 5vh !important;
+ }
+ .h3:after {
+ width: 28px;
+ height: 7px;
+ display: block;
+ content: "";
+ position: relative;
+ bottom: -12px;
+ left: 50%;
+ margin-left: -14px;
+ background-color: var(--mediumpurple);
+
+}
+.h3:before {
+ width: 150px;
+ height: 1px;
+ display: block;
+ content: "";
+ position: relative;
+ margin-top: 25px;
+ left: 50%;
+ bottom: -65px;
+ margin-left: -75px;
+ background-color: var(--text-primary);
+}
+
+h2{
+ color: var(--text-primary) !important
+}
+
+.h2:after, .h2:before {
+ content: " ";
+ display: block;
+ border-bottom: 5px solid var(--text-primary);
+ background-color: var(--background);
+ bottom: -1rem !important;
+ position: relative;
+}
+
+.h4:after, .h4:before {
+ content: " ";
+ display: block;
+ border-bottom: 1px solid var(--mediumpurple);
+ border-top: 1px solid var(--mediumpurple);
+ height: 5px;
+ background-color:var(--background);
+}
+.h4{
+ margin-top: 5px;
+ color: var(--text-primary) !important;
+ margin-top: 30px !important ;
+ font-size:15px; color:#444;
+ word-spacing:1px;
+ font-weight:normal;
+ letter-spacing:2px;
+ text-transform: uppercase;
+ font-weight:500;
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ grid-template-rows: 27px 0;
+ grid-gap: 20px;
+ align-items: center;
+}
+
.underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
@@ -573,6 +693,8 @@ footer a:hover {
.teamcolzwei{
margin-top: 3rem !important;
}
+
+
img,
picture,
svg {
@@ -600,12 +722,18 @@ img .middle{
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
-
+.pronouns{
+ font-size: 1rem !important;
+ font-style: italic !important;
+}
.team-name{
- font-size: large;
+ font-size: 1.6rem !important;
font-weight: bold;
text-align: left !important;
- width: min-content;
+ width: fit-content !important;
+}
+.team-img{
+ border-radius: 50% !important;
}
.socials{
height: 2rem;
@@ -620,6 +748,34 @@ img .middle{
.steckbrief{
margin-top: 2rem !important;
}
+.steckbrief-box{
+ height: fit-content;
+ padding: 10px;
+ border-radius: 30px;
+ box-shadow: 3px 3px 5px gray !important;
+}
+.steckbody{
+ height: 190px !important;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+.brieffacts{
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: 270px !important;
+}
+.frontbutton, .backbutton{
+ background-color: var(--mediumpurple) !important;
+ color: var(--background) !important;
+ padding: 5px;
+ border-radius: 10px;
+ margin: auto;
+
+}
+.parent-button{
+ display: flex;
+ align-items: center !important;
+}
.spin {
transition: transform 1s ease-in-out;
@@ -662,7 +818,11 @@ img .middle{
.img-round{
border-radius: 50%;
- max-width: 80%;
+ width: 100px;
+ height: 100px;
+ max-height: 12vh;
+ max-width: 12vh;
+ object-fit: cover !important;
}
.img-cube{
max-width: 80%;
@@ -2452,6 +2612,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
display: none;
}
+.timelinecardtabs{
+ max-width: 100% !important;
+}
+
.tabbutton{
padding: 5px;
border-radius: 10px;
@@ -2476,11 +2640,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote header */
-.blockquote h2 {
+.blockquote .block-h2 {
font-style: italic;
position: relative; /* for pseudos */
color: black;
- font-size: 2.8rem;
+ font-size: 2.8rem !important;
font-weight: normal;
line-height: 1;
font-size: larger;
@@ -2491,7 +2655,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote right double quotes */
-.blockquote h2:after {
+.blockquote .block-h2:after {
content:"";
position: absolute;
border: 5px solid var(--text-primary);
@@ -2505,7 +2669,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
z-index: 3;
}
-.blockquote h2:before {
+.blockquote .block-h2:before {
content:"";
position: absolute;
width: 80px;
@@ -2525,10 +2689,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote subheader */
-.blockquote h4 {
+.blockquote .block-h4{
position: relative;
color: black;
- font-size: 1.3rem;
+ font-size: 1.3rem !important;
font-weight: 400;
line-height: 1.2;
font-size: medium;
@@ -3565,4 +3729,124 @@ a{
.sideitem ul{
margin-left: 0 !important;
padding-left: 10px !important;
+}
+
+
+
+
+.symptom-img-wrapper img{
+ max-width: 100%;
+}
+
+.feedbackbfh div{
+ padding: 20px;
+ margin: 10px ;
+ border-radius: 10px;
+ border-width: 5px;
+ border-style: dashed;
+}
+.feedbackbfh div div{
+ padding: 20px;
+ margin: 10px ;
+ border-radius: 10px;
+ border-width: 0;
+}
+
+.bfh-motto{
+ padding: 10px;
+ background-color: var(--accent-primary);
+ width: fit-content;
+ border-radius: 10px;
+ margin: auto;
+ margin-bottom: 10px;
+}
+
+.bfh-haken{
+ position: relative;
+ font-size: x-large !important;
+ font-weight: 900 !important;
+ color: var(--accent-primary) !important;
+ margin-right: 5px;
+ top: 5px;
+}
+
+#eng-sidebar a{
+ color: var(--text-primary) !important;
+}
+
+
+.quiz-wrapper{
+ height: 95% !important;
+ display: flex;
+ align-items: center !important;
+ margin-bottom: 15px !important;
+ border-radius: 10px;
+ border-width: 3px;
+ border-style: dotted;
+ border-color: var(--text-primary);
+ padding: 10px;
+}
+
+.quiz-front, .quiz-back{
+ align-self: center;
+ height: 100% !important;
+ align-items: center;
+ text-align: center;
+}
+.quiz-text col{
+ align-content: stretch;
+ align-items: stretch;
+}
+.quiz-text{
+ align-content: stretch;
+ align-items: stretch;
+ margin: auto !important;
+ padding: 15px;
+ display: flex !important;
+ min-height: 40% !important;
+}
+.quiz-button-box{
+justify-content: center;
+height: min-content !important;
+}
+
+.quiz-button{
+ position: relative;
+ bottom: 0;
+ margin-top: auto !important;
+ align-self: baseline;
+ width: fit-content !important;
+ border-radius: 10px;
+ padding: 5px;
+ background-color: var(--very-light-purple);
+ border-color: var(--lightpurple);
+}
+
+.quiz-heading{
+ padding-top: 10px;
+ font-size: 2rem;
+ font-weight: bold;
+ letter-spacing:0.1em;
+ -webkit-text-fill-color: var(--very-light-purple);
+ -webkit-text-stroke-width: 2px;
+ -webkit-text-stroke-color: var(--text-primary);
+}
+
+.h5-box{
+ display: grid;
+ justify-content: center;
+}
+
+.h5{
+ color: var(--text-primary) !important;
+ font-size: 1.3rem !important;
+ line-height: 1.0;
+ word-spacing: 1px !important;
+ display: grid;
+ grid-template-rows: 27px 0;
+ grid-gap: 20px;
+ align-items: center;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ align-self: center;
}
\ No newline at end of file