rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Revamp header, headings, aside spacing

Browse Source 
Gradients caused artifacts in Safari, layout was feeling a little loose
This commit is contained in:
Mark Otto 2020-12-02 00:32:51 +02:00 committed by XhmikosR
parent 3ef8483c5d
commit 153f6c72ce
4 changed files with 18 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/5.0/examples/cheatsheet-rtl/index.html
View File

@ -11,15 +11,15 @@ direction: rtl
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
<div class="container-fluid d-flex align-items-center">
<h1 class="d-flex align-items-center text-white mb-0">
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
<img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
ورقة غش
</h1>
<a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
</div>
</header>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-3 px-xl-0">
<h2 class="h6 d-block pt-3 pt-xl-5 pb-2 pb-xl-3 border-bottom">على هذه الصفحة</h2>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2>
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">

24
site/content/docs/5.0/examples/cheatsheet/cheatsheet.css
View File

@ -94,12 +94,11 @@ body {
/* rtl:end:ignore */
z-index: 1030;
grid-column: 1 / span 3;
min-height: 6rem;
}
.bd-aside,
.bd-cheatsheet {
padding-top: 6rem;
padding-top: 4rem;
}
/**
@ -117,34 +116,23 @@ body {
.bd-aside {
grid-area: 1 / 3;
scroll-margin-top: 6rem;
scroll-margin-top: 4rem;
}
.bd-cheatsheet section,
.bd-cheatsheet section > h2 {
top: 6rem;
scroll-margin-top: 6rem;
top: 2rem;
scroll-margin-top: 2rem;
}
.bd-cheatsheet section > h2 {
background-image: linear-gradient(to bottom, #fff, transparent);
grid-column: 1 / span 2;
}
.bd-cheatsheet section > h2::before {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 17.5%;
content: "";
background-image: linear-gradient(to bottom, #fff calc(100% - 2rem), transparent);
}
.bd-cheatsheet article,
.bd-cheatsheet .bd-heading {
top: 12rem;
scroll-margin-top: 12rem;
top: 8rem;
scroll-margin-top: 8rem;
}
.bd-cheatsheet .bd-heading {

24
site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css
View File

@ -92,12 +92,11 @@ body {
left: 0;
z-index: 1030;
grid-column: 1 / span 3;
min-height: 6rem;
}
.bd-aside,
.bd-cheatsheet {
padding-top: 6rem;
padding-top: 4rem;
}
/**
@ -115,34 +114,23 @@ body {
.bd-aside {
grid-area: 1 / 3;
scroll-margin-top: 6rem;
scroll-margin-top: 4rem;
}
.bd-cheatsheet section,
.bd-cheatsheet section > h2 {
top: 6rem;
scroll-margin-top: 6rem;
top: 2rem;
scroll-margin-top: 2rem;
}
.bd-cheatsheet section > h2 {
background-image: linear-gradient(to bottom, #fff, transparent);
grid-column: 1 / span 2;
}
.bd-cheatsheet section > h2::before {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 17.5%;
content: "";
background-image: linear-gradient(to bottom, #fff calc(100% - 2rem), transparent);
}
.bd-cheatsheet article,
.bd-cheatsheet .bd-heading {
top: 12rem;
scroll-margin-top: 12rem;
top: 8rem;
scroll-margin-top: 8rem;
}
.bd-cheatsheet .bd-heading {

6
site/content/docs/5.0/examples/cheatsheet/index.html
View File

@ -10,15 +10,15 @@ body_class: "bg-light"
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
<div class="container-fluid d-flex align-items-center">
<h1 class="d-flex align-items-center text-white mb-0">
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
<img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
Cheatsheet
</h1>
<a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
</div>
</header>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-3 px-xl-0">
<h2 class="h6 d-block pt-3 pt-xl-5 pb-2 pb-xl-3 border-bottom">On this page</h2>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">