Guides layout fixes (#51385)
* Moving $gray-900 slightly darker to increase contrast ratios in body * Hn to white in dark mode * “Guides” logo word mark to white * Fixing yellow block overlap in subCol * Setting sidebar for intermediate desktop range * Fixing missing bottom border on interstitials due to dd collision * Simplifying layout, adding break points * pointer cursor on code copy * Fixing border regression on code interstitial
This commit is contained in:
parent
31e795ba30
commit
68b20b6513
@ -63,11 +63,11 @@
|
||||
}
|
||||
} // table
|
||||
|
||||
h3 {
|
||||
h3, h4, h5, h6 {
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: $gray-100;
|
||||
color: #fff;
|
||||
} // a, a:link, a:visited
|
||||
} // h3
|
||||
|
||||
@ -110,6 +110,9 @@
|
||||
header#page_header {
|
||||
nav#feature_nav {
|
||||
.header-logo {
|
||||
a, a:link, a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
span#version_switcher {
|
||||
color: $gray-400;
|
||||
|
||||
|
@ -55,29 +55,11 @@ body.guide {
|
||||
hyphenate-limit-chars: 6 3 2; /* Not Safari */
|
||||
hyphenate-limit-last: always;
|
||||
|
||||
@include media('>tablet') {
|
||||
// On larger screens, set a width of 45-75 characters, using em as ch
|
||||
// has too much variation between various fonts
|
||||
min-width: 23em;
|
||||
max-width: 38em;
|
||||
}
|
||||
|
||||
margin: 0 0 0.75em 0; // Space after paragraph
|
||||
text-align: left;
|
||||
|
||||
} // p
|
||||
|
||||
table,
|
||||
ul,
|
||||
.interstitial {
|
||||
@include media('>tablet') {
|
||||
min-width: 23em;
|
||||
max-width: 38em;
|
||||
text-align: left;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
@ -271,7 +253,9 @@ body.guide {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
margin: 0 0 1em 0;
|
||||
|
||||
&:last-child {border-bottom: none;}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
} // dd
|
||||
} // dl
|
||||
|
||||
@ -342,11 +326,10 @@ body.guide {
|
||||
:where(body[dir="ltr"]) & { text-align: left; }
|
||||
:where(body[dir="rtl"]) & { text-align: right; }
|
||||
|
||||
@include media('>desktop') {
|
||||
width: 60vw;
|
||||
max-width: calc(55rem + 400px);
|
||||
@include media('>desktop') { // 1024
|
||||
max-width: calc(55rem + 420px);
|
||||
margin: 0 auto;
|
||||
padding-right: 400px;
|
||||
padding-right: 470px;
|
||||
}
|
||||
} // .wrapper
|
||||
|
||||
@ -682,18 +665,11 @@ body.guide {
|
||||
}
|
||||
}
|
||||
|
||||
main#container {
|
||||
@include media('>desktop') {
|
||||
// padding-right: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
#feature {
|
||||
background-color: $gray-100;
|
||||
|
||||
@include media('>desktop') {
|
||||
background-color: #fff;
|
||||
// padding-right: 400px;
|
||||
}
|
||||
|
||||
#subCol {
|
||||
@ -706,10 +682,18 @@ body.guide {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: calc(40vw - 400px);
|
||||
right: 50px;
|
||||
max-height: calc(100vh - 90px);
|
||||
width: 30vw;
|
||||
max-width: 380px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
@include media('>desktop-ultra-wide') {
|
||||
right: calc(30vw - 400px);
|
||||
}
|
||||
|
||||
@include media('>desktop-hd') { // 1920
|
||||
|
||||
right: calc(40vw - 400px);
|
||||
}
|
||||
|
||||
h3.chapter img {
|
||||
@ -768,12 +752,15 @@ body.guide {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.75em;
|
||||
padding-inline-start: 1em;
|
||||
max-width: unset;
|
||||
@include media('>desktop') {
|
||||
max-width: 310px;
|
||||
width: 310px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-weight: 400;
|
||||
@include media('>desktop') {
|
||||
width: 320px;
|
||||
width: 310px;
|
||||
}
|
||||
} // li
|
||||
} // ul
|
||||
|
@ -13,6 +13,8 @@ intermediate whitespace looks uniform. */
|
||||
background-size: 36px 36px;
|
||||
border-radius: $base-border-radius;
|
||||
border: 2px solid $gray-500;
|
||||
border-style: solid !important;
|
||||
border-width: 2px !important;
|
||||
min-height: calc(36px + 1.2em);
|
||||
margin: 2em auto;
|
||||
padding: 0.75em !important;
|
||||
@ -33,7 +35,7 @@ intermediate whitespace looks uniform. */
|
||||
}
|
||||
|
||||
&.code {
|
||||
border: none;
|
||||
border: none !important;
|
||||
background-color: $gray-900;
|
||||
min-height: auto; // remove if icon is restored
|
||||
padding-left: 1em !important; // remove if icon is restored
|
||||
@ -42,6 +44,7 @@ intermediate whitespace looks uniform. */
|
||||
|
||||
button.clipboard-button {
|
||||
color: $gray-100;
|
||||
cursor: pointer;
|
||||
background-color: $gray-700;
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 4px;
|
||||
|
@ -51,7 +51,7 @@ $gray-600: #666666;
|
||||
$gray-650: #505050;
|
||||
$gray-700: #3A3939;
|
||||
$gray-800: #343434;
|
||||
$gray-900: #2E2E2E;
|
||||
$gray-900: #292929;
|
||||
$gray-1000: #181818;
|
||||
|
||||
$note: #FFD600;
|
||||
|
Loading…
Reference in New Issue
Block a user