Line 2: | Line 2: | ||
width: 100%; | width: 100%; | ||
border-top: solid 25px #6281ef; | border-top: solid 25px #6281ef; | ||
− | font-family: | + | font-family: Lato, sans-serif; |
text-transform: uppercase | text-transform: uppercase | ||
} | } | ||
Line 45: | Line 45: | ||
#upperFooter #contacts #image-placeholder img { | #upperFooter #contacts #image-placeholder img { | ||
height: 100%; | height: 100%; | ||
− | + | width: 100% | |
} | } | ||
Line 67: | Line 67: | ||
font-size: 0.9em; | font-size: 0.9em; | ||
text-transform: initial; | text-transform: initial; | ||
− | font-family: | + | font-family: Lato, sans-serif; |
text-decoration: none; | text-decoration: none; | ||
color: #121212; | color: #121212; | ||
Line 76: | Line 76: | ||
#upperFooter #sponsors { | #upperFooter #sponsors { | ||
height: 100%; | height: 100%; | ||
− | display: | + | display: flex; |
align-items: center; | align-items: center; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | |||
− | |||
− | |||
max-width: 55vw | max-width: 55vw | ||
} | } | ||
Line 87: | Line 84: | ||
#upperFooter #sponsors #mainSponsors { | #upperFooter #sponsors #mainSponsors { | ||
height: 100%; | height: 100%; | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
max-width: 16vw | max-width: 16vw | ||
} | } | ||
Line 99: | Line 93: | ||
padding: 5px; | padding: 5px; | ||
display: flex; | display: flex; | ||
− | align-items: center | + | align-items: center; |
+ | height: 50% | ||
} | } | ||
Line 105: | Line 100: | ||
height: 65%; | height: 65%; | ||
margin-left: 10px; | margin-left: 10px; | ||
− | display: | + | display: flex |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 167: | Line 159: | ||
#mainSponsors img { | #mainSponsors img { | ||
− | max-width: 14vw | + | max-width: 14vw; |
+ | height: auto; | ||
+ | max-height: 100% | ||
} | } | ||
#otherSponsors img { | #otherSponsors img { | ||
− | max-width: 10vw | + | max-width: 10vw; |
+ | height: auto; | ||
+ | max-height: 100% | ||
} | } | ||
.otherS { | .otherS { | ||
display: flex; | display: flex; | ||
− | align-items: center | + | align-items: center; |
+ | height: 50% | ||
} | } | ||
Line 288: | Line 285: | ||
#upperFooter #sponsors #otherSponsors { | #upperFooter #sponsors #otherSponsors { | ||
+ | display: block | ||
+ | } | ||
− | + | #upperFooter #sponsors #otherSponsors .sponsors-row { | |
− | + | display: flex | |
− | + | ||
} | } | ||
Line 301: | Line 299: | ||
width: fit-content; | width: fit-content; | ||
margin: 0 auto; | margin: 0 auto; | ||
− | max-width: none | + | max-width: none; |
+ | padding-bottom: 30px | ||
} | } | ||
Line 341: | Line 340: | ||
max-height: 0; | max-height: 0; | ||
transition: max-height 0.2s ease-out; | transition: max-height 0.2s ease-out; | ||
− | + | padding-top: 10px; | |
+ | padding-bottom: 10px; | ||
} | } | ||
#lowerFooter #navigation h2 { | #lowerFooter #navigation h2 { | ||
cursor: pointer; | cursor: pointer; | ||
+ | transition: 0.4s; | ||
font-size: 1.6em | font-size: 1.6em | ||
} | } |
Revision as of 20:26, 22 August 2020
- footerWrapper {
width: 100%; border-top: solid 25px #6281ef; font-family: Lato, sans-serif; text-transform: uppercase }
- footerWrapper .container {
width: unset }
- upperFooter {
height: 180px; background-color: #fafafc; display: flex; align-items: center; justify-content: space-evenly; padding: 10px }
- upperFooter #contacts {
max-width: 45vw; height: 100% }
- upperFooter #contacts #contactsWrapper {
display: flex; align-items: center; width: fit-content; justify-content: center; height: 100% }
- upperFooter #contacts #contactsWrapper #contactus {
padding-right: 10px }
- upperFooter #contacts #image-placeholder {
background-color: rgba(0, 0, 0, 0.04); height: 100px; width: 100px; border-radius: 100px; }
- upperFooter #contacts #image-placeholder img {
height: 100%; width: 100% }
- upperFooter #contacts #igem-info {
display: flex; height: 70%; font-size: 0.8em; padding-left: 30px; border-left: solid 2px #121212; justify-content: space-around; align-items: center; margin-left: 30px }
- upperFooter #contacts #igem-info h3 {
margin: 0; margin-bottom: 10px }
- upperFooter #contacts a {
font-size: 0.9em; text-transform: initial; font-family: Lato, sans-serif; text-decoration: none; color: #121212; line-height: 2em }
- upperFooter #sponsors {
height: 100%; display: flex; align-items: center; box-sizing: border-box; max-width: 55vw }
- upperFooter #sponsors #mainSponsors {
height: 100%;
max-width: 16vw }
.mainS { box-sizing: border-box; margin: 0 auto; padding: 5px; display: flex; align-items: center; height: 50% }
- upperFooter #sponsors #otherSponsors {
height: 65%; margin-left: 10px; display: flex }
- lowerFooter {
color: #fafafc; height: 250px; box-sizing: border-box; background-color: #121212; }
- lowerFooter #navigation {
background-color: #121212; display: flex; justify-content: space-around }
- lowerFooter ul {
list-style: none; padding-inline-start: 0; margin: 0; }
- lowerFooter h2 {
padding-bottom: 20px }
- lowerFooter #navigation {
padding: 40px; font-size: smaller }
- footerWrapper #lowerFooter a {
text-decoration: none; transition-duration: 0.2s; color: #fafafc; text-transform: capitalize; font-weight: 100; line-height: 2em }
- footerWrapper #lowerFooter a:active,
- footerWrapper #lowerFooter a:focus,
- footerWrapper #lowerFooter a:visited {
color: #fafafc }
- footerWrapper #lowerFooter a:hover {
color: rgba(255, 255, 255, 0.4); text-decoration: none }
- projectList {
display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 0px 10px; }
- mainSponsors img {
max-width: 14vw; height: auto; max-height: 100% }
- otherSponsors img {
max-width: 10vw; height: auto; max-height: 100% }
.otherS { display: flex; align-items: center; height: 50% }
.links-icons { display: flex; align-items: center }
.links-icons svg { fill: #121212; width: 2em; padding-right: 5px }
- upperFooter #sponsors #othSWrap {
max-width: 38vw }
@media (max-width:768px) {
#mainSponsors img {
max-width: 13vw;
height: auto;
}
#upperFooter #contacts { max-width: 40vw; }
#upperFooter #sponsors { max-width: 60vw; }
#otherSponsors img { max-width: 10vw; height: auto;
}
#upperFooter #sponsors #mainSponsors {
max-width: 100% }
#upperFooter #sponsors #othsWrap {
max-width: 100% }
#upperFooter #contacts #image-placeholder { max-width: 10vw; max-height: 10vw;
}
#upperFooter #contacts #igem-info { font-size: 0.7em; padding-left: 15px; margin-left: 15px }
#lowerFooter h2 { padding-bottom: 10px; font-size: 0.9em }
#lowerFooter ul { font-size: 0.8em }
.links-icons svg { width: 1.5em; }
#upperFooter #contacts #igem-info h3 { font-size: 0.8em; } }
@media (max-width:420px) { #upperFooter { display: block; height: fit-content; padding: 0; }
#upperFooter #sponsors { display: block; padding-left: 0; max-width: none }
#upperFooter #sponsors #mainSponsors { display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px; max-width: none }
#mainSponsors img { max-width: 40vw; height: auto; }
#otherSponsors img { max-width: 30vw; height: auto; }
#upperFooter #sponsors #otherSponsors { display: block }
#upperFooter #sponsors #otherSponsors .sponsors-row { display: flex }
.mainS { margin: 0; }
#upperFooter #sponsors #othSWrap { width: fit-content; margin: 0 auto; max-width: none; padding-bottom: 30px }
.otherS { justify-content: center }
#upperFooter #contacts { background-color: #2E64EC; height: 10em; max-width: 100vw; display: flex; justify-content: center }
#upperFooter #contacts #contactsWrapper { width: 80% }
#lowerFooter { height: fit-content; }
#lowerFooter #navigation { background: #2E64EC; display: block; }
#footerWrapper { border: none }
#upperFooter #contacts #igem-info { border-left: solid 2px #fafafc; }
#lowerFooter ul { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; padding-top: 10px; padding-bottom: 10px; }
#lowerFooter #navigation h2 { cursor: pointer; transition: 0.4s; font-size: 1.6em }
#lowerFooter ul li { font-size: 1.5em }
#upperFooter #contacts #igem-info h3 { color: #fafafc; font-size: 1em }
#upperFooter #contacts #image-placeholder {
background-color: #fafafc;
max-height: 20vw;
max-width: 20vw
}
.links-icons svg { fill: #fcfcfa } }
@media (max-width:300px) { #upperFooter #contacts #igem-info h3 { font-size: 0.7em }
#upperFooter #contacts #igem-info { border: none }
#upperFooter #contacts #image-placeholder { max-width: 20vw; max-height: 20vw }
.links-icons svg { max-height: 14px; }
#igem-info { max-width: 40vw }
}