add images and css from user site
Project: http://git-wip-us.apache.org/repos/asf/groovy-website/repo Commit: http://git-wip-us.apache.org/repos/asf/groovy-website/commit/16caa865 Tree: http://git-wip-us.apache.org/repos/asf/groovy-website/tree/16caa865 Diff: http://git-wip-us.apache.org/repos/asf/groovy-website/diff/16caa865 Branch: refs/heads/asf-site Commit: 16caa86581393d1c56c6da45994b84a01ffda5d8 Parents: b8147a1 Author: Paul King <[email protected]> Authored: Thu Aug 16 10:40:38 2018 +1000 Committer: Paul King <[email protected]> Committed: Thu Aug 16 10:40:38 2018 +1000 ---------------------------------------------------------------------- css/book.css | 680 +++ css/bootstrap.css | 6203 ++++++++++++++++++++++++++ css/docstyle.css | 65 + css/documentation.css | 1 + css/main.css | 304 ++ css/normalize.css | 527 +++ css/style.css | 1098 +++++ img/asf_logo.png | Bin 0 -> 21243 bytes img/favicon.ico | Bin 0 -> 3813 bytes img/groovy-logo-black.svg | 36 + img/groovy-logo-colored.svg | 444 ++ img/groovy-logo-white.png | Bin 0 -> 55066 bytes img/groovy-logo-white.svg | 36 + img/groovy-logo.png | Bin 0 -> 12303 bytes img/icons-colset-2-its.png | Bin 0 -> 5196 bytes img/logo.png | Bin 0 -> 435 bytes img/logos/airbusgroup.png | Bin 0 -> 1894 bytes img/logos/amadeus.png | Bin 0 -> 3009 bytes img/logos/bestbuy.png | Bin 0 -> 11763 bytes img/logos/carfax.png | Bin 0 -> 7381 bytes img/logos/carriots.png | Bin 0 -> 3655 bytes img/logos/cisco.png | Bin 0 -> 4331 bytes img/logos/commerzbank.png | Bin 0 -> 3052 bytes img/logos/credit-suisse.png | Bin 0 -> 2678 bytes img/logos/eads.png | Bin 0 -> 2768 bytes img/logos/energy-transfer.png | Bin 0 -> 2893 bytes img/logos/epo.png | Bin 0 -> 6403 bytes img/logos/fanniemae.png | Bin 0 -> 3719 bytes img/logos/google.png | Bin 0 -> 3708 bytes img/logos/hypoport.png | Bin 0 -> 6236 bytes img/logos/ibm.png | Bin 0 -> 2544 bytes img/logos/jpmorganchase.png | Bin 0 -> 2716 bytes img/logos/linkedin.png | Bin 0 -> 3015 bytes img/logos/mastercard.png | Bin 0 -> 6312 bytes img/logos/mtv.png | Bin 0 -> 9553 bytes img/logos/mutual-of-omaha.png | Bin 0 -> 6540 bytes img/logos/national-cancer-institute.png | Bin 0 -> 10116 bytes img/logos/nestle.png | Bin 0 -> 3523 bytes img/logos/netflix.png | Bin 0 -> 3352 bytes img/logos/oracle.png | Bin 0 -> 4455 bytes img/logos/paterson-cancer-institute.png | Bin 0 -> 5518 bytes img/logos/roche.png | Bin 0 -> 5308 bytes img/logos/sas.png | Bin 0 -> 4680 bytes img/logos/sky.png | Bin 0 -> 3137 bytes img/logos/smartthings.png | Bin 0 -> 7829 bytes img/logos/sony.png | Bin 0 -> 2762 bytes img/logos/target.png | Bin 0 -> 7259 bytes img/logos/thales.png | Bin 0 -> 2551 bytes img/logos/ubs.png | Bin 0 -> 6852 bytes img/logos/vodafone.png | Bin 0 -> 4623 bytes img/logos/voyages-sncf.png | Bin 0 -> 5621 bytes img/logos/walmart.png | Bin 0 -> 3246 bytes img/logos/wells-fargo.png | Bin 0 -> 5709 bytes 53 files changed, 9394 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/groovy-website/blob/16caa865/css/book.css ---------------------------------------------------------------------- diff --git a/css/book.css b/css/book.css new file mode 100644 index 0000000..517dd54 --- /dev/null +++ b/css/book.css @@ -0,0 +1,680 @@ +.book-btn { + display: inline-block; + text-transform: uppercase; + text-decoration: none; + border: 2px solid black; + margin-top: 100px; + font-size: 0.7em; + font-weight: 700; + padding: 0.1em 0.4em; + margin-left: 40px; + text-align: center; + -webkit-transition: color 0.3s, border-color 0.3s; + -moz-transition: color 0.3s, border-color 0.3s; + transition: color 0.3s, border-color 0.3s; +} + +.book-btn:hover { + border-color: #db4800; + color: #db4800; +} + +/* /////////////////////////////////////////////////// + +HARDCOVER +Table of Contents + +1. container +2. background & color +3. opening cover, back cover and pages +4. position, transform y transition +5. events +6. Bonus + - Cover design + - Ribbon + - Figcaption +7. mini-reset + +/////////////////////////////////////////////////////*/ + +/* + 1. container +*/ + +.book { + position: relative; + width: 160px; + height: 220px; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + margin: 20px; + margin-bottom: 40px; + margin-left: 60px; +} + +.book ul { + list-style: none; +} + +/* + 2. background & color +*/ + +/* HARDCOVER FRONT */ +.hardcover_front li:first-child { + background-color: #eee; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* reverse */ +.hardcover_front li:last-child { + background: #fffbec; +} + +/* HARDCOVER BACK */ +.hardcover_back li:first-child { + background: #fffbec; +} + +/* reverse */ +.hardcover_back li:last-child { + background: #fffbec; +} + +.book_spine li:first-child { + background: #eee; +} + +.book_spine li:last-child { + background: #333; +} + +/* thickness of cover */ + +.hardcover_front li:first-child:after, +.hardcover_front li:first-child:before, +.hardcover_front li:last-child:after, +.hardcover_front li:last-child:before, +.hardcover_back li:first-child:after, +.hardcover_back li:first-child:before, +.hardcover_back li:last-child:after, +.hardcover_back li:last-child:before, +.book_spine li:first-child:after, +.book_spine li:first-child:before, +.book_spine li:last-child:after, +.book_spine li:last-child:before { + background: #999; +} + +/* page */ + +.page > li { + background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); + background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); + background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); + background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); + box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2); + border-radius: 0px 5px 5px 0px; +} + +/* + 3. opening cover, back cover and pages +*/ + +.hardcover_front { + -webkit-transform: rotateY(-34deg) translateZ(8px); + -moz-transform: rotateY(-34deg) translateZ(8px); + transform: rotateY(-34deg) translateZ(8px); + z-index: 100; +} + +.hardcover_back { + -webkit-transform: rotateY(-15deg) translateZ(-8px); + -moz-transform: rotateY(-15deg) translateZ(-8px); + transform: rotateY(-15deg) translateZ(-8px); +} + +.page li:nth-child(1) { + -webkit-transform: rotateY(-28deg); + -moz-transform: rotateY(-28deg); + transform: rotateY(-28deg); +} + +.page li:nth-child(2) { + -webkit-transform: rotateY(-30deg); + -moz-transform: rotateY(-30deg); + transform: rotateY(-30deg); +} + +.page li:nth-child(3) { + -webkit-transform: rotateY(-32deg); + -moz-transform: rotateY(-32deg); + transform: rotateY(-32deg); +} + +.page li:nth-child(4) { + -webkit-transform: rotateY(-34deg); + -moz-transform: rotateY(-34deg); + transform: rotateY(-34deg); +} + +.page li:nth-child(5) { + -webkit-transform: rotateY(-36deg); + -moz-transform: rotateY(-36deg); + transform: rotateY(-36deg); +} + +/* + 4. position, transform & transition +*/ + +.hardcover_front, +.hardcover_back, +.book_spine, +.hardcover_front li, +.hardcover_back li, +.book_spine li { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.hardcover_front, +.hardcover_back { + -webkit-transform-origin: 0% 100%; + -moz-transform-origin: 0% 100%; + transform-origin: 0% 100%; +} + +.hardcover_front { + -webkit-transition: all 0.8s ease, z-index 0.6s; + -moz-transition: all 0.8s ease, z-index 0.6s; + transition: all 0.8s ease, z-index 0.6s; +} + +/* HARDCOVER front */ +.hardcover_front li:first-child { + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + -webkit-transform: translateZ(2px); + -moz-transform: translateZ(2px); + transform: translateZ(2px); +} + +.hardcover_front li:last-child { + -webkit-transform: rotateY(180deg) translateZ(2px); + -moz-transform: rotateY(180deg) translateZ(2px); + transform: rotateY(180deg) translateZ(2px); +} + +/* HARDCOVER back */ +.hardcover_back li:first-child { + -webkit-transform: translateZ(2px); + -moz-transform: translateZ(2px); + transform: translateZ(2px); +} + +.hardcover_back li:last-child { + -webkit-transform: translateZ(-2px); + -moz-transform: translateZ(-2px); + transform: translateZ(-2px); +} + +/* thickness of cover */ +.hardcover_front li:first-child:after, +.hardcover_front li:first-child:before, +.hardcover_front li:last-child:after, +.hardcover_front li:last-child:before, +.hardcover_back li:first-child:after, +.hardcover_back li:first-child:before, +.hardcover_back li:last-child:after, +.hardcover_back li:last-child:before, +.book_spine li:first-child:after, +.book_spine li:first-child:before, +.book_spine li:last-child:after, +.book_spine li:last-child:before { + position: absolute; + top: 0; + left: 0; +} + +/* HARDCOVER front */ +.hardcover_front li:first-child:after, +.hardcover_front li:first-child:before { + width: 4px; + height: 100%; +} + +.hardcover_front li:first-child:after { + -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); + -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); + transform: rotateY(90deg) translateZ(-2px) translateX(2px); +} + +.hardcover_front li:first-child:before { + -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px); + -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px); + transform: rotateY(90deg) translateZ(158px) translateX(2px); +} + +.hardcover_front li:last-child:after, +.hardcover_front li:last-child:before { + width: 4px; + height: 160px; +} + +.hardcover_front li:last-child:after { + -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); + -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); + transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); +} + +.hardcover_front li:last-child:before { + box-shadow: 0px 0px 30px 5px #333; + -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); + -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); + transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); +} + +/* thickness of cover */ + +.hardcover_back li:first-child:after, +.hardcover_back li:first-child:before { + width: 4px; + height: 100%; +} + +.hardcover_back li:first-child:after { + -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); + -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); + transform: rotateY(90deg) translateZ(-2px) translateX(2px); +} + +.hardcover_back li:first-child:before { + -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px); + -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px); + transform: rotateY(90deg) translateZ(158px) translateX(2px); +} + +.hardcover_back li:last-child:after, +.hardcover_back li:last-child:before { + width: 4px; + height: 160px; +} + +.hardcover_back li:last-child:after { + -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); + -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); + transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); +} + +.hardcover_back li:last-child:before { + box-shadow: 10px -1px 80px 20px #666; + -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); + -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); + transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); +} + +/* BOOK SPINE */ +.book_spine { + -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px); + -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px); + transform: rotateY(60deg) translateX(-5px) translateZ(-12px); + width: 16px; + z-index: 0; +} + +.book_spine li:first-child { + -webkit-transform: translateZ(2px); + -moz-transform: translateZ(2px); + transform: translateZ(2px); +} + +.book_spine li:last-child { + -webkit-transform: translateZ(-2px); + -moz-transform: translateZ(-2px); + transform: translateZ(-2px); +} + +/* thickness of book spine */ +.book_spine li:first-child:after, +.book_spine li:first-child:before { + width: 4px; + height: 100%; +} + +.book_spine li:first-child:after { + -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); + -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); + transform: rotateY(90deg) translateZ(-2px) translateX(2px); +} + +.book_spine li:first-child:before { + -webkit-transform: rotateY(-90deg) translateZ(-12px); + -moz-transform: rotateY(-90deg) translateZ(-12px); + transform: rotateY(-90deg) translateZ(-12px); +} + +.book_spine li:last-child:after, +.book_spine li:last-child:before { + width: 4px; + height: 16px; +} + +.book_spine li:last-child:after { + -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); + -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); + transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); +} + +.book_spine li:last-child:before { + box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2); + -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); + -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); + transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); +} + +.page, +.page > li { + position: absolute; + top: 0; + left: 0; + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.page { + width: 100%; + height: 98%; + top: 1%; + left: 3%; + z-index: 10; +} + +.page > li { + width: 100%; + height: 100%; + -webkit-transform-origin: left center; + -moz-transform-origin: left center; + transform-origin: left center; + -webkit-transition-property: transform; + -moz-transition-property: transform; + transition-property: transform; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + transition-timing-function: ease; +} + +.page > li:nth-child(1) { + -webkit-transition-duration: 0.6s; + -moz-transition-duration: 0.6s; + transition-duration: 0.6s; +} + +.page > li:nth-child(2) { + -webkit-transition-duration: 0.6s; + -moz-transition-duration: 0.6s; + transition-duration: 0.6s; +} + +.page > li:nth-child(3) { + -webkit-transition-duration: 0.4s; + -moz-transition-duration: 0.4s; + transition-duration: 0.4s; +} + +.page > li:nth-child(4) { + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + transition-duration: 0.5s; +} + +.page > li:nth-child(5) { + -webkit-transition-duration: 0.6s; + -moz-transition-duration: 0.6s; + transition-duration: 0.6s; +} + +/* + 5. events +*/ + +@media screen and (min-width: 768px) { + .book:hover > .hardcover_front { + -webkit-transform: rotateY(-145deg) translateZ(0); + -moz-transform: rotateY(-145deg) translateZ(0); + transform: rotateY(-145deg) translateZ(0); + z-index: 0; + } + + .book:hover > .page li:nth-child(1) { + -webkit-transform: rotateY(-30deg); + -moz-transform: rotateY(-30deg); + transform: rotateY(-30deg); + -webkit-transition-duration: 1.5s; + -moz-transition-duration: 1.5s; + transition-duration: 1.5s; + } + + .book:hover > .page li:nth-child(2) { + -webkit-transform: rotateY(-35deg); + -moz-transform: rotateY(-35deg); + transform: rotateY(-35deg); + -webkit-transition-duration: 1.8s; + -moz-transition-duration: 1.8s; + transition-duration: 1.8s; + } + + .book:hover > .page li:nth-child(3) { + -webkit-transform: rotateY(-118deg); + -moz-transform: rotateY(-118deg); + transform: rotateY(-118deg); + -webkit-transition-duration: 1.6s; + -moz-transition-duration: 1.6s; + transition-duration: 1.6s; + } + + .book:hover > .page li:nth-child(4) { + -webkit-transform: rotateY(-130deg); + -moz-transform: rotateY(-130deg); + transform: rotateY(-130deg); + -webkit-transition-duration: 1.4s; + -moz-transition-duration: 1.4s; + transition-duration: 1.4s; + } + + .book:hover > .page li:nth-child(5) { + -webkit-transform: rotateY(-140deg); + -moz-transform: rotateY(-140deg); + transform: rotateY(-140deg); + -webkit-transition-duration: 1.2s; + -moz-transition-duration: 1.2s; + transition-duration: 1.2s; + } +} + +/* + 6. Bonus +*/ + +/* cover CSS */ + +.coverDesign { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + overflow: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; +} + +.coverDesign::after { + background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); + background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); + background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.coverDesign h1 { + color: #fff; + font-size: 2.2em; + letter-spacing: 0.05em; + text-align: center; + margin: 54% 0 0 0; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1); +} + +.coverDesign p { + color: #f8f8f8; + font-size: 1em; + text-align: center; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1); +} + +.yellow { + background-color: #f1c40f; + background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%); + background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%); + background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%); +} + +.blue { + background-color: #3498db; + background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%); + background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%); + background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%); +} + +.grey { + background-color: #f8e9d1; + background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); + background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); + background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); +} + +/* Basic ribbon */ + +.ribbon { + background: #c0392b; + color: #fff; + display: block; + font-size: 0.7em; + position: absolute; + top: 11px; + right: 1px; + width: 40px; + height: 20px; + line-height: 20px; + letter-spacing: 0.15em; + text-align: center; + -webkit-transform: rotateZ(45deg) translateZ(1px); + -moz-transform: rotateZ(45deg) translateZ(1px); + transform: rotateZ(45deg) translateZ(1px); + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + z-index: 10; +} + +.ribbon::before, +.ribbon::after { + position: absolute; + top: -20px; + width: 0; + height: 0; + border-bottom: 20px solid #c0392b; + border-top: 20px solid transparent; +} + +.ribbon::before { + left: -20px; + border-left: 20px solid transparent; +} + +.ribbon::after { + right: -20px; + border-right: 20px solid transparent; +} + +/* figcaption */ + +.book figcaption { + padding-left: 40px; + padding-top: 40px; + text-align: left; + position: absolute; + top: 0%; + left: 160px; + width: 500px; +} + +.book figcaption h1 { + margin: 0; +} + +.book figcaption span { + color: #245f78; + padding: 0.6em 0 0.2em 0; + display: block; +} + +.book figcaption p { + color: black; + line-height: 1.3; +} + +/* Media Queries */ +@media screen and (max-width: 767px) { + .align > li { + width: 100%; + min-height: 440px; + height: auto; + padding: 0; + margin: 0 0 30px 0; + } + + .book { + margin-left: 60px; + display: block; + margin-bottom: 280px; + } + + .book figcaption { + min-width: 320px; + top: 250px; + padding-left: 0; + left: -60px; + display: block; + } +} + +@media screen and (max-width: 550px) { + .book { + height: 250px; + } + + .book figcaption { + width: 320px; + } +}
