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

Line 127: Line 127:
  
 
#lowerFooter h2 {
 
#lowerFooter h2 {
−
padding-bottom: 20px
+
color: #fafafc;
 +
padding-bottom: 20px;
 +
font-family: 'montserrat-bold';
 
}
 
}
  

Revision as of 13:54, 4 October 2020

  1. footerWrapper {

width: 100%; border-top: solid 25px #6281ef; font-family:'montserrat-light', sans-serif; text-transform: uppercase; background-color: #fafafc; 

       position:relative;
       z-index:3

}

  1. footerWrapper .container {

width: unset }

  1. upperFooter {

height: 180px; background-color: #fafafc; display: flex; align-items: center; justify-content: space-evenly; padding: 10px }

  1. upperFooter #contacts {

max-width: 45vw; height: 100% }

  1. upperFooter #contacts #contactsWrapper {

display: flex; align-items: center; width: fit-content; justify-content: center; height: 100% }

  1. upperFooter #contacts #contactsWrapper #contactus {

padding-right: 10px }

  1. upperFooter #contacts #image-placeholder {

background-color: rgba(0, 0, 0, 0.04); height: 100px; width: 100px; border-radius: 100px; }

  1. upperFooter #contacts #image-placeholder img {

height: 100%; width: 100% }

  1. 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 }

  1. upperFooter #contacts #igem-info h3 {

margin: 0; margin-bottom: 10px }

  1. upperFooter #contacts a {

font-size: 0.9em; text-transform: initial; font-family: 'montserrat-light', sans-serif; text-decoration: none; color: #121212; line-height: 2em; padding-right: 0px; }


  1. upperFooter #sponsors {

height: 100%; display: flex; align-items: center; box-sizing: border-box; max-width: 55vw }

  1. 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% }

  1. upperFooter #sponsors #otherSponsors {

height: 65%; margin-left: 10px; display: flex }

  1. lowerFooter {

color: #fafafc; height: 250px; box-sizing: border-box; background-color: #121212; }

  1. lowerFooter #navigation {

background-color: #121212; display: flex; justify-content: space-around }

  1. lowerFooter ul {

list-style: none; padding-inline-start: 0; margin: 0; }

  1. lowerFooter h2 {

color: #fafafc; padding-bottom: 20px; font-family: 'montserrat-bold'; }

  1. lowerFooter #navigation {

padding: 40px; font-size: smaller }

  1. footerWrapper #lowerFooter a {

text-decoration: none; transition-duration: 0.2s; color: #fafafc; text-transform: capitalize; font-weight: 100; line-height: 2em }

  1. footerWrapper #lowerFooter a:active,
  2. footerWrapper #lowerFooter a:focus,
  3. footerWrapper #lowerFooter a:visited {

color: #fafafc }

  1. footerWrapper #lowerFooter a:hover {

color: rgba(255, 255, 255, 0.4); text-decoration: none }

  1. projectList {

display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; gap: 0px 10px; }

  1. mainSponsors img {

max-width: 14vw; height: auto; max-height: 100% }

  1. 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; justify-content: space-around; }

.links-icons svg { fill: #121212; width: 2em; padding-right: 5px }

  1. 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; 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 }

.otherS { justify-content: center }

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

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

}