diff --git a/src/App/App.css b/src/App/App.css
index 6ec2d47a3a77530d06513bee7b11ae3d76479397..8cc619fd7c93d1ed8a8ba9d7f6cf8b9a32264eed 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3,7 +3,7 @@
/* * * * * * * */
:root {
/* our colours*/
- --text-primary: #850F78;
+ --text-primary: #850F78 ;
--mediumpurple: #bc15aa;
/*--purple: #B85BD1; */
--accen-secondary: #F57D22;
@@ -13,6 +13,8 @@
--accent-primary: #F4CC1E;
--lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
+ --lightblue-zwei: #abb1f4;
+ --lightblue-drei: #c6caf8;
--verylightblue: #ebecfd;
--offblack: #32232C ;
--cebitecgray: #8295A4;
@@ -48,11 +50,27 @@
--node-size: 60px;
}
+html{
+ scroll-behavior: smooth;
+}
+.max400{
+ max-height: 400px !important;
+}
.none{
display: none;
}
+.small-row{
+ --bs-gutter-x: 1.5rem;
+ --bs-gutter-y: 0;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(-1 * var(--bs-gutter-y));
+ margin-right: calc(-.5 * var(--bs-gutter-x));
+ margin-left: calc(-.5 * var(--bs-gutter-x));
+}
+
.col-max{
flex: 0 0 0%;
width: max-content !important;
@@ -64,10 +82,13 @@
width:16.66666667% !important;
}
+
.col-1{
width: 8.33333333% !important;
}
-
+.col2punkt5{
+ width: 20% !important;
+}
.col-max-10{
flex: 0 0 auto;
max-width: 83.33333333% !important;
@@ -76,7 +97,20 @@
.col{
max-width: 100% !important;
}
-
+.no-pad{
+ padding: 0 !important;
+}
+.no-marg{
+ margin: 0 !important;
+}
+hr{
+ color: var(--text-primary) !important;
+ margin: 0 !important;
+ opacity: 1 !important;
+ height: 5px;
+ border-width: 3px !important;
+ margin-bottom: 10px !important;
+}
/* * * * * * * */
/* * * BODY* * */
@@ -94,14 +128,19 @@ p {
text-align: justify;
}
a {
- color: var(--lightblue) !important;
+ color: var(--accent-gradient-one-of-three) !important;
text-decoration: none !important;
}
-
+h3{
+ margin-bottom: 2vw !important;
+}
code{
color:black !important;
}
+.doi{
+ color: var(--text-primary) !important;
+}
.codesnippet{
padding-left: 30px;
padding-top: 5px;
@@ -130,13 +169,30 @@ code{
text-shadow: 5px 5px 15px black;
transition: all 0.1s linear;
}
+.sideitem{
+ min-height: 40px;
+ display: inline-block;
+}
+
+.active-sideitem summary{
+ color: white;
+}
+
+.sidesubtab ul{
+ list-style-type: none;
+}
.sidebar>div{
overflow: hidden;
-text-align: center;
+text-align: left;
+margin-left: 10px;
cursor: pointer;
}
+
+/* .sidebar div a div div span ul li a span{
+ color: white ;
+} */
.sidebar>div>a>span{
-padding: 1rem;
+padding: 0.5rem;
color: var(--text-primary);
}
.active-scroll-spy{
@@ -150,7 +206,7 @@ color: var(--text-primary);
.absolute{position: absolute;}
.left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important}
-.zweirem{padding: 2rem;}
+.zweirem{padding-top: 2rem; padding-bottom: 3rem;}
.left{float: left;}
.right{float: right;}
.sticky-top {
@@ -161,6 +217,9 @@ color: var(--text-primary);
top: 80px !important;
overflow-wrap: break-word;
}
+.small-only{
+ display: none;
+}
.fullsize{
max-height: 100% !important;
max-width: 100% !important;
@@ -247,15 +306,23 @@ tr:nth-child(odd) {
background-color: #f3f3f3;
}
tr:nth-child(1) {
- background-color: var(--lightblue) !important;
+ background-color: var(--accent-gradient-one-of-three) !important;
}
+
/* * * * * * * */
/* BACKGROUND */
/* * * * * * * */
.bg-video-container{
margin-bottom: 10vw !important;
}
+
+.bg-db{
+ background-color: var(--darkerbeige) !important;
+}
+.bg-lb{
+ background-color: var(--lightblue) !important;
+}
.bg-d{
background-color: var(--text-primary) !important;
}
@@ -279,7 +346,7 @@ margin-bottom: 10vw !important;
}
.header-title{
- color: var(--text-primary);
+ color: var(--text-primary) !important;
text-align: left;
align-self: flex-start;
padding: 0 30px;
@@ -298,23 +365,25 @@ margin-bottom: 10vw !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- font-size: 5vw;
+ font-size: 15vh;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw;
-webkit-text-stroke-color: var(--accent-primary);
text-shadow:
- 0.4vw 0.4vw var(--mediumpurple),
- 0.8vw 0.8vw var(--offblack);
+ 0.4vw 0.4vw var(--text-primary ),
+ 1vw 1vw var(--offblack);
+}
+.popart-wrapper{
+ min-height: 5vw;
+ margin-bottom: 20px !important;
}
h2{
font-size: 3rem !important;
- -webkit-background-clip: text !important;
- -webkit-text-stroke-width: 2px !important;
- -webkit-text-stroke-color: var(--text-primary) !important;
background-clip: text !important;
- color: transparent !important;
+ 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;
*/}
@@ -404,12 +473,12 @@ footer{
background-color: var(--background);
}
footer a {
- color: white;
+ color: var(--ourbeige) !important;
font-weight: bold;
text-decoration: none;
}
footer a:hover {
- color: white;
+ color: var(--accent-gradient-three-of-three) !important;
text-decoration: underline;
}
@@ -430,7 +499,7 @@ footer a:hover {
}
.bfh-more-button{
- margin-top: 10px;
+ margin-top: 20px;
padding: 5px;
border-radius: 10px;
padding-left: 10px;
@@ -453,12 +522,13 @@ footer a:hover {
padding-left: 30px;
}
.village-style-button{
+ flex: 1 0 0%;
box-shadow: 5px 5px 15px gray !important;
border-radius: 2rem !important;
padding: 0 !important;
max-width: 12% !important;
aspect-ratio: 2 / 3 !important;
- margin-left: 1vw;
+ margin: auto;
}
.village-style-button:hover{
box-shadow: 5px 5px 15px black !important;
@@ -478,13 +548,21 @@ footer a:hover {
/* * * * * * * * * */
/* * * IMAGES * * */
/* * * * * * * * * */
+.teamcolzwei{
+ margin-top: 3rem !important;
+}
img,
picture,
svg {
max-width: 100%;
display: block;
}
-
+.winner-img{ /* @media */
+ margin-left: 20px;
+ width: 5vw !important;
+ max-height: 100px;
+ margin-top: 10px !important;
+}
.s-svg{
max-width: 80%;
}
@@ -500,11 +578,27 @@ img .middle{
/* .sponsor-portrait{
border: 5px solid var(--accent-primary);
} */
+
+.team-name{
+ font-size: large;
+ font-weight: bold;
+ text-align: left !important;
+ width: min-content;
+}
.socials{
height: 1.5rem;
width: auto;
margin: 0.5rem;
}
+.team-socials{
+ height: 1rem;
+ width: auto;
+ margin-left: 0.2rem;
+}
+.steckbrief{
+ margin-top: 2rem !important;
+}
+
.spin {
transition: transform 1s ease-in-out;
}
@@ -540,11 +634,17 @@ img .middle{
.img-half{
max-width: 50% !important;
}
+.interview-img{
+ max-height: 70% !important;
+}
.img-round{
border-radius: 50%;
max-width: 80%;
}
+.img-cube{
+ max-width: 80%;
+}
.updown{
max-width: 3vw;
}
@@ -578,9 +678,10 @@ img .middle{
display: flex;
vertical-align: middle;
}
+
#idt-portrait{
height: 350px !important;
- background-image: url(https://static.igem.wiki/teams/5247/photos/lab/in-inhaler-flipped.jpg);
+ background-image: url(https://static.igem.wiki/teams/5247/sponsors/idt-foto.png);
background-size: auto 100%;
background-repeat: no-repeat;
}
@@ -619,93 +720,6 @@ svg{
}
-
-
-/* * * * * * * */
-/* MEDIA RULES */
-/* * * * * * * */
-/*For tablet or bigger*/
-@media screen and (min-width: 992px) {
- /* navbar opens on hover*/
- .dropdown:hover .dropdown-menu {
- display: block;
- }
-}
-/*For Tablet and smaller*/
-@media screen and (max-width: 992px){
- .navbar {
- flex-direction: column;
- align-items: center;
- }
-
- /* Adjust font sizes for readability */
- h1 {
- font-size: 2rem;
- }
-
- .col-6 {
- width: 100%; /* Full width on tablets */
- }
-}
-/*For Smartphones*/
-@media screen and (max-width: 768px ){
-
- h1, h2, h3 {
- font-size: 30px !important;
- line-height: 1.2 !important;
- }
-
- svg text{
- font-size: 6vw !important;
- stroke-width:1px !important;
- }
- .village-style-button h3{
- display: none !important;
- }
- .village-style-button{
- box-shadow: 1px 1px 1px gray;
- border-radius: 10px;
- border-color: black;
- padding: 10px;
- }
- .village-style-button:hover{
- box-shadow: none;
- }
- .village-style-button img{
- max-width: 90%;
- max-height: 90%;
- padding-top: 10px;
- padding-bottom: 5px;
- }
- .img-half{
- max-width: 100% !important;
- }
- .col-6 {
- width: 100%; /* Full width for smartphone */
- }
- .container {
- padding: 10px;
- }
-}
-/*Bigger than smartphones*/
-@media only screen and (min-width:768px) {
- .col-1 {width: 8.33%;}
- .col-2 {width: 16.66%;}
- .col-3 {width: 25%;}
- .col-4 {width: 33.33%;}
- .col-5 {width: 41.66%;}
- .col-6 {width: 50%;}
- .col-7 {width: 58.33%;}
- .col-8 {width: 66.66%;}
- .col-9 {width: 75%;}
- .col-10 {width: 83.33%;}
- .col-11 {width: 91.66%;}
- .col-12 {width: 100%;}
-
-
-}
-
-
/* * * * * * * */
/* * EFFECTS * */
/* * * * * * * */
@@ -794,151 +808,7 @@ svg{
padding-top: 10px;
padding-bottom: 10px;
}
-/* TIMELINE EINS */
-
-.timeline-container {
- display: flex;
- flex-direction: column;
- position: relative;
- margin: 40px 0;
-}
-
-.timeline-container::after {
- background-color: var(--text-primary);
- position: absolute;
- left: calc(50% - 2px);
- content: "";
- width: 4px;
- height: 100%;
- z-index: 0;
-}
-.timeline-item {
- min-width: 100px;
- /* display: flex; */
- justify-content: flex-end;
- padding-right: 30px;
- position: relative;
- margin: 10px 0;
- width: 50%;
-}
-
-.timeline-item:nth-child(odd) {
- align-self: flex-end;
- justify-content: flex-start;
- padding-left: 30px;
- padding-right: 0;
-}
-.timeline-item-content {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 15px;
- position: relative;
- text-align: right;
-}
-.timeline-end{
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- padding: 15px;
- position: relative;
- text-align: center;
- z-index: 1;
- margin-top: 8vw;
-}
-.timeline-begin{
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- padding: 15px;
- position: relative;
- text-align: center;
- z-index: 1;
- margin-bottom: 8vw;
-}
-
-.timeline-item-content::after {
- background-color: #fff;
- box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
- position: absolute;
- right: -7.5px;
- top: calc(50% - 7.5px);
- transform: rotate(45deg);
- width: 15px;
- height: 15px;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content {
- text-align: left;
- align-items: flex-start;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content::after {
- right: auto;
- left: -7.5px;
- box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
-}
-.timeline-item-content .tag {
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- top: 5px;
- left: 5px;
- letter-spacing: 1px;
- padding: 5px;
- position: absolute;
- text-transform: uppercase;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content .tag {
- left: auto;
- right: 5px;
-}
-
-.timeline-item-content time {
- color: var(--lightblue);
- font-size: 12px;
- font-weight: bold;
-}
-
-.timeline-item-content p {
- font-size: 16px;
- line-height: 24px;
- margin: 15px 0;
-/* max-width: 250px; */
-}
-.timeline-item-content span{
- font-size: 18px;
-}
-
-.timeline-item-content a {
- font-size: 14px;
- font-weight: bold;
-}
-.timeline-item-content a::after {
- font-size: 12px;
-}
-
-.timeline-item-content .circle {
- background-color: #fff;
- border: 3px solid var(--text-primary);
- border-radius: 50%;
- position: absolute;
- top: calc(50% - 10px);
- right: -40px;
- width: 20px;
- height: 20px;
- z-index: 100;
-}
-
-.timeline-item:nth-child(odd) .timeline-item-content .circle {
- right: auto;
- left: -40px;
-}
@media only screen and (max-width: 1023px) {
.timeline-item-content {
max-width: 100%;
@@ -970,196 +840,15 @@ svg{
display: none;
}
}
-/* Horizontal */
-.timeline {
- white-space: nowrap;
- min-height: 500px;
- width: 83vw;
- overflow-x: auto;
- overflow-y: hidden;
- background-color: inherit;
- font-size: 1rem;
-}
-
-.timelineol {
- font-size: 0;
- width: 100vw;
- padding: 250px 0;
- transition: all 1s;
-}
-.t-tag{
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- letter-spacing: 1px;
- padding: 5px;
- margin-bottom: 10px;
- text-transform: uppercase;
- width: fit-content !important;
-}
-
-button.tabbutton.Patient.active, button.tabbutton.All.active,
-button.tabbutton.Industry.active, button.tabbutton.Academia.active,
-button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
- border-color: black;
-}
-
-button.tabbutton:nth-child(1){
- background-color: white;
-}
-
-.Patient, button.tabbutton:nth-child(2){
- background-color: var(--accen-secondary);
-}
-
-.Medical, button.tabbutton:nth-child(3){
- background-color: var(--accent-primary);
-}
-
-.Academia, .Research, button.tabbutton:nth-child(4){
- background-color: var(--lightblue);
-}
-
-.Industry, button.tabbutton:nth-child(5){
- background-color: var(--mediumpurple);
-}
-.Activist, button.tabbutton:nth-child(6){
- background-color: var(--igemlightgreen);
-}
-
-.Ethics{
- background-color: var(--offblack);
-}
-
-.timelineolli {
- position: relative;
- display: inline-block;
- list-style-type: none;
- width: 160px;
- height: 5px;
- /* background-image: url("../components/data/stroke.svg");
- background-size: auto 100%;
- background-repeat: round;
- background-position: 0em; */
- background: var(--text-primary);
-}
-.timeline ol li:last-child {
- width: 280px;
-}
-
-
-.timeline ol li:not(:first-child) {
- margin-left: 14px;
-}
-
-.timeline ol li:not(:last-child)::after {
- content: '';
- position: absolute;
- top: 50%;
- left: calc(100% + 1px);
- bottom: 0;
- width: 12px;
- height: 12px;
- transform: translateY(-50%);
- border-radius: 50%;
- background: var(--text-primary);
-}
-
-
-.timeline ol li .timeline-item {
- min-height: 310%;
- position: absolute;
- left: calc(100% + 7px);
- width: 280px;
- padding: 15px;
- font-size: 0.9rem;
- white-space: normal;
- color: black;
- background: white;
-}
-.timeline ol li:nth-child(2n+1) .moretop{
- top: -30px !important;
-}
-
-.timeline ol li .timeline-item::before {
- content: '';
- position: absolute;
- top: 100%;
- left: 0;
- width: 0;
- height: 0;
- border-style: solid;
-
-}
-
-.timeline ol li:nth-child(odd) .timeline-item {
- top: -16px;
- transform: translateY(-100%);
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-}
-
-.timeline ol li:nth-child(even) .timeline-item {
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- top: calc(100% + 16px);
-}
-.timeline ol li:nth-child(odd) .timeline-item::before {
- top: 100%;
- border-width: 8px 8px 0 0;
- border-color: white transparent transparent transparent;
-}
-.timeline ol li:nth-child(even) .timeline-item::before {
- top: -8px;
- border-width: 8px 0 0 8px;
- border-color: transparent transparent transparent white;
-}
-
-
-
-
-
-
-.card {
- border-radius: 4px;
- background-color: #fff;
- color: #333;
- padding: 10px;
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- width: 100%;
- max-width: 560px;
-
-}
-
-.date {
- background-color: var(--text-primary) !important;
- padding: 4px !important;
- color: #fff !important;
- border-radius: 4px !important;
- font-weight: 500;
- font-size: .85rem;
-}
-.imageAtom{
- object-fit: cover;
- overflow: hidden;
- width: 100%;
- max-height: 400px;
-}
.imageCredit { margin-top: 10px; font-size: 0.85rem }
.imageText { margin-bottom: 10px; font-size: 1rem }
.events{ padding: 10px }
.event { margin-bottom: 20px }
-.date-col{
- position: relative;
- background-color: #fff ;
- padding: 10px;
- width: 10%;
- border-right: #000;
- border-right-width: 2px;
-}
+
.card-col{
width: 100%;
@@ -1196,31 +885,42 @@ button.tabbutton:nth-child(1){
.container_document{
max-width: 40%;
}
-
-
-.download-butt{
+.download-butt{ /* @media unnötig */
background-color: var(--text-primary);
- padding: 0.5vw;
+ padding: 0.5vh !important;
border-radius: 5px;
margin: auto !important;
- width: fit-content !important;
-}
+ text-align: center;
+ min-width: 5vw !important;
+ width: 30vw !important;
+ max-width: 200px !important;
+ min-height: 2vh !important;
+}
.download-col{
- height: 5vw !important;
+ height: 5vh !important;
display: flex;
align-items: center !important;
}
-.small-i{
- width: 80%;
+.small-i{ /* @media unnötig */
+ width: 100%;
+ max-width: 1100px !important;
+}
+.one-pdf-line{ /* @media fertig */
+ height: 1450px !important;
+}
+.two-pdf-line{ /* @media fertig */
+ max-height: 650px !important;
+ height: 35vh !important;
+ max-width: 50%;
}
-
/* SHAPES */
.circle {
display: flex;
width: 10vw;
+ color: white;
height: 10vw;
- background-color: var(--lightblue) !important;
+ background-color: var(--text-primary) !important;
box-shadow: 3px 3px 10px black !important;
border-radius: 50%;
margin: 1vw;
@@ -1234,9 +934,9 @@ button.tabbutton:nth-child(1){
/*collapsible*/
.collapse-card {
+ margin-bottom: 20px;
border-radius: 4px;
- background-color: var(--ourbeige);
- margin-top: 10px;
+ margin-top: 20px;
color: #333;
padding: 5px;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
@@ -1248,7 +948,7 @@ button.tabbutton:nth-child(1){
/*boxes*/
.hint-container {
position:relative;
- transition:background var(--vp-ct),border-color var(--vp-ct),color var(--vp-ct)
+ transition:background var(--vp-ct)border-color var(--vp-ct),color var(--vp-ct)
}
@media print {
.hint-container {
@@ -1592,16 +1292,16 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
display: block;
margin-left: auto;
margin-right: auto;
- width: 16rem !important;
+ width: 8rem !important;
max-width: 66% !important;
transition: all 1s ease;
border: 5px solid var(--text-primary);
}
.lnp:hover > img{
display: block;
- margin-left: auto;
- margin-right: auto;
- width: 100% !important;
+ margin-left: none;
+ margin-right: none;
+ width: 25rem !important;
max-width: 100% !important;
}
@@ -3252,6 +2952,7 @@ div[class*="boxy"] {
display: flex;
justify-content: center;
align-items: center;
+ margin: auto;
}
.boxy-1 {
@@ -3339,6 +3040,8 @@ div[class*="boxy"] {
background: var(--text-primary);
border-radius: 100px;
white-space: nowrap;
+ margin-left: 40px;
+ margin-top: 20px;
text-align: right;
}
.backtotop:hover{
@@ -3462,4 +3165,258 @@ div[class*="boxy"] {
width: 3.8vw;
transform: rotate(25deg);
border-top: 1px solid var(--text-primary);
+}
+
+.bfh-menu{ /* @media fertig */
+ width: fit-content;
+ margin: auto !important;
+ max-width: 60vw !important;
+}
+
+a{
+ cursor: pointer;
+}
+.bfh-menu svg a:hover > g circle{
+ fill: var(--accent-gradient-three-of-three) !important;
+}
+
+.vertical{
+ display:inline;
+ vertical-align: middle;
+}
+
+.text-1-bfh{
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+}
+
+.panel-talk-gallery{
+ padding: 0 !important;
+ margin-top: 10px !important;
+ margin-left: 20px !important;
+ margin-right: 20px !important;
+}
+.panel-talk-gallery div{
+ padding: 0 !important;
+}
+.panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(5){
+ margin-top: 60px !important;
+}
+.panel-talk-gallery .col:nth-child(2), .panel-talk-gallery .col:nth-child(4){
+ margin-top: 30px !important;
+}
+.panel-talk-gallery .col .middle{
+ margin-top: 15px !important;
+}
+.middle{
+ text-align: center;
+}
+
+.bfh-slider{
+ max-width: 500px !important;
+}
+.bfh-slider img{
+ max-width: 400px;
+
+ max-height: 70%;
+}
+
+
+.full-screen-width {
+ position: relative !important;
+ left: 50% !important;
+ right: 50% !important;
+ margin-left: -50vw !important;
+ margin-right: 50vw !important;
+ max-width: 100vw !important;
+ width: 100vw !important;
+}
+
+.collapsible-hr{
+ border-width: 2px !important;
+}
+
+.collapsible-a{
+ margin-top: 1rem !important;
+ margin-bottom: 1rem;
+ margin-left: 1rem !important;
+}
+
+.box{
+ padding: 10px;
+ border-radius: 10px;
+}
+
+
+
+ .detail-sideitem .sideitem{
+ padding-left: 10px !important;
+ }
+
+ .sideitem .cycletab{
+ line-height: 100%;
+ margin-left: 10px;
+ list-style-type: circle !important;
+ }
+
+ .active-sideitem {
+ background-color: var(--text-primary) !important;
+ color: white !important;
+ border-radius: 10px;
+ display: block;
+ border-width: 10px;
+ border-color: #850F78;
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+
+
+ .img-sponsor-a{
+ margin: 20px;
+ padding: 20px;
+ max-width: 90%;
+ }
+.sp-a{
+ border: 5px solid var(--accent-primary);
+ background-color: white;
+ height: 250px !important;
+}
+
+.qabox .question-bubble:nth-child(2){
+ margin-bottom: 20px;
+ margin-right: 0px;
+ margin-left: auto;
+ border: 5px solid var(--accent-gradient-one-of-three);
+}
+.qabox .question-bubble:nth-child(1){
+ margin-bottom: 10px;
+ margin-left: 0px;
+ margin-right: auto;
+ border: 5px solid var(--accent-gradient-three-of-three);
+}
+
+.question-bubble{
+ border-radius: 10px;
+ padding: 20px;
+ width: fit-content;
+ max-width: 80%;
+ min-width: 20%;
+ position: relative;
+}
+
+.qabox .question-bubble:nth-child(2)::before{
+ bottom: 20px;
+ clip-path: polygon(0 0, 100% 100%, 0 75%);
+ left: calc(100%);
+ width: 20px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ background: var(--accent-gradient-one-of-three);
+}
+
+.qabox .question-bubble:nth-child(1)::before{
+ bottom: 20px;
+ clip-path: polygon(0 100%, 100% 0, 100% 75%);
+ right: calc(100%);
+ width: 20px;
+ height: 20px;
+ content: "";
+ position: absolute;
+ background: var(--accent-gradient-three-of-three);
+}
+
+.haken-liste{
+ list-style: none !important;
+}
+
+.winner{ /* @media */
+ vertical-align: middle !important;
+ font-size: xx-large;
+ font-weight: 900 ;
+ margin-top: 10px;
+}
+
+.winners{
+ margin-top: 10px !important;
+}
+
+.list-item-img{
+ max-height: 1.5rem;
+}
+
+.trophy::before{
+ background-image: url(https://static.igem.wiki/teams/5247/design/icons/trophy.svg);
+ background-size: 40px 40px !important;
+ content: '';
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+}
+.certificate::before{
+ background-image: url(https://static.igem.wiki/teams/5247/design/icons/certificate.svg);
+ background-size: 40px 40px !important;
+ content: '';
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+}
+.tickets::before{
+ background-image: url(https://static.igem.wiki/teams/5247/design/icons/tickets.svg);
+ background-size: 40px 40px !important;
+ content: '';
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+}
+.kit::before{
+ background-image: url(https://static.igem.wiki/teams/5247/design/icons/new-box.svg);
+ background-size: 40px 40px !important;
+ content: '';
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+}
+
+.money::before{
+ background-image: url(https://static.igem.wiki/teams/5247/design/icons/money.svg);
+ background-size: 40px 40px !important;
+ content: '';
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+}
+.winners div li{
+ vertical-align: middle;
+ line-height:2rem;
+}
+.winners div li span{
+ font-size: large;
+ position: relative;
+ bottom: 1vh;
+ margin-left: 1rem;
+}
+
+.button-left{
+ position:relative;
+}
+
+.left-button{
+ float: right;
+}
+
+.detail-sideitem, .sidesubtab, a {
+ pointer-events: auto; /* Ensure clickable elements can be interacted with */
+}
+
+
+.subtitle-active .sideitem a summary{
+ color: white !important;
+}
+.sideitem a summary{
+ color: var(--text-primary) !important;
+}
+
+.active-sideitem a summary{
+ color: white !important;
}
\ No newline at end of file
diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index 2cdef599d5699c94e2f35e2dd8cc930ca90a92b9..6af9e01e0efbefd7a4606aa3c6c176121c27dbef 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -22,9 +22,23 @@
.boxy-1{
margin-top: 10px !important;
}
+ .navbar {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ /* Adjust font sizes for readability */
+ h1 {
+ font-size: 2rem;
+ }
+
+ .col-6 {
+ width: 100%; /* Full width on tablets */
+ }
+
}
/*For Smartphones*/
-@media screen and (max-width: 768px){
+@media screen and (max-width: 767px){
.lnp:hover > img{
display: block;
margin-left: none;
@@ -32,6 +46,10 @@
width: 8rem !important;
max-width: 100% !important;
}
+ .col-6 {
+ width: 100%; /* Full width for smartphone */
+ }
+
.row-if-small{
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
@@ -100,16 +118,18 @@
margin: auto;
}
svg text{
- font-size: 9vw;
- stroke-width:1px;
+ font-size: 5vw !important;
+ stroke-width:1px !important;
}
.village-style-button h3{
display: none !important;
}
.village-style-button{
box-shadow: 1px 1px 1px gray;
- border-radius: 20px !important;
+ border-radius: 10px;
border-color: black;
+ padding: 10px;
+
}
.village-style-button:hover{
box-shadow: none;
@@ -120,9 +140,17 @@ svg text{
padding-top: 10px;
padding-bottom: 5px;
}
+h1, h2, h3 {
+ font-size: 24px !important; /* Adjust according to your design */
+ line-height: 1.2 !important;
+ }
+
.img-half{
max-width: 100% !important;
}
+.container {
+ padding: 10px;
+ }
.row{
display: grid !important;