(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
#footerWrapper { | #footerWrapper { | ||
− | + | width: 100%; | |
− | + | border-top: solid 25px #6281ef; | |
− | + | font-family: 'montserrat-light', sans-serif; | |
− | + | ; | |
− | + | text-transform: uppercase; | |
− | + | background-color: #fafafc; | |
− | + | ||
} | } | ||
#footerWrapper .container { | #footerWrapper .container { | ||
− | + | width: unset | |
} | } | ||
#upperFooter { | #upperFooter { | ||
− | + | height: fit-content; | |
− | + | background-color: #fafafc; | |
− | + | display: flex; | |
− | + | align-items: center; | |
− | + | justify-content: space-evenly; | |
− | + | padding: 10px; | |
+ | box-sizing: border-box; | ||
} | } | ||
#upperFooter #contacts { | #upperFooter #contacts { | ||
− | + | max-width: 45vw; | |
− | + | height: 100% | |
} | } | ||
#upperFooter #contacts #contactsWrapper { | #upperFooter #contacts #contactsWrapper { | ||
− | + | display: flex; | |
− | + | align-items: center; | |
− | + | width: fit-content; | |
− | + | justify-content: center; | |
− | + | height: 100% | |
} | } | ||
#upperFooter #contacts #contactsWrapper #contactus { | #upperFooter #contacts #contactsWrapper #contactus { | ||
− | + | padding-right: 10px | |
} | } | ||
#upperFooter #contacts #image-placeholder { | #upperFooter #contacts #image-placeholder { | ||
− | + | height: 9vw; | |
− | + | width: 9vw; | |
− | + | border-right: solid 1px #121212; | |
− | + | padding-right: 30px; | |
} | } | ||
#upperFooter #contacts #image-placeholder img { | #upperFooter #contacts #image-placeholder img { | ||
− | + | height: 100%; | |
− | + | width: 100% | |
} | } | ||
#upperFooter #contacts #igem-info { | #upperFooter #contacts #igem-info { | ||
− | + | display: flex; | |
− | + | height: 100%; | |
− | + | font-size: 0.8em; | |
− | + | padding-left: 30px; | |
− | + | justify-content: space-around; | |
− | + | align-items: center; | |
− | + | ||
− | + | ||
} | } | ||
#upperFooter #contacts #igem-info h3 { | #upperFooter #contacts #igem-info h3 { | ||
− | + | margin: 0; | |
− | + | margin-bottom: 10px | |
} | } | ||
#upperFooter #contacts a { | #upperFooter #contacts a { | ||
− | + | font-size: 0.9em; | |
− | + | text-transform: initial; | |
− | + | font-family: Lato, sans-serif; | |
− | + | text-decoration: none; | |
− | + | color: #121212; | |
− | + | line-height: 2em; | |
− | + | padding-right: 0px; | |
} | } | ||
− | |||
#upperFooter #sponsors { | #upperFooter #sponsors { | ||
− | + | height: 100%; | |
− | + | display: flex; | |
− | + | align-items: center; | |
− | + | box-sizing: border-box; | |
− | + | max-width: 55vw | |
} | } | ||
#upperFooter #sponsors #mainSponsors { | #upperFooter #sponsors #mainSponsors { | ||
− | + | display: grid; | |
− | + | grid-template-columns: 1fr; | |
− | + | grid-template-rows: 1fr 1fr; | |
− | + | gap: 10px 0px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
#upperFooter #sponsors #otherSponsors { | #upperFooter #sponsors #otherSponsors { | ||
− | + | display: flex | |
− | + | ||
− | + | ||
} | } | ||
#lowerFooter { | #lowerFooter { | ||
− | + | color: #fafafc; | |
− | + | height: 20vh; | |
− | + | box-sizing: border-box; | |
− | + | background-color: #121212; | |
} | } | ||
#lowerFooter #navigation { | #lowerFooter #navigation { | ||
− | + | background-color: #121212; | |
− | + | display: flex; | |
− | + | justify-content: space-around | |
} | } | ||
#lowerFooter ul { | #lowerFooter ul { | ||
− | + | list-style: none; | |
− | + | padding-inline-start: 0; | |
− | + | margin: 0; | |
} | } | ||
#lowerFooter h2 { | #lowerFooter h2 { | ||
− | + | padding-bottom: 20px; | |
+ | font-family: 'montserrat-bold', sans-serif; | ||
} | } | ||
#lowerFooter #navigation { | #lowerFooter #navigation { | ||
− | + | padding: 40px; | |
− | + | font-size: smaller | |
} | } | ||
#footerWrapper #lowerFooter a { | #footerWrapper #lowerFooter a { | ||
− | + | text-decoration: none; | |
− | + | transition-duration: 0.2s; | |
− | + | color: #fafafc; | |
− | + | text-transform: capitalize; | |
− | + | font-weight: 100; | |
− | + | line-height: 2em | |
} | } | ||
Line 147: | Line 135: | ||
#footerWrapper #lowerFooter a:focus, | #footerWrapper #lowerFooter a:focus, | ||
#footerWrapper #lowerFooter a:visited { | #footerWrapper #lowerFooter a:visited { | ||
− | + | color: #fafafc | |
} | } | ||
#footerWrapper #lowerFooter a:hover { | #footerWrapper #lowerFooter a:hover { | ||
− | + | color: rgba(255, 255, 255, 0.4); | |
− | + | text-decoration: none | |
} | } | ||
#projectList { | #projectList { | ||
− | + | display: grid; | |
− | + | grid-template-columns: 1fr 1fr; | |
− | + | grid-auto-flow: column; | |
− | + | grid-template-rows: 1fr 1fr 1fr 1fr 1fr; | |
− | + | gap: 0px 10px; | |
} | } | ||
#mainSponsors img { | #mainSponsors img { | ||
− | + | max-width: 16vw; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .otherS img { | |
− | + | max-width: 10vw; | |
− | + | height: auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
.links-icons { | .links-icons { | ||
− | + | display: flex; | |
− | + | align-items: center; | |
− | + | justify-content: space-around; | |
} | } | ||
.links-icons svg { | .links-icons svg { | ||
− | + | fill: #121212; | |
− | + | width: 2em; | |
− | + | padding-right: 5px | |
} | } | ||
#upperFooter #sponsors #othSWrap { | #upperFooter #sponsors #othSWrap { | ||
− | + | display: grid; | |
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | grid-template-rows: 1fr 1fr; | ||
+ | gap: 10px 0px; | ||
} | } | ||
− | |||
@media (max-width:768px) { | @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 #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; | |
− | + | } | |
− | + | #upperFooter #contacts #image-placeholder { | |
− | + | border-right: solid 1px #fafafc; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
@media (max-width:420px) { | @media (max-width:420px) { | ||
− | + | #upperFooter { | |
− | + | display: block; | |
− | + | height: fit-content; | |
− | + | padding: 0; | |
− | + | transform: rotate(-180deg); | |
− | + | } | |
− | + | #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; | |
− | + | grid-template-columns: 1fr 1fr; | |
− | + | grid-template-rows: 1fr 1fr 1fr; | |
− | + | } | |
− | + | .otherS { | |
− | + | justify-content: center | |
− | + | } | |
− | + | .otherS img { | |
− | + | max-width: 25vw; | |
− | + | } | |
− | + | #upperFooter #contacts { | |
− | + | background-color: #6281ef; | |
− | + | height: 10em; | |
− | + | max-width: 100vw; | |
− | + | display: flex; | |
− | + | justify-content: center | |
− | + | } | |
− | + | #upperFooter #contacts #contactsWrapper { | |
− | + | width: 80% | |
− | + | } | |
− | + | #lowerFooter { | |
− | + | height: fit-content; | |
− | + | transform: rotate(-180deg); | |
− | + | border-top: solid 25px #6281ef; | |
− | + | } | |
− | + | #lowerFooter #navigation { | |
− | + | display: block; | |
− | + | } | |
− | + | #footerWrapper { | |
− | + | border: none; | |
− | + | transform: rotate(180deg); | |
− | + | } | |
− | + | #lowerFooter ul { | |
− | + | overflow: hidden; | |
− | + | max-height: 0; | |
− | + | transition: max-height 0.2s ease-out; | |
− | + | margin-top: 10px; | |
− | + | margin-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 { | |
− | + | height: 20vw; | |
− | + | width: 20vw; | |
− | + | } | |
− | + | .links-icons svg { | |
− | + | fill: #fcfcfa | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
@media (max-width:300px) { | @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 | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } |
Latest revision as of 23:24, 18 December 2020
- footerWrapper {
width: 100%; border-top: solid 25px #6281ef; font-family: 'montserrat-light', sans-serif; ; text-transform: uppercase; background-color: #fafafc;
}
- footerWrapper .container {
width: unset
}
- upperFooter {
height: fit-content; background-color: #fafafc; display: flex; align-items: center; justify-content: space-evenly; padding: 10px; box-sizing: border-box;
}
- 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 {
height: 9vw; width: 9vw; border-right: solid 1px #121212; padding-right: 30px;
}
- upperFooter #contacts #image-placeholder img {
height: 100%; width: 100%
}
- upperFooter #contacts #igem-info {
display: flex; height: 100%; font-size: 0.8em; padding-left: 30px; justify-content: space-around; align-items: center;
}
- 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; padding-right: 0px;
}
- upperFooter #sponsors {
height: 100%; display: flex; align-items: center; box-sizing: border-box; max-width: 55vw
}
- upperFooter #sponsors #mainSponsors {
display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px 0px;
}
- upperFooter #sponsors #otherSponsors {
display: flex
}
- lowerFooter {
color: #fafafc; height: 20vh; 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; font-family: 'montserrat-bold', sans-serif;
}
- 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-flow: column; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; gap: 0px 10px;
}
- mainSponsors img {
max-width: 16vw;
}
.otherS img {
max-width: 10vw; height: auto;
}
.links-icons {
display: flex; align-items: center; justify-content: space-around;
}
.links-icons svg {
fill: #121212; width: 2em; padding-right: 5px
}
- upperFooter #sponsors #othSWrap {
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px 0px;
}
@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 #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; }
- upperFooter #contacts #image-placeholder {
border-right: solid 1px #fafafc;
} }
@media (max-width:420px) {
#upperFooter { display: block; height: fit-content; padding: 0; transform: rotate(-180deg); } #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; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .otherS { justify-content: center } .otherS img { max-width: 25vw; } #upperFooter #contacts { background-color: #6281ef; height: 10em; max-width: 100vw; display: flex; justify-content: center } #upperFooter #contacts #contactsWrapper { width: 80% } #lowerFooter { height: fit-content; transform: rotate(-180deg); border-top: solid 25px #6281ef; } #lowerFooter #navigation { display: block; } #footerWrapper { border: none; transform: rotate(180deg); } #lowerFooter ul { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; margin-top: 10px; margin-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 { height: 20vw; 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 }
}