From bd69080f0b9d57047d390d9557aa6d0441e66b38 Mon Sep 17 00:00:00 2001 From: David Chen Date: Tue, 26 Apr 2016 07:12:42 +0000 Subject: Include Jekyll layout files, style sheets, and Bazel logo images in the public Bazel tree. -- MOS_MIGRATED_REVID=120787331 --- site/_sass/style.scss | 511 +++++++++++++++++++++++++++++++++++++++++++++++++ site/_sass/syntax.scss | 89 +++++++++ 2 files changed, 600 insertions(+) create mode 100644 site/_sass/style.scss create mode 100644 site/_sass/syntax.scss (limited to 'site/_sass') diff --git a/site/_sass/style.scss b/site/_sass/style.scss new file mode 100644 index 0000000000..6da9d8786a --- /dev/null +++ b/site/_sass/style.scss @@ -0,0 +1,511 @@ +$body-font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial, + sans-serif; +$code-font-family: 'Source Code Pro'; + +$link-color: #4caf50; +$link-hover-color: darken($link-color, 10%); +$well-color: #f9f9f9; +$text-color: #444; + +$vpad: 20px; + +$footer-height: 60px; +$footer-margin: 40px; + +html { + position: relative; + min-height: 100%; +} + +body { + padding-top: 50px; + color: $text-color; + font-family: $body-font-family; + margin-bottom: $footer-height + $footer-margin; +} + +// Footer styles +$footer-bg-color: #424242; +$footer-color: #fff; +$footer-muted-color: #e0e0e0; +$footer-link-color: #e0e0e0; +$footer-link-hover-color: #fff; + +.footer { + position: absolute; + bottom: 0; + width: 100%; + height: $footer-height; + margin-top: $footer-margin; + background-color: $footer-bg-color; + color: $footer-color; + padding: 20px; + + .text-muted { + color: $footer-muted-color; + } + + a { + color: $footer-link-color; + + &:hover, + &:focus { + color: $footer-link-hover-color; + text-decoration: none; + } + } +} + +.body-home { + margin-bottom: $footer-height; + + .footer { + margin-top: 0; + } +} + +a { + color: $link-color; + + &:hover, + &:focus { + color: $link-hover-color; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $text-color; + font-weight: 300; + margin-top: 25px; + margin-bottom: 15px; +} + +h1 { + margin-top: 40px; +} + +h2 { + font-size: 24px; + margin-top: 30px; +} + +h3 { + font-size: 18px; +} + +h4 { + font-size: 16px; +} + +p, +li { + font-size: 14px; + line-height: 22px; +} + +pre { + padding: 8px 16px; + font-family: $code-font-family; + background-color: $well-color; + border: 0; + font-size: 13px; + line-height: 20px; +} + +code { + font-family: $code-font-family; + font-size: 13px; + background-color: $well-color; +} + +.well { + background-color: $well-color; + border-color: $well-color; + box-shadow: none; +} + +// Shared +.vpad { + padding-top: $vpad; +} + +// Main page hero styles. +$hero-bg-color: #fafafa; + +.hero { + background-color: $hero-bg-color; + color: $text-color; + padding-top: 40px; + padding-bottom: 40px; + text-align: center; + + h1 { + margin-top: 0; + font-size: 72px; + color: $text-color; + } + + .logo { + width: 270px; + padding-bottom: 20px; + } +} + +$hero-bar-bg-color: #eee; + +.hero-bar { + text-align: center; + background-color: $hero-bar-bg-color; + padding-bottom: 10px; + padding-top: 10px; + font-weight: bold; +} + +$page-title-bar-bg-color: #e8f5e9; +$page-title-bar-color: #4caf50; + +.page-title-bar { + background-color: $page-title-bar-bg-color; + padding-top: 20px; + padding-bottom: 20px; + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 8px 0 4px 0; + color: $page-title-bar-color; + } +} + +.page-spacer { + height: 100px; +} + +// Sidebar styles +$navbar-bg-color: #4caf50; +$navbar-hover-bg-color: #66bb6a; +$navbar-color: #fff; +$navbar-hover-color: #444; +$navbar-input-bg-color: #c8e6c9; +$navbar-input-focus-bg-color: #fff; +$navbar-input-border-color: #4caf50; + +.navbar-inverse { + margin-bottom: 0; + background-color: $navbar-bg-color; + border-bottom: 1px solid $navbar-bg-color; + + .navbar-brand { + padding-top: 10px; + } + + a.navbar-brand { + color: $navbar-color; + + &:focus, + &:hover { + color: $navbar-color; + background-color: $navbar-bg-color; + } + } + + .navbar-nav > li > a { + color: $navbar-color; + + &:focus, + &:hover { + color: $navbar-color; + background-color: $navbar-hover-bg-color; + } + + &.nav-icon { + font-size: 18px; + } + } + + .navbar-nav > li.active > a { + background-color: $navbar-hover-bg-color; + + &:focus, + &:hover { + background-color: $navbar-hover-bg-color; + } + } + + .navbar-form { + border-color: $navbar-bg-color; + + .input-sm { + margin-top: 2px; + } + + input[type="search"] { + background-color: $navbar-input-bg-color; + border-color: $navbar-input-border-color; + + &:focus, + &:active { + background-color: $navbar-input-focus-bg-color; + } + } + } + + .navbar-toggle { + border: 1px solid $navbar-bg-color; + + &.active, + &:focus, + &:hover { + background-color: $navbar-hover-bg-color; + } + } + + .navbar-collapse { + border-color: $navbar-bg-color; + } +} + +@media (max-width: 768px) { + #cse-search-box { + margin-top: 0; + margin-bottom: 0; + } +} + +// Landing page features styles. +$landing-feature-1-bg-color: #fff; +$landing-feature-2-bg-color: #fafafa; + +.landing-feature-1 { + background-color: $landing-feature-1-bg-color; + padding-top: 20px; + padding-bottom: 30px; + text-align: center; +} + +.landing-feature-2 { + background-color: $landing-feature-2-bg-color; + padding-top: 20px; + padding-bottom: 30px; + text-align: center; +} + +.landing-feature-1, +.landing-feature-2 { + font-size: 16px; + line-height: 28px; +} + +// Landing page +.landing-context { + .lang-list { + font-size: 18px; + } +} + +// Docs layout specific +$sidebar-border-color: #fff; +$sidebar-hover-border-color: #66bb6a; + +.sidebar { + margin-top: 40px; + + ul.sidebar-nav { + list-style-type: none; + padding: 0; + + li { + &.sidebar-nav-heading { + padding: 10px 0; + margin: 0; + display: block; + font-size: 16px; + font-weight: 300; + } + + a { + padding: 4px 0; + display: block; + border-right: 2px solid $sidebar-border-color;; + + &:focus { + text-decoration: none; + } + + &:active, + &:hover { + border-right: 2px solid $sidebar-hover-border-color; + text-decoration: none; + } + + .caret { + float: right; + margin-top: 8px; + margin-right: 10px; + } + } + + &.active { + a { + border-right: 2px solid $sidebar-hover-border-color; + } + } + } + + ul.sidebar-nav { + padding-left: 10px; + } + } +} + +@media (min-width: 992px) { + .sidebar-toggle { + display: none; + } + + .sidebar { + &.collapse { + display: block; + } + } +} + +// FAQ page +.faq-context { + h4 { + margin-top: 30px; + } +} + +colgroup { + .col-param { + width: 25%; + } + + .col-description { + width: 75%; + } +} + +$table-params-border-color: #81c784; +$table-params-head-color: #fff; +$table-params-body-bg-color: #e8f5e9; + +.table-params { + border: 1px solid $table-params-border-color; + + thead > tr > th { + color: $table-params-head-color; + border: 1px solid $table-params-border-color; + background-color: $table-params-border-color; + } + + tbody > tr > td { + background-color: $table-params-body-bg-color; + border: 1px solid $table-params-border-color; + } +} + +$table-implicit-border-color: #c0c0c0; +$table-implicit-head-color: #fff; +$table-implicit-body-bg-color: #f0f0f0; + +.table-implicit { + border: 1px solid $table-implicit-border-color; + + thead > tr > th { + color: $table-implicit-head-color; + border: 1px solid $table-implicit-border-color; + background-color: $table-implicit-border-color; + } + + tbody > tr > td { + background-color: $table-implicit-body-bg-color; + border: 1px solid $table-implicit-border-color; + } +} + +$toc-border-color: #c8e6c9; +$toc-color: #757575; + +.toc { + border-left: 4px solid $toc-border-color; + padding-left: 18px; + margin-bottom: 20px; + + h1, + h2 { + font-size: 24px; + color: $toc-color; + margin-bottom: 12px; + } + + ul { + list-style: none; + padding-left: 0; + margin-top: 0; + + li { + line-height: 36px; + font-size: 16px; + font-weight: 400; + } + } +} + +// Roadmap page styles +.roadmap-col-phase { + width: 10%; +} + +.roadmap-col-milestone { + width: 5%; +} + +.roadmap-col-date { + width: 10%; +} + +.roadmap-col-features { + width: 75%; +} + +// Support page styles +.support-col-rules { + width: 30%; +} + +.support-col-notes { + width: 70%; +} + +// Blog styles +.blog-post { + margin-bottom: 60px; + + .blog-post-title { + margin-bottom: 5px; + } + + .blog-post-meta { + margin-bottom: 20px; + } +} + +.gsc-control-cse { + *, + *::before, + *::after { + -webkit-box-sizing: content-box !important; + -moz-box-sizing: content-box !important; + box-sizing: content-box !important; + } +} diff --git a/site/_sass/syntax.scss b/site/_sass/syntax.scss new file mode 100644 index 0000000000..56f2c787a1 --- /dev/null +++ b/site/_sass/syntax.scss @@ -0,0 +1,89 @@ +// +// Copyright 2015 Google +// +// Generated using Base16 Builder +// (https://github.com/chriskempson/base16-builder) + +$base00: #212121; // ---- +$base01: #424242; // --- +$base02: #616161; // -- +$base03: #757575; // - +$base04: #9e9e9e; // + +$base05: #bdbdbd; // ++ +$base06: #e0e0e0; // +++ +$base07: #eee; // ++++ + +$base08: #f44336; // red +$base09: #ff9800; // orange +$base0A: #ffc107; // yellow +$base0B: #4caf50; // green +$base0C: #009688; // aqua +$base0D: #2196f3; // blue +$base0E: #9c27b0; // purple +$base0F: #795548; // brown + +.highlight .hll { background-color: $base06 } +.highlight { background: $base07; color: $base00 } +.highlight .c { color: $base04 } // Comment +.highlight .err { color: $base08 } // Error +.highlight .k { color: $base0E } // Keyword +.highlight .l { color: $base09 } // Literal +.highlight .n { color: $base00 } // Name +.highlight .o { color: $base0C } // Operator +.highlight .p { color: $base00 } // Punctuation +.highlight .cm { color: $base04 } // Comment.Multiline +.highlight .cp { color: $base04 } // Comment.Preproc +.highlight .c1 { color: $base04 } // Comment.Single +.highlight .cs { color: $base04 } // Comment.Special +.highlight .gd { color: $base08 } // Generic.Deleted +.highlight .ge { font-style: italic } // Generic.Emph +.highlight .gh { color: $base00; font-weight: bold } // Generic.Heading +.highlight .gi { color: $base0B } // Generic.Inserted +.highlight .gp { color: $base04; font-weight: bold } // Generic.Prompt +.highlight .gs { font-weight: bold } // Generic.Strong +.highlight .gu { color: $base0C; font-weight: bold } // Generic.Subheading +.highlight .kc { color: $base0E } // Keyword.Constant +.highlight .kd { color: $base0E } // Keyword.Declaration +.highlight .kn { color: $base0C } // Keyword.Namespace +.highlight .kp { color: $base0E } // Keyword.Pseudo +.highlight .kr { color: $base0E } // Keyword.Reserved +.highlight .kt { color: $base0A } // Keyword.Type +.highlight .ld { color: $base0B } // Literal.Date +.highlight .m { color: $base09 } // Literal.Number +.highlight .s { color: $base0B } // Literal.String +.highlight .na { color: $base0D } // Name.Attribute +.highlight .nb { color: $base00 } // Name.Builtin +.highlight .nc { color: $base0A } // Name.Class +.highlight .no { color: $base08 } // Name.Constant +.highlight .nd { color: $base0C } // Name.Decorator +.highlight .ni { color: $base00 } // Name.Entity +.highlight .ne { color: $base08 } // Name.Exception +.highlight .nf { color: $base0D } // Name.Function +.highlight .nl { color: $base00 } // Name.Label +.highlight .nn { color: $base0A } // Name.Namespace +.highlight .nx { color: $base0D } // Name.Other +.highlight .py { color: $base00 } // Name.Property +.highlight .nt { color: $base0C } // Name.Tag +.highlight .nv { color: $base08 } // Name.Variable +.highlight .ow { color: $base0C } // Operator.Word +.highlight .w { color: $base00 } // Text.Whitespace +.highlight .mf { color: $base09 } // Literal.Number.Float +.highlight .mh { color: $base09 } // Literal.Number.Hex +.highlight .mi { color: $base09 } // Literal.Number.Integer +.highlight .mo { color: $base09 } // Literal.Number.Oct +.highlight .sb { color: $base0B } // Literal.String.Backtick +.highlight .sc { color: $base00 } // Literal.String.Char +.highlight .sd { color: $base04 } // Literal.String.Doc +.highlight .s2 { color: $base0B } // Literal.String.Double +.highlight .se { color: $base09 } // Literal.String.Escape +.highlight .sh { color: $base0B } // Literal.String.Heredoc +.highlight .si { color: $base09 } // Literal.String.Interpol +.highlight .sx { color: $base0B } // Literal.String.Other +.highlight .sr { color: $base0B } // Literal.String.Regex +.highlight .s1 { color: $base0B } // Literal.String.Single +.highlight .ss { color: $base0B } // Literal.String.Symbol +.highlight .bp { color: $base00 } // Name.Builtin.Pseudo +.highlight .vc { color: $base08 } // Name.Variable.Class +.highlight .vg { color: $base08 } // Name.Variable.Global +.highlight .vi { color: $base08 } // Name.Variable.Instance +.highlight .il { color: $base09 } // Literal.Number.Integer.Long -- cgit v1.2.3