static/frontend/about/about.css

/*
 * 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);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1rem;
    border-radius: 0.3125rem;
    color: #FFF;
    display: block;
    padding: 0.625rem;
    margin-top: 1rem;
    text-align: center;
    text-decoration: none;
}

.about-Content {
    padding: 0;
}
.about-Content ul {
    overflow-wrap: break-word;
}
.about-Content h1 {
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2rem;
}
.about-Content h2 {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2rem;
}
.about-Content h3 {
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 2rem;
}
.about-Content p {
    font-weight: 400;
    font-size: 0.875rem;
    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);
}
.about-Content {
    grid-area: content;
}
.Sidebar {
    display: none;
    grid-area: Sidebar;
    margin-top: 6rem;
}
.Sidebar a {
    width: 7.5rem;
}
.Sidebar h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
}
.Sidebar p, .Sidebar-faq .link {
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5rem;
}
.Sidebar-faq h4 {
    font-size: 0.813rem;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
}
.Sidebar-faq p {
    margin-top: 0;
    margin-bottom: 0.625rem;
}
.Sidebar-socialLinks {
    display: flex;
    align-items: center;
}
.Sidebar-socialLinks a {
    display: flex;
    width: unset;
    margin-right: 0.675rem;
}
.LeftNav-columns {
    display: flex;
}

.LeftNav-sidebar {
    display: none;
    grid-area: LeftNav-sidebar;
    padding: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: auto;
}

.LeftNav {
    display: flex;
    flex-direction: column;
}

.LeftNav a {
    display: flex;
    align-items: center;
    padding-bottom: 0.675rem;
    padding-top: 0.675rem;
    text-decoration: none;
}

.LeftNav a span {
    flex: 30;
    margin: 0 0.75rem;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-text-subtle);
}


.LeftNav .LeftSubnav a span {
    font-size: 0.875rem;
    font-weight: 400;
}

.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;
    padding: unset;
    margin-top: unset;
    margin-bottom: unset;
}

.LeftSubnav a {
    padding-left: 1rem;
}

.LeftSubnav img {
    visibility: hidden;
    flex: 1;
}

.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 {
    margin: unset;
    list-style: none;
}

.LeftNav-columns .LeftNav .LeftSubnav a,
.LeftNav .LeftSubnav a {
    border-bottom: unset;
}

@media (min-width: 50rem) {
    .about-Wrapper {
        margin-top: 3rem;
        grid-template-columns: 1fr  3fr;
        grid-template-areas:
        "LeftNav-sidebar content";
    }
    .about-Content {
        padding: 0
    }
    .LeftNav-sidebar {
        display: block;
    }
}
@media only screen and (min-width: 90rem) {
    .about-Wrapper {
        grid-template-columns: 1.5fr 4fr 1.5fr;
        grid-template-areas:
        "LeftNav-sidebar content Sidebar";
    }
    .Sidebar {
        display: block;
    }
}