asciidoctor-epub3 1.5.1 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,42 +1,7 @@
1
+ @import "reset";
2
+ @import "colors";
1
3
  @import url("epub3-fonts.css");
2
4
 
3
- *, *:before, *:after {
4
- box-sizing: border-box;
5
- }
6
-
7
- /* educate older readers about tags introduced in HTML5 */
8
- article, aside, details, figcaption, figure,
9
- footer, header, nav, section, summary {
10
- display: block;
11
- }
12
-
13
- /* html and body declarations must be separate entries for some readers */
14
- html {
15
- margin: 0 !important;
16
- padding: 0 !important;
17
- /* set the em base (and relative em anchor) by setting the font-size on html */
18
- /* TODO set font-size > 100% except for Kindle */
19
- font-size: 100%;
20
- }
21
-
22
- /* don't set margin on body as that's how many readers frame reading area */
23
- /* can't set the font-family on body in Kindle */
24
- body {
25
- padding: 0 !important;
26
- /* add margin to ~ match Kindle's narrow setting */
27
- /* don't use !important on margin as it interferes with reader overrides (Calibre and Kindle) */
28
- margin: 0;
29
- font-size: 100%;
30
- /* NOTE putting optimizeLegibility on the body slows down rendering considerably */
31
- text-rendering: optimizeSpeed;
32
- /* -webkit-font-smoothing has no noticable effect and is controversial, so leaving it off */
33
- }
34
-
35
- /* disables night mode in Aldiko, hoo-ha! */
36
- html body {
37
- background-color: #FFFFFF;
38
- }
39
-
40
5
  /* @page only applies to EPUB2 readers; not supported by EPUB3 readers such as Kindle and Gitden */
41
6
  @page {
42
7
  /* sets minimum margin permitted */
@@ -44,28 +9,6 @@ html body {
44
9
  margin: 1cm;
45
10
  }
46
11
 
47
- div, p, blockquote, pre, figure, figcaption,
48
- h1, h2, h3, h4, h5, h6,
49
- dl, dt, dd, ol, ul, li,
50
- table, caption, thead, tfoot, tbody, tr, th, td {
51
- margin: 0;
52
- padding: 0;
53
- font-size: 100%;
54
- vertical-align: baseline;
55
- }
56
-
57
- a, abbr, address, cite, code, em, kbd, span, strong {
58
- font-size: 100%;
59
- }
60
-
61
- a {
62
- background: transparent;
63
- }
64
-
65
- a:active, a:hover {
66
- outline: 0;
67
- }
68
-
69
12
  abbr[title] {
70
13
  border-bottom: 1px dotted;
71
14
  }
@@ -74,27 +17,36 @@ address {
74
17
  white-space: pre-line;
75
18
  }
76
19
 
77
- b, strong {
78
- font-weight: bold;
79
- }
80
-
81
20
  b.button {
82
21
  font-weight: normal;
83
- text-shadow: 1px 0 0 #333332;
84
- color: #101010;
22
+ text-shadow: 1px 0 0 $button-shadow;
23
+ color: $button-text;
85
24
  white-space: nowrap;
86
25
  }
87
26
 
88
- b.button .label {
89
- padding: 0 0.25em;
27
+ b.button::before,
28
+ b.button::after {
29
+ position: relative;
30
+ top: -1px;
31
+ font-weight: 400;
32
+ }
33
+
34
+ b.button::before {
35
+ content: "[";
36
+ padding: 0 3px 0 2px;
37
+ }
38
+
39
+ b.button::after {
40
+ content: "]";
41
+ padding: 0 2px 0 3px;
90
42
  }
91
43
 
92
44
  kbd {
93
45
  display: inline-block;
94
46
  font-size: 0.8em;
95
47
  line-height: 1;
96
- background-color: #F7F7F7; /* #FAFAFA */
97
- border: 1px solid #BEBEBC;
48
+ background-color: $kbd-background;
49
+ border: 1px solid $kbd-border;
98
50
  -webkit-border-radius: 3px;
99
51
  border-radius: 3px;
100
52
  -webkit-box-shadow: 1px 1px 0 rgba(102, 102, 101, 0.25), 0 0 0 1px white inset;
@@ -135,14 +87,9 @@ kbd {
135
87
  padding-right: 0.15em;
136
88
  }
137
89
 
138
- img {
139
- border: 0;
140
- max-width: 100%;
141
- }
142
-
143
90
  mark {
144
- background-color: #FFC14F;
145
- color: #101010;
91
+ background-color: $mark-background;
92
+ color: $mark-text;
146
93
  }
147
94
 
148
95
  small {
@@ -188,15 +135,6 @@ sub {
188
135
  vertical-align: text-bottom;
189
136
  }
190
137
 
191
- table {
192
- border-collapse: collapse;
193
- border-spacing: 0;
194
- }
195
-
196
- td, th {
197
- padding: 0;
198
- }
199
-
200
138
  /* We need to apply text-align to <p> too in order to override global text-align:justify */
201
139
  th.halign-left, td.halign-left, th.halign-left > p, td.halign-left > p {
202
140
  text-align: left
@@ -226,22 +164,13 @@ body a:link {
226
164
  /* Kindle requires the !important on text-decoration */
227
165
  /* In night mode, the only indicator of a link is the underline, so we need it or a background image */
228
166
  text-decoration: none !important;
229
- border-bottom: 1px dashed #333332;
167
+ border-bottom: 1px dashed $link-border;
230
168
  /* allow URLs to break anywhere if they don't fit on a line; but how do we know it's a URL? */
231
169
  /*
232
170
  word-break: break-all;
233
171
  */
234
172
  }
235
173
 
236
- body:first-of-type a:link {
237
- border-bottom: none;
238
- background-repeat: no-repeat;
239
- background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #666665 5%, #666665 95%, rgba(255, 255, 255, 0) 100%);
240
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #666665 5%, #666665 95%, rgba(255, 255, 255, 0) 100%);
241
- background-size: 100% 1px;
242
- background-position: 0 1.2em;
243
- }
244
-
245
174
  code.literal {
246
175
  /* don't let it affect line spacing */
247
176
  /* disable since M+ 1mn won't interrupt line height */
@@ -295,7 +224,7 @@ body p, li, dt, dd, footer {
295
224
  }
296
225
 
297
226
  code, kbd, pre {
298
- color: #101010;
227
+ color: $pre-text;
299
228
  font-family: "M+ 1mn", monospace;
300
229
  -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
301
230
  }
@@ -313,7 +242,7 @@ th, td, figcaption, caption {
313
242
  }
314
243
 
315
244
  p.last::after {
316
- color: #57AD68;
245
+ color: $last-mark-text;
317
246
  display: inline-block;
318
247
  font-family: "FontAwesome";
319
248
  font-size: 1em;
@@ -332,19 +261,6 @@ ul li, ol li {
332
261
  margin-top: 1em;
333
262
  }
334
263
 
335
- /* squeeze content in complex lists */
336
- /*
337
- li > figure,
338
- li > p {
339
- margin-top: 0.4em;
340
- }
341
- */
342
-
343
- dl {
344
- margin-top: 0;
345
- margin-bottom: 0;
346
- }
347
-
348
264
  dt {
349
265
  -webkit-column-break-inside: avoid;
350
266
  page-break-inside: avoid;
@@ -391,9 +307,10 @@ div.callout-list ol li {
391
307
  }
392
308
 
393
309
  i.conum {
394
- color: #468C54;
310
+ color: $i-conum-text;
395
311
  font-family: "M+ 1mn", monospace;
396
312
  font-style: normal;
313
+ user-select: none;
397
314
  }
398
315
 
399
316
  /* don't let conum affect line spacing; REVIEW may not need this! */
@@ -446,68 +363,53 @@ div.stack-subject li strong.subject {
446
363
  ul {
447
364
  /* QUESTION do we need important here? */
448
365
  margin-left: 1em !important;
449
- list-style-type: square;
450
- }
451
-
452
- ul ul {
453
- list-style-type: circle;
454
- }
455
-
456
- ul ul ul {
457
- list-style-type: disc;
458
- }
459
-
460
- /* disable list style type for CSS3-enabled clients */
461
- body:first-of-type ul,
462
- body:first-of-type ul ul,
463
- body:first-of-type ul ul ul {
464
- list-style-type: none;
465
- }
466
-
467
- ul > li::before {
468
- float: left;
469
- margin-left: -1em;
470
- margin-top: -0.05em;
471
- padding-left: 0.25em;
472
- /* guarantee it's out of the flow */
473
- width: 0;
474
- display: block;
475
- }
476
-
477
- ul > li::before {
478
- content: "\25AA"; /* small black square */
479
- color: #333332;
480
- }
481
-
482
- ul ul > li::before {
483
- content: "\25E6"; /* small white circle */
484
- color: #57AD68;
485
- }
486
-
487
- ul ul ul > li::before {
488
- content: "\2022"; /* small black circle */
489
- color: #333332;
490
- }
491
366
 
492
- ul ul ul ul > li::before {
493
- content: "\25AB"; /* small white square */
494
- color: #57AD68;
495
- }
367
+ > li::before {
368
+ float: left;
369
+ margin-left: -1em;
370
+ margin-top: -0.05em;
371
+ padding-left: 0.25em;
372
+ /* guarantee it's out of the flow */
373
+ width: 0;
374
+ display: block;
375
+
376
+ content: "▪";
377
+ color: $list-lvl1;
378
+ }
496
379
 
497
- ol {
498
- margin-left: 1.75em !important;
380
+ ul {
381
+ > li::before {
382
+ content: "◦";
383
+ color: $list-lvl2;
384
+ }
385
+
386
+ ul {
387
+ > li::before {
388
+ content: "•";
389
+ color: $list-lvl3;
390
+ }
391
+
392
+ ul {
393
+ > li::before {
394
+ content: "▫";
395
+ color: $list-lvl4;
396
+ }
397
+ }
398
+ }
399
+ }
499
400
  }
500
401
 
501
402
  ol {
502
403
  list-style-type: decimal;
503
- }
404
+ margin-left: 1.75em !important;
504
405
 
505
- ol ol {
506
- list-style-type: lower-alpha;
507
- }
406
+ ol {
407
+ list-style-type: lower-alpha;
508
408
 
509
- ol ol ol {
510
- list-style-type: lower-roman;
409
+ ol {
410
+ list-style-type: lower-roman;
411
+ }
412
+ }
511
413
  }
512
414
 
513
415
  /* REVIEW */
@@ -561,7 +463,7 @@ h3 {
561
463
  }
562
464
 
563
465
  h4 {
564
- color: #202020;
466
+ color: $h4-header-text;
565
467
  font-weight: 200;
566
468
 
567
469
  font-size: 1.1em;
@@ -571,12 +473,13 @@ h4 {
571
473
  font-size: 1.2em;
572
474
  margin-top: .917em; /* 1.1rem */
573
475
  margin-top: 0.875em; /* 1.05rem */
574
- /*margin-bottom: -0.75em;*/ /* -0.9rem, 0.1rem to content */
476
+ /*margin-bottom: -0.75em;*/
477
+ /* -0.9rem, 0.1rem to content */
575
478
  margin-bottom: -0.625em; /* -0.75rem, 0.25rem to content */
576
479
  }
577
480
 
578
481
  h5 {
579
- color: #333332;
482
+ color: $h5-header-text;
580
483
  /*
581
484
  font-size: 1em;
582
485
  text-transform: uppercase;
@@ -606,7 +509,7 @@ h5 code {
606
509
  /*padding: 0.75em 1.5em 0.25em 1.5em;*/
607
510
  padding: 0.25em 0;
608
511
  margin-bottom: 2.5em;
609
- border-bottom: 1px solid #333332;
512
+ border-bottom: 1px solid $chapter-header-title-border;
610
513
  /* TODO maybe what we need to get articles to start in left column
611
514
  -webkit-column-break-before: left;
612
515
  page-break-before: left;
@@ -619,7 +522,7 @@ h1.chapter-title {
619
522
  margin-top: 3.5em; /* 4.2rem - would like to use 9vh */
620
523
  margin-bottom: 0;
621
524
  padding-bottom: 0.8333em; /* 1.2rem */
622
- color: #333332;
525
+ color: $chapter-header-title-text;
623
526
  text-transform: uppercase; /* not supported in Adobe Digital Editions */
624
527
  word-spacing: -0.075em;
625
528
  letter-spacing: -0.01em;
@@ -634,7 +537,7 @@ h1.chapter-title .subtitle {
634
537
  }
635
538
 
636
539
  h1.chapter-title em {
637
- color: #57AD68;
540
+ color: $chapter-header-em;
638
541
  font-style: normal;
639
542
  }
640
543
 
@@ -673,7 +576,7 @@ div.abstract {
673
576
  }
674
577
 
675
578
  div.abstract > p {
676
- color: #333332;
579
+ color: $abstract-text;
677
580
  font-size: 1.05em; /* or 1.1em? */
678
581
  line-height: 1.75;
679
582
  }
@@ -752,7 +655,7 @@ figcaption,
752
655
  caption {
753
656
  font-size: 0.9em;
754
657
  font-style: italic;
755
- color: #333332;
658
+ color: $caption-text;
756
659
  letter-spacing: -0.01em;
757
660
  line-height: 1.4;
758
661
  text-align: left;
@@ -784,10 +687,10 @@ figure.listing > figcaption + pre {
784
687
  }
785
688
 
786
689
  aside.sidebar {
787
- border: 1px solid #C8C8C8;
690
+ border: 1px solid $aside-border;
788
691
  padding: 0 1.5em;
789
692
  font-size: 0.9em;
790
- background-color: #E0E0E0;
693
+ background-color: $aside-background;
791
694
  text-align: right; /* aligns heading to right */
792
695
  /*
793
696
  -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
@@ -795,11 +698,6 @@ aside.sidebar {
795
698
  */
796
699
  }
797
700
 
798
- body:first-of-type aside.sidebar {
799
- background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
800
- /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
801
- }
802
-
803
701
  /* a bit of a cheat; could use aside.sidebar[title] instead, but not on Aldiko */
804
702
  aside.sidebar.titled {
805
703
  margin-top: 2em;
@@ -815,22 +713,16 @@ aside.sidebar > h2 {
815
713
  letter-spacing: 0;
816
714
  display: inline-block;
817
715
  white-space: nowrap; /* for some reason it's wrapping prematurely */
818
- border: 1px solid #C8C8C8;
716
+ border: 1px solid $aside-border;
819
717
  padding: 1.5em .75em .5em .75em;
820
718
  margin: -1em 0.5em -0.25em 0.5em;
821
- background-color: #FFFFFF;
719
+ background-color: $body-background;
822
720
  /*
823
721
  -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
824
722
  box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
825
723
  */
826
724
  }
827
725
 
828
- /* doesn't work
829
- body:first-of-type aside.sidebar > h2 {
830
- background-color: rgba(255, 255, 255, 1);
831
- }
832
- */
833
-
834
726
  aside.sidebar > div.content {
835
727
  margin-bottom: 1em;
836
728
  text-align: justify; /* restore text alignment in content */
@@ -852,7 +744,7 @@ div[class~="blockquote"] {
852
744
  }
853
745
 
854
746
  blockquote > p {
855
- color: #101010;
747
+ color: $blockquote-text;
856
748
  font-style: italic;
857
749
 
858
750
  /*
@@ -869,13 +761,14 @@ blockquote > p {
869
761
 
870
762
  blockquote > p:first-of-type::before {
871
763
  display: inline-block;
872
- color: #333332;
764
+ color: $para-first-text;
873
765
  text-shadow: 0 1px 2px rgba(102, 102, 101, 0.3);
874
766
 
875
767
  /* using serif quote from entypo */
876
768
  font-family: "FontIcons";
877
769
 
878
- /*content: "\f10e";*/ /* quote-right from Entypo */
770
+ /*content: "\f10e";*/
771
+ /* quote-right from Entypo */
879
772
  /*
880
773
  -webkit-transform: rotate(180deg);
881
774
  transform: rotate(180deg);
@@ -902,26 +795,22 @@ blockquote footer {
902
795
  blockquote footer .context {
903
796
  font-size: 0.9em;
904
797
  letter-spacing: -0.05em;
905
- color: #333332;
798
+ color: $footer-context;
906
799
  }
907
800
 
908
801
  pre {
909
802
  text-align: left; /* fix for Namo */
910
803
  margin-top: 1em; /* 0.85rem */
911
- /*margin-top: 1.176em;*/ /* 1rem */
804
+ /*margin-top: 1.176em;*/
805
+ /* 1rem */
912
806
  white-space: pre-wrap;
913
807
  overflow-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
914
808
  font-size: 0.85em;
915
809
  line-height: 1.4; /* matches what Kindle uses and can't go less */
916
- background-color: #E0E0E0;
917
- padding: 0.6em 0.9em; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
918
- border-top: 1px solid #C8C8C8;
919
- border-right: 1px solid #C8C8C8;
920
- }
921
-
922
- body:first-of-type pre {
923
- background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
924
- /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
810
+ background-color: $pre-background;
811
+ padding: 8px 12px; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
812
+ border-top: 1px solid $pre-border;
813
+ border-right: 1px solid $pre-border;
925
814
  }
926
815
 
927
816
  /* TODO what we really want is for pre w/o caption to be unbreakable */
@@ -946,6 +835,7 @@ div.verse {
946
835
 
947
836
  /* TODO we may want to reenable hyphens here, but not for kf8 */
948
837
  div.verse > pre {
838
+ font-family: "M+ 1p", sans-serif;
949
839
  background-color: transparent;
950
840
  border: none;
951
841
  font-size: 1.2em;
@@ -974,28 +864,28 @@ aside[class~="admonition"] {
974
864
  }
975
865
 
976
866
  aside.note {
977
- border-left-color: #FFC14F;
978
- background-color: #FFF0D4; /* 25% opacity of border */
867
+ border-left-color: $note-border;
868
+ background-color: $note-background; /* 25% opacity of border */
979
869
  }
980
870
 
981
871
  aside.tip {
982
- border-left-color: #40403E;
983
- background-color: #D0D0CF; /* 25% opacity of border */
872
+ border-left-color: $tip-border;
873
+ background-color: $tip-background; /* 25% opacity of border */
984
874
  }
985
875
 
986
876
  aside.caution {
987
- border-left-color: #7F7F7D;
988
- background-color: #DFDFDF; /* 25% opacity of border */
877
+ border-left-color: $caution-border;
878
+ background-color: $caution-background; /* 25% opacity of border */
989
879
  }
990
880
 
991
881
  aside.warning {
992
- border-left-color: #C83737;
993
- background-color: #F1CECE; /* 25% opacity of border */
882
+ border-left-color: $warning-border;
883
+ background-color: $warning-background; /* 25% opacity of border */
994
884
  }
995
885
 
996
886
  aside.important {
997
- border-left-color: #F2642A;
998
- background-color: #FCD9CA; /* 25% opacity of border */
887
+ border-left-color: $important-border;
888
+ background-color: $important-background; /* 25% opacity of border */
999
889
  }
1000
890
 
1001
891
  aside.admonition::before {
@@ -1029,52 +919,52 @@ aside[class~="admonition"] > div[class~="content"] {
1029
919
 
1030
920
  aside.note::before {
1031
921
  content: "\f303"; /* fa-pencil-alt */
1032
- color: #FFC14F;
922
+ color: $note-border;
1033
923
  }
1034
924
 
1035
925
  aside[class~="note"] > div[class~="content"] {
1036
- background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255, 255, 255, 0) 57.5%);
1037
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255, 255, 255, 0) 57.5%);
926
+ background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $note-border 45%, $note-border 55%, rgba(255, 255, 255, 0) 57.5%);
927
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $note-border 45%, $note-border 55%, rgba(255, 255, 255, 0) 57.5%);
1038
928
  }
1039
929
 
1040
930
  aside.tip::before {
1041
931
  content: "\f0eb"; /* fa-lightbulb */
1042
- color: #40403E;
932
+ color: $tip-border;
1043
933
  }
1044
934
 
1045
935
  aside[class~="tip"] > div[class~="content"] {
1046
- background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #40403E 45%, #40403E 55%, rgba(255, 255, 255, 0) 57.5%);
1047
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #40403E 45%, #40403E 55%, rgba(255, 255, 255, 0) 57.5%);
936
+ background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $tip-border 45%, $tip-border 55%, rgba(255, 255, 255, 0) 57.5%);
937
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $tip-border 45%, $tip-border 55%, rgba(255, 255, 255, 0) 57.5%);
1048
938
  }
1049
939
 
1050
940
  aside.caution::before {
1051
941
  content: "\f0c2"; /* fa-cloud */
1052
- color: #7F7F7D;
942
+ color: $caution-border;
1053
943
  }
1054
944
 
1055
945
  aside[class~="caution"] > div[class~="content"] {
1056
- background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255, 255, 255, 0) 57.5%);
1057
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255, 255, 255, 0) 57.5%);
946
+ background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $caution-border 45%, $caution-border 55%, rgba(255, 255, 255, 0) 57.5%);
947
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $caution-border 45%, $caution-border 55%, rgba(255, 255, 255, 0) 57.5%);
1058
948
  }
1059
949
 
1060
950
  aside.warning::before {
1061
951
  content: "\f0e7"; /* fa-bolt */
1062
- color: #C83737;
952
+ color: $warning-border;
1063
953
  }
1064
954
 
1065
955
  aside[class~="warning"] > div[class~="content"] {
1066
- background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #C83737 45%, #C83737 55%, rgba(255, 255, 255, 0) 57.5%);
1067
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #C83737 45%, #C83737 55%, rgba(255, 255, 255, 0) 57.5%);
956
+ background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $warning-border 45%, $warning-border 55%, rgba(255, 255, 255, 0) 57.5%);
957
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $warning-border 45%, $warning-border 55%, rgba(255, 255, 255, 0) 57.5%);
1068
958
  }
1069
959
 
1070
960
  aside.important::before {
1071
961
  content: "\f12a"; /* fa-exclamation */
1072
- color: #F2642A;
962
+ color: $important-border;
1073
963
  }
1074
964
 
1075
965
  aside[class~="important"] > div[class~="content"] {
1076
- background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255, 255, 255, 0) 57.5%);
1077
- background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255, 255, 255, 0) 57.5%);
966
+ background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $important-border 45%, $important-border 55%, rgba(255, 255, 255, 0) 57.5%);
967
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $important-border 45%, $important-border 55%, rgba(255, 255, 255, 0) 57.5%);
1078
968
  }
1079
969
 
1080
970
  aside.admonition > h2 {
@@ -1118,7 +1008,7 @@ table.table th {
1118
1008
  }
1119
1009
 
1120
1010
  table.table thead th {
1121
- border-bottom: 1px solid #707070;
1011
+ border-bottom: 1px solid $table-border;
1122
1012
  }
1123
1013
 
1124
1014
  table.table td > p,
@@ -1135,26 +1025,26 @@ table.table div.embed > * + * {
1135
1025
  table.table-framed-all {
1136
1026
  border-width: 1px;
1137
1027
  border-style: solid;
1138
- border-color: #707070;
1028
+ border-color: $table-border;
1139
1029
  }
1140
1030
 
1141
1031
  table.table-framed-topbot {
1142
1032
  border-width: 1px 0;
1143
1033
  border-style: solid;
1144
- border-color: #707070;
1034
+ border-color: $table-border;
1145
1035
  }
1146
1036
 
1147
1037
  table.table-framed-sides {
1148
1038
  border-width: 0 1px;
1149
1039
  border-style: solid;
1150
- border-color: #707070;
1040
+ border-color: $table-border;
1151
1041
  }
1152
1042
 
1153
1043
  table.table-grid-all th,
1154
1044
  table.table-grid-all td {
1155
1045
  border-width: 1px 1px 1px 1px;
1156
1046
  border-style: solid;
1157
- border-color: #707070;
1047
+ border-color: $table-border;
1158
1048
  }
1159
1049
 
1160
1050
  table.table-grid-all thead tr > *:last-child {
@@ -1170,14 +1060,14 @@ table.table-grid-rows tbody th,
1170
1060
  table.table-grid-rows tbody td {
1171
1061
  border-width: 1px 0 0 0;
1172
1062
  border-style: solid;
1173
- border-color: #707070;
1063
+ border-color: $table-border;
1174
1064
  }
1175
1065
 
1176
1066
  table.table-grid-cols th,
1177
1067
  table.table-grid-cols td {
1178
1068
  border-width: 0 1px 0 0;
1179
1069
  border-style: solid;
1180
- border-color: #707070;
1070
+ border-color: $table-border;
1181
1071
  }
1182
1072
 
1183
1073
  table.table-grid-cols thead th:last-child {
@@ -1188,6 +1078,12 @@ table.table-grid-cols tbody tr > td:last-child {
1188
1078
  border-right-width: 0;
1189
1079
  }
1190
1080
 
1081
+ pre.pygments span.linenos,
1082
+ pre.rouge span.linenos {
1083
+ display: inline-block;
1084
+ margin-right: 0.75em;
1085
+ }
1086
+
1191
1087
  hr.pagebreak {
1192
1088
  -webkit-column-break-after: always;
1193
1089
  page-break-after: always;
@@ -1203,12 +1099,12 @@ hr.pagebreak + * {
1203
1099
  #_about_the_author {
1204
1100
  -webkit-column-break-before: always;
1205
1101
  page-break-before: always;
1206
- border-bottom: 1px solid #B3B3B3;
1102
+ border-bottom: 1px solid $about-author-border;
1207
1103
  }
1208
1104
 
1209
1105
  img.headshot {
1210
1106
  float: left;
1211
- border: 1px solid #707070;
1107
+ border: 1px solid $headshot-border;
1212
1108
  padding: 1px;
1213
1109
  margin: 0.35em 1em 0.15em 0;
1214
1110
  height: 5em !important;
@@ -1270,3 +1166,11 @@ nav[hidden~="hidden"] {
1270
1166
  font-family: monospace;
1271
1167
  }
1272
1168
  }
1169
+
1170
+ .left {
1171
+ float: left !important;
1172
+ }
1173
+
1174
+ .right {
1175
+ float: right !important;
1176
+ }