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

 
(One intermediate revision by the same user not shown)
Line 199: Line 199:
 
     #upperFooter #sponsors #othsWrap {
 
     #upperFooter #sponsors #othsWrap {
 
         max-width: 100%
 
         max-width: 100%
−
    }
 
−
    #upperFooter #contacts #image-placeholder {
 
−
        max-width: 10vw;
 
−
        max-height: 10vw;
 
 
     }
 
     }
 
     #upperFooter #contacts #igem-info {
 
     #upperFooter #contacts #igem-info {
Line 222: Line 218:
 
         font-size: 0.8em;
 
         font-size: 0.8em;
 
     }
 
     }
 +
#upperFooter #contacts #image-placeholder {
 +
    border-right: solid 1px #fafafc;
 +
}
 
}
 
}
  
Line 264: Line 263:
 
         margin: 0 auto;
 
         margin: 0 auto;
 
         max-width: none;
 
         max-width: none;
−
         padding-bottom: 30px
+
         padding-bottom: 30px;
 +
        grid-template-columns: 1fr 1fr;
 +
        grid-template-rows: 1fr 1fr 1fr;
 
     }
 
     }
 
     .otherS {
 
     .otherS {
 
         justify-content: center
 
         justify-content: center
 +
    }
 +
    .otherS img {
 +
        max-width: 25vw;
 
     }
 
     }
 
     #upperFooter #contacts {
 
     #upperFooter #contacts {
Line 290: Line 294:
 
         border: none;
 
         border: none;
 
         transform: rotate(180deg);
 
         transform: rotate(180deg);
−
    }
 
−
    #upperFooter #contacts #igem-info {
 
−
        border-left: solid 2px #fafafc;
 
 
     }
 
     }
 
     #lowerFooter ul {
 
     #lowerFooter ul {
Line 314: Line 315:
 
     }
 
     }
 
     #upperFooter #contacts #image-placeholder {
 
     #upperFooter #contacts #image-placeholder {
−
         background-color: #fafafc;
+
         height: 20vw;
−
        max-height: 20vw;
+
         width: 20vw;
−
         max-width: 20vw
+
 
     }
 
     }
 
     .links-icons svg {
 
     .links-icons svg {

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
   }

}