Difference between revisions of "Template:Vilnius-Lithuania/CSS/footer"

Revision as of 20:34, 22 August 2020

footerWrapper {

width: 100%; border-top: solid 25px #6281ef; font-family: 'lato-light', 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-light', 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; 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: 1.4em }

#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 }

}

@@ Line 2: / Line 2: @@
 	width: 100%;
 	border-top: solid 25px #6281ef;
-	font-family: Lato, sans-serif;
+	font-family: 'lato-light', sans-serif;
 	text-transform: uppercase
 }
@@ Line 67: / Line 67: @@
 	font-size: 0.9em;
 	text-transform: initial;
-	font-family: Lato, sans-serif;
+	font-family: 'lato-light', sans-serif;
 	text-decoration: none;
 	color: #121212;
@@ Line 356: / Line 356: @@
 	#upperFooter #contacts #igem-info h3 {
 		color: #fafafc;
-		font-size: 1.2em
+		font-size: 1.4em
 	}