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