/* ----------------------------------------- */ /* View slug: books - start */ /* ----------------------------------------- */ /* General Demo Style */ .main { padding-top: 20vh; } .background-library { background-image: url("https://dl.dropboxusercontent.com/s/07553he50l7ss09/background-library.png?dl=0"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; height: 100vh; z-index:1; max-width: 99vw; } @import url(https://fonts.googleapis.com/css?family=Lato:400,700); .body { background-color: red !important; } html { height: 100%; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } a { color: #555; text-decoration: none; } .bookshelf { width: 100%; height: 63px; z-index: -1; margin-top: -25px; background: transparent url(../wp-content/uploads/shelf.png) no-repeat center center; position: relative; } .bk-list { list-style: none; position: relative; width: 533px; /* 13 books * 40px + 13 books * margin (1px) */ margin: 0 auto; -webkit-perspective: 1800px; perspective: 1800px; -webkit-perspective-origin: 50% 15%; perspective-origin: 50% 15%; } .bk-list li { position: relative; width: 40px; height: 400px; float: left; z-index: 1; margin: 0px 0px 0px 1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .bk-list li:last-child { margin-right: 0; } .bk-list li .bk-book { cursor: pointer; position: absolute; width: 100%; height: 400px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .5s; transition: transform .5s; -webkit-transform: rotate3d(0,1,0,90deg); transform: rotate3d(0,1,0,90deg); } .bk-list li .bk-book:hover { -webkit-transform: rotateY(90deg) rotateZ(-15deg) translate3d(-100px,0,0); transform: rotateY(90deg) rotateZ(-15deg) translate3d(-100px,0,0); } .bk-list li .bk-book > div, .bk-list li .bk-front > div { display: block; position: absolute; } .bk-list li .bk-front { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform .5s; transition: transform .5s; -webkit-transform: translate3d(0,0,20px); transform: translate3d(0,0,20px); } .bk-list li .bk-front > div { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .bk-list li .bk-page { -webkit-transform: translate3d(0,0,19px); transform: translate3d(0,0,19px); display: none; width: 295px; height: 390px; top: 5px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bk-list li .bk-front, .bk-list li .bk-back, .bk-list li .bk-front > div { width: 300px; height: 400px; z-index: 1; } .bk-list li .bk-left, .bk-list li .bk-right { width: 40px; left: -20px; } .bk-list li .bk-top, .bk-list li .bk-bottom { width: 295px; height: 40px; top: -15px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bk-list li .bk-back { -webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px); transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px); border-radius: 3px 0 0 3px; } .bk-list li .bk-cover-back { background-color: #000; -webkit-transform: rotate3d(0,1,0,-179deg); transform: rotate3d(0,1,0,-179deg); } .bk-list li .bk-right { height: 390px; top: 5px; -webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px); transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bk-list li .bk-left { height: 400px; -webkit-transform: rotate3d(0,1,0,-90deg); transform: rotate3d(0,1,0,-90deg); box-shadow: inset 4px 0 5px rgba(255,255,255,0.1), inset 5px 0 5px rgba(0,0,0,0.05), inset -5px 0 5px rgba(0,0,0,0.04);; } .bk-list li .bk-top { -webkit-transform: rotate3d(1,0,0,90deg); transform: rotate3d(1,0,0,90deg); } .bk-list li .bk-bottom { -webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px); transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px); } /* Transform classes */ .bk-list li .bk-viewinside .bk-front { -webkit-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg); transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg); } .bk-list li .bk-book.bk-viewinside { -webkit-transform: rotate3d(0,1,0,0deg) translateX(0px) translateZ(100px) !important; transform: rotate3d(0,1,0,0deg) translateX(0px) translateZ(100px) !important; } .bk-list li .bk-book.bk-outside { -webkit-transform: rotate3d(0,1,0,90deg) translateX(-300px); transform: rotate3d(0,1,0,90deg) translateX(-300px); } .bk-list li .bk-book.bk-viewback { -webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg); transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg); } /* Main colors and content */ .bk-list li .bk-page, .bk-list li .bk-right, .bk-list li .bk-top, .bk-list li .bk-bottom { background-color: #fff; } .bk-list li .bk-front > div { border-radius: 0 3px 3px 0; box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1); } .bk-list li .bk-front:after { content: ''; position: absolute; top: 1px; bottom: 1px; left: -1px; width: 1px; } .bk-list li .bk-cover:after, .bk-list li .bk-back:after { content: ''; position: absolute; top: 0; left: 10px; bottom: 0; width: 3px; background: rgba(0,0,0,0.06); box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1); } .bk-list li .bk-back:after { left: auto; right: 10px; } .bk-left h2 { width: 400px; height: 40px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(90deg) translateY(-40px); transform: rotate(90deg) translateY(-40px); } .bk-content { position: absolute; top: 30px; left: 20px; bottom: 20px; right: 20px; padding: 30px; overflow: hidden; background: #fff; opacity: 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; cursor: default; } .bk-content-current { opacity: 1; pointer-events: auto; } .bk-content p { padding: 0 0 10px; -webkit-font-smoothing: antialiased; color: #000; font-size: 13px; line-height: 20px; text-align: justify; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bk-page nav { display: block; text-align: center; margin-top: 20px; position: relative; z-index: 100; cursor: pointer; } .bk-page nav span { display: inline-block; width: 20px; height: 20px; color: #aaa; background: #f0f0f0; border-radius: 50%; } /* Individual style & artwork */ /* Book 1 */ .book-1 .bk-front > div, .book-1 .bk-back, .book-1 .bk-left, .book-1 .bk-front:after { background-color: black; } .book-1 .bk-cover { background-image: url(../wp-content/uploads/undenk.png); background-repeat: no-repeat; background-position: 10px 40px; } .book-1 .bk-cover h2 { position: absolute; bottom: 0; right: 0; left: 0; padding: 30px; background: rgba(255,255,255,0.2); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); } .book-1 .bk-cover h2 span:first-child, .book-1 .bk-left h2 span:first-child { text-transform: uppercase; font-weight: 400; font-size: 13px; padding-right: 20px; } .book-1 .bk-cover h2 span:first-child { display: block; } .book-1 .bk-cover h2 span:last-child, .book-1 .bk-left h2 span:last-child { font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; } .book-1 .bk-content p { font-family: Georgia, Times, "Times New Roman", serif; } .book-1 .bk-left h2 { color: #fff; font-size: 15px; line-height: 40px; padding-right: 10px; text-align: right; } .book-1 .bk-back p { color: #fff; font-size: 13px; padding: 40px; text-align: center; font-weight: 700; } /* Book 2 */ .book-2 .bk-front > div, .book-2 .bk-back, .book-2 .bk-left, .book-2 .bk-front:after { background-color: rgb(202, 47, 47); } .book-2 .bk-cover h2, .book-2 .bk-left h2 { color: #fff; font-family: 'the_godfatherregular', Georgia, serif; font-weight: 400; } .book-2 .bk-cover h2 { font-size: 50px; line-height: 80px; padding: 30px; } .book-2 .bk-cover h2 span:first-child { position: relative; display: block; } .book-2 .bk-left h2 { font-size: 20px; line-height: 40px; padding-right: 10px; text-align: right; } .book-2 .bk-back p { color: red; font-size: 13px; font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; padding: 40px; text-align: center; } /* Book 3 */ .book-3 .bk-front > div, .book-3 .bk-back, .book-3 .bk-left, .book-3 .bk-front:after { background-color: #a4c19e; } .book-3 .bk-cover { background-image: url(../wp-content/uploads/3.png); background-repeat: no-repeat; background-position: 100% 95%; } .book-3 .bk-cover h2 { position: absolute; top: 40px; right: 40px; left: 40px; padding-top: 15px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); } .book-3 .bk-cover h2 span:first-child, .book-3 .bk-left h2 span:first-child { text-transform: uppercase; font-weight: 400; font-size: 13px; padding-right: 20px; } .book-3 .bk-cover h2 span:first-child { display: block; } .book-3 .bk-cover h2 span:last-child, .book-3 .bk-left h2 span:last-child, .book-3 .bk-content p { font-family: Georgia, Times, "Times New Roman", serif; } .book-3 .bk-left h2 { color: #fff; font-size: 14px; line-height: 40px; text-align: center; } .book-3 .bk-back img { width: 200px; display: block; margin: 30px auto 0; } .book-3 .bk-back p { color: #fff; font-size: 13px; font-family: Georgia, Times, "Times New Roman", serif; padding: 40px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); } /* Some color variation for the other books */ .bk-list li:nth-child(4) .bk-book .bk-front > div, .bk-list li:nth-child(4) .bk-book .bk-back, .bk-list li:nth-child(4) .bk-book .bk-left, .bk-list li:nth-child(4) .bk-book .bk-front:after { background-color: #cfa6ef; } .bk-list li:nth-child(5) .bk-book .bk-front > div, .bk-list li:nth-child(5) .bk-book .bk-back, .bk-list li:nth-child(5) .bk-book .bk-left, .bk-list li:nth-child(5) .bk-book .bk-front:after { background-color: rgb(202, 47, 47); } .bk-list li:nth-child(6) .bk-book .bk-front > div, .bk-list li:nth-child(6) .bk-book .bk-back, .bk-list li:nth-child(6) .bk-book .bk-left, .bk-list li:nth-child(6) .bk-book .bk-front:after { background-color: #80B3FF; } .bk-list li:nth-child(7) .bk-book .bk-front > div, .bk-list li:nth-child(7) .bk-book .bk-back, .bk-list li:nth-child(7) .bk-book .bk-left, .bk-list li:nth-child(7) .bk-book .bk-front:after { background-color: #FD6E8A; } .bk-list li:nth-child(8) .bk-book .bk-front > div, .bk-list li:nth-child(8) .bk-book .bk-back, .bk-list li:nth-child(8) .bk-book .bk-left, .bk-list li:nth-child(8) .bk-book .bk-front:after { background-color: #A2122F; } .bk-list li:nth-child(9) .bk-book .bk-front > div, .bk-list li:nth-child(9) .bk-book .bk-back, .bk-list li:nth-child(9) .bk-book .bk-left, .bk-list li:nth-child(9) .bk-book .bk-front:after { background-color: #439877; } .bk-list li:nth-child(10) .bk-book .bk-front > div, .bk-list li:nth-child(10) .bk-book .bk-back, .bk-list li:nth-child(10) .bk-book .bk-left, .bk-list li:nth-child(10) .bk-book .bk-front:after { background-color: #5E445D; } .bk-list li:nth-child(11) .bk-book .bk-front > div, .bk-list li:nth-child(11) .bk-book .bk-back, .bk-list li:nth-child(11) .bk-book .bk-left, .bk-list li:nth-child(11) .bk-book .bk-front:after { background-color: #A8936D; } /* Fallbacks */ .no-csstransforms3d .bk-list li .bk-book > div, .no-csstransforms3d .bk-list li .bk-book .bk-cover-back { display: none; } .no-csstransforms3d .bk-list li .bk-book > div.bk-front { display: block; } .no-csstransforms3d .bk-info button, .no-js .bk-info button { display: none; } .no-csstransforms3d .bk-list { width: auto; } .no-csstransforms3d .bk-list li { position: relative; width: 300px; margin: 10px; float: left; } /* ----------------------------------------- */ /* View slug: books - end */ /* ----------------------------------------- */ /* ----------------------------------------- */ /* View slug: drawings-manual - start */ /* ----------------------------------------- */ /** * RESET * Reference: http://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1.618; font-family: Arial, Helvetica, sans-serif; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } code, pre, samp { font-family: monospace; } /** * BASIC TYPE */ img, video { max-width: 100%; vertical-align: middle; } p:not(:last-child) { margin: 0 0 1em; } h1, h2, h3, h4 { margin: .5em 0 .75em; line-height: 1.3; } h1 { font-size: 1.5em; } h2 { font-size: 1.25em; } h3 { font-size: 1.125em; } h4 { font-size: 1em; } /** * BOX HACKING */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .wrapper { max-width: 99vw; margin-right: auto; margin-left: auto; padding: 1.5em; } body { background-color: #000000; color: #333333; } .masonry-wrapper { padding: 1.5em; max-width: 99vw; margin-right: auto; margin-left: auto; } .masonry { columns: 1; column-gap: 5px; } .masonry-item { display: inline-block; vertical-align: top; margin-bottom: 5px; } @media only screen and (max-width: 1023px) and (min-width: 768px) { .masonry { columns: 2; } } @media only screen and (min-width: 1024px) { .masonry { columns: 3; } } #TB_window { background-color: transparent; } #TB_closeWindow { display: none; } .screen-reader-text { float: right; } #TB_window { max-width: 100%; } /* ----------------------------------------- */ /* View slug: drawings-manual - end */ /* ----------------------------------------- */