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);
  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 (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 (width >= 90rem) {
  .about-Wrapper {
    grid-template-areas: 'LeftNav-sidebar content Sidebar';
    grid-template-columns: 1.5fr 4fr 1.5fr;
  }

  .Sidebar {
    display: block;
  }
}