+@import "tools";
+
+#big-cite {
+ background-color: #444;
+ color: white;
+ padding: 0;
+ margin: 0;
+ background-size: 100%;
+ background-position: 50% 68%;
+ background-repeat: repeat-y;
+
+ background-image: url(/static/img/backdrop/book-drawer2.jpg);
+
+ @media screen and (min-width: 62.5em) {
+ background-image: url(/static/img/backdrop/book-drawer2.jpg);
+ }
+
+ .cite {
+ @include size-px(padding-top, 46);
+ @include size-px(padding-bottom, 48);
+ @include size-px(padding-left, 0);
+ @include size-px(padding-right, 10);
+ background: none;
+ color: white;
+
+ @media screen and (min-width: 30em) {
+ @include size-px(padding-right, 40);
+ }
+
+ .vip {
+ @include size-px(margin-left, 10);
+ @include size-px(margin-top, 2.5);
+ @include size-px(margin-bottom, 5);
+ @include size-px(font-size, 11);
+
+ @media screen and (min-width: 16em) {
+ padding-left: 10%;
+ @include size-px(margin-left, -18);
+ }
+
+ @media screen and (min-width: 62.5em) {
+ float: left;
+ padding-left: 0;
+ @include size-px(margin-left, 16);
+ text-align: right;
+ @include size-px(width, 147);
+ }
+ }
+
+ .cite-body {
+ @include size-px(margin, .5);
+ @include size-px(font-size, 20);
+ line-height: 1.16em;
+
+ @media screen and (min-width: 30em) {
+ @include size-px(font-size, 30);
+ }
+ }
+
+ .source {
+ @include size-px(margin-top, 16);
+ @include size-px(margin-bottom, 16);
+ @include size-px(margin-right, 2);
+ @include size-px(font-size, 12);
+ }
+
+ /* Make cite body and source slide to the left. */
+ .cite-body, .source {
+ @include size-px(margin-left, 10);
+
+ @media screen and (min-width: 16em) {
+ padding-left: 21.9%;
+ @include size-px(margin-left, -38);
+ }
+
+ @media screen and (min-width: 62.5em) {
+ padding-left: 0;
+ @include size-px(margin-left, 175);
+ }
+ }
+
+ /* Semi-transparent background. */
+ .cite-body span,
+ .vip span,
+ .source span {
+ color: white;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.6);
+ /* For IE 5.5 - 7*/
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+ /* For IE 8*/
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+ }
+ }
+
+ /* a long cite displays smaller */
+ .cite-small .cite-body {
+ @include size-px(font-size, 16);
+ @media screen and (min-width: 30em) {
+ @include size-px(font-size, 20);
+ }
+ }
+
+ h2 {
+ margin: 0;
+ @include size-px(font-size, 11);
+ color: #575c63;
+ }
+}
+
+
+#promo-box {
+ @include size-px(margin-top, 16);
+
+ @media screen and (min-width: 33em) {
+ float: right;
+ @include size-px(margin-top, -51);
+ @include size-px(width, 320);
+ }
+
+ h1 {
+ @include size-px(padding-top, 20);
+ @include size-px(height, 31);
+ margin: 0;
+ padding-bottom: 0;
+ @include size-px(padding-left, 10);
+ @include size-px(padding-right, 5);
+ background: #191919;
+ color: white;
+ @include mono;
+ @include size-px(font-size, 13);
+ font-weight: normal;
+
+ @media screen and (min-width: 33em) {
+ @include size-px(padding-left, 25);
+ @include size-px(padding-right, 25);
+ }
+ }
+
+ #promo-box-body {
+ @include size-px(padding-top, 20);
+ @include size-px(padding-bottom, 20);
+ @include size-px(padding-left, 5);
+ @include size-px(padding-right, 5);
+ border-bottom-style: solid;
+ border-bottom-color: #efefef;
+ @include size-px(border-bottom-width, 2);
+ background: #efefef;
+
+ @media screen and (min-width: 33em) {
+ @include size-px(padding-left, 28);
+ @include size-px(padding-right, 28);
+ }
+
+ @media screen and (min-width: 62.5em) {
+ @include size-px(height, 300);
+ }
+
+ a {
+ display: block;
+ color: #6c6c6c;
+ }
+ p {
+ margin-top: 0;
+ @include size-px(font-size, 12);
+ line-height: 1.55em;
+ color: #6c6c6c;
+ }
+ h2, h3 {
+ color: #0d777e;
+ @include size-px(font-size, 11);
+ @include size-px(height, 27.5);
+ margin: 0;
+ @include mono;
+ font-weight: normal;
+
+ &:after {
+ content: " >";
+ }
+ }
+ }
+}
+
+
+#main-last {
+ h1 {
+ @include size-px(height, 32);
+ margin: 0;
+ @include size-px(padding-top, 19);
+ @include size-px(padding-left, 10);
+
+ @include size-px(font-size, 11);
+ @include mono;
+ font-weight: normal;
+
+ @media screen and (min-width: 33em) {
+ @include size-px(padding-left, 19);
+ }
+
+ a {
+ color: black;
+
+ &:after {
+ content: " >";
+ }
+ }
+ }
+ .book-mini-box:nth-child(3) {
+ @media screen and (min-width: 30em) {
+ margin-right: 3em;
+ }
+ @media screen and (min-width: 33em) {
+ margin-right: 0;
+ }
+ }
+}
+
+
+.infopages-box {
+ margin: 0;
+ @include size-px(margin-top, 5);
+ padding-top: 0;
+ padding-bottom: 0;
+ @include size-px(padding-left, 5);
+ @include size-px(padding-right, 5);
+ vertical-align: top;
+ color: #989898;
+
+ @media screen and (min-width: 20em) {
+ display: inline-block;
+ @include size-px(width, 206);
+ @include size-px(padding-left, 17);
+ @include size-px(padding-right, 17);
+ }
+
+ h1 {
+ @include size-px(height, 28);
+ margin: 0;
+ @include size-px(padding-top, 25);
+ @include size-px(font-size, 11);
+ color: #017e85;
+ font-weight: normal;
+ @include mono;
+ }
+
+ a {
+ color: black;
+ }
+
+ ol, ul {
+ @include size-px(font-size, 11);
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ line-height: 1.45em;
+
+ li {
+ @include size-px(margin-bottom, 8);
+ @media screen and (min-width: 62.5em) {
+ @include size-px(margin-bottom, 2.5);
+ }
+ }
+ }
+
+ .social-links {
+ @include size-px(margin-top, 10);
+
+ a {
+ @include size-px(margin-right, 6);
+ }
+ }
+}
fnp / wolnelektury.git / commitdiff