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

Line 2: Line 2:
 
width: 100%;
 
width: 100%;
 
border-top: solid 25px #6281ef;
 
border-top: solid 25px #6281ef;
−
font-family: 'lato-light', sans-serif;
+
font-family: Lato, sans-serif;
−
text-transform: uppercase;
+
text-transform: uppercase
−
        margin-top: -2px;
+
−
position: relative;
+
 
}
 
}
  
Line 69: Line 67:
 
font-size: 0.9em;
 
font-size: 0.9em;
 
text-transform: initial;
 
text-transform: initial;
−
font-family: 'lato-light', sans-serif;
+
font-family: Lato, sans-serif;
 
text-decoration: none;
 
text-decoration: none;
 
color: #121212;
 
color: #121212;
 
line-height: 2em;
 
line-height: 2em;
−
        padding-right:0px
+
padding-right: 0px;
 
}
 
}
  
Line 182: Line 180:
 
display: flex;
 
display: flex;
 
align-items: center;
 
align-items: center;
−
        justify-content: space-around;
+
justify-content: space-around;
 
}
 
}
  
Line 262: Line 260:
 
height: fit-content;
 
height: fit-content;
 
padding: 0;
 
padding: 0;
 +
transform: rotate(-180deg);
 
}
 
}
  
Line 312: Line 311:
  
 
#upperFooter #contacts {
 
#upperFooter #contacts {
−
background-color: #2E64EC;
+
background-color: #6281ef;
 
height: 10em;
 
height: 10em;
 
max-width: 100vw;
 
max-width: 100vw;
Line 325: Line 324:
 
#lowerFooter {
 
#lowerFooter {
 
height: fit-content;
 
height: fit-content;
 +
transform: rotate(-180deg);
 +
border-top: solid 25px #6281ef;
 +
 
}
 
}
  
 
#lowerFooter #navigation {
 
#lowerFooter #navigation {
−
background: #2E64EC;
 
 
display: block;
 
display: block;
 
}
 
}
  
 
#footerWrapper {
 
#footerWrapper {
−
border: none
+
border: none;
 +
transform: rotate(180deg);
 
}
 
}
  
Line 360: Line 362:
 
#upperFooter #contacts #igem-info h3 {
 
#upperFooter #contacts #igem-info h3 {
 
color: #fafafc;
 
color: #fafafc;
−
font-size: 1.4em
+
font-size: 1em
 
}
 
}
  

Revision as of 09:09, 26 August 2020

  1. footerWrapper {

width: 100%; border-top: solid 25px #6281ef; font-family: Lato, sans-serif; text-transform: uppercase }

  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: Lato, 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 {

padding-bottom: 20px }

  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-rows: auto; 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 }

}