actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Mathieu David 2016-01-03 13:47:59 +01:00
parent 78e1897b47
commit 78b6148463
7 changed files with 199 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
src/theme/book.css
View File

@ -25,6 +25,15 @@ h5 {
.header + .header h5 {
margin-top: 1em;
}
table {
margin: 0 auto;
}
table thead td {
font-weight: 700;
}
table td {
padding: 3px 20px;
}
.sidebar {
position: absolute;
left: 0;
@ -285,35 +294,17 @@ h5 {
}
}
.light {
/* Inline code */
color: #333;
background-color: #fff;
}
.light :not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.light pre {
position: relative;
}
.light pre > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: #364149;
cursor: pointer;
}
.light pre > .buttons :hover {
color: #008cff;
}
.light pre > .buttons i {
margin-left: 8px;
}
.light pre > .result {
margin-top: 10px;
/*
table {
thead td {
color: $table-header-fg;
backrgound: $table-header-bg;
}
}
*/
/* Inline code */
}
.light .content .header:link,
.light .content .header:visited {
@ -372,37 +363,53 @@ h5 {
.light .theme-popup .theme:hover {
background-color: #e6e6e6;
}
.coal {
/* Inline code */
color: #98a3ad;
background-color: #141617;
.light blockquote {
margin: 20px 0;
padding: 0 20px;
color: #333;
background-color: #f2f7f9;
border-top: 0.1em solid #e1edf1;
border-bottom: 0.1em solid #e1edf1;
}
.coal :not(pre) > .hljs {
.light :not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.coal pre {
.light pre {
position: relative;
}
.coal pre > .buttons {
.light pre > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: #a1adb8;
color: #364149;
cursor: pointer;
}
.coal pre > .buttons :hover {
color: #3473ad;
.light pre > .buttons :hover {
color: #008cff;
}
.coal pre > .buttons i {
.light pre > .buttons i {
margin-left: 8px;
}
.coal pre > .result {
.light pre > .result {
margin-top: 10px;
}
.coal {
color: #98a3ad;
background-color: #141617;
/*
table {
thead td {
color: $table-header-fg;
backrgound: $table-header-bg;
}
}
*/
/* Inline code */
}
.coal .content .header:link,
.coal .content .header:visited {
color: #98a3ad;
@ -460,37 +467,53 @@ h5 {
.coal .theme-popup .theme:hover {
background-color: #1f2124;
}
.navy {
/* Inline code */
color: #bcbdd0;
background-color: #161923;
.coal blockquote {
margin: 20px 0;
padding: 0 20px;
color: #98a3ad;
background-color: #242637;
border-top: 0.1em solid #2c2f44;
border-bottom: 0.1em solid #2c2f44;
}
.navy :not(pre) > .hljs {
.coal :not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.navy pre {
.coal pre {
position: relative;
}
.navy pre > .buttons {
.coal pre > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: #c8c9db;
color: #a1adb8;
cursor: pointer;
}
.navy pre > .buttons :hover {
color: #2b79a2;
.coal pre > .buttons :hover {
color: #3473ad;
}
.navy pre > .buttons i {
.coal pre > .buttons i {
margin-left: 8px;
}
.navy pre > .result {
.coal pre > .result {
margin-top: 10px;
}
.navy {
color: #bcbdd0;
background-color: #161923;
/*
table {
thead td {
color: $table-header-fg;
backrgound: $table-header-bg;
}
}
*/
/* Inline code */
}
.navy .content .header:link,
.navy .content .header:visited {
color: #bcbdd0;
@ -548,37 +571,53 @@ h5 {
.navy .theme-popup .theme:hover {
background-color: #282e40;
}
.rust {
/* Inline code */
color: #262625;
background-color: #e1e1db;
.navy blockquote {
margin: 20px 0;
padding: 0 20px;
color: #bcbdd0;
background-color: #262933;
border-top: 0.1em solid #2f333f;
border-bottom: 0.1em solid #2f333f;
}
.rust :not(pre) > .hljs {
.navy :not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.rust pre {
.navy pre {
position: relative;
}
.rust pre > .buttons {
.navy pre > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: #c8c9db;
cursor: pointer;
}
.rust pre > .buttons :hover {
color: #e69f67;
.navy pre > .buttons :hover {
color: #2b79a2;
}
.rust pre > .buttons i {
.navy pre > .buttons i {
margin-left: 8px;
}
.rust pre > .result {
.navy pre > .result {
margin-top: 10px;
}
.rust {
color: #262625;
background-color: #e1e1db;
/*
table {
thead td {
color: $table-header-fg;
backrgound: $table-header-bg;
}
}
*/
/* Inline code */
}
.rust .content .header:link,
.rust .content .header:visited {
color: #262625;
@ -636,3 +675,37 @@ h5 {
.rust .theme-popup .theme:hover {
background-color: #99908a;
}
.rust blockquote {
margin: 20px 0;
padding: 0 20px;
color: #262625;
background-color: #c1c1bb;
border-top: 0.1em solid #b8b8b1;
border-bottom: 0.1em solid #b8b8b1;
}
.rust :not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.rust pre {
position: relative;
}
.rust pre > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: #c8c9db;
cursor: pointer;
}
.rust pre > .buttons :hover {
color: #e69f67;
}
.rust pre > .buttons i {
margin-left: 8px;
}
.rust pre > .result {
margin-top: 10px;
}

7
src/theme/stylus/general.styl
View File

@ -19,3 +19,10 @@ h2, h3 { margin-top: 2.5em }
h4, h5 { margin-top: 2em }
.header + .header h3, .header + .header h4, .header + .header h5 { margin-top: 1em }
table {
margin: 0 auto;
thead td { font-weight: 700; }
td { padding: 3px 20px; }
}

76
src/theme/stylus/themes/base.styl
View File

@ -1,35 +1,4 @@
.{unquote($theme-name)} {
/* Inline code */
:not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
border-radius: 3px;
}
pre {
position: relative;
}
pre > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: $sidebar-fg;
cursor: pointer;
:hover {
color: $sidebar-active;
}
i {
margin-left: 8px;
}
}
pre > .result {
margin-top: 10px;
}
color: $fg
background-color: $bg
@ -97,4 +66,49 @@
.theme:hover { background-color: $theme-hover }
}
blockquote {
margin: 20px 0;
padding: 0 20px;
color: $fg;
background-color: $quote-bg;
border-top: .1em solid $quote-border;
border-bottom: .1em solid $quote-border;
}
/*
table {
thead td {
color: $table-header-fg;
backrgound: $table-header-bg;
}
}
*/
/* Inline code */
:not(pre) > .hljs {
display: inline-block;
vertical-align: middle;
padding: 0.1em 0.3em;
border-radius: 3px;
}
pre {
position: relative;
& > .buttons {
position: absolute;
right: 5px;
top: 5px;
color: $sidebar-fg;
cursor: pointer;
:hover { color: $sidebar-active; }
i { margin-left: 8px; }
}
& > .result { margin-top: 10px; }
}
}

3
src/theme/stylus/themes/coal.styl
View File

@ -18,4 +18,7 @@ $theme-popup-bg = #141617
$theme-popup-border = #43484d
$theme-hover = #1f2124
$quote-bg = #242637
$quote-border = lighten($quote-bg, 5%)
@import 'base'

3
src/theme/stylus/themes/light.styl
View File

@ -18,4 +18,7 @@ $theme-popup-bg = #fafafa
$theme-popup-border = #cccccc
$theme-hover = #e6e6e6
$quote-bg = #f2f7f9
$quote-border = darken($quote-bg, 5%)
@import 'base'

3
src/theme/stylus/themes/navy.styl
View File

@ -18,4 +18,7 @@ $theme-popup-bg = #161923
$theme-popup-border = #737480
$theme-hover = #282e40
$quote-bg = #262933
$quote-border = lighten($quote-bg, 5%)
@import 'base'

3
src/theme/stylus/themes/rust.styl
View File

@ -18,4 +18,7 @@ $theme-popup-bg = #e1e1db
$theme-popup-border = #b38f6b
$theme-hover = #99908a
$quote-bg = #c1c1bb
$quote-border = darken($quote-bg, 5%)
@import 'base'