diff options
| author | Achilleas Pipinellis <axil@gitlab.com> | 2020-08-12 19:39:34 +0300 |
|---|---|---|
| committer | Achilleas Pipinellis <axil@gitlab.com> | 2020-08-20 11:43:40 +0300 |
| commit | af60dc91aadde46e08fc58b9a5876f0b7192a66e (patch) | |
| tree | 4623d3c0ea6c541ea8878973adaa3222fd920b0e | |
| parent | 22a05e485c27cd2c4eff8501a80ae1738c8f2d6e (diff) | |
Change the banner's CSS
Make the banner UI similar to the webcast alert box
https://about.gitlab.com/handbook/markdown-guide/#gitlab-webcast-alert-box
| -rw-r--r-- | content/assets/stylesheets/_variables.scss | 4 | ||||
| -rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 11 | ||||
| -rw-r--r-- | content/index.erb | 2 | ||||
| -rw-r--r-- | layouts/banner.html | 6 | ||||
| -rw-r--r-- | layouts/default.html | 2 |
5 files changed, 21 insertions, 4 deletions
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index 51dae131..57435c34 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -173,6 +173,10 @@ $alert-gray-border: $gds-gray-200; //// end of colors conforming with GitLab Design System //// +// Banner +$banner-background: #fba225; +$banner-text: #e14329 !important; + // Badges $badge-gitlab: $color-tanuki-medium; $badge-gitlab-com: $color-tanuki-light; diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index fbced135..7dda7c1b 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -913,6 +913,17 @@ a.global-nav-link { } // End of Pajamas alerts +// Start of banner alert box +// https://about.gitlab.com/handbook/markdown-guide/#gitlab-webcast-alert-box +.alert-banner { + background-color: rgba($banner-background, .3); + border-color: rgba($banner-background, .3); + color: $banner-text; + text-align: center; + margin-top: 20px; +} +// End of banner alert box + .header { z-index: 10; background: $header-background-color; diff --git a/content/index.erb b/content/index.erb index 1d7e0a42..7731e69c 100644 --- a/content/index.erb +++ b/content/index.erb @@ -24,7 +24,7 @@ title: GitLab Documentation <main class="content"> <div class="row px-4 pt-4"> <div class="col-12"> - <div class="d-none d-lg-block"> + <div class="d-lg-block"> <%= render '/banner.*' %> </div> <h1 class="landing-header-title border-bottom-0 font-weight-bold">Welcome to GitLab Docs</h1> diff --git a/layouts/banner.html b/layouts/banner.html index cb59d9a7..77d568eb 100644 --- a/layouts/banner.html +++ b/layouts/banner.html @@ -1,8 +1,10 @@ <div class="admonition-wrapper note"> - <div class="admonition alert alert-info"> - Help us understand more about why you're visiting the GitLab documentation. + <div class="admonition alert alert-banner"> + <i class="fa fa-gitlab fa-fw" style="color:rgb(107,79,187); font-size:.85em" aria-hidden="true"></i> + Help us understand your experience with GitLab documentation. <a href="https://gitlab.fra1.qualtrics.com/jfe/form/SV_eGaifkfVJ335st7?source=banner" target="_blank" rel="noopener noreferrer"> Take our 5 minute survey! </a> + <i class="fa fa-gitlab fa-fw" style="color:rgb(107,79,187); font-size:.85em" aria-hidden="true"></i> </div> </div> diff --git a/layouts/default.html b/layouts/default.html index 30402638..b20e1e12 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -19,7 +19,7 @@ <div id="js-nav-toggle"></div> </div> <div class="main class js-main-wrapper"> - <div class="d-none d-lg-block"> + <div class="d-lg-block"> <%= render '/banner.*' %> </div> <div class="d-none d-lg-block"> |