apps/wolnelektury_core/static/scss/book_text/body.scss

   1 /*
   2  * #big-pane
   3  * Everything besides the menu.
   4  */
   5 #big-pane {
   6     display: flex;
   7     flex-direction: row;
   8     justify-content: left;
   9     position: relative;
  10     @include min-screen($W_BOOK_TEXT_MAX) {
  11         justify-content: center;
  12     }
  13 }
  14 @include min-screen($S_MENU) {
  15     #big-pane {
  16         @include size(margin-left, $W_MENU);
  17     }
  18     .menu-hidden {
  19         #big-pane {
  20             margin-left: 0;
  21         }
  22     }
  23 }
  24
  25 #picture-viewer #big-pane {
  26     @include size(margin-left, $W_NONUMBERS_TINY);
  27
  28     @include min-screen($S_NONUMBERS_TINY_MAX) {
  29         @include size(margin-left, $W_NONUMBERS);
  30     }
  31
  32     @include min-screen($S_NUMBERS) {
  33         @include size(margin-left, 44px);
  34     }
  35 }
  36
  37 @include min-screen($S_MENU) {
  38     #picture-viewer #big-pane {
  39         @include size(margin-left, $W_MENU);
  40     }
  41     .menu-hidden {
  42         #big-pane {
  43             margin-left: 44px;
  44         }
  45     }
  46 }
  47
  48
  49
  50
  51 /*
  52  * #main-text
  53  *
  54  * This is where the text lives
  55  * together with line numbers, themes and stuff.
  56  */
  57
  58 @mixin left-without-numbers {
  59     @include size(padding-left, $W_NONUMBERS_TINY);
  60     @include min-screen($S_NONUMBERS_TINY_MAX) {
  61         @include size(padding-left, $W_NONUMBERS);
  62     }
  63 }
  64
  65 @mixin right-without-themes {
  66     @include size(padding-right, $W_NOTHEMES_TINY);
  67     @include min-screen($S_NOTHEMES_TINY_MAX) {
  68         @include size(padding-right, $W_NOTHEMES_SMALL);
  69     }
  70     @include min-screen($S_NOTHEMES_SMALL_MAX) {
  71         @include size(padding-right, $W_NOTHEMES);
  72     }
  73 }
  74
  75 #main-text, #other-text {
  76     @include left-without-numbers;
  77     @include right-without-themes;
  78     @include size(min-width, $W_BOOK_TEXT_MIN);
  79
  80     /* make room for line numbers */
  81     @include min-screen($S_NUMBERS) {
  82         @include size(padding-left, $W_NUMBERS);
  83     }
  84
  85     /* make room for themes */
  86     @include min-screen($S_THEMES) {
  87         @include size(padding-right, $W_THEMES);
  88     }
  89 }
  90
  91 .always-hide-line-numbers {
  92     /* Cancel making room for line numbers. */
  93     #main-text, #other-text {
  94         @include left-without-numbers;
  95     }
  96 }
  97
  98 @include min-screen($S_THEMES) {
  99     .always-hide-themes {
 100         /* Cancel making room for themes. */
 101         #main-text, #other-text {
 102             @include right-without-themes;
 103         }
 104     }
 105 }
 106
 107 .with-other-text {
 108     #main-text, #other-text {
 109         @include right-without-themes;
 110
 111         @include min-screen($S_THEMES_WOTHER) {
 112             @include size(padding-right, $W_THEMES);
 113         }
 114     }
 115 }
 116
 117
 118
 119
 120
 121 #book-text {
 122     @include size(max-width, $W_BOOK_TEXT_MAX);
 123     @include size(margin, 20px auto);
 124
 125     font-size: .8em;
 126
 127     @include min-screen($S_SMALL_TEXT_MAX) {
 128         font-size: 1em;
 129     }
 130
 131     h1 {
 132         margin-top: 0;
 133     }
 134 }
 135 .with-other-text {
 136     #book-text {
 137         font-size: .8em;
 138         @include min-screen($S_SMALL_TEXT_MAX_WOTHER) {
 139             font-size: 1em;
 140         }
 141     }
 142 }