Line 82: | Line 82: | ||
− | + | * { | |
− | + | position: relative; | |
− | + | -moz-box-sizing: border-box; | |
− | + | box-sizing: border-box; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | list-style: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | html, | |
− | + | body { | |
− | + | height: 100%; | |
} | } | ||
− | + | body { | |
− | + | background: #52be7f; | |
− | + | color: #fff; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | |
− | + | .component { | |
− | + | position: relative; | |
− | + | margin-bottom: 3em; | |
+ | height: 15em; | ||
+ | background: rgba(0,0,0,0.05); | ||
+ | font-family: 'Lato', Arial, sans-serif; | ||
} | } | ||
− | . | + | .component > h2 { |
− | + | position: absolute; | |
− | + | overflow: hidden; | |
− | + | width: 100%; | |
− | + | text-align: center; | |
− | + | text-transform: uppercase; | |
− | + | white-space: nowrap; | |
− | + | font-weight: 300; | |
− | + | font-style: italic; | |
− | + | font-size: 12em; | |
− | + | opacity: 0.1; | |
− | + | cursor: default; | |
− | + | ||
} | } | ||
− | + | .cn-button { | |
− | .cn- | + | position: absolute; |
− | + | top: 100%; | |
− | + | left: 50%; | |
+ | z-index: 11; | ||
+ | margin-top: -2.25em; | ||
+ | margin-left: -2.25em; | ||
+ | padding-top: 0em; | ||
+ | width: 4.5em; | ||
+ | height: 4.5em; | ||
+ | border: none; | ||
+ | border-radius: 50%; | ||
+ | background: none; | ||
+ | background-color: #fff; | ||
+ | color: #52be7f; | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | font-size: 1.5em; | ||
+ | text-transform: uppercase; | ||
+ | cursor: pointer; | ||
+ | -webkit-backface-visibility: hidden; | ||
} | } | ||
− | .csstransforms .cn-wrapper | + | .csstransforms .cn-wrapper { |
− | + | position: absolute; | |
− | + | top: 100%; | |
− | + | left: 50%; | |
− | + | z-index: 10; | |
− | + | margin-top: -13em; | |
− | + | margin-left: -13.5em; | |
− | + | width: 27em; | |
− | + | height: 27em; | |
− | + | border-radius: 50%; | |
− | + | background: transparent; | |
− | + | opacity: 0; | |
+ | -webkit-transition: all .3s ease 0.3s; | ||
+ | -moz-transition: all .3s ease 0.3s; | ||
+ | transition: all .3s ease 0.3s; | ||
+ | -webkit-transform: scale(0.1); | ||
+ | -ms-transform: scale(0.1); | ||
+ | -moz-transform: scale(0.1); | ||
+ | transform: scale(0.1); | ||
+ | pointer-events: none; | ||
+ | overflow: hidden; | ||
} | } | ||
− | .csstransforms .cn-wrapper | + | /*cover to prevent extra space of anchors from being clickable*/ |
− | display: block; | + | .csstransforms .cn-wrapper:after{ |
− | font-size: | + | content:"."; |
− | + | display:block; | |
− | + | font-size:2em; | |
+ | width:6.2em; | ||
+ | height:6.2em; | ||
position: absolute; | position: absolute; | ||
− | + | left: 50%; | |
− | + | margin-left: -3.1em; | |
+ | top:50%; | ||
+ | margin-top: -3.1em; | ||
border-radius: 50%; | border-radius: 50%; | ||
− | + | z-index:10; | |
− | color: | + | color: transparent; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .csstransforms . | + | .csstransforms .opened-nav { |
− | + | border-radius: 50%; | |
− | + | opacity: 1; | |
+ | -webkit-transition: all .3s ease; | ||
+ | -moz-transition: all .3s ease; | ||
+ | transition: all .3s ease; | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | pointer-events: auto; | ||
} | } | ||
− | .csstransforms .cn-wrapper li: | + | .csstransforms .cn-wrapper li { |
− | + | position: absolute; | |
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | overflow: hidden; | ||
+ | margin-top: -1.3em; | ||
+ | margin-left: -10em; | ||
+ | width: 10em; | ||
+ | height: 10em; | ||
+ | font-size: 1.5em; | ||
+ | -webkit-transition: all .3s ease; | ||
+ | -moz-transition: all .3s ease; | ||
+ | transition: all .3s ease; | ||
+ | -webkit-transform: rotate(76deg) skew(60deg); | ||
+ | -moz-transform: rotate(76deg) skew(60deg); | ||
+ | -ms-transform: rotate(76deg) skew(60deg); | ||
+ | transform: rotate(76deg) skew(60deg); | ||
+ | -webkit-transform-origin: 100% 100%; | ||
+ | -moz-transform-origin: 100% 100%; | ||
+ | transform-origin: 100% 100%; | ||
+ | pointer-events: none; | ||
} | } | ||
− | .csstransforms .cn-wrapper li: | + | .csstransforms .cn-wrapper li a { |
− | + | position: absolute; | |
+ | right: -7.25em; | ||
+ | bottom: -7.25em; | ||
+ | display: block; | ||
+ | width: 14.5em; | ||
+ | height: 14.5em; | ||
+ | border-radius: 50%; | ||
+ | background: #429a67; | ||
+ | background: -webkit-radial-gradient(transparent 35%, #429a67 35%); | ||
+ | background: -moz-radial-gradient(transparent 35%, #429a67 35%); | ||
+ | background: radial-gradient(transparent 35%, #429a67 35%); | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | font-size: 1.2em; | ||
+ | line-height: 2; | ||
+ | -webkit-transform: skew(-60deg) rotate(-75deg) scale(1); | ||
+ | -moz-transform: skew(-60deg) rotate(-75deg) scale(1); | ||
+ | -ms-transform: skew(-60deg) rotate(-75deg) scale(1); | ||
+ | transform: skew(-60deg) rotate(-75deg) scale(1); | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | pointer-events: auto; | ||
} | } | ||
− | .csstransforms .cn-wrapper li: | + | .csstransforms .cn-wrapper li a span { |
− | + | position: relative; | |
+ | top: 1.8em; | ||
+ | display: block; | ||
+ | font-size: .5em; | ||
+ | font-weight: 700; | ||
+ | text-transform: uppercase; | ||
} | } | ||
− | .csstransforms .cn-wrapper li: | + | .csstransforms .cn-wrapper li a:hover, |
− | + | .csstransforms .cn-wrapper li a:active, | |
+ | .csstransforms .cn-wrapper li a:focus { | ||
+ | background: -webkit-radial-gradient(transparent 35%, #449e6a 35%); | ||
+ | background: -moz-radial-gradient(transparent 35%, #449e6a 35%); | ||
+ | background: radial-gradient(transparent 35%, #449e6a 35%); | ||
+ | } | ||
+ | .csstransforms .cn-wrapper li a:focus { | ||
+ | position: fixed; /* fix the displacement bug in webkit browsers when using tab key */ | ||
} | } | ||
− | .csstransforms . | + | .csstransforms .opened-nav li { |
− | + | -webkit-transition: all .3s ease .3s; | |
+ | -moz-transition: all .3s ease .3s; | ||
+ | transition: all .3s ease .3s; | ||
} | } | ||
− | .csstransforms . | + | .csstransforms .opened-nav li:first-child { |
− | + | -webkit-transform: rotate(-20deg) skew(60deg); | |
− | + | -moz-transform: rotate(-20deg) skew(60deg); | |
+ | -ms-transform: rotate(-20deg) skew(60deg); | ||
+ | transform: rotate(-20deg) skew(60deg); | ||
} | } | ||
− | .csstransforms . | + | .csstransforms .opened-nav li:nth-child(2) { |
− | + | -webkit-transform: rotate(12deg) skew(60deg); | |
− | + | -moz-transform: rotate(12deg) skew(60deg); | |
+ | -ms-transform: rotate(12deg) skew(60deg); | ||
+ | transform: rotate(12deg) skew(60deg); | ||
} | } | ||
− | + | .csstransforms .opened-nav li:nth-child(3) { | |
− | .csstransforms . | + | -webkit-transform: rotate(44deg) skew(60deg); |
− | + | -moz-transform: rotate(44deg) skew(60deg); | |
− | + | -ms-transform: rotate(44deg) skew(60deg); | |
+ | transform: rotate(44deg) skew(60deg); | ||
} | } | ||
− | + | .csstransforms .opened-nav li:nth-child(4) { | |
− | .csstransforms . | + | -webkit-transform: rotate(76deg) skew(60deg); |
− | + | -moz-transform: rotate(76deg) skew(60deg); | |
− | + | -ms-transform: rotate(76deg) skew(60deg); | |
− | + | transform: rotate(76deg) skew(60deg); | |
− | + | ||
} | } | ||
− | .csstransforms . | + | |
− | + | .csstransforms .opened-nav li:nth-child(5) { | |
+ | -webkit-transform: rotate(108deg) skew(60deg); | ||
+ | -moz-transform: rotate(108deg) skew(60deg); | ||
+ | -ms-transform: rotate(108deg) skew(60deg); | ||
+ | transform: rotate(108deg) skew(60deg); | ||
} | } | ||
− | . | + | .csstransforms .opened-nav li:nth-child(6) { |
− | + | -webkit-transform: rotate(140deg) skew(60deg); | |
− | + | -moz-transform: rotate(140deg) skew(60deg); | |
− | + | -ms-transform: rotate(140deg) skew(60deg); | |
− | + | transform: rotate(140deg) skew(60deg); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .csstransforms .opened-nav li:nth-child(7) { |
− | + | -webkit-transform: rotate(172deg) skew(60deg); | |
+ | -moz-transform: rotate(172deg) skew(60deg); | ||
+ | -ms-transform: rotate(172deg) skew(60deg); | ||
+ | transform: rotate(172deg) skew(60deg); | ||
} | } | ||
− | .no-csstransforms .cn-wrapper | + | .no-csstransforms .cn-wrapper { |
− | + | overflow: hidden; | |
− | + | margin: 10em auto; | |
− | + | padding: .5em; | |
− | + | text-align: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .no-csstransforms .cn-wrapper | + | .no-csstransforms .cn-wrapper ul { |
− | + | display: inline-block; | |
− | + | } | |
− | + | ||
− | + | .no-csstransforms .cn-wrapper li { | |
− | + | float: left; | |
− | + | width: 5em; | |
− | + | height: 5em; | |
+ | background-color: #fff; | ||
+ | text-align: center; | ||
+ | font-size: 1em; | ||
+ | line-height: 5em; | ||
} | } | ||
− | .no-csstransforms .cn-wrapper li a | + | .no-csstransforms .cn-wrapper li a { |
− | + | display: block; | |
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
} | } | ||
.no-csstransforms .cn-wrapper li a:hover, | .no-csstransforms .cn-wrapper li a:hover, | ||
.no-csstransforms .cn-wrapper li a:active, | .no-csstransforms .cn-wrapper li a:active, | ||
− | .no-csstransforms .cn-wrapper li a:focus{ | + | .no-csstransforms .cn-wrapper li a:focus { |
− | + | background-color: #f8f8f8; | |
} | } | ||
− | .no-csstransforms .cn-wrapper li.active a { | + | .no-csstransforms .cn-wrapper li.active a{ |
− | + | background-color: #6F325C; | |
− | + | color: #fff; | |
} | } | ||
− | + | .no-csstransforms .cn-button { | |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | @media screen and (max-width: | + | @media only screen and (max-width: 620px) { |
− | + | .no-csstransforms li { | |
− | + | width: 4em; | |
− | + | height: 4em; | |
− | + | line-height: 4em; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | @media only screen and (max-width: 500px) { | ||
+ | .no-ccstransforms .cn-wrapper { | ||
+ | padding: .5em; | ||
+ | } | ||
+ | |||
+ | .no-csstransforms .cn-wrapper li { | ||
+ | width: 4em; | ||
+ | height: 4em; | ||
+ | font-size: .9em; | ||
+ | line-height: 4em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 480px) { | ||
+ | .csstransforms .cn-wrapper { | ||
+ | font-size: .68em; | ||
+ | } | ||
+ | |||
+ | .cn-button { | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width:420px) { | ||
+ | .no-csstransforms .cn-wrapper li { | ||
+ | width: 100%; | ||
+ | height: 3em; | ||
+ | line-height: 3em; | ||
+ | } | ||
+ | } | ||
/******** Links n' such (NavBar)********/ | /******** Links n' such (NavBar)********/ | ||
Revision as of 17:56, 24 July 2017