Skip to content
Snippets Groups Projects
Commit fc4da99f authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

back

parent c3e3e819
No related branches found
No related tags found
No related merge requests found
Pipeline #443124 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 307 additions and 23 deletions
src/App/App.css
+ 307
− 23
View file @ fc4da99f
...@@ -74,6 +74,10 @@ html{ ...@@ -74,6 +74,10 @@ html{
display: none; display: none;
} }
.scrolllink span{
color: var(--background) !important;
}
.small-row{ .small-row{
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
...@@ -128,10 +132,24 @@ hr{ ...@@ -128,10 +132,24 @@ hr{
/* * * * * * * */ /* * * * * * * */
/* * * BODY* * */ /* * * 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 { body {
/* padding-top: 56px; */ /* padding-top: 56px; */
background-color: var(--ourbeige); background-color: var(--ourbeige);
color: var(--offblack); color: var(--offblack);
font-family: AcuminPro !important;
} }
body.dark-mode { body.dark-mode {
background-color: var(--offblack); background-color: var(--offblack);
...@@ -144,9 +162,16 @@ a { ...@@ -144,9 +162,16 @@ a {
color: var(--accent-gradient-one-of-three) !important; color: var(--accent-gradient-one-of-three) !important;
text-decoration: none !important; text-decoration: none !important;
} }
h3{ .our-h3{
margin-bottom: 2vw !important; margin-top: 20px !important;
margin-bottom: 5px !important;
} }
.short-hr{
height: 1px !important;
border-width: 2px !important;
}
code{ code{
color:black !important; color:black !important;
} }
...@@ -225,9 +250,8 @@ color: var(--text-primary); ...@@ -225,9 +250,8 @@ color: var(--text-primary);
.sticky-top { .sticky-top {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky !important; position: sticky !important;
top: 0;
z-index: 1020; z-index: 1020;
top: 80px !important; top: 100px !important;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.small-only{ .small-only{
...@@ -329,7 +353,21 @@ tr:nth-child(1) { ...@@ -329,7 +353,21 @@ tr:nth-child(1) {
.bg-video-container{ .bg-video-container{
margin-bottom: 10vw !important; 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{ .bg-db{
background-color: var(--darkerbeige) !important; background-color: var(--darkerbeige) !important;
} }
...@@ -379,7 +417,7 @@ margin-bottom: 10vw !important; ...@@ -379,7 +417,7 @@ margin-bottom: 10vw !important;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 15vh; font-size: 5rem;
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;
...@@ -392,14 +430,24 @@ margin-bottom: 10vw !important; ...@@ -392,14 +430,24 @@ margin-bottom: 10vw !important;
min-height: 5vw; min-height: 5vw;
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
h2{ .h2{
font-size: 3rem !important; text-align:center;
background-clip: text !important; text-transform:uppercase;
color: var(--text-primary) !important; color: var(--text-primary) !important;
padding-top: 15px !important; font-size: 3rem !important ;
font-weight: bolder !important; letter-spacing: 1px;
/* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important; 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{ h1{
font-size: 4rem !important; font-size: 4rem !important;
background-clip: text !important; background-clip: text !important;
...@@ -408,6 +456,78 @@ h2{ ...@@ -408,6 +456,78 @@ h2{
font-weight: bolder !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;
*/} */}
.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 { .underline--magical {
background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%); background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);
...@@ -573,6 +693,8 @@ footer a:hover { ...@@ -573,6 +693,8 @@ footer a:hover {
.teamcolzwei{ .teamcolzwei{
margin-top: 3rem !important; margin-top: 3rem !important;
} }
img, img,
picture, picture,
svg { svg {
...@@ -600,12 +722,18 @@ img .middle{ ...@@ -600,12 +722,18 @@ img .middle{
/* .sponsor-portrait{ /* .sponsor-portrait{
border: 5px solid var(--accent-primary); border: 5px solid var(--accent-primary);
} */ } */
.pronouns{
font-size: 1rem !important;
font-style: italic !important;
}
.team-name{ .team-name{
font-size: large; font-size: 1.6rem !important;
font-weight: bold; font-weight: bold;
text-align: left !important; text-align: left !important;
width: min-content; width: fit-content !important;
}
.team-img{
border-radius: 50% !important;
} }
.socials{ .socials{
height: 2rem; height: 2rem;
...@@ -620,6 +748,34 @@ img .middle{ ...@@ -620,6 +748,34 @@ img .middle{
.steckbrief{ .steckbrief{
margin-top: 2rem !important; 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 { .spin {
transition: transform 1s ease-in-out; transition: transform 1s ease-in-out;
...@@ -662,7 +818,11 @@ img .middle{ ...@@ -662,7 +818,11 @@ img .middle{
.img-round{ .img-round{
border-radius: 50%; border-radius: 50%;
max-width: 80%; width: 100px;
height: 100px;
max-height: 12vh;
max-width: 12vh;
object-fit: cover !important;
} }
.img-cube{ .img-cube{
max-width: 80%; max-width: 80%;
...@@ -2452,6 +2612,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2452,6 +2612,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
display: none; display: none;
} }
.timelinecardtabs{
max-width: 100% !important;
}
.tabbutton{ .tabbutton{
padding: 5px; padding: 5px;
border-radius: 10px; border-radius: 10px;
...@@ -2476,11 +2640,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2476,11 +2640,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Blockquote header */ /* Blockquote header */
.blockquote h2 { .blockquote .block-h2 {
font-style: italic; font-style: italic;
position: relative; /* for pseudos */ position: relative; /* for pseudos */
color: black; color: black;
font-size: 2.8rem; font-size: 2.8rem !important;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
font-size: larger; font-size: larger;
...@@ -2491,7 +2655,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2491,7 +2655,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Blockquote right double quotes */ /* Blockquote right double quotes */
.blockquote h2:after { .blockquote .block-h2:after {
content:""; content:"";
position: absolute; position: absolute;
border: 5px solid var(--text-primary); border: 5px solid var(--text-primary);
...@@ -2505,7 +2669,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2505,7 +2669,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
z-index: 3; z-index: 3;
} }
.blockquote h2:before { .blockquote .block-h2:before {
content:""; content:"";
position: absolute; position: absolute;
width: 80px; width: 80px;
...@@ -2525,10 +2689,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { ...@@ -2525,10 +2689,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
} }
/* Blockquote subheader */ /* Blockquote subheader */
.blockquote h4 { .blockquote .block-h4{
position: relative; position: relative;
color: black; color: black;
font-size: 1.3rem; font-size: 1.3rem !important;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
font-size: medium; font-size: medium;
...@@ -3565,4 +3729,124 @@ a{ ...@@ -3565,4 +3729,124 @@ a{
.sideitem ul{ .sideitem ul{
margin-left: 0 !important; margin-left: 0 !important;
padding-left: 10px !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
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