{% load picture_tags %}
<div class="{% block box-class %}book-box{% endblock %} picture">
<div class="book-box-inner">
-<div class="book-left-column">
<div class="book-box-body">
<div class="clearboth"></div>
</div>
</div>
-</div>
{% block book-box-extra-info %}
{% if themes or things%}
<div class="hidden-box-wrapper" id="theme-list-wrapper">
- <p><a class="mono hidden-box-trigger theme-list-link"
+ <p><a class="hidden-box-trigger theme-list-link"
href="#">{% trans "Motifs, themes and objects" %}</a></p>
<div class="hidden-box">
{% if themes %}
}
}
-/* FIXME: RWD */
-.picture.book-wide-box .right-column {
- float: none;
- @include size(width, 415px);
- top: 0;
- @include size(margin-left, 550px);
- margin-top: 0em;
+@media screen and (min-width: 50em) {
+ .picture.book-wide-box .right-column {
+ float: none;
+ @include size(width, 415px);
+ top: 0;
+ @include size(margin-left, 550px);
+ margin-top: 0em;
+ }
}
.picture {
&.book-wide-box {
- img.cover {
- width: 53.5em;
- height: auto;
+ .cover-area {
+ position: static;
+ @include size(margin-right, 15px);
+
+ img.cover {
+ @include size(width, 535px);
+ height: auto;
+ }
}
- .book-box-tools {
- margin-left: 50em; // 535px image + 15px margin @ 11pt
+ .book-box-head, .tags, .book-box-tools {
+ margin: 0;
+ }
+
+
+ @media screen and (min-width: 62.5em) {
+ .book-box-head, .tags, .book-box-tools {
+ float: right;
+ @include size(width, 403px);
+ }
}
.other-tools {
margin: 5em 0 0 0;
}
- #theme-list-wrapper {
- margin-left: 55em;
+
+ .book-box-tools, .tags, #theme-list-wrapper {
+ clear: left;
+ margin-left: 0;
+ }
+ .book-box-body {
+ height: auto;
+ margin-bottom: 1em;
+ }
+
+ @media screen and (min-width: 50em) {
+ .book-box-body {
+ @include size(height, 170px);
+ margin-bottom: 0;
+ }
+ .book-box-tools, .tags {
+ clear: none;
+ }
+
+ #theme-list-wrapper {
+ clear: none;
+ @include size(margin-left, 550px);
+ }
}
}