WikiVisor at 19:56, May 15, 2022

2022-05-15T19:56:19Z

← Older revision		Revision as of 15:56, May 15, 2022
Line 6:		Line 6:
	margin: 0 auto !important;		margin: 0 auto !important;
	overflow: hidden;		overflow: hidden;
	font-family: '~~Raleway~~', ~~sans-~~serif;		font-family: 'Georgia', serif;
	font-size: 15px;		font-size: 15px;
	list-style-type: none;		list-style-type: none;

WikiVisor at 11:34, May 14, 2022

2022-05-14T11:34:59Z

← Older revision		Revision as of 07:34, May 14, 2022
Line 354:		Line 354:
	/overflow: scroll;/		/overflow: scroll;/
	}		}
	}

	~~#hexGrid .hex .hexIn .hexLink p > a {~~
	~~position: relative !important;~~
	~~color: #fff;~~
	~~text-decoration: none !important;~~
	}		}

WikiVisor at 11:34, May 14, 2022

2022-05-14T11:34:18Z

← Older revision		Revision as of 07:34, May 14, 2022
Line 356:		Line 356:
	}		}

	#hexGrid .hexLink p > a {		#hexGrid .hex .hexIn .hexLink p > a {
	position: relative !important;		position: relative !important;
	color: #fff;		color: #fff;
	text-decoration: none !important;		text-decoration: none !important;
	}		}

WikiVisor at 11:33, May 14, 2022

2022-05-14T11:33:21Z

← Older revision		Revision as of 07:33, May 14, 2022
Line 356:		Line 356:
	}		}

	#hexGrid a {		#hexGrid .hexLink p > a {
	position: relative !important;		position: relative !important;
	color: #fff;		color: #fff;
	text-decoration: none !important;		text-decoration: none !important;
	}		}

WikiVisor at 11:31, May 14, 2022

2022-05-14T11:31:44Z

@@ Line 188: / Line 188: @@
      margin: 0 auto -65px auto;
      width: 33.333%;
+}
@@ Line 360: / Line 354: @@
          /*overflow: scroll;*/
+     }
+}

WikiVisor at 11:30, May 14, 2022

2022-05-14T11:30:25Z

← Older revision		Revision as of 07:30, May 14, 2022
Line 192:		Line 192:
	#hexGrid a {		#hexGrid a {
	position: relative !important;		position: relative !important;
			color: #fff;
			text-decoration: none !important;
	}		}

WikiVisor at 11:29, May 14, 2022

2022-05-14T11:29:51Z

← Older revision		Revision as of 07:29, May 14, 2022
Line 188:		Line 188:
	margin: 0 auto -65px auto;		margin: 0 auto -65px auto;
	width: 33.333%;		width: 33.333%;
			}

			#hexGrid a {
			position: relative !important;
	}		}

WikiVisor: 1 revision imported

2022-05-13T20:55:57Z

1 revision imported

← Older revision	Revision as of 16:55, May 13, 2022
(No difference)

WikiVisor at 08:07, May 13, 2022

2022-05-13T08:07:52Z

New page

/* ########## Code for responsive hexagons ######### */
#hexGrid,
#content #bodyContent .hexGrid {
display: flex !important;
flex-wrap: wrap;
margin: 0 auto !important;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;

padding-bottom: 6.5% !important;
}
#hexGrid *,
#content #bodyContent .hexGrid * {
margin: 0;
padding: 0;
}
#hexGrid .hex,
#content #bodyContent .hexGrid .hex {
position: relative;
visibility:hidden;
outline:1px solid transparent;
}
#hexGrid .hex::after,
#hexGrid .logo::after,
#content #bodyContent .hexGrid .hex::after,
#content #bodyContent .hexGrid .logo::after {
content:'';
display:block;
padding-bottom: 86.602%;
}
#hexGrid .hexIn,
#content #bodyContent .hexGrid .hexIn {
position: absolute;
width:96%;
padding-bottom: 110.851%;
margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent;
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
#hexGrid .hexIn *,
#content #bodyContent .hexGrid .hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent
}

/* Design for //mib */
#hexGrid .hexIn duv,
#content #bodyContent .hexGrid .hexIn duv{
position: relative;
}
#hexGrid .hexIn duv img,
#content #bodyContent .hexGrid .hexIn duv img {
max-height:1em;
left: auto;
right: auto;
position: relative;
}

#hexGrid .hexLink,
#content #bodyContent .hexGrid .hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-color: #cdcfd0;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT ***/
#hexGrid .hex img,
#content #bodyContent .hexGrid .hex img {
left: -100%;
right: -100%;
width: auto;
height: 100% !important;
max-width: none !important;
margin: 0 auto;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}

#hexGrid .hex div.content,
#content #bodyContent .hexGrid .hex div.content {
color: #353535;
text-align: center;
line-height: 1.3rem;

display:flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
flex-wrap: wrap;

padding: 3%;
width: 100%;
height: 100%;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
#hexGrid .hex div.content div,
#content #bodyContent .hexGrid .hex div.content div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

#hexGrid .hex h1,
#hexGrid .hex p,
#content #bodyContent .hexGrid .hex h1,
#content #bodyContent .hexGrid .hex p {
color: #fff;
width: 100%;
padding: 5%;
box-sizing: border-box;
background-color: rgba(0, 128, 128, 0.8);
background-color: rgba(128, 128, 128, 0.8);
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
#hexGrid .hex h1,
#content #bodyContent .hexGrid .hex h1 {
bottom: 50%;
margin: 0 !important;
padding-top:50%;
font-size: 1.5em;
z-index: 1;
-webkit-transform:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
#hexGrid .hex h1 .mw-headline,
#content #bodyContent .hexGrid .hex h1 .mw-headline {
top: 0;
position: relative !important;
}
#hexGrid .hex h1::after,
#content #bodyContent .hexGrid .hex h1::after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
#hexGrid .hex p,
#content #bodyContent .hexGrid .hex p {
top: 50%;
padding-bottom: 50%;
-webkit-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
#hexGrid .hex .bg-animation-overlay,
#content #bodyContent .hexGrid .hex .bg-animation-overlay {
color: #fff;
width: 100%;
height: 100%;
padding: 5%;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}

/*** HEX LOGO ***/
#hexGrid .logo,
#content #bodyContent .hexGrid .logo {
display: flex;
flex-direction: row;

align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
margin: 0 auto -65px auto;
width: 33.333%;
}

/*
@media print {
#content #bodyContent .hexGrid .logo {
height: 173px;
}
}
*/

#hexGrid .logoIn,
#content #bodyContent .hexGrid .logoIn {
position: absolute;
visibility: visible;
width: 100%;

width: 96%;
margin: 24% 2%;
padding-bottom: 62.8%; /* to set height to 100% of hex */
background-position: center center;
background-size: contain;
background-image: url('/images_noauth/companylogo.png');
background-repeat: no-repeat;
}
/* For individual logos */
#content #bodyContent .hexGrid .logoIn.logoIndividual img {
position: absolute;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;

width: auto !important;
height: auto !important;
max-height: 100% !important;
max-width: 100% !important;
}
#content #bodyContent .hexGrid .logoIn.logoIndividual {
/* height: 63.5%; */
}
/* Logo as last element in small row */
#hexGrid li:nth-child(14n+5) .logoIn,
#content #bodyContent .hexGrid li:nth-child(14n+5) .logoIn {
width: 142%;
margin: 28% -46% 28% 4%;
padding-bottom: 54.8%;
}
/* Logo as first element in small row */
#hexGrid li:nth-child(14n+1) .logoIn,
#content #bodyContent .hexGrid li:nth-child(7n+1) .logoIn {
width: 142%;
margin: 28% 4% 28% -46%;
padding-bottom: 54.8%;
}
/* Double size logo */
#hexGrid li .logoIn.doublesize,
#content #bodyContent .hexGrid li .logoIn.doublesize {
width: 176%;
margin: 28% 12%;
padding-bottom: 54.8%;
}

/*** HOVER EFFECT ***/
#hexGrid .hexLink:hover h1, #hexGrid .hexLink:focus h1,
#hexGrid .hexLink:hover p, #hexGrid .hexLink:focus p,
#content #bodyContent .hexGrid .hexLink:hover h1, #content #bodyContent .hexGrid .hexLink:focus h1,
#content #bodyContent .hexGrid .hexLink:hover p, #content #bodyContent .hexGrid .hexLink:focus p {
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
#hexGrid .hexLink:hover .bg-animation-overlay, #hexGrid .hexLink:focus .bg-animation-overlay,
#content #bodyContent .hexGrid .hexLink:hover .bg-animation-overlay, #content #bodyContent .hexGrid .hexLink:focus .bg-animation-overlay {
opacity: 0.4;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}

/* Variables for sizes */
@media (max-width: 575px) {
#hexGrid, .hexGrid {
width: 576px;
max-width: 100%;
}
#hexGrid .hex div.content,
#content #bodyContent .hexGrid .hex div.content {
font-size: 1em;
}
}
@media (max-width: 767px) and (min-width: 576px) {
#hexGrid, .hexGrid {
width: 576px;
max-width: 100%;
}
#hexGrid .hex div.content,
#content #bodyContent .hexGrid .hex div.content {
font-size: 1.1em;
}
#hexGrid .logo,
#content #bodyContent .hexGrid .logo {
margin: 0 auto -43px auto;
}
}
@media (max-width: 999px) and (min-width: 768px) {
#hexGrid, .hexGrid {
width: 768px;
max-width: 100%;
}
#hexGrid .hex div.content,
#content #bodyContent .hexGrid .hex div.content {
font-size: 1.3em;
}
#hexGrid .logo,
#content #bodyContent .hexGrid .logo {
/* max-height: 205px; */
margin: 0 auto -43px auto;
}
}
@media (min-width: 1000px) {
#hexGrid, .hexGrid {
width: 910px;
max-width: 100%;
}
#hexGrid .hex div.content,
#content #bodyContent .hexGrid .hex div.content {
font-size: 1.5em;
}
#hexGrid .logo,
#content #bodyContent .hexGrid .logo {
/* max-height: 223px; */
}
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION ***/
/* Sizes for hexs */
@media (max-width: 575px) {
#hexGrid .hex,
#content #bodyContent .hexGrid .hex {
width: 33%;
}
#hexGrid .hex:nth-child(5n+1),
#content #bodyContent .hexGrid .hex:nth-child(5n+1) {
margin-left:16.5%;
}
#hexGrid .logo,
#content #bodyContent .hexGrid .logo {
/* width: 33.333%;
margin: 0 -1px -40px -1px;
padding: 5px; */
}
}
@media (min-width: 576px) {
#hexGrid .hex,
#content #bodyContent .hexGrid .hex {
width: 25%;
}
#hexGrid .hex:nth-child(7n+1),
#content #bodyContent .hexGrid .hex:nth-child(7n+1) {
margin-left:12.5%;
}
#hexGrid .logo:nth-child(7n+1),
#content #bodyContent .hexGrid .logo:nth-child(7n+1) {
/* width: 50%; */
/*overflow: scroll;*/
}
}

MediaWiki:Chameleon.css - Revision history

WikiVisor at 19:56, May 15, 2022

WikiVisor at 11:34, May 14, 2022

WikiVisor at 11:34, May 14, 2022

WikiVisor at 11:33, May 14, 2022

WikiVisor at 11:31, May 14, 2022

WikiVisor at 11:30, May 14, 2022

WikiVisor at 11:29, May 14, 2022

WikiVisor: 1 revision imported

WikiVisor at 08:07, May 13, 2022