diff --git a/src/App/App.css b/src/App/App.css index 4f65c5a6f3d7a86a67ea5167d7d75ffe19fa5ce3..3400610a3e40944f6fa7834ef9784dd46cac3dd2 100644 --- a/src/App/App.css +++ b/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 diff --git a/src/App/mediarules.css b/src/App/mediarules.css index 9ccb33dfc9376c89d0fda579cc338db1d8e7b487..d99973c4ef999c039899273c371b0d22307c8986 100644 --- a/src/App/mediarules.css +++ b/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{