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

Line 7: Line 7:
  
 
#upperFooter {
 
#upperFooter {
−
height: 200px;
+
height: 180px;
 
background-color: #fafafc;
 
background-color: #fafafc;
 
display: flex;
 
display: flex;
 
align-items: center;
 
align-items: center;
 +
justify-content: space-evenly;
 +
padding: 10px
 
}
 
}
  
 
#upperFooter #contacts {
 
#upperFooter #contacts {
−
width: 40%;
+
max-width: 45vw;
 
}
 
}
  
 
#upperFooter #contacts #contactsWrapper {
 
#upperFooter #contacts #contactsWrapper {
−
width: 80%;
 
 
display: flex;
 
display: flex;
 
align-items: center;
 
align-items: center;
−
margin: 0 auto;
+
width: fit-content;
−
height: 100%;
+
justify-content: center;
 +
height: 100%
 +
}
 +
 
 +
#upperFooter #contacts #contactsWrapper #contactus {
 +
padding-right: 10px
 
}
 
}
  
Line 30: Line 36:
 
width: 100px;
 
width: 100px;
 
border-radius: 100px;
 
border-radius: 100px;
−
margin-right: 30px;
 
−
 
 
}
 
}
  
Line 44: Line 48:
 
padding-left: 30px;
 
padding-left: 30px;
 
border-left: solid 2px #121212;
 
border-left: solid 2px #121212;
−
width: 100%;
 
 
justify-content: space-around;
 
justify-content: space-around;
−
align-items: center
+
align-items: center;
 +
margin-left: 30px
 
}
 
}
  
Line 63: Line 67:
 
}
 
}
  
−
#upperFooter #contacts #igem-info #contactus {
 
−
padding-right: 20px
 
−
}
 
  
 
#upperFooter #sponsors {
 
#upperFooter #sponsors {
−
width: 60%;
+
height: 100%;
−
height: 90%;
+
 
display: grid;
 
display: grid;
 
align-items: center;
 
align-items: center;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
padding-left: 40px;
 
−
padding-right: 40px;
 
 
grid-template-columns: 0.5fr 1fr;
 
grid-template-columns: 0.5fr 1fr;
 
grid-template-rows: 1fr;
 
grid-template-rows: 1fr;
 
gap: 1px 10px;
 
gap: 1px 10px;
 +
max-width: 55vw
 
}
 
}
  
Line 86: Line 85:
 
grid-template-rows: 1fr 1fr;
 
grid-template-rows: 1fr 1fr;
 
gap: 10px 10px;
 
gap: 10px 10px;
 +
max-width: 16vw
 
}
 
}
  
Line 92: Line 92:
 
margin: 0 auto;
 
margin: 0 auto;
 
padding: 5px;
 
padding: 5px;
 +
display: flex;
 +
align-items: center
 
}
 
}
  
Line 102: Line 104:
 
gap: 10px 10px;
 
gap: 10px 10px;
 
}
 
}
−
 
−
 
  
 
#lowerFooter {
 
#lowerFooter {
−
background-color: #121212;
 
 
color: #fafafc;
 
color: #fafafc;
−
display: flex;
 
−
padding-bottom: 30px;
 
 
height: 250px;
 
height: 250px;
 
box-sizing: border-box
 
box-sizing: border-box
 +
}
 +
 +
#lowerFooter #navigation {
 +
background-color: #121212;
 +
display: flex;
 +
justify-content: space-around
 
}
 
}
  
Line 124: Line 127:
 
}
 
}
  
−
#lowerFooter div {
+
#lowerFooter #navigation {
 
padding: 40px;
 
padding: 40px;
 
font-size: smaller
 
font-size: smaller
Line 154: Line 157:
  
 
#mainSponsors img {
 
#mainSponsors img {
−
height: 60px
+
max-width: 14vw
 
}
 
}
  
 
#otherSponsors img {
 
#otherSponsors img {
−
height: 40px
+
max-width: 10vw
 +
}
 +
 
 +
.otherS {
 +
display: flex;
 +
align-items: center
 
}
 
}
  
Line 166: Line 174:
 
}
 
}
  
−
.links-icons img {
+
.links-icons svg {
 +
fill: #121212;
 
width: 2em;
 
width: 2em;
 
padding-right: 5px
 
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 {
 +
 +
grid-template-columns: 1fr 1fr;
 +
grid-template-rows: 1fr 1fr 1fr;
 +
gap: 10px 10px;
 +
}
 +
 +
.mainS {
 +
margin: 0;
 +
}
 +
 +
#upperFooter #sponsors #othSWrap {
 +
width: fit-content;
 +
margin: 0 auto;
 +
max-width: none
 +
}
 +
 +
.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;
 +
}
 +
 +
#lowerFooter #navigation h2 {
 +
cursor: pointer;
 +
transition: 0.4s;
 +
}
 +
 +
#upperFooter #contacts #igem-info h3 {
 +
color: #fafafc;
 +
font-size: 1em
 +
}
 +
 +
#projectList {
 +
columns: initial
 +
}
 +
 +
#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
 +
}
 +
 
}
 
}

Revision as of 14:28, 22 August 2020

  1. footerWrapper {

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

  1. upperFooter {

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

  1. upperFooter #contacts {

max-width: 45vw; }

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

  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 }


  1. upperFooter #sponsors {

height: 100%; display: grid; align-items: center; box-sizing: border-box; grid-template-columns: 0.5fr 1fr; grid-template-rows: 1fr; gap: 1px 10px; max-width: 55vw }

  1. upperFooter #sponsors #mainSponsors {

height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 10px 10px; max-width: 16vw }

.mainS { box-sizing: border-box; margin: 0 auto; padding: 5px; display: flex; align-items: center }

  1. upperFooter #sponsors #otherSponsors {

height: 65%; margin-left: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px 10px; }

  1. lowerFooter {

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

  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 {

columns: 2 }

  1. mainSponsors img {

max-width: 14vw }

  1. otherSponsors img {

max-width: 10vw }

.otherS { display: flex; align-items: center }

.links-icons { display: flex; align-items: center }

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

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

grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 10px 10px; }

.mainS { margin: 0; }

#upperFooter #sponsors #othSWrap { width: fit-content; margin: 0 auto; max-width: none }

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

#lowerFooter #navigation h2 { cursor: pointer; transition: 0.4s; }

#upperFooter #contacts #igem-info h3 { color: #fafafc; font-size: 1em }

#projectList { columns: initial }

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

}