MediaWiki:Chameleon.css

From Helderberg Hilltowns of Albany County, NY
Revision as of 07:30, May 14, 2022 by WikiVisor (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ########## 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%;
}

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

/*
@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;*/
    }
}
Retrieved from "https://albanyhilltowns.com/w/index.php?title=MediaWiki:Chameleon.css&oldid=19973"