blob: 1574791b089543b1cdcd74aeb18489986597acfb [file] [log] [blame]
/*!
* Copyright 2021 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.
*/
/**
* Typography should be imported first to ensure expected CSS
* inheritance on text elements.
*/
@import url('./typography/typography.css');
@import url('./button/button.css');
@import url('./breadcrumb/breadcrumb.css');
@import url('./chip/chip.css');
@import url('./clipboard/clipboard.css');
@import url('./color/color.css');
@import url('./footer/footer.css');
@import url('./form/form.css');
@import url('./gopher/gopher.css');
@import url('./header/header.css');
@import url('./icon/icon.css');
@import url('./message/message.css');
@import url('./modal/modal.css');
@import url('./outline/tree.css');
@import url('./tooltip/tooltip.css');
:root {
/* Padding at the left and right of the viewport. */
--gutter: 1rem;
/* Margin between containers in the grid layout. */
--gap: 1rem;
/* The margin placed above elements scrolled to by clicking hash links. */
--scroll-margin: calc(
var(--js-sticky-header-height, 3.5rem) + var(--js-sticky-nav-height, 0) + 2rem
);
/* Default styles for page elements. */
--border: 0.0625rem solid var(--color-border);
--border-radius: 0.25rem;
--box-shadow: 0 0 0.375rem 0 rgb(0 0 0 / 25%);
--focus-box-shadow: 0 0 0.0625rem 0.0625rem rgba(0, 112, 210, 0.6);
}
[data-theme='dark'] {
--box-shadow: 0 0.3125rem 0.9375rem rgb(0 0 0 / 45%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--box-shadow: 0 0.3125rem 0.9375rem rgb(0 0 0 / 45%);
}
}
@media (min-width: 50rem) {
:root {
--gutter: 1.5rem;
--gap: 2rem;
--scroll-margin: calc(
var(--js-sticky-header-height, 3.5rem) + var(--js-sticky-nav-height, 0) + 1rem
);
}
}
@media (min-width: 80rem) {
:root {
--gutter: 2rem;
}
}
@media (min-width: 112rem) {
:root {
--gutter: 2.5rem;
}
}
*:target {
scroll-margin-top: var(--scroll-margin);
}
body {
background-color: var(--color-background);
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 23.5rem;
/**
* This is used to programatically detect whether overflow needs to be altered
* to prevent jitter when focusing within fixed elements on iOS.
* It also must be set to 'touch' for the fix to work.
*/
-webkit-overflow-scrolling: touch;
}
.go-Container {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
margin-bottom: 5rem;
}
.go-Content {
display: flex;
flex-flow: column;
gap: 1rem;
margin: 0 auto;
max-width: 63rem;
min-height: 32rem;
padding: 2rem var(--gutter);
width: 100%;
}
.go-Content--center {
justify-content: center;
margin: auto;
}