Skip to content

Commit 78b6148

Browse files
azerupiazerupi
committed
Basic formatting for tables + Styling for blockquotes
Added basic formatting for tables so that they have some padding and are aligned in the center of the page. I did not add color or borders because I am not sure how tables should look like. A lot of people in IntermezzOS want asides, blockquotes are probably the easiest way to do that. I have thus styled blockquotes for all the color themes.
1 parent 78e1897 commit 78b6148

File tree

7 files changed

+199
-93
lines changed

7 files changed

+199
-93
lines changed

‎src/theme/book.css

Lines changed: 135 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ h5 {
2525
.header + .header h5 {
2626
margin-top: 1em;
2727
}
28+
table {
29+
margin: 0 auto;
30+
}
31+
table thead td {
32+
font-weight: 700;
33+
}
34+
table td {
35+
padding: 3px 20px;
36+
}
2837
.sidebar {
2938
position: absolute;
3039
left: 0;
@@ -285,35 +294,17 @@ h5 {
285294
}
286295
}
287296
.light {
288-
/* Inline code */
289297
color: #333;
290298
background-color: #fff;
291-
}
292-
.light :not(pre) > .hljs {
293-
display: inline-block;
294-
vertical-align: middle;
295-
padding: 0.1em 0.3em;
296-
-webkit-border-radius: 3px;
297-
border-radius: 3px;
298-
}
299-
.light pre {
300-
position: relative;
301-
}
302-
.light pre > .buttons {
303-
position: absolute;
304-
right: 5px;
305-
top: 5px;
306-
color: #364149;
307-
cursor: pointer;
308-
}
309-
.light pre > .buttons :hover {
310-
color: #008cff;
311-
}
312-
.light pre > .buttons i {
313-
margin-left: 8px;
314-
}
315-
.light pre > .result {
316-
margin-top: 10px;
299+
/*
300+
table {
301+
thead td {
302+
color: $table-header-fg;
303+
backrgound: $table-header-bg;
304+
}
305+
}
306+
*/
307+
/* Inline code */
317308
}
318309
.light .content .header:link,
319310
.light .content .header:visited {
@@ -372,37 +363,53 @@ h5 {
372363
.light .theme-popup .theme:hover {
373364
background-color: #e6e6e6;
374365
}
375-
.coal {
376-
/* Inline code */
377-
color: #98a3ad;
378-
background-color: #141617;
366+
.light blockquote {
367+
margin: 20px 0;
368+
padding: 0 20px;
369+
color: #333;
370+
background-color: #f2f7f9;
371+
border-top: 0.1em solid #e1edf1;
372+
border-bottom: 0.1em solid #e1edf1;
379373
}
380-
.coal :not(pre) > .hljs {
374+
.light :not(pre) > .hljs {
381375
display: inline-block;
382376
vertical-align: middle;
383377
padding: 0.1em 0.3em;
384378
-webkit-border-radius: 3px;
385379
border-radius: 3px;
386380
}
387-
.coal pre {
381+
.light pre {
388382
position: relative;
389383
}
390-
.coal pre > .buttons {
384+
.light pre > .buttons {
391385
position: absolute;
392386
right: 5px;
393387
top: 5px;
394-
color: #a1adb8;
388+
color: #364149;
395389
cursor: pointer;
396390
}
397-
.coal pre > .buttons :hover {
398-
color: #3473ad;
391+
.light pre > .buttons :hover {
392+
color: #008cff;
399393
}
400-
.coal pre > .buttons i {
394+
.light pre > .buttons i {
401395
margin-left: 8px;
402396
}
403-
.coal pre > .result {
397+
.light pre > .result {
404398
margin-top: 10px;
405399
}
400+
.coal {
401+
color: #98a3ad;
402+
background-color: #141617;
403+
/*
404+
table {
405+
thead td {
406+
color: $table-header-fg;
407+
backrgound: $table-header-bg;
408+
}
409+
}
410+
*/
411+
/* Inline code */
412+
}
406413
.coal .content .header:link,
407414
.coal .content .header:visited {
408415
color: #98a3ad;
@@ -460,37 +467,53 @@ h5 {
460467
.coal .theme-popup .theme:hover {
461468
background-color: #1f2124;
462469
}
463-
.navy {
464-
/* Inline code */
465-
color: #bcbdd0;
466-
background-color: #161923;
470+
.coal blockquote {
471+
margin: 20px 0;
472+
padding: 0 20px;
473+
color: #98a3ad;
474+
background-color: #242637;
475+
border-top: 0.1em solid #2c2f44;
476+
border-bottom: 0.1em solid #2c2f44;
467477
}
468-
.navy :not(pre) > .hljs {
478+
.coal :not(pre) > .hljs {
469479
display: inline-block;
470480
vertical-align: middle;
471481
padding: 0.1em 0.3em;
472482
-webkit-border-radius: 3px;
473483
border-radius: 3px;
474484
}
475-
.navy pre {
485+
.coal pre {
476486
position: relative;
477487
}
478-
.navy pre > .buttons {
488+
.coal pre > .buttons {
479489
position: absolute;
480490
right: 5px;
481491
top: 5px;
482-
color: #c8c9db;
492+
color: #a1adb8;
483493
cursor: pointer;
484494
}
485-
.navy pre > .buttons :hover {
486-
color: #2b79a2;
495+
.coal pre > .buttons :hover {
496+
color: #3473ad;
487497
}
488-
.navy pre > .buttons i {
498+
.coal pre > .buttons i {
489499
margin-left: 8px;
490500
}
491-
.navy pre > .result {
501+
.coal pre > .result {
492502
margin-top: 10px;
493503
}
504+
.navy {
505+
color: #bcbdd0;
506+
background-color: #161923;
507+
/*
508+
table {
509+
thead td {
510+
color: $table-header-fg;
511+
backrgound: $table-header-bg;
512+
}
513+
}
514+
*/
515+
/* Inline code */
516+
}
494517
.navy .content .header:link,
495518
.navy .content .header:visited {
496519
color: #bcbdd0;
@@ -548,37 +571,53 @@ h5 {
548571
.navy .theme-popup .theme:hover {
549572
background-color: #282e40;
550573
}
551-
.rust {
552-
/* Inline code */
553-
color: #262625;
554-
background-color: #e1e1db;
574+
.navy blockquote {
575+
margin: 20px 0;
576+
padding: 0 20px;
577+
color: #bcbdd0;
578+
background-color: #262933;
579+
border-top: 0.1em solid #2f333f;
580+
border-bottom: 0.1em solid #2f333f;
555581
}
556-
.rust :not(pre) > .hljs {
582+
.navy :not(pre) > .hljs {
557583
display: inline-block;
558584
vertical-align: middle;
559585
padding: 0.1em 0.3em;
560586
-webkit-border-radius: 3px;
561587
border-radius: 3px;
562588
}
563-
.rust pre {
589+
.navy pre {
564590
position: relative;
565591
}
566-
.rust pre > .buttons {
592+
.navy pre > .buttons {
567593
position: absolute;
568594
right: 5px;
569595
top: 5px;
570596
color: #c8c9db;
571597
cursor: pointer;
572598
}
573-
.rust pre > .buttons :hover {
574-
color: #e69f67;
599+
.navy pre > .buttons :hover {
600+
color: #2b79a2;
575601
}
576-
.rust pre > .buttons i {
602+
.navy pre > .buttons i {
577603
margin-left: 8px;
578604
}
579-
.rust pre > .result {
605+
.navy pre > .result {
580606
margin-top: 10px;
581607
}
608+
.rust {
609+
color: #262625;
610+
background-color: #e1e1db;
611+
/*
612+
table {
613+
thead td {
614+
color: $table-header-fg;
615+
backrgound: $table-header-bg;
616+
}
617+
}
618+
*/
619+
/* Inline code */
620+
}
582621
.rust .content .header:link,
583622
.rust .content .header:visited {
584623
color: #262625;
@@ -636,3 +675,37 @@ h5 {
636675
.rust .theme-popup .theme:hover {
637676
background-color: #99908a;
638677
}
678+
.rust blockquote {
679+
margin: 20px 0;
680+
padding: 0 20px;
681+
color: #262625;
682+
background-color: #c1c1bb;
683+
border-top: 0.1em solid #b8b8b1;
684+
border-bottom: 0.1em solid #b8b8b1;
685+
}
686+
.rust :not(pre) > .hljs {
687+
display: inline-block;
688+
vertical-align: middle;
689+
padding: 0.1em 0.3em;
690+
-webkit-border-radius: 3px;
691+
border-radius: 3px;
692+
}
693+
.rust pre {
694+
position: relative;
695+
}
696+
.rust pre > .buttons {
697+
position: absolute;
698+
right: 5px;
699+
top: 5px;
700+
color: #c8c9db;
701+
cursor: pointer;
702+
}
703+
.rust pre > .buttons :hover {
704+
color: #e69f67;
705+
}
706+
.rust pre > .buttons i {
707+
margin-left: 8px;
708+
}
709+
.rust pre > .result {
710+
margin-top: 10px;
711+
}

‎src/theme/stylus/general.styl

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,10 @@ h2, h3 { margin-top: 2.5em }
1919
h4, h5 { margin-top: 2em }
2020

2121
.header + .header h3, .header + .header h4, .header + .header h5 { margin-top: 1em }
22+
23+
table {
24+
margin: 0 auto;
25+
26+
thead td { font-weight: 700; }
27+
td { padding: 3px 20px; }
28+
}

‎src/theme/stylus/themes/base.styl

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
11
.{unquote($theme-name)} {
2-
/* Inline code */
3-
:not(pre) > .hljs {
4-
display: inline-block;
5-
vertical-align: middle;
6-
padding: 0.1em 0.3em;
7-
border-radius: 3px;
8-
}
9-
10-
pre {
11-
position: relative;
12-
}
13-
pre > .buttons {
14-
position: absolute;
15-
right: 5px;
16-
top: 5px;
17-
18-
color: $sidebar-fg;
19-
cursor: pointer;
20-
21-
:hover {
22-
color: $sidebar-active;
23-
}
24-
25-
i {
26-
margin-left: 8px;
27-
}
28-
}
29-
30-
pre > .result {
31-
margin-top: 10px;
32-
}
332

343
color: $fg
354
background-color: $bg
@@ -97,4 +66,49 @@
9766

9867
.theme:hover { background-color: $theme-hover }
9968
}
69+
70+
blockquote {
71+
margin: 20px 0;
72+
padding: 0 20px;
73+
color: $fg;
74+
background-color: $quote-bg;
75+
border-top: .1em solid $quote-border;
76+
border-bottom: .1em solid $quote-border;
77+
}
78+
79+
/*
80+
table {
81+
thead td {
82+
color: $table-header-fg;
83+
backrgound: $table-header-bg;
84+
}
85+
}
86+
*/
87+
88+
/* Inline code */
89+
:not(pre) > .hljs {
90+
display: inline-block;
91+
vertical-align: middle;
92+
padding: 0.1em 0.3em;
93+
border-radius: 3px;
94+
}
95+
96+
pre {
97+
position: relative;
98+
99+
& > .buttons {
100+
position: absolute;
101+
right: 5px;
102+
top: 5px;
103+
104+
color: $sidebar-fg;
105+
cursor: pointer;
106+
107+
:hover { color: $sidebar-active; }
108+
i { margin-left: 8px; }
109+
}
110+
111+
& > .result { margin-top: 10px; }
112+
113+
}
100114
}

0 commit comments

Comments
 (0)