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 @@
/* * * * * * * */
: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
src/App/mediarules.css
+ 32
− 4
View file @ 87ed0874
......@@ -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;
......
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