diff options
author | jingwen <jingwen@google.com> | 2018-07-09 07:42:16 -0700 |
---|---|---|
committer | Copybara-Service <copybara-piper@google.com> | 2018-07-09 07:43:43 -0700 |
commit | ee62862c3dd52634ac5ec722b98b8a0c994e7155 (patch) | |
tree | 7af1711f8e877fb7cf942bbab80097758a36b44f /site | |
parent | 6fd4e0edd4de22dec9eda13dc0b29214f2ca117e (diff) |
Sync jmmv@'s table styles for the docs.bazel.build site.
Sources:
https://github.com/bazelbuild/bazel-blog/commit/846478d6943162f4c4d7d50001069e0ca7b2ec28
https://github.com/bazelbuild/bazel-blog/commit/aacaa25314678c08772372b3d46697f7963bb201
RELNOTES: None.
PiperOrigin-RevId: 203763253
Diffstat (limited to 'site')
-rw-r--r-- | site/_config.yml | 2 | ||||
-rw-r--r-- | site/_sass/style.scss | 6 | ||||
-rw-r--r-- | site/_sass/tables.scss | 63 | ||||
-rw-r--r-- | site/css/main.scss | 1 |
4 files changed, 72 insertions, 0 deletions
diff --git a/site/_config.yml b/site/_config.yml index ef23bc0765..17986c7564 100644 --- a/site/_config.yml +++ b/site/_config.yml @@ -1,5 +1,7 @@ destination: production markdown: redcarpet +redcarpet: + extensions: ["tables"] paginate: 10 highlighter: pygments sass: diff --git a/site/_sass/style.scss b/site/_sass/style.scss index 9784b7e420..33f75e36d9 100644 --- a/site/_sass/style.scss +++ b/site/_sass/style.scss @@ -16,6 +16,12 @@ $text-color: #444; $vpad: 20px; +$table-bg: #fff; +$table-cell-padding: 5px; +$table-border-color: $bazel-green; +$text-muted: $color-on-bazel-green; +$line-height-base: 20px; +$line-height-computed: 20px; html { position: relative; diff --git a/site/_sass/tables.scss b/site/_sass/tables.scss new file mode 100644 index 0000000000..fe4edd7cf0 --- /dev/null +++ b/site/_sass/tables.scss @@ -0,0 +1,63 @@ +// Bootstrap requires tables to carry a .table class in order for styling to +// be applied. However, redcarpet emits table elements without the class and +// it is not possible to customize it. +// +// Ideally, we would use a SASS directive to make the table element inherit +// the formatting defined by the bootstrap templates... but we cannot do so +// at the moment because we don't build bootstrap ourselves from its SASS +// sources. Therefore, this file just borrows the minimal amount of code +// from bootstrap 3.3.7 to render tables nicely. + +caption { + padding-top: $table-cell-padding; + padding-bottom: $table-cell-padding; + color: $text-muted; + text-align: left; +} + +th { + text-align: left; +} + +// Baseline styles + +table { + background-color: $table-bg; + width: 100%; + max-width: 100%; + margin-bottom: $line-height-computed; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-cell-padding; + line-height: $line-height-base; + vertical-align: top; + border-top: 1px solid $table-border-color; + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid $table-border-color; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid $table-border-color; + } +} diff --git a/site/css/main.scss b/site/css/main.scss index 402b94f682..bc6a3b3310 100644 --- a/site/css/main.scss +++ b/site/css/main.scss @@ -7,5 +7,6 @@ @import "sidebar.scss"; @import "docs.scss"; @import "be.scss"; +@import "tables.scss"; @import "syntax.scss"; |