Skip to content
Snippets Groups Projects
Commit 87ed0874 authored by Asal Sahami Moghaddam's avatar Asal Sahami Moghaddam
Browse files

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

parents 33cf157a b728150e
No related branches found
No related tags found
No related merge requests found
Pipeline #417636 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/App/App.css
+ 411
− 454
View file @ 87ed0874
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
/* * * * * * * */ /* * * * * * * */
:root { :root {
/* our colours*/ /* our colours*/
--text-primary: #850F78; --text-primary: #850F78 ;
--mediumpurple: #bc15aa; --mediumpurple: #bc15aa;
/*--purple: #B85BD1; */ /*--purple: #B85BD1; */
--accen-secondary: #F57D22; --accen-secondary: #F57D22;
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
--accent-primary: #F4CC1E; --accent-primary: #F4CC1E;
--lightyellow: #fae99e; --lightyellow: #fae99e;
--lightblue: #A0A7F3 ; --lightblue: #A0A7F3 ;
--lightblue-zwei: #abb1f4;
--lightblue-drei: #c6caf8;
--verylightblue: #ebecfd; --verylightblue: #ebecfd;
--offblack: #32232C ; --offblack: #32232C ;
--cebitecgray: #8295A4; --cebitecgray: #8295A4;
...@@ -48,11 +50,27 @@ ...@@ -48,11 +50,27 @@
--node-size: 60px; --node-size: 60px;
} }
html{
scroll-behavior: smooth;
}
.max400{
max-height: 400px !important;
}
.none{ .none{
display: 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{ .col-max{
flex: 0 0 0%; flex: 0 0 0%;
width: max-content !important; width: max-content !important;
...@@ -64,10 +82,13 @@ ...@@ -64,10 +82,13 @@
width:16.66666667% !important; width:16.66666667% !important;
} }
.col-1{ .col-1{
width: 8.33333333% !important; width: 8.33333333% !important;
} }
.col2punkt5{
width: 20% !important;
}
.col-max-10{ .col-max-10{
flex: 0 0 auto; flex: 0 0 auto;
max-width: 83.33333333% !important; max-width: 83.33333333% !important;
...@@ -76,7 +97,20 @@ ...@@ -76,7 +97,20 @@
.col{ .col{
max-width: 100% !important; 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* * */ /* * * BODY* * */
...@@ -94,14 +128,19 @@ p { ...@@ -94,14 +128,19 @@ p {
text-align: justify; text-align: justify;
} }
a { a {
color: var(--lightblue) !important; color: var(--accent-gradient-one-of-three) !important;
text-decoration: none !important; text-decoration: none !important;
} }
h3{
margin-bottom: 2vw !important;
}
code{ code{
color:black !important; color:black !important;
} }
.doi{
color: var(--text-primary) !important;
}
.codesnippet{ .codesnippet{
padding-left: 30px; padding-left: 30px;
padding-top: 5px; padding-top: 5px;
...@@ -130,13 +169,30 @@ code{ ...@@ -130,13 +169,30 @@ code{
text-shadow: 5px 5px 15px black; text-shadow: 5px 5px 15px black;
transition: all 0.1s linear; 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{ .sidebar>div{
overflow: hidden; overflow: hidden;
text-align: center; text-align: left;
margin-left: 10px;
cursor: pointer; cursor: pointer;
} }
/* .sidebar div a div div span ul li a span{
color: white ;
} */
.sidebar>div>a>span{ .sidebar>div>a>span{
padding: 1rem; padding: 0.5rem;
color: var(--text-primary); color: var(--text-primary);
} }
.active-scroll-spy{ .active-scroll-spy{
...@@ -150,7 +206,7 @@ color: var(--text-primary); ...@@ -150,7 +206,7 @@ color: var(--text-primary);
.absolute{position: absolute;} .absolute{position: absolute;}
.left-aligned {margin-left: auto;} .left-aligned {margin-left: auto;}
.align-items-center{align-items:center!important} .align-items-center{align-items:center!important}
.zweirem{padding: 2rem;} .zweirem{padding-top: 2rem; padding-bottom: 3rem;}
.left{float: left;} .left{float: left;}
.right{float: right;} .right{float: right;}
.sticky-top { .sticky-top {
...@@ -161,6 +217,9 @@ color: var(--text-primary); ...@@ -161,6 +217,9 @@ color: var(--text-primary);
top: 80px !important; top: 80px !important;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.small-only{
display: none;
}
.fullsize{ .fullsize{
max-height: 100% !important; max-height: 100% !important;
max-width: 100% !important; max-width: 100% !important;
...@@ -247,15 +306,23 @@ tr:nth-child(odd) { ...@@ -247,15 +306,23 @@ tr:nth-child(odd) {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
tr:nth-child(1) { tr:nth-child(1) {
background-color: var(--lightblue) !important; background-color: var(--accent-gradient-one-of-three) !important;
} }
/* * * * * * * */ /* * * * * * * */
/* BACKGROUND */ /* BACKGROUND */
/* * * * * * * */ /* * * * * * * */
.bg-video-container{ .bg-video-container{
margin-bottom: 10vw !important; margin-bottom: 10vw !important;
} }
.bg-db{
background-color: var(--darkerbeige) !important;
}
.bg-lb{
background-color: var(--lightblue) !important;
}
.bg-d{ .bg-d{
background-color: var(--text-primary) !important; background-color: var(--text-primary) !important;
} }
...@@ -279,7 +346,7 @@ margin-bottom: 10vw !important; ...@@ -279,7 +346,7 @@ margin-bottom: 10vw !important;
} }
.header-title{ .header-title{
color: var(--text-primary); color: var(--text-primary) !important;
text-align: left; text-align: left;
align-self: flex-start; align-self: flex-start;
padding: 0 30px; padding: 0 30px;
...@@ -298,23 +365,25 @@ margin-bottom: 10vw !important; ...@@ -298,23 +365,25 @@ margin-bottom: 10vw !important;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 5vw; font-size: 15vh;
letter-spacing:0.1em; letter-spacing:0.1em;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.3vw; -webkit-text-stroke-width: 0.3vw;
-webkit-text-stroke-color: var(--accent-primary); -webkit-text-stroke-color: var(--accent-primary);
text-shadow: text-shadow:
0.4vw 0.4vw var(--mediumpurple), 0.4vw 0.4vw var(--text-primary ),
0.8vw 0.8vw var(--offblack); 1vw 1vw var(--offblack);
}
.popart-wrapper{
min-height: 5vw;
margin-bottom: 20px !important;
} }
h2{ h2{
font-size: 3rem !important; 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; background-clip: text !important;
color: transparent !important; color: var(--text-primary) !important;
padding-top: 15px !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; /* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
*/} */}
...@@ -404,12 +473,12 @@ footer{ ...@@ -404,12 +473,12 @@ footer{
background-color: var(--background); background-color: var(--background);
} }
footer a { footer a {
color: white; color: var(--ourbeige) !important;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
footer a:hover { footer a:hover {
color: white; color: var(--accent-gradient-three-of-three) !important;
text-decoration: underline; text-decoration: underline;
} }
...@@ -430,7 +499,7 @@ footer a:hover { ...@@ -430,7 +499,7 @@ footer a:hover {
} }
.bfh-more-button{ .bfh-more-button{
margin-top: 10px; margin-top: 20px;
padding: 5px; padding: 5px;
border-radius: 10px; border-radius: 10px;
padding-left: 10px; padding-left: 10px;
...@@ -453,12 +522,13 @@ footer a:hover { ...@@ -453,12 +522,13 @@ footer a:hover {
padding-left: 30px; padding-left: 30px;
} }
.village-style-button{ .village-style-button{
flex: 1 0 0%;
box-shadow: 5px 5px 15px gray !important; box-shadow: 5px 5px 15px gray !important;
border-radius: 2rem !important; border-radius: 2rem !important;
padding: 0 !important; padding: 0 !important;
max-width: 12% !important; max-width: 12% !important;
aspect-ratio: 2 / 3 !important; aspect-ratio: 2 / 3 !important;
margin-left: 1vw; margin: auto;
} }
.village-style-button:hover{ .village-style-button:hover{
box-shadow: 5px 5px 15px black !important; box-shadow: 5px 5px 15px black !important;
...@@ -478,13 +548,21 @@ footer a:hover { ...@@ -478,13 +548,21 @@ footer a:hover {
/* * * * * * * * * */ /* * * * * * * * * */
/* * * IMAGES * * */ /* * * IMAGES * * */
/* * * * * * * * * */ /* * * * * * * * * */
.teamcolzwei{
margin-top: 3rem !important;
}
img, img,
picture, picture,
svg { svg {
max-width: 100%; max-width: 100%;
display: block; display: block;
} }
.winner-img{ /* @media */
margin-left: 20px;
width: 5vw !important;
max-height: 100px;
margin-top: 10px !important;
}
.s-svg{ .s-svg{
max-width: 80%; max-width: 80%;
} }
...@@ -500,11 +578,27 @@ img .middle{ ...@@ -500,11 +578,27 @@ img .middle{
/* .sponsor-portrait{ /* .sponsor-portrait{
border: 5px solid var(--accent-primary); border: 5px solid var(--accent-primary);
} */ } */
.team-name{
font-size: large;
font-weight: bold;
text-align: left !important;
width: min-content;
}
.socials{ .socials{
height: 1.5rem; height: 1.5rem;
width: auto; width: auto;
margin: 0.5rem; margin: 0.5rem;
} }
.team-socials{
height: 1rem;
width: auto;
margin-left: 0.2rem;
}
.steckbrief{
margin-top: 2rem !important;
}
.spin { .spin {
transition: transform 1s ease-in-out; transition: transform 1s ease-in-out;
} }
...@@ -540,11 +634,17 @@ img .middle{ ...@@ -540,11 +634,17 @@ img .middle{
.img-half{ .img-half{
max-width: 50% !important; max-width: 50% !important;
} }
.interview-img{
max-height: 70% !important;
}
.img-round{ .img-round{
border-radius: 50%; border-radius: 50%;
max-width: 80%; max-width: 80%;
} }
.img-cube{
max-width: 80%;
}
.updown{ .updown{
max-width: 3vw; max-width: 3vw;
} }
...@@ -578,9 +678,10 @@ img .middle{ ...@@ -578,9 +678,10 @@ img .middle{
display: flex; display: flex;
vertical-align: middle; vertical-align: middle;
} }
#idt-portrait{ #idt-portrait{
height: 350px !important; 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-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -619,93 +720,6 @@ svg{ ...@@ -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 * */ /* * EFFECTS * */
/* * * * * * * */ /* * * * * * * */
...@@ -794,151 +808,7 @@ svg{ ...@@ -794,151 +808,7 @@ svg{
padding-top: 10px; padding-top: 10px;
padding-bottom: 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) { @media only screen and (max-width: 1023px) {
.timeline-item-content { .timeline-item-content {
max-width: 100%; max-width: 100%;
...@@ -970,196 +840,15 @@ svg{ ...@@ -970,196 +840,15 @@ svg{
display: none; 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 } .imageCredit { margin-top: 10px; font-size: 0.85rem }
.imageText { margin-bottom: 10px; font-size: 1rem } .imageText { margin-bottom: 10px; font-size: 1rem }
.events{ padding: 10px } .events{ padding: 10px }
.event { margin-bottom: 20px } .event { margin-bottom: 20px }
.date-col{
position: relative;
background-color: #fff ;
padding: 10px;
width: 10%;
border-right: #000;
border-right-width: 2px;
}
.card-col{ .card-col{
width: 100%; width: 100%;
...@@ -1196,31 +885,42 @@ button.tabbutton:nth-child(1){ ...@@ -1196,31 +885,42 @@ button.tabbutton:nth-child(1){
.container_document{ .container_document{
max-width: 40%; max-width: 40%;
} }
.download-butt{ /* @media unnötig */
.download-butt{
background-color: var(--text-primary); background-color: var(--text-primary);
padding: 0.5vw; padding: 0.5vh !important;
border-radius: 5px; border-radius: 5px;
margin: auto !important; 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{ .download-col{
height: 5vw !important; height: 5vh !important;
display: flex; display: flex;
align-items: center !important; align-items: center !important;
} }
.small-i{ .small-i{ /* @media unnötig */
width: 80%; 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 */ /* SHAPES */
.circle { .circle {
display: flex; display: flex;
width: 10vw; width: 10vw;
color: white;
height: 10vw; height: 10vw;
background-color: var(--lightblue) !important; background-color: var(--text-primary) !important;
box-shadow: 3px 3px 10px black !important; box-shadow: 3px 3px 10px black !important;
border-radius: 50%; border-radius: 50%;
margin: 1vw; margin: 1vw;
...@@ -1234,9 +934,9 @@ button.tabbutton:nth-child(1){ ...@@ -1234,9 +934,9 @@ button.tabbutton:nth-child(1){
/*collapsible*/ /*collapsible*/
.collapse-card { .collapse-card {
margin-bottom: 20px;
border-radius: 4px; border-radius: 4px;
background-color: var(--ourbeige); margin-top: 20px;
margin-top: 10px;
color: #333; color: #333;
padding: 5px; padding: 5px;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
...@@ -1248,7 +948,7 @@ button.tabbutton:nth-child(1){ ...@@ -1248,7 +948,7 @@ button.tabbutton:nth-child(1){
/*boxes*/ /*boxes*/
.hint-container { .hint-container {
position:relative; 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 { @media print {
.hint-container { .hint-container {
...@@ -1592,16 +1292,16 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -1592,16 +1292,16 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 16rem !important; width: 8rem !important;
max-width: 66% !important; max-width: 66% !important;
transition: all 1s ease; transition: all 1s ease;
border: 5px solid var(--text-primary); border: 5px solid var(--text-primary);
} }
.lnp:hover > img{ .lnp:hover > img{
display: block; display: block;
margin-left: auto; margin-left: none;
margin-right: auto; margin-right: none;
width: 100% !important; width: 25rem !important;
max-width: 100% !important; max-width: 100% !important;
} }
...@@ -3252,6 +2952,7 @@ div[class*="boxy"] { ...@@ -3252,6 +2952,7 @@ div[class*="boxy"] {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: auto;
} }
.boxy-1 { .boxy-1 {
...@@ -3339,6 +3040,8 @@ div[class*="boxy"] { ...@@ -3339,6 +3040,8 @@ div[class*="boxy"] {
background: var(--text-primary); background: var(--text-primary);
border-radius: 100px; border-radius: 100px;
white-space: nowrap; white-space: nowrap;
margin-left: 40px;
margin-top: 20px;
text-align: right; text-align: right;
} }
.backtotop:hover{ .backtotop:hover{
...@@ -3462,4 +3165,258 @@ div[class*="boxy"] { ...@@ -3462,4 +3165,258 @@ div[class*="boxy"] {
width: 3.8vw; width: 3.8vw;
transform: rotate(25deg); transform: rotate(25deg);
border-top: 1px solid var(--text-primary); 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
src/App/mediarules.css
+ 32
− 4
View file @ 87ed0874
...@@ -22,9 +22,23 @@ ...@@ -22,9 +22,23 @@
.boxy-1{ .boxy-1{
margin-top: 10px !important; 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*/ /*For Smartphones*/
@media screen and (max-width: 768px){ @media screen and (max-width: 767px){
.lnp:hover > img{ .lnp:hover > img{
display: block; display: block;
margin-left: none; margin-left: none;
...@@ -32,6 +46,10 @@ ...@@ -32,6 +46,10 @@
width: 8rem !important; width: 8rem !important;
max-width: 100% !important; max-width: 100% !important;
} }
.col-6 {
width: 100%; /* Full width for smartphone */
}
.row-if-small{ .row-if-small{
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
...@@ -100,16 +118,18 @@ ...@@ -100,16 +118,18 @@
margin: auto; margin: auto;
} }
svg text{ svg text{
font-size: 9vw; font-size: 5vw !important;
stroke-width:1px; stroke-width:1px !important;
} }
.village-style-button h3{ .village-style-button h3{
display: none !important; display: none !important;
} }
.village-style-button{ .village-style-button{
box-shadow: 1px 1px 1px gray; box-shadow: 1px 1px 1px gray;
border-radius: 20px !important; border-radius: 10px;
border-color: black; border-color: black;
padding: 10px;
} }
.village-style-button:hover{ .village-style-button:hover{
box-shadow: none; box-shadow: none;
...@@ -120,9 +140,17 @@ svg text{ ...@@ -120,9 +140,17 @@ svg text{
padding-top: 10px; padding-top: 10px;
padding-bottom: 5px; padding-bottom: 5px;
} }
h1, h2, h3 {
font-size: 24px !important; /* Adjust according to your design */
line-height: 1.2 !important;
}
.img-half{ .img-half{
max-width: 100% !important; max-width: 100% !important;
} }
.container {
padding: 10px;
}
.row{ .row{
display: grid !important; display: grid !important;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment