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

 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
#footerWrapper {
 +
    width: 100%;
 +
    border-top: solid 25px #6281ef;
 +
    font-family: 'montserrat-light', sans-serif;
 +
    ;
 +
    text-transform: uppercase;
 +
    background-color: #fafafc;
 +
}
  
−
#footerWrapper{
+
#footerWrapper .container {
−
  width: 100%;
+
    width: unset
−
  border-top: solid 25px #6281ef;
+
−
font-family: Lato, sans-serif;
+
−
  text-transform:uppercase
+
 
}
 
}
−
#upperFooter{
+
 
−
  height: 160px;
+
#upperFooter {
−
  background-color:#fafafc;
+
    height: fit-content;
−
  display:flex;
+
    background-color: #fafafc;
 +
    display: flex;
 +
    align-items: center;
 +
    justify-content: space-evenly;
 +
    padding: 10px;
 +
    box-sizing: border-box;
 
}
 
}
−
#upperFooter #contacts{
+
 
−
  width: 40%;
+
#upperFooter #contacts {
 +
    max-width: 45vw;
 +
    height: 100%
 
}
 
}
−
#upperFooter #contacts #contactsWrapper{
+
 
−
width: fit-content;
+
#upperFooter #contacts #contactsWrapper {
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
−
     margin: 0 auto;
+
     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%;
 
     height: 100%;
 +
    width: 100%
 
}
 
}
  
−
#upperFooter #contacts #image-placeholder{
+
#upperFooter #contacts #igem-info {
−
  background-color:#fcbd1b;
+
    display: flex;
−
  height:100px;
+
    height: 100%;
−
  width:100px;
+
    font-size: 0.8em;
−
  border-radius:100px;
+
    padding-left: 30px;
−
  margin-right:30px;
+
    justify-content: space-around;
−
 
+
    align-items: center;
 
}
 
}
−
#upperFooter #contacts #igem-info{
+
 
−
  display:flex;
+
#upperFooter #contacts #igem-info h3 {
−
  height:70%;
+
    margin: 0;
−
  font-size: 0.8em;
+
    margin-bottom: 10px
−
  padding-left:30px;
+
−
  border-left:solid 2px #121212;
+
 
}
 
}
−
#upperFooter #contacts p{
+
 
−
  font-size: 0.9em;
+
#upperFooter #contacts a {
−
  text-transform: initial;
+
    font-size: 0.9em;
−
font-family: Lato, sans-serif;
+
    text-transform: initial;
 +
    font-family: Lato, sans-serif;
 +
    text-decoration: none;
 +
    color: #121212;
 +
    line-height: 2em;
 +
    padding-right: 0px;
 
}
 
}
−
#upperFooter #contacts #igem-info #contactus{
+
 
−
  padding-right:20px
+
#upperFooter #sponsors {
 +
    height: 100%;
 +
    display: flex;
 +
    align-items: center;
 +
    box-sizing: border-box;
 +
    max-width: 55vw
 
}
 
}
−
#upperFooter #contacts #igem-info div{
+
 
−
  padding-top:10px
+
#upperFooter #sponsors #mainSponsors {
 +
    display: grid;
 +
    grid-template-columns: 1fr;
 +
    grid-template-rows: 1fr 1fr;
 +
    gap: 10px 0px;
 
}
 
}
−
#upperFooter #sponsors{
+
 
−
  width: 60%;
+
#upperFooter #sponsors #otherSponsors {
−
  height:100%;
+
    display: flex
−
/*  background-color:#333; */
+
−
  display:flex;
+
−
  align-items:center;
+
−
  box-sizing:border-box;
+
−
  padding-left:40px;
+
−
  padding-right:40px
+
 
}
 
}
−
#upperFooter #sponsors #mainSponsors{
+
 
−
  width: 35%;
+
#lowerFooter {
−
  height:90%;
+
    color: #fafafc;
−
  display: grid;
+
    height: 20vh;
−
  grid-template-columns: 1fr;
+
    box-sizing: border-box;
−
  grid-template-rows: 1fr 1fr;
+
    background-color: #121212;
−
  gap: 10px 10px;
+
 
}
 
}
−
.mainS{
+
 
−
  padding:5px;
+
#lowerFooter #navigation {
−
  box-sizing:border-box;
+
    background-color: #121212;
−
  background-color:#222
+
    display: flex;
 +
    justify-content: space-around
 
}
 
}
−
#upperFooter #sponsors #otherSponsors{
+
 
−
  width: 65%;
+
#lowerFooter ul {
−
  height:70%;
+
    list-style: none;
−
/*  background-color:#555; */
+
    padding-inline-start: 0;
−
  margin-left:10px;
+
    margin: 0;
−
  display: grid;
+
−
  grid-template-columns: 1fr 1fr 1fr;
+
−
  grid-template-rows: 1fr 1fr;
+
−
  gap: 10px 10px;
+
 
}
 
}
−
.otherS{
+
 
−
  background-color:#222
+
#lowerFooter h2 {
 +
    padding-bottom: 20px;
 +
    font-family: 'montserrat-bold', sans-serif;
 
}
 
}
−
#lowerFooter{
+
 
−
  background-color:#121212;
+
#lowerFooter #navigation {
−
  color: #fafafc;
+
    padding: 40px;
−
  display: flex;
+
    font-size: smaller
−
  padding-bottom:30px;
+
−
height:250px;
+
−
box-sizing:border-box
+
 
}
 
}
−
#lowerFooter ul{
+
 
−
  list-style:none;
+
#footerWrapper #lowerFooter a {
−
  padding-inline-start: 0;
+
    text-decoration: none;
−
margin: 0;
+
    transition-duration: 0.2s;
 +
    color: #fafafc;
 +
    text-transform: capitalize;
 +
    font-weight: 100;
 +
    line-height: 2em
 
}
 
}
−
#lowerFooter h2{
+
 
−
  padding-bottom:20px
+
#footerWrapper #lowerFooter a:active,
 +
#footerWrapper #lowerFooter a:focus,
 +
#footerWrapper #lowerFooter a:visited {
 +
    color: #fafafc
 
}
 
}
−
#lowerFooter div{
+
 
−
  padding: 40px;
+
#footerWrapper #lowerFooter a:hover {
−
  font-size:smaller
+
    color: rgba(255, 255, 255, 0.4);
 +
    text-decoration: none
 
}
 
}
−
#footerWrapper #lowerFooter a{
+
 
−
  text-decoration: none;
+
#projectList {
−
  transition-duration:0.2s;
+
    display: grid;
−
  color:#fafafc;
+
    grid-template-columns: 1fr 1fr;
−
  text-transform: capitalize;
+
    grid-auto-flow: column;
−
  font-weight:100;
+
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
−
  line-height:2em
+
    gap: 0px 10px;
 
}
 
}
−
#footerWrapper #lowerFooter a:active,
+
 
−
#footerWrapper #lowerFooter a:focus,
+
#mainSponsors img {
−
#footerWrapper #lowerFooter a:visited{
+
    max-width: 16vw;
−
  color:#fafafc
+
 
}
 
}
−
#footerWrapper #lowerFooter a:hover{
+
 
−
  color:rgba(255,255,255,0.4);
+
.otherS img {
−
text-decoration:none
+
    max-width: 10vw;
 +
    height: auto;
 
}
 
}
−
#projectList{
+
 
−
/*  display:grid; */
+
.links-icons {
−
  columns:2
+
    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
 +
    }
 
}
 
}

Latest revision as of 23:24, 18 December 2020

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

}

  1. footerWrapper .container {
   width: unset

}

  1. upperFooter {
   height: fit-content;
   background-color: #fafafc;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   padding: 10px;
   box-sizing: border-box;

}

  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 {
   height: 9vw;
   width: 9vw;
   border-right: solid 1px #121212;
   padding-right: 30px;

}

  1. upperFooter #contacts #image-placeholder img {
   height: 100%;
   width: 100%

}

  1. upperFooter #contacts #igem-info {
   display: flex;
   height: 100%;
   font-size: 0.8em;
   padding-left: 30px;
   justify-content: space-around;
   align-items: center;

}

  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 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 10px 0px;

}

  1. upperFooter #sponsors #otherSponsors {
   display: flex

}

  1. lowerFooter {
   color: #fafafc;
   height: 20vh;
   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;
   font-family: 'montserrat-bold', sans-serif;

}

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

}

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

}