From 6ca54573a9bdf2062fc863e4d1b9305b5aa01ecd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 31 May 2020 05:00:08 +0300 Subject: Update v5 homepage to match v4.5's changes --- site/assets/scss/_buttons.scss | 7 +- site/assets/scss/_content.scss | 4 + site/assets/scss/_masthead.scss | 48 +++----- site/layouts/_default/single.html | 26 ++++- site/layouts/partials/home/masthead-followup.html | 125 +++++++++++++-------- site/layouts/partials/home/masthead.html | 20 ++-- site/layouts/partials/icons/circle-square.svg | 4 + site/layouts/partials/icons/cloud-fill.svg | 3 + site/layouts/partials/icons/code.svg | 3 + site/layouts/partials/icons/download.svg | 1 - site/layouts/partials/icons/droplet-fill.svg | 3 + site/layouts/partials/icons/import.svg | 1 - site/layouts/partials/icons/lightning.svg | 1 - .../static/docs/5.0/assets/img/bootstrap-icons.png | Bin 0 -> 52397 bytes .../docs/5.0/assets/img/bootstrap-icons@2x.png | Bin 0 -> 154938 bytes .../5.0/assets/img/bootstrap-themes-collage.png | Bin 0 -> 74829 bytes .../5.0/assets/img/bootstrap-themes-collage@2x.png | Bin 0 -> 244640 bytes .../docs/5.0/assets/img/bootstrap-themes.png | Bin 26640 -> 88695 bytes .../docs/5.0/assets/img/bootstrap-themes@2x.png | Bin 80588 -> 278159 bytes 19 files changed, 150 insertions(+), 96 deletions(-) create mode 100644 site/layouts/partials/icons/circle-square.svg create mode 100644 site/layouts/partials/icons/cloud-fill.svg create mode 100644 site/layouts/partials/icons/code.svg delete mode 100644 site/layouts/partials/icons/download.svg create mode 100644 site/layouts/partials/icons/droplet-fill.svg delete mode 100644 site/layouts/partials/icons/import.svg delete mode 100644 site/layouts/partials/icons/lightning.svg create mode 100644 site/static/docs/5.0/assets/img/bootstrap-icons.png create mode 100644 site/static/docs/5.0/assets/img/bootstrap-icons@2x.png create mode 100644 site/static/docs/5.0/assets/img/bootstrap-themes-collage.png create mode 100644 site/static/docs/5.0/assets/img/bootstrap-themes-collage@2x.png diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index 0ed47855f..6a2d703e6 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -4,14 +4,15 @@ .btn-bd-primary { font-weight: 600; - color: $bd-purple-bright; + color: $white; + background-color: $bd-purple-bright; border-color: $bd-purple-bright; &:hover, &:active { color: $white; - background-color: $bd-purple-bright; - border-color: $bd-purple-bright; + background-color: darken($bd-purple-bright, 10%); + border-color: darken($bd-purple-bright, 10%); } &:focus { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f238fdf72..a6c1639b0 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -68,3 +68,7 @@ .bd-text-purple-bright { color: $bd-purple-bright; } + +.bd-bg-purple-bright { + background-color: $bd-purple-bright; +} diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index e524f271a..770815a5a 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -1,6 +1,10 @@ .bd-masthead { padding: 3rem 0; - background-image: linear-gradient(45deg, #fafafa, #f5f5f5); + background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%); + + @include media-breakpoint-up(sm) { + padding: 5rem 0; + } h1 { @include font-size(4rem); @@ -15,40 +19,24 @@ padding: .8rem 2rem; font-weight: 600; } - - @include media-breakpoint-up(sm) { - padding: 5rem 0; + .lead { + @include font-size(1.5rem); + font-weight: 400; + color: $gray-700; } } -.lead-lg { - @include font-size(1.5rem); -} - -.home-icon { - width: 6rem; - height: 6rem; - @include border-radius(25%); - box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); -} - -.home-icon-purple { - background-image: linear-gradient(180deg, $pink, $purple); -} - -.home-icon-blue { - background-image: linear-gradient(180deg, $teal, $blue); -} - -.home-icon-yellow { - background-image: linear-gradient(180deg, $yellow, $orange); -} - @include media-breakpoint-up(md) { .mw-md-75 { max-width: 75%; } } -.half-rule { - width: 6rem; - margin: 2rem 0; +.masthead-followup-icon { + padding: .75rem; + background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01)); + @include border-radius(.75rem); + box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1); +} + +.masthead-followup-svg { + filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125)); } diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 0ce75ce28..fd228314f 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -13,8 +13,10 @@

{{ .Title | markdownify }}

{{ .Page.Params.Description | markdownify }}

{{ if eq .Title "Examples" }} - Download source code - Download Examples +
+ Download examples + Download source code +
{{ end }} {{ partial "ads" . }} @@ -23,6 +25,26 @@
{{ .Content }} + + {{ if eq .Title "Examples" }} +
+
+
+
+ {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }} +
+

Go further with Bootstrap Themes

+

+ Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. +

+ Browse themes +
+ Bootstrap Themes +
+ {{ end }}
diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 13d42a282..61a2057c0 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -1,54 +1,87 @@ -{{ "" | safeHTML }} - -
-
- {{ partial "icons/import.svg" (dict "width" "48" "height" "48") }} -
-

Installation

-

- Include Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor. Package managed installs don’t include documentation, but do include our build system and readme. -

- Read installation docs -
- {{ highlight "npm install bootstrap" "sh" "" }} - {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }} +
+
+
+
+ {{ partial "icons/code.svg" (dict "width" "32" "height" "32") }} +
+

Installation

+

+ Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor. +

+

Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.

+ Read installation docs +
+
+ {{ highlight "npm install bootstrap" "sh" "" }} + {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }} +
-
-
-
- {{ partial "icons/download.svg" (dict "width" "48" "height" "48") }} -
-

BootstrapCDN

-

- Use the BootstrapCDN to deliver fast, cached, and compiled versions of Bootstrap’s CSS and JavaScript. No jQuery is required, but don't forget to include Popper.js for some components. -

- Explore the docs -
-

CSS only

- {{ highlight (printf (``) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }} -

JS and Popper.js

- {{ highlight (printf (` +
+
+
+ {{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }} +
+

BootstrapCDN

+

+ When you only need to include Bootstrap’s compiled CSS or JS, you can use BootstrapCDN. +

+

+ See it in action with our simple starter template, or browse the examples to jumpstart your next project. +

+ Explore the docs +
+
+ {{ highlight (printf (` +`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }} + {{ highlight (printf (` -`) .Site.Params.cdn.popper (.Site.Params.cdn.popper_hash | safeHTMLAttr) .Site.Params.cdn.js (.Site.Params.cdn.js_hash | safeHTMLAttr)) "html" "" }} + + `) .Site.Params.cdn.popper (.Site.Params.cdn.popper_hash | safeHTMLAttr) .Site.Params.cdn.js (.Site.Params.cdn.js_hash | safeHTMLAttr)) "html" "" }} +
-
-
-
- {{ partial "icons/lightning.svg" (dict "width" "48" "height" "48") }} +
+
+
+ {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }} +
+

Bootstrap Icons

+

+ For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation. +

+

+ Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implemented in several ways, and can be styled with CSS. +

+ Get Bootstrap Icons +
+
+ Bootstrap Icons +
-

Official Themes

-

- Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools. -

- Browse themes -
- Bootstrap Themes + +
+
+
+ {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }} +
+

Official Themes

+

+ Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. +

+

+ Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. +

+ Browse themes +
+
+ Bootstrap Icons +
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index 45a8c1120..599d493e3 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -1,23 +1,19 @@ -
-
+
+
{{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }}
-
-

Bootstrap

-

- Build responsive, mobile-first projects for the web with the world’s most popular open source front-end component library. -

-

- Quickly prototype your ideas, spin up internal tools, or build your entire production app or site with powerful features and customization like Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. +

+

Build fast, responsive sites with Bootstrap

+

+ Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

- Get started - Download + Get started + Download
-

Currently v{{ .Site.Params.current_version }} · diff --git a/site/layouts/partials/icons/circle-square.svg b/site/layouts/partials/icons/circle-square.svg new file mode 100644 index 000000000..2293c5f16 --- /dev/null +++ b/site/layouts/partials/icons/circle-square.svg @@ -0,0 +1,4 @@ + + + + diff --git a/site/layouts/partials/icons/cloud-fill.svg b/site/layouts/partials/icons/cloud-fill.svg new file mode 100644 index 000000000..1a051b8da --- /dev/null +++ b/site/layouts/partials/icons/cloud-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/layouts/partials/icons/code.svg b/site/layouts/partials/icons/code.svg new file mode 100644 index 000000000..3494182d8 --- /dev/null +++ b/site/layouts/partials/icons/code.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/layouts/partials/icons/download.svg b/site/layouts/partials/icons/download.svg deleted file mode 100644 index b00ebabae..000000000 --- a/site/layouts/partials/icons/download.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/site/layouts/partials/icons/droplet-fill.svg b/site/layouts/partials/icons/droplet-fill.svg new file mode 100644 index 000000000..fd9ba0718 --- /dev/null +++ b/site/layouts/partials/icons/droplet-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/site/layouts/partials/icons/import.svg b/site/layouts/partials/icons/import.svg deleted file mode 100644 index deaeb090d..000000000 --- a/site/layouts/partials/icons/import.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/site/layouts/partials/icons/lightning.svg b/site/layouts/partials/icons/lightning.svg deleted file mode 100644 index 02ae006d3..000000000 --- a/site/layouts/partials/icons/lightning.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/site/static/docs/5.0/assets/img/bootstrap-icons.png b/site/static/docs/5.0/assets/img/bootstrap-icons.png new file mode 100644 index 000000000..73f45ee2d Binary files /dev/null and b/site/static/docs/5.0/assets/img/bootstrap-icons.png differ diff --git a/site/static/docs/5.0/assets/img/bootstrap-icons@2x.png b/site/static/docs/5.0/assets/img/bootstrap-icons@2x.png new file mode 100644 index 000000000..48f047205 Binary files /dev/null and b/site/static/docs/5.0/assets/img/bootstrap-icons@2x.png differ diff --git a/site/static/docs/5.0/assets/img/bootstrap-themes-collage.png b/site/static/docs/5.0/assets/img/bootstrap-themes-collage.png new file mode 100644 index 000000000..0a3bf5d69 Binary files /dev/null and b/site/static/docs/5.0/assets/img/bootstrap-themes-collage.png differ diff --git a/site/static/docs/5.0/assets/img/bootstrap-themes-collage@2x.png b/site/static/docs/5.0/assets/img/bootstrap-themes-collage@2x.png new file mode 100644 index 000000000..ad165eb19 Binary files /dev/null and b/site/static/docs/5.0/assets/img/bootstrap-themes-collage@2x.png differ diff --git a/site/static/docs/5.0/assets/img/bootstrap-themes.png b/site/static/docs/5.0/assets/img/bootstrap-themes.png index d1e1fc267..d43dba2a7 100644 Binary files a/site/static/docs/5.0/assets/img/bootstrap-themes.png and b/site/static/docs/5.0/assets/img/bootstrap-themes.png differ diff --git a/site/static/docs/5.0/assets/img/bootstrap-themes@2x.png b/site/static/docs/5.0/assets/img/bootstrap-themes@2x.png index 3876a18ee..13c32337d 100644 Binary files a/site/static/docs/5.0/assets/img/bootstrap-themes@2x.png and b/site/static/docs/5.0/assets/img/bootstrap-themes@2x.png differ -- cgit v1.2.3