blob: a5b07253b9c6949ae17098e0ac6ae6d58b009d19 [file] [log] [blame]
/*
* Copyright 2022 The Go Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
.about-Wrapper ul {
list-style-type: disc;
padding-left: 2em;
}
.about-Wrapper li {
margin: 0.5em 0;
}
.about-Wrapper b {
font-weight: bold;
}
a.btn {
background: var(--color-button);
border-radius: 0.3125rem;
color: var(--white);
display: block;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1rem;
margin-top: 1rem;
padding: 0.625rem;
text-align: center;
text-decoration: none;
}
.about-Content {
grid-area: content;
padding: 0;
}
.about-Content ul {
overflow-wrap: break-word;
}
.about-Content h1 {
font-size: 2.25rem;
font-weight: 400;
line-height: 2rem;
}
.about-Content h2 {
font-size: 1.5rem;
font-weight: 400;
line-height: 2rem;
}
.about-Content h3 {
font-size: 1.125rem;
font-weight: 400;
line-height: 2rem;
}
.about-Content p {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5rem;
}
.about-Wrapper {
display: grid;
gap: var(--gap);
grid-template-areas: 'content';
margin: 2rem auto 0;
max-width: 110rem;
padding: 0 var(--gutter);
}
.Sidebar {
display: none;
grid-area: Sidebar;
margin-top: 6rem;
}
.Sidebar a {
width: 7.5rem;
}
.Sidebar h4 {
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
}
.Sidebar p,
.Sidebar-faq .link {
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
.Sidebar-faq h4 {
font-size: 0.813rem;
margin-bottom: 0.375rem;
margin-top: 1.25rem;
}
.Sidebar-faq p {
margin-bottom: 0.625rem;
margin-top: 0;
}
.Sidebar-socialLinks {
align-items: center;
display: flex;
}
.Sidebar-socialLinks a {
display: flex;
margin-right: 0.675rem;
width: unset;
}
.LeftNav-columns {
display: flex;
}
.LeftNav-sidebar {
display: none;
grid-area: LeftNav-sidebar;
height: 100vh;
overflow: auto;
padding: 0;
position: sticky;
top: 0;
}
.LeftNav {
display: flex;
flex-direction: column;
}
.LeftNav a {
align-items: center;
display: flex;
padding-bottom: 0.675rem;
padding-top: 0.675rem;
text-decoration: none;
}
.LeftNav a span {
color: var(--color-text-subtle);
flex: 30;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
margin: 0 0.75rem;
}
.LeftNav .LeftSubnav a span {
font-size: 0.875rem;
font-weight: 400;
}
.LeftSubnav a {
padding-left: 1rem;
}
.LeftNav a.active,
.LeftNav a:hover,
.LeftNav a:active,
.LeftNav a:focus {
background: var(--color-background-info);
}
.LeftNav a.active span,
.LeftNav a:hover span,
.LeftNav a:active span,
.LeftNav a:focus span {
color: var(--color-text);
}
.LeftNav ul.LeftSubnav li a.active,
.LeftNav ul.LeftSubnav li a:hover,
.LeftNav ul.LeftSubnav li a:active,
.LeftNav ul.LeftSubnav li a:focus {
background: var(--color-background-accented);
}
.LeftSubnav {
list-style: none;
margin-bottom: unset;
margin-top: unset;
padding: unset;
}
.LeftSubnav img {
flex: 1;
visibility: hidden;
}
.LeftSubnav a.active img,
.LeftSubnav a:hover img,
.LeftSubnav a:focus img,
.LeftSubnav a:active img {
visibility: visible;
}
ul.LeftSubnav {
padding-left: unset;
}
.LeftSubnav li {
list-style: none;
margin: unset;
}
@media (min-width: 50rem) {
.about-Wrapper {
grid-template-areas: 'LeftNav-sidebar content';
grid-template-columns: 1fr 3fr;
margin-top: 3rem;
}
.about-Content {
padding: 0;
}
.LeftNav-sidebar {
display: block;
}
}
@media only screen and (min-width: 90rem) {
.about-Wrapper {
grid-template-areas: 'LeftNav-sidebar content Sidebar';
grid-template-columns: 1.5fr 4fr 1.5fr;
}
.Sidebar {
display: block;
}
}