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

Revision as of 15:02, 22 August 2020 (view source) Kvainiute (Talk | contribs) ← Older edit		Latest revision as of 23:24, 18 December 2020 (view source) Kvainiute (Talk | contribs)
(22 intermediate revisions by 2 users not shown)
Line 1:		Line 1:
	#footerWrapper {		#footerWrapper {
−	width: 100%;	+	width: 100%;
−	border-top: solid 25px #6281ef;	+	border-top: solid 25px #6281ef;
−	font-family: Lato, sans-serif;	+	font-family: 'montserrat-light', sans-serif;
−	text-transform: uppercase	+	;
		+	text-transform: uppercase;
		+	background-color: #fafafc;
	}		}
	#footerWrapper .container {		#footerWrapper .container {
−	width: unset	+	width: unset
	}		}
	#upperFooter {		#upperFooter {
−	height: 180px;	+	height: fit-content;
−	background-color: #fafafc;	+	background-color: #fafafc;
−	display: flex;	+	display: flex;
−	align-items: center;	+	align-items: center;
−	justify-content: space-evenly;	+	justify-content: space-evenly;
−	padding: 10px	+	padding: 10px;
		+	box-sizing: border-box;
	}		}
	#upperFooter #contacts {		#upperFooter #contacts {
−	max-width: 45vw;	+	max-width: 45vw;
−	height: 100%	+	height: 100%
	}		}
	#upperFooter #contacts #contactsWrapper {		#upperFooter #contacts #contactsWrapper {
−	display: flex;	+	display: flex;
−	align-items: center;	+	align-items: center;
−	width: fit-content;	+	width: fit-content;
−	justify-content: center;	+	justify-content: center;
−	height: 100%	+	height: 100%
	}		}
	#upperFooter #contacts #contactsWrapper #contactus {		#upperFooter #contacts #contactsWrapper #contactus {
−	padding-right: 10px	+	padding-right: 10px
	}		}
	#upperFooter #contacts #image-placeholder {		#upperFooter #contacts #image-placeholder {
−	background-color: rgba(0, 0, 0, 0.04);	+	height: 9vw;
−	height: 100px;	+	width: 9vw;
−	width: 100px;	+	border-right: solid 1px #121212;
−	border-radius: 100px;	+	padding-right: 30px;
	}		}
	#upperFooter #contacts #image-placeholder img {		#upperFooter #contacts #image-placeholder img {
−	height: 100%	+	height: 100%;
		+	width: 100%
	}		}
	#upperFooter #contacts #igem-info {		#upperFooter #contacts #igem-info {
−	display: flex;	+	display: flex;
−	height: 70%;	+	height: 100%;
−	font-size: 0.8em;	+	font-size: 0.8em;
−	padding-left: 30px;	+	padding-left: 30px;
−	border-left: solid 2px #121212;	+	justify-content: space-around;
−	justify-content: space-around;	+	align-items: center;
−	align-items: center;	+
−	margin-left: 30px	+
	}		}
	#upperFooter #contacts #igem-info h3 {		#upperFooter #contacts #igem-info h3 {
−	margin: 0;	+	margin: 0;
−	margin-bottom: 10px	+	margin-bottom: 10px
	}		}
	#upperFooter #contacts a {		#upperFooter #contacts a {
−	font-size: 0.9em;	+	font-size: 0.9em;
−	text-transform: initial;	+	text-transform: initial;
−	font-family: Lato, 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;
	}		}
−
	#upperFooter #sponsors {		#upperFooter #sponsors {
−	height: 100%;	+	height: 100%;
−	display: grid;	+	display: flex;
−	align-items: center;	+	align-items: center;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	grid-template-columns: 0.5fr 1fr;	+	max-width: 55vw
−	grid-template-rows: 1fr;	+
−	gap: 1px 10px;	+
−	max-width: 55vw	+
	}		}
	#upperFooter #sponsors #mainSponsors {		#upperFooter #sponsors #mainSponsors {
−	height: 100%;	+	display: grid;
−	display: grid;	+	grid-template-columns: 1fr;
−	grid-template-columns: 1fr;	+	grid-template-rows: 1fr 1fr;
−	grid-template-rows: 1fr 1fr;	+	gap: 10px 0px;
−	gap: 10px 10px;	+
−	max-width: 16vw	+
−	}	+
−		+
−	.mainS {	+
−	box-sizing: border-box;	+
−	margin: 0 auto;	+
−	padding: 5px;	+
−	display: flex;	+
−	align-items: center	+
	}		}
	#upperFooter #sponsors #otherSponsors {		#upperFooter #sponsors #otherSponsors {
−	height: 65%;	+	display: flex
−	margin-left: 10px;	+
−	display: grid;	+
−	grid-template-columns: 1fr 1fr 1fr;	+
−	grid-template-rows: 1fr 1fr;	+
−	gap: 10px 10px;	+
	}		}
	#lowerFooter {		#lowerFooter {
−	color: #fafafc;	+	color: #fafafc;
−	height: 250px;	+	height: 20vh;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	background-color: #121212;	+	background-color: #121212;
	}		}
	#lowerFooter #navigation {		#lowerFooter #navigation {
−	background-color: #121212;	+	background-color: #121212;
−	display: flex;	+	display: flex;
−	justify-content: space-around	+	justify-content: space-around
	}		}
	#lowerFooter ul {		#lowerFooter ul {
−	list-style: none;	+	list-style: none;
−	padding-inline-start: 0;	+	padding-inline-start: 0;
−	margin: 0;	+	margin: 0;
	}		}
	#lowerFooter h2 {		#lowerFooter h2 {
−	padding-bottom: 20px	+	padding-bottom: 20px;
		+	font-family: 'montserrat-bold', sans-serif;
	}		}
	#lowerFooter #navigation {		#lowerFooter #navigation {
−	padding: 40px;	+	padding: 40px;
−	font-size: smaller	+	font-size: smaller
	}		}
	#footerWrapper #lowerFooter a {		#footerWrapper #lowerFooter a {
−	text-decoration: none;	+	text-decoration: none;
−	transition-duration: 0.2s;	+	transition-duration: 0.2s;
−	color: #fafafc;	+	color: #fafafc;
−	text-transform: capitalize;	+	text-transform: capitalize;
−	font-weight: 100;	+	font-weight: 100;
−	line-height: 2em	+	line-height: 2em
	}		}
Line 150:		Line 135:
	#footerWrapper #lowerFooter a:focus,		#footerWrapper #lowerFooter a:focus,
	#footerWrapper #lowerFooter a:visited {		#footerWrapper #lowerFooter a:visited {
−	color: #fafafc	+	color: #fafafc
	}		}
	#footerWrapper #lowerFooter a:hover {		#footerWrapper #lowerFooter a:hover {
−	color: rgba(255, 255, 255, 0.4);	+	color: rgba(255, 255, 255, 0.4);
−	text-decoration: none	+	text-decoration: none
	}		}
	#projectList {		#projectList {
−	columns: 2	+	display: grid;
		+	grid-template-columns: 1fr 1fr;
		+	grid-auto-flow: column;
		+	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
		+	gap: 0px 10px;
	}		}
	#mainSponsors img {		#mainSponsors img {
−	max-width: 14vw	+	max-width: 16vw;
	}		}
−	#otherSponsors img {	+	.otherS img {
−	max-width: 10vw	+	max-width: 10vw;
−	}	+	height: auto;
−		+
−	.otherS {	+
−	display: flex;	+
−	align-items: center	+
	}		}
	.links-icons {		.links-icons {
−	display: flex;	+	display: flex;
−	align-items: center	+	align-items: center;
		+	justify-content: space-around;
	}		}
	.links-icons svg {		.links-icons svg {
−	fill: #121212;	+	fill: #121212;
−	width: 2em;	+	width: 2em;
−	padding-right: 5px	+	padding-right: 5px
	}		}
	#upperFooter #sponsors #othSWrap {		#upperFooter #sponsors #othSWrap {
−	max-width: 38vw	+	display: grid;
		+	grid-template-columns: 1fr 1fr 1fr;
		+	grid-template-rows: 1fr 1fr;
		+	gap: 10px 0px;
	}		}
−
	@media (max-width:768px) {		@media (max-width:768px) {
−	#mainSponsors img {	+	#mainSponsors img {
−	max-width: 13vw;	+	max-width: 13vw;
−	height: auto;	+	height: auto;
−		+	}
−	}	+	#upperFooter #contacts {
−		+	max-width: 40vw;
−	#upperFooter #contacts {	+	}
−	max-width: 40vw;	+	#upperFooter #sponsors {
−	}	+	max-width: 60vw;
−		+	}
−	#upperFooter #sponsors {	+	#otherSponsors img {
−	max-width: 60vw;	+	max-width: 10vw;
−	}	+	height: auto;
−		+	}
−	#otherSponsors img {	+	#upperFooter #sponsors #mainSponsors {
−	max-width: 10vw;	+	max-width: 100%
−	height: auto;	+	}
−		+	#upperFooter #sponsors #othsWrap {
−	}	+	max-width: 100%
−		+	}
−	#upperFooter #sponsors #mainSponsors {	+	#upperFooter #contacts #igem-info {
−		+	font-size: 0.7em;
−	max-width: 100%	+	padding-left: 15px;
−	}	+	margin-left: 15px
−		+	}
−	#upperFooter #sponsors #othsWrap {	+	#lowerFooter h2 {
−		+	padding-bottom: 10px;
−	max-width: 100%	+	font-size: 0.9em
−	}	+	}
−		+	#lowerFooter ul {
−	#upperFooter #contacts #image-placeholder {	+	font-size: 0.8em
−	max-width: 10vw;	+	}
−	max-height: 10vw;	+	.links-icons svg {
−		+	width: 1.5em;
−	}	+	}
−		+	#upperFooter #contacts #igem-info h3 {
−	#upperFooter #contacts #igem-info {	+	font-size: 0.8em;
−	font-size: 0.7em;	+	}
−	padding-left: 15px;	+	#upperFooter #contacts #image-placeholder {
−	margin-left: 15px	+	border-right: solid 1px #fafafc;
−	}	+	}
−		+
−	#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) {		@media (max-width:420px) {
−	#upperFooter {	+	#upperFooter {
−	display: block;	+	display: block;
−	height: fit-content;	+	height: fit-content;
−	padding: 0;	+	padding: 0;
−	}	+	transform: rotate(-180deg);
−		+	}
−	#upperFooter #sponsors {	+	#upperFooter #sponsors {
−	display: block;	+	display: block;
−	padding-left: 0;	+	padding-left: 0;
−	max-width: none	+	max-width: none
−	}	+	}
−		+	#upperFooter #sponsors #mainSponsors {
−	#upperFooter #sponsors #mainSponsors {	+	display: flex;
−	display: flex;	+	justify-content: center;
−	justify-content: center;	+	margin-top: 20px;
−	margin-top: 20px;	+	margin-bottom: 20px;
−	margin-bottom: 20px;	+	max-width: none
−	max-width: none	+	}
−	}	+	#mainSponsors img {
−		+	max-width: 40vw;
−	#mainSponsors img {	+	height: auto;
−	max-width: 40vw;	+	}
−	height: auto;	+	#otherSponsors img {
−	}	+	max-width: 30vw;
−		+	height: auto;
−	#otherSponsors img {	+	}
−	max-width: 30vw;	+	#upperFooter #sponsors #otherSponsors {
−	height: auto;	+	display: block
−	}	+	}
−		+	#upperFooter #sponsors #otherSponsors .sponsors-row {
−	#upperFooter #sponsors #otherSponsors {	+	display: flex
−		+	}
−	grid-template-columns: 1fr 1fr;	+	.mainS {
−	grid-template-rows: 1fr 1fr 1fr;	+	margin: 0;
−	gap: 10px 10px;	+	}
−	}	+	#upperFooter #sponsors #othSWrap {
−		+	width: fit-content;
−	.mainS {	+	margin: 0 auto;
−	margin: 0;	+	max-width: none;
−	}	+	padding-bottom: 30px;
−		+	grid-template-columns: 1fr 1fr;
−	#upperFooter #sponsors #othSWrap {	+	grid-template-rows: 1fr 1fr 1fr;
−	width: fit-content;	+	}
−	margin: 0 auto;	+	.otherS {
−	max-width: none	+	justify-content: center
−	}	+	}
−		+	.otherS img {
−	.otherS {	+	max-width: 25vw;
−	justify-content: center	+	}
−	}	+	#upperFooter #contacts {
−		+	background-color: #6281ef;
−	#upperFooter #contacts {	+	height: 10em;
−	background-color: #2E64EC;	+	max-width: 100vw;
−	height: 10em;	+	display: flex;
−	max-width: 100vw;	+	justify-content: center
−	display: flex;	+	}
−	justify-content: center	+	#upperFooter #contacts #contactsWrapper {
−	}	+	width: 80%
−		+	}
−	#upperFooter #contacts #contactsWrapper {	+	#lowerFooter {
−	width: 80%	+	height: fit-content;
−	}	+	transform: rotate(-180deg);
−		+	border-top: solid 25px #6281ef;
−	#lowerFooter {	+	}
−	height: fit-content;	+	#lowerFooter #navigation {
−	}	+	display: block;
−		+	}
−	#lowerFooter #navigation {	+	#footerWrapper {
−	background: #2E64EC;	+	border: none;
−	display: block;	+	transform: rotate(180deg);
−	}	+	}
−		+	#lowerFooter ul {
−	#footerWrapper {	+	overflow: hidden;
−	border: none	+	max-height: 0;
−	}	+	transition: max-height 0.2s ease-out;
−		+	margin-top: 10px;
−	#upperFooter #contacts #igem-info {	+	margin-bottom: 10px;
−	border-left: solid 2px #fafafc;	+	}
−	}	+	#lowerFooter #navigation h2 {
−		+	cursor: pointer;
−	#lowerFooter ul {	+	transition: 0.4s;
−	overflow: hidden;	+	font-size: 1.6em
−	max-height: 0;	+	}
−	transition: max-height 0.2s ease-out;	+	#lowerFooter ul li {
−	}	+	font-size: 1.5em
−		+	}
−	#lowerFooter #navigation h2 {	+	#upperFooter #contacts #igem-info h3 {
−	cursor: pointer;	+	color: #fafafc;
−	transition: 0.4s;	+	font-size: 1em
−	}	+	}
−		+	#upperFooter #contacts #image-placeholder {
−	#upperFooter #contacts #igem-info h3 {	+	height: 20vw;
−	color: #fafafc;	+	width: 20vw;
−	font-size: 1em	+	}
−	}	+	.links-icons svg {
−		+	fill: #fcfcfa
−	#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) {		@media (max-width:300px) {
−	#upperFooter #contacts #igem-info h3 {	+	#upperFooter #contacts #igem-info h3 {
−	font-size: 0.7em	+	font-size: 0.7em
−	}	+	}
−		+	#upperFooter #contacts #igem-info {
−	#upperFooter #contacts #igem-info {	+	border: none
−	border: none	+	}
−	}	+	#upperFooter #contacts #image-placeholder {
−		+	max-width: 20vw;
−	#upperFooter #contacts #image-placeholder {	+	max-height: 20vw
−	max-width: 20vw;	+	}
−	max-height: 20vw	+	.links-icons svg {
−	}	+	max-height: 14px;
−		+	}
−	.links-icons svg {	+	#igem-info {
−	max-height: 14px;	+	max-width: 40vw
−	}	+	}
−		+
−	#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
   }

}