Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

src/App/App.css

@@ -74,10 +74,6 @@ html{
   display: none;
 }
 
-.scrolllink span{
-  color: var(--background) !important;
-}
-
 .small-row{
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
@@ -132,24 +128,10 @@ 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);
@@ -162,16 +144,9 @@ a {
   color: var(--accent-gradient-one-of-three) !important;
   text-decoration: none !important;
 }
-.our-h3{
-  margin-top: 20px !important;
-  margin-bottom: 5px !important;
+h3{
+  margin-bottom: 2vw !important;
 }
-.short-hr{
-  height: 1px !important;
-  border-width: 2px !important;
-}
-
-
 code{
   color:black !important;
 }
@@ -250,8 +225,9 @@ color: var(--text-primary);
 .sticky-top {
   position: -webkit-sticky;
   position: sticky !important; 
+  top: 0;
   z-index: 1020;
-  top: 100px !important; 
+  top: 80px !important; 
   overflow-wrap: break-word;
 }
 .small-only{
@@ -353,21 +329,7 @@ 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;
 }
@@ -417,7 +379,7 @@ margin-bottom: 10vw !important;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 5rem;
+  font-size: 15vh;
 	letter-spacing:0.1em;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke-width: 0.3vw;
@@ -430,24 +392,14 @@ margin-bottom: 10vw !important;
   min-height: 5vw;
   margin-bottom: 20px !important;
 }
-.h2{
-  text-align:center;
-  text-transform:uppercase;
+h2{
+  font-size: 3rem !important;
+  background-clip: text !important;
   color: var(--text-primary) !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;
-}
-
+  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;
+ */}
  h1{
   font-size: 4rem !important;
   background-clip: text !important;
@@ -456,78 +408,6 @@ margin-bottom: 10vw !important;
   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%);
@@ -693,8 +573,6 @@ footer a:hover {
 .teamcolzwei{
   margin-top: 3rem !important;
 }
-
-
 img,
 picture,
 svg {
@@ -722,18 +600,12 @@ img .middle{
 /* .sponsor-portrait{
   border: 5px solid var(--accent-primary);
 } */
-.pronouns{
-  font-size: 1rem !important;
-  font-style: italic !important;
-}
+
 .team-name{
-  font-size: 1.6rem !important;
+  font-size: large;
   font-weight: bold;
   text-align: left !important;
-  width: fit-content !important;
-}
-.team-img{
-  border-radius: 50% !important;
+  width: min-content;
 }
 .socials{
   height: 2rem;
@@ -748,34 +620,6 @@ 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;
@@ -818,11 +662,7 @@ img .middle{
 
 .img-round{
   border-radius: 50%;
-  width: 100px;
-  height: 100px;
-  max-height: 12vh;
-  max-width: 12vh; 
-  object-fit: cover !important;
+  max-width: 80%;
 }
 .img-cube{
   max-width: 80%;
@@ -2612,10 +2452,6 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
   display: none;
 }
 
-.timelinecardtabs{
-  max-width: 100% !important;
-}
-
 .tabbutton{
   padding: 5px;
   border-radius: 10px;
@@ -2640,11 +2476,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 /* Blockquote header */
-.blockquote .block-h2 {
+.blockquote h2 {
    font-style: italic;
    position: relative; /* for pseudos */
    color: black;
-   font-size: 2.8rem !important;
+   font-size: 2.8rem;
    font-weight: normal;
    line-height: 1;
    font-size: larger;
@@ -2655,7 +2491,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 /* Blockquote right double quotes */
-.blockquote .block-h2:after {
+.blockquote h2:after {
    content:"";
    position: absolute;
    border: 5px solid var(--text-primary);
@@ -2669,7 +2505,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
    z-index: 3; 
 }
 
-.blockquote .block-h2:before {
+.blockquote h2:before {
    content:"";
    position: absolute;
    width: 80px;
@@ -2689,10 +2525,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
 }
 
 /* Blockquote subheader */
-.blockquote .block-h4{
+.blockquote h4 {
    position: relative;
    color: black;
-   font-size: 1.3rem !important; 
+   font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.2;
    font-size: medium;
@@ -3729,124 +3565,4 @@ 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

src/App/mediarules.css

@@ -148,10 +148,10 @@
         max-width: 60vw !important;
         margin: auto;
       }
-svg text{
+/*svg text{
     font-size: 3vw !important;
     stroke-width:1px !important;
-}
+}*/
 .village-style-button h3{
     display: none !important;
 }
@@ -202,7 +202,6 @@ body {
 }
 .container {
     padding: 10px;
-    max-width: 100%;
   }
 
  .row{