You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@groovy.apache.org by pa...@apache.org on 2018/08/16 00:40:58 UTC
[5/5] groovy-website git commit: add images and css from user site
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 <pa...@asert.com.au>
Authored: Thu Aug 16 10:40:38 2018 +1000
Committer: Paul King <pa...@asert.com.au>
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;
+ }
+}