Skip to content

Commit

Permalink
tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Jan 31, 2022
1 parent 1996de1 commit a96ec94
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 20 deletions.
4 changes: 2 additions & 2 deletions site/layouts/partials/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<footer class="bd-footer py-3 py-md-5 mt-5 bg-light">
<div class="container py-3 py-md-5 px-4 px-md-3">
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<div class="col-lg-3 mb-3">
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
Expand Down
36 changes: 18 additions & 18 deletions site/layouts/partials/home/masthead-followup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="masthead-followup-icon d-inline-block mb-3" style="color: var(--bs-indigo);">
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Get started anyway you&nbsp;want</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started anyway you&nbsp;want</h2>
<p class="lead fw-normal">
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
</p>
Expand Down Expand Up @@ -47,7 +47,7 @@ <h3 class="fw-semibold">Include via CDN</h3>
<div class="masthead-followup-icon d-inline-block mb-3 text-primary">
<svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Customize everything with&nbsp;Sass</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
<p class="lead fw-normal">
Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
</p>
Expand Down Expand Up @@ -107,9 +107,9 @@ <h3>Include what you need</h3>
<div class="masthead-followup-icon d-inline-block mb-3" style="color: var(--bs-pink);">
<svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Build and extend in real-time with CSS&nbsp;variables</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
<p class="lead fw-normal">
Bootstrap 5 is constantly evolving to better utilize CSS variables across global styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On specific components and utilities, CSS variables are scoped to the relevant class and can easily be overridden yourself or with utilities. They're even backed by Sass variable values, so customizing via Sass is still supported, too.
Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
</p>
<p class="d-flex align-items-start flex-column lead fw-normal mb-0">
<a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link fw-semibold mb-3">
Expand All @@ -119,7 +119,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-1">Build and extend in real-time with C
</p>
</div>
<div class="row gx-md-5">
<div class="col-lg-6">
<div class="col-lg-6 mb-3">
<h3 class="fw-semibold">Using CSS variables</h3>
<p>Use any of our <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables">global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
{{ highlight (printf `.component {
Expand All @@ -133,7 +133,7 @@ <h3 class="fw-semibold">Using CSS variables</h3>
color: var(--bs-purple);
}`) "scss" "" }}
</div>
<div class="col-lg-6">
<div class="col-lg-6 mb-3">
<h3 class="fw-semibold">Customizing via CSS variables</h3>
<p>Override global, component, or utility class variables to customize Bootstrap just how you like. No need to redeclare each rule, just a new variable value.</p>
{{ highlight (printf `body {
Expand All @@ -160,7 +160,7 @@ <h3 class="fw-semibold">Customizing via CSS variables</h3>
<div class="masthead-followup-icon d-inline-block mb-3 text-info">
<svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Components, meet the Utility API</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
<p class="lead fw-normal">
New in Bootstrap 5, our utilities are now generated by our <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names.
</p>
Expand Down Expand Up @@ -222,14 +222,14 @@ <h6>Quickly customize components</h6>
</section>


<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
<div class="col-lg-8">
<section class="pb-md-5 mb-5">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3 text-warning">
<svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Powerful JavaScript plugins without&nbsp;jQuery</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
<p class="lead fw-normal">
Bring Bootstrap components and more to life with our JavaScript plugins, adding interactive behaviors to dozens of our components—all without jQuery. Easily add expandable areas, modals and offcanvas menus, popovers and tooltips, and so much more. JavaScript in Bootstrap is HTML-first, which means adding plugins is as easy as adding <code>data</code> attributes. Need more control? You can also include plugins programmatically.
Easily add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. JavaScript in Bootstrap is HTML-first, which means adding plugins is as easy as adding <code>data</code> attributes. Need more control? Include individual plugins programmatically.
</p>
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link fw-semibold">
Expand All @@ -238,8 +238,8 @@ <h2 class="display-5 mb-3 fw-semibold lh-1">Powerful JavaScript plugins without&
</a>
</p>
</div>
<div class="row g-5">
<div class="col-lg-6">
<div class="row gx-5">
<div class="col-lg-6 mb-3">
<h3 class="fw-semibold">Data attribute API</h3>
<p>Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.</p>
<div class="p-4 mb-3 border rounded-3">
Expand Down Expand Up @@ -268,14 +268,14 @@ <h3 class="fw-semibold">Data attribute API</h3>
`) "html" "" }}
<p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p>
</div>
<div class="col-lg-6">
<div class="col-lg-6 mb-3">
<h3 class="fw-semibold">Comprehensive set of plugins</h3>
<p>Bootstrap features a dozen components that you can drop into any project. Drop them in all at once, or choose just the ones you need.</p>
<p>Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.</p>
<hr class="my-4">
<div class="row g-3">
{{- range $plugin := .Site.Data.plugins -}}
{{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
<div class="col-md-6 mb-2">
<div class="col-sm-6 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">
<h4 class="mb-1 fs-5 fw-semibold">{{ $plugin.name }}</h4>
<small class="text-muted">{{ $plugin.description }}</small>
Expand All @@ -293,7 +293,7 @@ <h4 class="mb-1 fs-5 fw-semibold">{{ $plugin.name }}</h4>
<div class="masthead-followup-icon d-inline-block mb-3 bd-text-purple-bright">
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Personalize it with Bootstrap&nbsp;Icons</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
<p class="lead fw-normal">
<a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,500 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
</p>
Expand All @@ -317,7 +317,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-1">Personalize it with Bootstrap&nbsp;I
<div class="masthead-followup-icon d-inline-block mb-3 text-warning">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 mb-3 fw-semibold lh-1">Make it yours with official Bootstrap Themes</h2>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstrap Themes</h2>
<p class="lead fw-normal">
Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
Expand Down

0 comments on commit a96ec94

Please sign in to comment.