src/wolnelektury/static/scss/book_text/body.scss

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