_content: update header nav with dropdowns and subnavs
Adds dropdown menus as well as fixed open/closed states. Adds submenus to mobile header nav. Change-Id: I0fdf6fd81008857b1ed28f0a8388de8e004eb722 Reviewed-on: https://go-review.googlesource.com/c/website/+/435522 Reviewed-by: Jamal Carvalho <jamal@golang.org> Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com> TryBot-Result: Gopher Robot <gobot@golang.org> Run-TryBot: Hyang-Ah Hana Kim <hyangah@gmail.com>
This commit is contained in:
Conor Britain
Jamal Carvalho
Родитель
2a33458910
Коммит
3cbdc17ec9
|
|
@ -6,9 +6,10 @@ rules:
|
|||
require-jsdoc: 'off'
|
||||
indent: 'off'
|
||||
arrow-parens: 'off'
|
||||
comma-dangle: ['error', {'functions': 'never'}]
|
||||
overrides:
|
||||
- files:
|
||||
- "*.ts"
|
||||
- '*.ts'
|
||||
parser: '@typescript-eslint/parser'
|
||||
env:
|
||||
browser: true
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
/* Colors */
|
||||
--gray-1: #202224;
|
||||
--gray-2: #2D2D2D;
|
||||
--gray-2: #2d2d2d;
|
||||
--gray-3: #555759;
|
||||
--gray-4: #6e7072;
|
||||
--gray-5: #848688;
|
||||
|
|
@ -23,19 +23,19 @@
|
|||
--blue-light: #f2fafd;
|
||||
--black-1: #000;
|
||||
--black-2: #111111;
|
||||
--deep-cerulian: #007F9f;
|
||||
--deep-cerulian: #007f9f;
|
||||
--green: #3a6e11;
|
||||
--green-light: #5fda64;
|
||||
--pink: #c85e7a;
|
||||
--pink-light: #fdecf1;
|
||||
--purple: #542c7d;
|
||||
--shark: #2B2D2F;
|
||||
--shark: #2b2d2f;
|
||||
--slate: #253443; /* Footer background. */
|
||||
--tundora: #414141;
|
||||
--white: #fff;
|
||||
--yellow: #fddd00;
|
||||
--yellow-light: #fff8cc;
|
||||
--testimonial: #007F9f;
|
||||
--testimonial: #007f9f;
|
||||
|
||||
/* Color Intents */
|
||||
--color-brand-primary: var(--turq-dark);
|
||||
|
|
@ -141,36 +141,36 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-theme="auto"] .DarkMode-img {
|
||||
[data-theme='auto'] .DarkMode-img {
|
||||
display: block;
|
||||
}
|
||||
[data-theme="auto"] .LightMode-img {
|
||||
[data-theme='auto'] .LightMode-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
[data-theme="auto"] .DarkMode-img {
|
||||
[data-theme='auto'] .DarkMode-img {
|
||||
display: none;
|
||||
}
|
||||
[data-theme="auto"] .LightMode-img {
|
||||
[data-theme='auto'] .LightMode-img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] .DarkMode-img {
|
||||
[data-theme='dark'] .DarkMode-img {
|
||||
display: block;
|
||||
}
|
||||
[data-theme="dark"] .LightMode-img {
|
||||
[data-theme='dark'] .LightMode-img {
|
||||
display: none;
|
||||
}
|
||||
[data-theme="light"] .DarkMode-img {
|
||||
[data-theme='light'] .DarkMode-img {
|
||||
display: none;
|
||||
}
|
||||
[data-theme="light"] .LightMode-img {
|
||||
[data-theme='light'] .LightMode-img {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
max-height: 100%;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
|
@ -180,7 +180,15 @@ select,
|
|||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p, ol, ul {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -223,7 +231,8 @@ pre .selection,
|
|||
pre .selection-comment {
|
||||
background: var(--yellow);
|
||||
}
|
||||
pre .ln { /* line number */
|
||||
pre .ln {
|
||||
/* line number */
|
||||
color: #999;
|
||||
}
|
||||
pre ins {
|
||||
|
|
@ -264,7 +273,9 @@ a:hover {
|
|||
}
|
||||
@media print {
|
||||
/* display: flex makes the printer slice text lines in half */
|
||||
.Site { display: block; }
|
||||
.Site {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.bluebg {
|
||||
background: var(--color-background-banner);
|
||||
|
|
@ -411,7 +422,8 @@ a.Footer-link--primary {
|
|||
width: auto;
|
||||
}
|
||||
.go-Icon--inverted {
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(13%) hue-rotate(245deg) brightness(103%) contrast(107%);
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(13%)
|
||||
hue-rotate(245deg) brightness(103%) contrast(107%);
|
||||
}
|
||||
.Footer-feedbackButton {
|
||||
background: none;
|
||||
|
|
@ -437,6 +449,7 @@ a.Footer-link--primary {
|
|||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
/* Start nav */
|
||||
.Header-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -468,6 +481,10 @@ a.Footer-link--primary {
|
|||
}
|
||||
.Header-menuItem {
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
.Header-menuItem .js-desktop-menu-hover > i {
|
||||
pointer-events: none;
|
||||
}
|
||||
.Header-menu {
|
||||
align-items: stretch;
|
||||
|
|
@ -479,13 +496,15 @@ a.Footer-link--primary {
|
|||
}
|
||||
|
||||
@media only screen and (min-width: 57.7rem) {
|
||||
.Header, .PlayPage {
|
||||
.Header,
|
||||
.PlayPage {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.Header-menuItem {
|
||||
align-items: stretch;
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
margin: 0 0.3125rem;
|
||||
}
|
||||
.Header-menu {
|
||||
justify-content: flex-end;
|
||||
|
|
@ -494,19 +513,28 @@ a.Footer-link--primary {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
.Header-menuItem a:link,
|
||||
.Header-menuItem a:visited {
|
||||
.Header-menuItem > a:link,
|
||||
.Header-menuItem > a:visited {
|
||||
align-items: center;
|
||||
border-bottom: 0.1875rem solid transparent;
|
||||
border-top: 0.1875rem solid transparent; /* To ensure the text remains centered. */
|
||||
color: var(--color-text);
|
||||
display: inline-flex;
|
||||
margin: 0 0.3125rem;
|
||||
padding: 0 0.9375rem;
|
||||
padding: 0 1.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
.Header--dark
|
||||
.Header-menuItem:hover
|
||||
> a:not(.forced-closed).js-desktop-menu-hover,
|
||||
.Header--dark
|
||||
.Header-menuItem:focus-within
|
||||
> a:not(.forced-closed).js-desktop-menu-hover {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-link);
|
||||
border-color: var(--color-background);
|
||||
}
|
||||
.Header--dark .Header-menuItem a:link,
|
||||
.Header--dark .Header-menuItem a:visited {
|
||||
color: var(--white);
|
||||
|
|
@ -517,9 +545,11 @@ a.Footer-link--primary {
|
|||
font-weight: bold;
|
||||
}
|
||||
.Header-menuItem a:hover {
|
||||
border-bottom-color: var(--white);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.Header-menuItem a:not(.forced-closed):hover {
|
||||
border-bottom-color: var(--white);
|
||||
}
|
||||
.Header-navOpen {
|
||||
background: no-repeat center/2rem url('/images/menu-24px.svg');
|
||||
border: none;
|
||||
|
|
@ -543,6 +573,21 @@ a.Footer-link--primary {
|
|||
width: 85%;
|
||||
z-index: 20;
|
||||
}
|
||||
.NavigationDrawer-submenuItem {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.NavigationDrawer-submenuItem .NavigationDrawer-header {
|
||||
min-height: 4.0625rem;
|
||||
font-size: 1.375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0.5rem;
|
||||
padding-left: 1.5rem;
|
||||
color: var(--color-text-link);
|
||||
}
|
||||
|
||||
.NavigationDrawer.is-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
|
@ -550,7 +595,26 @@ a.Footer-link--primary {
|
|||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 0.0625rem solid #eeeeee;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.NavigationDrawer-listItem.NavigationDrawer-hasSubnav > a i {
|
||||
float: right;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
.NavigationDrawer-listItem.NavigationDrawer-hasSubnav
|
||||
.NavigationDrawer-header
|
||||
a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.NavigationDrawer-listItem .material-icons {
|
||||
color: var(--color-text-link);
|
||||
margin-right: 0.5rem;
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.NavigationDrawer-logo {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
|
|
@ -565,13 +629,27 @@ a.Footer-link--primary {
|
|||
.NavigationDrawer-listItem {
|
||||
font-size: 1.125rem;
|
||||
margin: 0 0.5rem;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
.NavigationDrawer-listItem > div:not(.NavigationDrawer),
|
||||
.NavigationDrawer-listItem a:link,
|
||||
.NavigationDrawer-listItem a:visited {
|
||||
display: block;
|
||||
margin: 0 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@media only screen and (max-width: 57.7rem) {
|
||||
.NavigationDrawer-listItem .Header-socialIcons {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.NavigationDrawer-listItem a.Header-socialIcon {
|
||||
padding: 0 0.5rem;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.NavigationDrawer-listItem--active {
|
||||
background-color: #bfeaf4;
|
||||
border-radius: 0.4rem;
|
||||
|
|
@ -589,6 +667,98 @@ a.Footer-link--primary {
|
|||
background-color: rgba(0, 0, 0, 0.32);
|
||||
display: block;
|
||||
}
|
||||
.Header-submenu {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
list-style-type: none;
|
||||
background: transparent;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
transition: all 0.2s ease;
|
||||
margin-top: 3.5rem;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
border: 0.0625rem solid var(--color-brand-primary);
|
||||
border-width: 0 0.0625rem 0.0625rem;
|
||||
}
|
||||
.Header-menuItem:hover
|
||||
> .js-desktop-menu-hover:not(.forced-closed)
|
||||
~ .Header-submenu,
|
||||
.Header-menuItem:focus-within
|
||||
> .js-desktop-menu-hover:not(.forced-closed)
|
||||
~ .Header-submenu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
}
|
||||
.Header-submenu .Header-submenuItem a:link,
|
||||
.Header-submenu .Header-submenuItem a:visited {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
.Header-submenu p {
|
||||
max-width: 15.5rem;
|
||||
}
|
||||
.Header-submenu a:link:hover,
|
||||
.Header-submenu a:visited:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.125rem solid var(--color-text-link);
|
||||
}
|
||||
|
||||
.Header-submenu .Header-submenuItem {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.Header-submenu .Header-submenuItem p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-subtle);
|
||||
margin-top: 0.55rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.Header-submenu .Header-submenuItem i {
|
||||
margin-left: 0.25rem;
|
||||
transform: translateY(0.1rem); /* to get bottom alignment w/ text */
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.Header-menuItem .Header-submenuItem a:link,
|
||||
.Header-menuItem .Header-submenuItem a:visited {
|
||||
color: var(--color-text-link);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: -0.125rem;
|
||||
}
|
||||
.Header-menu li:nth-child(1) .Header-submenu {
|
||||
width: 18.5rem;
|
||||
left: -1px;
|
||||
}
|
||||
.Header-menu li:nth-child(3) .Header-submenu {
|
||||
left: -12rem;
|
||||
height: 19.275rem;
|
||||
width: 37.25rem;
|
||||
}
|
||||
.Header-menu li:nth-child(5) .Header-submenu {
|
||||
right: -1px;
|
||||
height: 17.65rem;
|
||||
width: 37.25rem;
|
||||
}
|
||||
.Header-socialIcons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.Header-menuItem a.Header-socialIcon {
|
||||
flex: 0 1 auto;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
}
|
||||
.Header-menuItem a.Header-socialIcon:not(:last-child) {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
/* End nav */
|
||||
.Article {
|
||||
color: var(--color-text);
|
||||
margin: 0 auto 1.875rem;
|
||||
|
|
@ -1521,7 +1691,11 @@ a.WhoUsesCaseStudy-librariesViewMoreLink {
|
|||
}
|
||||
.UseCase-logo {
|
||||
align-items: center;
|
||||
background: linear-gradient(10.64deg, var(--color-text-link) 0%, #00a29c 100%);
|
||||
background: linear-gradient(
|
||||
10.64deg,
|
||||
var(--color-text-link) 0%,
|
||||
#00a29c 100%
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
height: 3.75rem;
|
||||
|
|
@ -1908,8 +2082,8 @@ a.WhoUsesCaseStudy-librariesViewMoreLink {
|
|||
background-size: 75rem 75rem;
|
||||
padding: 0 2.25rem 0;
|
||||
}
|
||||
[data-theme="dark"] .Learn-hero .BreadcrumbNav-li:not(:last-child):after,
|
||||
[data-theme="dark"] .Security-hero .BreadcrumbNav-li:not(:last-child):after {
|
||||
[data-theme='dark'] .Learn-hero .BreadcrumbNav-li:not(:last-child):after,
|
||||
[data-theme='dark'] .Security-hero .BreadcrumbNav-li:not(:last-child):after {
|
||||
background: url('/images/icons/arrow-forward.svg') no-repeat;
|
||||
content: ' ';
|
||||
display: block;
|
||||
|
|
@ -1918,8 +2092,12 @@ a.WhoUsesCaseStudy-librariesViewMoreLink {
|
|||
width: 1rem;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) .Learn-hero .BreadcrumbNav-li:not(:last-child):after,
|
||||
:root:not([data-theme='light']) .Security-hero .BreadcrumbNav-li:not(:last-child):after {
|
||||
:root:not([data-theme='light'])
|
||||
.Learn-hero
|
||||
.BreadcrumbNav-li:not(:last-child):after,
|
||||
:root:not([data-theme='light'])
|
||||
.Security-hero
|
||||
.BreadcrumbNav-li:not(:last-child):after {
|
||||
background: url('/images/icons/arrow-forward.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
|
|
@ -3102,7 +3280,11 @@ p.BackgroundQuote-body {
|
|||
}
|
||||
.StarItem-icon {
|
||||
align-items: center;
|
||||
background: linear-gradient(10.64deg, var(--color-brand-primary) 0%, #00a29c 100%);
|
||||
background: linear-gradient(
|
||||
10.64deg,
|
||||
var(--color-brand-primary) 0%,
|
||||
#00a29c 100%
|
||||
);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
height: 1.5rem;
|
||||
|
|
@ -3443,7 +3625,11 @@ a.UseCase-anchorLink.selected::before {
|
|||
color: var(--color-text);
|
||||
}
|
||||
.WhoUsesSubPage-heroImg {
|
||||
background: -webkit-linear-gradient(0deg, var(--color-background-accented) 50vw, #bfeaf4 50vw);
|
||||
background: -webkit-linear-gradient(
|
||||
0deg,
|
||||
var(--color-background-accented) 50vw,
|
||||
#bfeaf4 50vw
|
||||
);
|
||||
display: flex;
|
||||
max-width: 75.75rem;
|
||||
padding-left: 1.5rem;
|
||||
|
|
@ -3465,7 +3651,11 @@ a.UseCase-anchorLink.selected::before {
|
|||
line-height: 3rem;
|
||||
}
|
||||
.WhoUsesSubPage-heroImg {
|
||||
background: -webkit-linear-gradient(0deg, var(--color-background-accented) 40vw, #bfeaf4 40vw);
|
||||
background: -webkit-linear-gradient(
|
||||
0deg,
|
||||
var(--color-background-accented) 40vw,
|
||||
#bfeaf4 40vw
|
||||
);
|
||||
}
|
||||
.WhoUsesSubPage-heroImg img {
|
||||
max-height: 15.625rem;
|
||||
|
|
@ -3477,7 +3667,11 @@ a.UseCase-anchorLink.selected::before {
|
|||
margin-top: 0;
|
||||
}
|
||||
.WhoUsesSubPage-heroInner--caseStudy {
|
||||
background: -webkit-linear-gradient(0deg, var(--color-background-accented) 70vw, #bfeaf4 70vw);
|
||||
background: -webkit-linear-gradient(
|
||||
0deg,
|
||||
var(--color-background-accented) 70vw,
|
||||
#bfeaf4 70vw
|
||||
);
|
||||
flex-direction: row;
|
||||
}
|
||||
.WhoUsesSubPage-heroContent--caseStudy {
|
||||
|
|
@ -3701,7 +3895,8 @@ img.PullQuote-image {
|
|||
color: #999;
|
||||
font-size: smaller;
|
||||
}
|
||||
#blog #content .iframe, #content .image {
|
||||
#blog #content .iframe,
|
||||
#content .image {
|
||||
margin: 20px;
|
||||
}
|
||||
#blog #content .title {
|
||||
|
|
@ -3720,7 +3915,8 @@ img.PullQuote-image {
|
|||
#blog .Article[data-slug='/blog/go-fonts'] code {
|
||||
font-family: 'Go Mono', monospace;
|
||||
}
|
||||
#blog pre, #blog code {
|
||||
#blog pre,
|
||||
#blog code {
|
||||
font-family: monospace;
|
||||
}
|
||||
#blog svg {
|
||||
|
|
@ -3826,7 +4022,8 @@ a.error {
|
|||
text-align: center;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
.Security-gridContainer, .Security-comingSoon {
|
||||
.Security-gridContainer,
|
||||
.Security-comingSoon {
|
||||
padding: 3rem 1.5rem 1rem;
|
||||
}
|
||||
.Security-card .Card-content ul {
|
||||
|
|
@ -3868,7 +4065,7 @@ a.error {
|
|||
justify-content: center;
|
||||
}
|
||||
.Security-comingSoonTitle h3 {
|
||||
color: #71757B;
|
||||
color: #71757b;
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -3881,7 +4078,8 @@ a.error {
|
|||
.Security-getStarted {
|
||||
background: var(--color-brand-primary);
|
||||
}
|
||||
.Security-getStarted, .Security-recentupdates {
|
||||
.Security-getStarted,
|
||||
.Security-recentupdates {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
.Security-getStarted .Security-sectionHeader {
|
||||
|
|
@ -3952,7 +4150,8 @@ a.error {
|
|||
max-width: 100%;
|
||||
}
|
||||
@media only screen and (min-width: 72.75rem) {
|
||||
.Security-getStarted, .Security-recentupdates {
|
||||
.Security-getStarted,
|
||||
.Security-recentupdates {
|
||||
padding: 3.75rem 0 5rem 0;
|
||||
}
|
||||
.Security-getStarted .Security-sectionHeader {
|
||||
|
|
@ -3980,7 +4179,11 @@ a.error {
|
|||
}
|
||||
.Security-secondary-cta {
|
||||
background: #beeaf5;
|
||||
background-image: radial-gradient( 60.0625rem 60.0625rem, var(--color-brand-primary) 50%, #beeaf5 50% );
|
||||
background-image: radial-gradient(
|
||||
60.0625rem 60.0625rem,
|
||||
var(--color-brand-primary) 50%,
|
||||
#beeaf5 50%
|
||||
);
|
||||
background-position: -13rem 50%;
|
||||
background-size: 75rem 75rem;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -4094,7 +4297,9 @@ a.error {
|
|||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.Playground-selectExample, .Playground-selectGoVersion, .Playground-shareURL {
|
||||
.Playground-selectExample,
|
||||
.Playground-selectGoVersion,
|
||||
.Playground-shareURL {
|
||||
background-color: var(--color-background);
|
||||
border-radius: 3px;
|
||||
border: var(--border);
|
||||
|
|
@ -4119,7 +4324,9 @@ a.error {
|
|||
.Playground-controls {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.Playground-selectExample, .Playground-selectGoVersion, .Playground-shareURL {
|
||||
.Playground-selectExample,
|
||||
.Playground-selectGoVersion,
|
||||
.Playground-shareURL {
|
||||
margin: 0 0.4375rem 0 0;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -4171,7 +4378,7 @@ h2.Playground-about {
|
|||
background-color: var(--color-background-accented);
|
||||
border: none;
|
||||
border-radius: 0.1875rem;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.125rem 5px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
color: var(--color-text-link);
|
||||
cursor: pointer;
|
||||
|
|
@ -4184,7 +4391,7 @@ h2.Playground-about {
|
|||
text-decoration: none;
|
||||
}
|
||||
.Button:active {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0.0625rem 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.Button--primary,
|
||||
.Button--primary:link,
|
||||
|
|
@ -4471,10 +4678,12 @@ table.downloadtable {
|
|||
table.downloadtable tr {
|
||||
background-color: var(--color-background-accented);
|
||||
}
|
||||
table.downloadtable tr:nth-child(2n), table.downloadtable tr.first {
|
||||
table.downloadtable tr:nth-child(2n),
|
||||
table.downloadtable tr.first {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
table.downloadtable td, table.downloadtable th {
|
||||
table.downloadtable td,
|
||||
table.downloadtable th {
|
||||
white-space: nowrap;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
|
@ -4487,9 +4696,9 @@ table.downloadtable tr.highlight td {
|
|||
a.downloadBox {
|
||||
display: block;
|
||||
color: #222;
|
||||
border: 1px solid #375EAB;
|
||||
border: 0.0625rem solid #375eab;
|
||||
border-radius: 5px;
|
||||
background: #E0EBF5;
|
||||
background: #e0ebf5;
|
||||
width: 280px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
|
|
@ -4521,13 +4730,15 @@ a.downloadBox:hover .filename {
|
|||
.downloadBox .checksum {
|
||||
font-size: 5pt;
|
||||
}
|
||||
#manual-nav dl, #pkg-examples dl{
|
||||
#manual-nav dl,
|
||||
#pkg-examples dl {
|
||||
margin-left: 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
#manual-nav dd, #pkg-examples dd {
|
||||
#manual-nav dd,
|
||||
#pkg-examples dd {
|
||||
margin: 0 0 0 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.98401 0C6.53334 0 5.18933 0.36268 3.952 1.08801C2.74666 1.79201 1.79201 2.74666 1.08801 3.952C0.362679 5.18933 0 6.53334 0 7.98401C0 9.12534 0.240001 10.2187 0.720001 11.264C1.168 12.2667 1.80266 13.1467 2.62399 13.904C3.45599 14.6507 4.38934 15.2053 5.42401 15.568C5.60534 15.5893 5.744 15.552 5.84 15.456C5.92533 15.3813 5.96799 15.2853 5.96799 15.168V13.792C5.56265 13.888 5.18933 13.9147 4.84799 13.872C4.55999 13.84 4.29866 13.76 4.064 13.632C3.88266 13.5253 3.72268 13.3973 3.58401 13.248C3.48801 13.1307 3.40799 13.008 3.34399 12.88L3.28 12.72C3.17333 12.4427 3.04533 12.2027 2.896 12C2.78933 11.8613 2.67201 11.744 2.54401 11.648L2.39999 11.552C2.09066 11.3493 2.00535 11.2053 2.14401 11.12C2.21868 11.0773 2.32 11.056 2.448 11.056C2.68266 11.0667 2.90134 11.1467 3.104 11.296C3.264 11.4027 3.40266 11.5307 3.51999 11.68L3.664 11.888C3.984 12.4213 4.40534 12.7147 4.92801 12.768C5.25868 12.8 5.60532 12.736 5.96799 12.576C6.01065 12.1493 6.17599 11.792 6.46399 11.504C5.37599 11.376 4.54934 11.072 3.98401 10.592C3.21601 9.95201 2.832 8.93334 2.832 7.53601C2.832 6.70401 3.10933 5.98401 3.664 5.37601C3.58933 5.16267 3.54668 4.93332 3.53601 4.68799C3.50401 4.22932 3.584 3.776 3.776 3.328L3.90399 3.31201C4.02133 3.31201 4.15465 3.32799 4.30399 3.35999C4.50665 3.40265 4.736 3.48267 4.992 3.60001C5.29067 3.73867 5.61599 3.92534 5.96799 4.16C6.50132 4 7.17334 3.92001 7.98401 3.92001C8.61334 3.92001 9.28001 4 9.98401 4.16C10.3253 3.92534 10.6507 3.73867 10.96 3.60001C11.216 3.48267 11.4453 3.40265 11.648 3.35999C11.7973 3.32799 11.9307 3.31201 12.048 3.31201L12.192 3.328C12.4587 3.98934 12.496 4.67201 12.304 5.37601L12.288 5.42401C12.5547 5.72268 12.7573 6.05867 12.896 6.43201C13.0453 6.80534 13.12 7.18932 13.12 7.58398C13.12 8.54398 12.9333 9.32268 12.56 9.92001C12.2507 10.432 11.8027 10.8213 11.216 11.088C10.7573 11.28 10.1813 11.4187 9.48801 11.504C9.64801 11.632 9.77601 11.8133 9.87201 12.048C9.97868 12.3147 10.032 12.6187 10.032 12.96V15.168C10.032 15.2853 10.0747 15.3867 10.16 15.472C10.256 15.5573 10.3947 15.584 10.576 15.552C11.6427 15.2 12.5867 14.6453 13.408 13.888C14.2293 13.12 14.864 12.2293 15.312 11.216C15.7707 10.192 16 9.11468 16 7.98401C15.9787 6.53334 15.6053 5.18933 14.88 3.952C14.1653 2.74666 13.2053 1.79201 12 1.08801C10.7627 0.36268 9.42401 0 7.98401 0Z" fill="#1C1F23"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.4 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.625 2.25H3.375C2.75363 2.25 2.25 2.75363 2.25 3.375V15.75L5.4585 13.125H14.625C15.246 13.125 15.75 12.621 15.75 12V3.375C15.75 2.75363 15.246 2.25 14.625 2.25Z" fill="#CFD8DC"/>
|
||||
<path d="M4.5 3.375H13.5C14.121 3.375 14.625 3.87863 14.625 4.5V15.75L10.125 12H4.5C3.87863 12 3.375 11.496 3.375 10.875V4.5C3.375 3.87863 3.87863 3.375 4.5 3.375Z" fill="#42A5F5"/>
|
||||
<path d="M11.625 7.125C11.625 7.539 11.289 7.875 10.875 7.875C10.461 7.875 10.125 7.539 10.125 7.125C10.125 6.711 10.461 6.375 10.875 6.375C11.289 6.375 11.625 6.711 11.625 7.125Z" fill="#BBDEFB"/>
|
||||
<path d="M12.375 9.25012C12.375 9.25012 11.9599 8.25 10.875 8.25C9.79013 8.25 9.375 9.25012 9.375 9.25012V9.75H12.375V9.25012Z" fill="#BBDEFB"/>
|
||||
<path d="M9 6.375C9 6.996 8.49637 7.5 7.875 7.5C7.25363 7.5 6.75 6.996 6.75 6.375C6.75 5.754 7.25363 5.25 7.875 5.25C8.49637 5.25 9 5.754 9 6.375Z" fill="#E3F2FD"/>
|
||||
<path d="M10.125 9.12525C10.125 9.12525 9.5025 7.875 7.875 7.875C6.2475 7.875 5.625 9.12525 5.625 9.12525V9.75H10.125V9.12525Z" fill="#E3F2FD"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.492 10.232C9.54867 10.288 9.54867 10.3793 9.492 10.436C9.182 10.744 8.696 10.894 8.00467 10.894L7.99933 10.8927L7.994 10.894C7.30333 10.894 6.81667 10.744 6.50667 10.4353C6.45 10.3793 6.45 10.288 6.50667 10.232C6.56267 10.176 6.65467 10.176 6.71133 10.232C6.964 10.4833 7.38333 10.606 7.994 10.606L7.99933 10.6073L8.00467 10.606C8.61467 10.606 9.034 10.4833 9.28733 10.232C9.344 10.176 9.436 10.176 9.492 10.232ZM7.19867 8.62C7.19867 8.282 6.92267 8.00733 6.584 8.00733C6.24467 8.00733 5.96867 8.282 5.96867 8.62C5.96867 8.95733 6.24467 9.232 6.584 9.232C6.92267 9.23267 7.19867 8.958 7.19867 8.62ZM16 8C16 12.418 12.418 16 8 16C3.582 16 0 12.418 0 8C0 3.582 3.582 0 8 0C12.418 0 16 3.582 16 8ZM12.6667 7.914C12.6667 7.34667 12.2033 6.88533 11.6333 6.88533C11.3553 6.88533 11.1033 6.99667 10.9173 7.17533C10.2133 6.712 9.26067 6.41733 8.20667 6.37933L8.78333 4.56333L10.3453 4.92933L10.3433 4.952C10.3433 5.416 10.7227 5.79333 11.1887 5.79333C11.6547 5.79333 12.0333 5.416 12.0333 4.952C12.0333 4.488 11.6547 4.11067 11.1887 4.11067C10.8307 4.11067 10.526 4.334 10.4027 4.64667L8.71933 4.252C8.646 4.234 8.57067 4.27667 8.548 4.34867L7.90467 6.374C6.80067 6.38733 5.80133 6.68467 5.066 7.16133C4.88133 6.99133 4.63667 6.88467 4.366 6.88467C3.79667 6.88533 3.33333 7.34667 3.33333 7.914C3.33333 8.29133 3.54067 8.618 3.84533 8.79733C3.82533 8.90667 3.812 9.018 3.812 9.13067C3.812 10.6513 5.682 11.8887 7.98067 11.8887C10.2793 11.8887 12.1493 10.6513 12.1493 9.13067C12.1493 9.024 12.138 8.91933 12.12 8.816C12.444 8.642 12.6667 8.30533 12.6667 7.914ZM9.41867 8.008C9.07933 8.008 8.804 8.28267 8.804 8.62067C8.804 8.958 9.08 9.23267 9.41867 9.23267C9.75733 9.23267 10.0333 8.958 10.0333 8.62067C10.0333 8.28267 9.758 8.008 9.41867 8.008Z" fill="#EB5428"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.8 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.29333 6.89784C2.29333 7.52895 1.77778 8.04451 1.14667 8.04451C0.515556 8.04451 0 7.52895 0 6.89784C0 6.26673 0.515556 5.75117 1.14667 5.75117H2.29333V6.89784Z" fill="#E01E5A"/>
|
||||
<path d="M2.87109 6.89784C2.87109 6.26673 3.38665 5.75117 4.01776 5.75117C4.64887 5.75117 5.16442 6.26673 5.16442 6.89784V9.76895C5.16442 10.4001 4.64887 10.9156 4.01776 10.9156C3.38665 10.9156 2.87109 10.4001 2.87109 9.76895V6.89784Z" fill="#E01E5A"/>
|
||||
<path d="M4.01776 2.29333C3.38665 2.29333 2.87109 1.77777 2.87109 1.14666C2.87109 0.515554 3.38665 0 4.01776 0C4.64887 0 5.16442 0.515554 5.16442 1.14666V2.29333H4.01776Z" fill="#36C5F0"/>
|
||||
<path d="M4.01778 2.87108C4.64889 2.87108 5.16445 3.38663 5.16445 4.01774C5.16445 4.64885 4.64889 5.1644 4.01778 5.1644H1.14667C0.515556 5.1644 0 4.64885 0 4.01774C0 3.38663 0.515556 2.87108 1.14667 2.87108H4.01778Z" fill="#36C5F0"/>
|
||||
<path d="M8.62207 4.01774C8.62207 3.38663 9.13762 2.87108 9.76873 2.87108C10.3998 2.87108 10.9154 3.38663 10.9154 4.01774C10.9154 4.64885 10.3998 5.1644 9.76873 5.1644H8.62207V4.01774Z" fill="#2EB67D"/>
|
||||
<path d="M8.04431 4.01778C8.04431 4.64889 7.52875 5.16445 6.89764 5.16445C6.26653 5.16445 5.75098 4.64889 5.75098 4.01778V1.14667C5.75098 0.515556 6.26653 0 6.89764 0C7.52875 0 8.04431 0.515556 8.04431 1.14667V4.01778Z" fill="#2EB67D"/>
|
||||
<path d="M6.89764 8.62225C7.52875 8.62225 8.04431 9.13781 8.04431 9.76892C8.04431 10.4 7.52875 10.9156 6.89764 10.9156C6.26653 10.9156 5.75098 10.4 5.75098 9.76892V8.62225H6.89764Z" fill="#ECB22E"/>
|
||||
<path d="M6.89764 8.04451C6.26653 8.04451 5.75098 7.52895 5.75098 6.89784C5.75098 6.26673 6.26653 5.75117 6.89764 5.75117H9.76875C10.3999 5.75117 10.9154 6.26673 10.9154 6.89784C10.9154 7.52895 10.3999 8.04451 9.76875 8.04451H6.89764Z" fill="#ECB22E"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.8 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.95083 9.02467H11.1947V14.0001H0V9.02467H1.24385V12.7562H9.95083V9.02467Z" fill="#BBBBBB"/>
|
||||
<path d="M2.5995 8.65473L8.70852 9.93873L8.96532 8.71749L2.8563 7.43293L2.5995 8.65473ZM3.40789 5.72953L9.06697 8.36514L9.59414 7.23335L3.93495 4.59773L3.40789 5.72953ZM4.97379 2.95313L9.77145 6.94828L10.5705 5.98881L5.7728 1.99378L4.97379 2.95313ZM8.07065 0L7.06878 0.745181L10.7945 5.75452L11.7963 5.00945L8.07065 0ZM2.48779 11.5122H8.70706V10.2683H2.48779V11.5122Z" fill="#F58025"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 632 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.016 1.34399C13.8133 1.63199 13.5893 1.90397 13.344 2.15997C13.1093 2.40531 12.8533 2.6293 12.576 2.83197C12.5867 2.95997 12.592 3.088 12.592 3.216C12.592 3.792 12.528 4.36264 12.4 4.92798C12.2827 5.48265 12.1067 6.02134 11.872 6.54401C11.5413 7.28001 11.12 7.95732 10.608 8.57599C10.1067 9.17332 9.53066 9.68533 8.87999 10.112C8.22932 10.528 7.53066 10.8426 6.784 11.056C6.00533 11.28 5.216 11.3866 4.416 11.376C3.63733 11.376 2.86933 11.2693 2.112 11.056C1.36533 10.8426 0.661333 10.5227 0 10.096C0.768 10.1813 1.52 10.1227 2.256 9.91998C2.992 9.70665 3.65866 9.36533 4.256 8.896C3.808 8.896 3.38133 8.78932 2.976 8.57599C2.58133 8.36266 2.25066 8.07464 1.98399 7.71198C1.81333 7.46664 1.68 7.19999 1.584 6.91199L1.856 6.94397C2.19734 6.97597 2.53333 6.94402 2.864 6.84802C2.544 6.78402 2.24 6.66664 1.952 6.49597C1.67466 6.3253 1.42934 6.11202 1.216 5.85602C1.00267 5.60002 0.837335 5.31733 0.720001 5.008C0.613334 4.688 0.559998 4.36265 0.559998 4.03198V4C0.965331 4.23467 1.40266 4.35731 1.87199 4.36798C1.47733 4.10131 1.168 3.75467 0.944 3.328C0.826667 3.12534 0.741322 2.90666 0.687988 2.672C0.559988 2.192 0.559988 1.71199 0.687988 1.23199C0.751988 0.986661 0.853323 0.752015 0.991989 0.528015C1.35466 0.986682 1.75999 1.39202 2.20799 1.74402C3.10399 2.45868 4.10667 2.96531 5.216 3.26398C5.77067 3.41331 6.336 3.50401 6.912 3.53601C6.88 3.42934 6.85866 3.32267 6.84799 3.216C6.83733 3.09867 6.832 2.98667 6.832 2.88C6.832 2.47467 6.90667 2.10134 7.056 1.76001C7.20533 1.41868 7.408 1.11469 7.664 0.848022C7.93067 0.581355 8.24 0.373332 8.592 0.223999C8.944 0.0746657 9.31732 0 9.71199 0C10.1067 0 10.4853 0.0799904 10.848 0.23999C11.2107 0.399991 11.5253 0.623987 11.792 0.911987C12.4427 0.783987 13.0507 0.549341 13.616 0.208008C13.5093 0.549341 13.3493 0.858653 13.136 1.13599C12.9227 1.40265 12.6613 1.62665 12.352 1.80798C12.928 1.73332 13.4773 1.58398 14 1.35999L14.016 1.34399Z" fill="#6FA8D8"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.0 KiB |
|
|
@ -4,6 +4,7 @@ summary: Go is an open source programming language that makes it easy to build s
|
|||
---
|
||||
|
||||
{{$canShare := not googleCN}}
|
||||
|
||||
<section class="Hero bluebg">
|
||||
<div class="Hero-gridContainer">
|
||||
<div class="Hero-blurb">
|
||||
|
|
|
|||
|
|
@ -11,12 +11,89 @@ window.initFuncs = [];
|
|||
'use strict';
|
||||
|
||||
function registerHeaderListeners() {
|
||||
// Desktop menu hover state
|
||||
const menuItemHovers = document.querySelectorAll('.js-desktop-menu-hover');
|
||||
menuItemHovers.forEach(menuItemHover => {
|
||||
// when user clicks on the dropdown menu item on desktop or mobile,
|
||||
// force the menu to stay open until the user clicks off of it.
|
||||
menuItemHover.addEventListener('mouseenter', e => {
|
||||
const forced = document.querySelector('.forced-open');
|
||||
if (forced && forced !== menuItemHover) {
|
||||
forced.blur();
|
||||
forced.classList.remove('forced-open');
|
||||
}
|
||||
// prevents menus that have been tabbed into from staying open
|
||||
// when you hover over another menu
|
||||
e.target.focus();
|
||||
e.target.blur();
|
||||
});
|
||||
const toggleForcedOpen = e => {
|
||||
const isForced = e.target.classList.contains('forced-open');
|
||||
const target = e.currentTarget;
|
||||
if (isForced) {
|
||||
target.removeEventListener('blur', e =>
|
||||
target.classList.remove('forced-open')
|
||||
);
|
||||
target.classList.remove('forced-open');
|
||||
target.classList.add('forced-closed');
|
||||
target.blur();
|
||||
target.parentNode.addEventListener('mouseout', () => {
|
||||
target.classList.remove('forced-closed');
|
||||
});
|
||||
} else {
|
||||
target.classList.remove('forced-closed');
|
||||
target.classList.add('forced-open');
|
||||
target.focus();
|
||||
target.addEventListener('blur', e =>
|
||||
target.classList.remove('forced-open')
|
||||
);
|
||||
target.parentNode.removeEventListener('mouseout', () => {
|
||||
target.classList.remove('forced-closed');
|
||||
});
|
||||
}
|
||||
};
|
||||
menuItemHover.addEventListener('click', toggleForcedOpen);
|
||||
});
|
||||
|
||||
// ensure desktop submenus are closed when esc is pressed
|
||||
const headerItems = document.querySelectorAll('.Header-menuItem');
|
||||
headerItems.forEach(header => {
|
||||
header.addEventListener('keyup', e => {
|
||||
if (e.key === 'Escape') {
|
||||
e.target.blur();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile menu subnav menus
|
||||
const header = document.querySelector('.js-header');
|
||||
const menuButtons = document.querySelectorAll('.js-headerMenuButton');
|
||||
menuButtons.forEach(button => {
|
||||
const headerbuttons = document.querySelectorAll('.js-headerMenuButton');
|
||||
headerbuttons.forEach(button => {
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
header.classList.toggle('is-active');
|
||||
const isActive = header.classList.contains('is-active');
|
||||
if (isActive) {
|
||||
handleNavigationDrawerInactive(header);
|
||||
} else {
|
||||
handleNavigationDrawerActive(header);
|
||||
}
|
||||
button.setAttribute('aria-expanded', isActive);
|
||||
});
|
||||
});
|
||||
|
||||
const scrim = document.querySelector('.js-scrim');
|
||||
scrim.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// find any active submenus and close them
|
||||
const activeSubnavs = document.querySelectorAll(
|
||||
'.NavigationDrawer-submenuItem.is-active'
|
||||
);
|
||||
activeSubnavs.forEach(subnav => handleNavigationDrawerInactive(subnav));
|
||||
|
||||
handleNavigationDrawerInactive(header);
|
||||
|
||||
headerbuttons.forEach(button => {
|
||||
button.setAttribute(
|
||||
'aria-expanded',
|
||||
header.classList.contains('is-active')
|
||||
|
|
@ -24,18 +101,111 @@ window.initFuncs = [];
|
|||
});
|
||||
});
|
||||
|
||||
const scrim = document.querySelector('.js-scrim');
|
||||
scrim.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
header.classList.remove('is-active');
|
||||
menuButtons.forEach(button => {
|
||||
button.setAttribute(
|
||||
'aria-expanded',
|
||||
header.classList.contains('is-active')
|
||||
const getNavigationDrawerMenuItems = navigationDrawer => [
|
||||
navigationDrawer.querySelector('.NavigationDrawer-header > a'),
|
||||
...navigationDrawer.querySelectorAll(
|
||||
':scope > .NavigationDrawer-nav > .NavigationDrawer-list > .NavigationDrawer-listItem > a, :scope > .NavigationDrawer-nav > .NavigationDrawer-list > .NavigationDrawer-listItem > .Header-socialIcons > a'
|
||||
),
|
||||
];
|
||||
|
||||
const getNavigationDrawerIsSubnav = navigationDrawer =>
|
||||
navigationDrawer.classList.contains('NavigationDrawer-submenuItem');
|
||||
|
||||
const handleNavigationDrawerInactive = navigationDrawer => {
|
||||
const menuItems = getNavigationDrawerMenuItems(navigationDrawer);
|
||||
navigationDrawer.classList.remove('is-active');
|
||||
const parentMenuItem = navigationDrawer
|
||||
.closest('.NavigationDrawer-listItem')
|
||||
?.querySelector(':scope > a');
|
||||
parentMenuItem?.focus();
|
||||
|
||||
menuItems.forEach(item => item.setAttribute('tabindex', '-1'));
|
||||
|
||||
menuItems[0].removeEventListener(
|
||||
'keydown',
|
||||
handleMenuItemTabLeft.bind(navigationDrawer)
|
||||
);
|
||||
menuItems[menuItems.length - 1].removeEventListener(
|
||||
'keydown',
|
||||
handleMenuItemTabRight.bind(navigationDrawer)
|
||||
);
|
||||
|
||||
if (navigationDrawer === header) {
|
||||
headerbuttons[0]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleNavigationDrawerActive = navigationDrawer => {
|
||||
const menuItems = getNavigationDrawerMenuItems(navigationDrawer);
|
||||
|
||||
navigationDrawer.classList.add('is-active');
|
||||
menuItems.forEach(item => item.setAttribute('tabindex', '0'));
|
||||
menuItems[0].focus();
|
||||
|
||||
menuItems[0].addEventListener(
|
||||
'keydown',
|
||||
handleMenuItemTabLeft.bind(this, navigationDrawer)
|
||||
);
|
||||
menuItems[menuItems.length - 1].addEventListener(
|
||||
'keydown',
|
||||
handleMenuItemTabRight.bind(this, navigationDrawer)
|
||||
);
|
||||
};
|
||||
|
||||
const handleMenuItemTabLeft = (navigationDrawer, e) => {
|
||||
if (e.key === 'Tab' && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleNavigationDrawerInactive(navigationDrawer);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMenuItemTabRight = (navigationDrawer, e) => {
|
||||
if (e.key === 'Tab' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleNavigationDrawerInactive(navigationDrawer);
|
||||
}
|
||||
};
|
||||
|
||||
const prepMobileNavigationDrawer = navigationDrawer => {
|
||||
const isSubnav = getNavigationDrawerIsSubnav(navigationDrawer);
|
||||
const menuItems = getNavigationDrawerMenuItems(navigationDrawer);
|
||||
|
||||
navigationDrawer.addEventListener('keyup', e => {
|
||||
if (e.key === 'Escape') {
|
||||
handleNavigationDrawerInactive(navigationDrawer);
|
||||
}
|
||||
});
|
||||
|
||||
menuItems.forEach(item => {
|
||||
const parentLi = item.closest('li');
|
||||
if (
|
||||
parentLi &&
|
||||
parentLi.classList.contains('js-mobile-subnav-trigger')
|
||||
) {
|
||||
const submenu = parentLi.querySelector(
|
||||
'.NavigationDrawer-submenuItem'
|
||||
);
|
||||
item.addEventListener('click', () => {
|
||||
handleNavigationDrawerActive(submenu);
|
||||
});
|
||||
}
|
||||
});
|
||||
if (isSubnav) {
|
||||
handleNavigationDrawerInactive(navigationDrawer);
|
||||
navigationDrawer
|
||||
.querySelector('.NavigationDrawer-header')
|
||||
.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
handleNavigationDrawerInactive(navigationDrawer);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
document
|
||||
.querySelectorAll('.NavigationDrawer')
|
||||
.forEach(drawer => prepMobileNavigationDrawer(drawer));
|
||||
handleNavigationDrawerInactive(header);
|
||||
}
|
||||
|
||||
function registerSolutionsTabs() {
|
||||
// Handle tab navigation on Solutions page.
|
||||
|
|
@ -45,7 +215,7 @@ window.initFuncs = [];
|
|||
const tabs = tabList.querySelectorAll('[role="tab"]');
|
||||
let tabFocus = getTabFocus();
|
||||
|
||||
changeTabs({ target: tabs[tabFocus] })
|
||||
changeTabs({target: tabs[tabFocus]});
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', changeTabs);
|
||||
|
|
@ -113,7 +283,7 @@ window.initFuncs = [];
|
|||
|
||||
// Set this tab as selected
|
||||
target.setAttribute('aria-selected', true);
|
||||
setTabFocus(target.id)
|
||||
setTabFocus(target.id);
|
||||
|
||||
// Hide all tab panels
|
||||
grandparent
|
||||
|
|
@ -162,9 +332,7 @@ window.initFuncs = [];
|
|||
async function getLatestVersion() {
|
||||
let version = 'go1.17'; // fallback version if fetch fails
|
||||
try {
|
||||
const versionData = await (
|
||||
await fetch('/dl/?mode=json')
|
||||
).json();
|
||||
const versionData = await (await fetch('/dl/?mode=json')).json();
|
||||
if (!versionData.length) {
|
||||
return version;
|
||||
}
|
||||
|
|
@ -183,8 +351,10 @@ window.initFuncs = [];
|
|||
*/
|
||||
|
||||
function initialThemeSetup() {
|
||||
const theme = document.cookie.match(/prefers-color-scheme=(light|dark|auto)/)?.[1]
|
||||
|
||||
const themeCookie = document.cookie.match(
|
||||
/prefers-color-scheme=(light|dark|auto)/
|
||||
);
|
||||
const theme = themeCookie && themeCookie.length > 0 && themeCookie[1];
|
||||
if (theme) {
|
||||
document.querySelector('html').setAttribute('data-theme', theme);
|
||||
}
|
||||
|
|
@ -202,7 +372,8 @@ window.initFuncs = [];
|
|||
}
|
||||
|
||||
/**
|
||||
* toggleTheme switches the preferred color scheme between auto, light, and dark.
|
||||
* toggleTheme switches the preferred color scheme between auto, light, and
|
||||
* dark.
|
||||
*/
|
||||
function toggleTheme() {
|
||||
let nextTheme = 'dark';
|
||||
|
|
@ -218,8 +389,7 @@ window.initFuncs = [];
|
|||
domain = 'domain=.go.dev;';
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', nextTheme);
|
||||
document.cookie =
|
||||
`prefers-color-scheme=${nextTheme};${domain}path=/;max-age=31536000;`;
|
||||
document.cookie = `prefers-color-scheme=${nextTheme};${domain}path=/;max-age=31536000;`;
|
||||
}
|
||||
|
||||
initialThemeSetup();
|
||||
|
|
|
|||
|
|
@ -1,16 +1,71 @@
|
|||
main:
|
||||
- name: Why Go
|
||||
url: /solutions/
|
||||
- name: Get Started
|
||||
children:
|
||||
- name: Case Studies
|
||||
explanation: Common problems companies solve with Go
|
||||
url: /solutions#case-studies
|
||||
- name: Use Cases
|
||||
explanation: Stories about how and why companies use Go
|
||||
url: /solutions#use-cases
|
||||
- name: Security Policy
|
||||
explanation: How Go can help keep you secure by default
|
||||
url: /security/policy/
|
||||
- name: Learn
|
||||
url: /learn/
|
||||
- name: Docs
|
||||
url: /doc/
|
||||
children:
|
||||
- name: Effective Go
|
||||
explanation: Tips for writing clear, performant, and idiomatic Go code
|
||||
url: /doc/effective_go
|
||||
- name: Go User Manual
|
||||
explanation: A complete introduction to building software with Go
|
||||
url: /doc
|
||||
- name: Standard library
|
||||
explanation: Reference documentation for Go's standard library
|
||||
url: https://pkg.go.dev/std
|
||||
- name: Release Notes
|
||||
explanation: Learn what's new in each Go release
|
||||
url: /doc/devel/release
|
||||
- name: Packages
|
||||
url: https://pkg.go.dev
|
||||
- name: Play
|
||||
url: /play/
|
||||
- name: Blog
|
||||
url: /blog/
|
||||
- name: Community
|
||||
url: /example/
|
||||
children:
|
||||
- name: Recorded Talks
|
||||
explanation: Videos from prior events
|
||||
url: /talks/
|
||||
- name: Meetups
|
||||
explanation: Meet other local Go developers
|
||||
url: https://www.meetup.com/pro/go
|
||||
external: true
|
||||
- name: Conferences
|
||||
explanation: Learn and network with Go developers from around the world
|
||||
url: https://github.com/golang/go/wiki/Conferences
|
||||
external: true
|
||||
- name: Go blog
|
||||
explanation: The Go project's official blog.
|
||||
url: /blog
|
||||
- name: Go project
|
||||
explanation: Get help and stay informed from Go
|
||||
url: /help
|
||||
- name: Get connected
|
||||
socialIconsList:
|
||||
[
|
||||
{
|
||||
img: google-groups.svg,
|
||||
url: 'https://groups.google.com/g/golang-nuts',
|
||||
},
|
||||
{img: github.svg, url: 'https://github.com/golang'},
|
||||
{img: twitter.svg, url: 'https://twitter.com/golang'},
|
||||
{img: reddit.svg, url: 'https://www.reddit.com/r/golang/'},
|
||||
{img: slack.svg, url: 'https://invite.slack.golangbridge.org/'},
|
||||
{
|
||||
img: stack-overflow.svg,
|
||||
url: 'https://stackoverflow.com/collectives/go',
|
||||
},
|
||||
]
|
||||
|
||||
footer:
|
||||
- name: Why Go
|
||||
|
|
|
|||
|
|
@ -62,7 +62,35 @@
|
|||
{{- $currentPage := .}}
|
||||
{{- range $menus.main}}
|
||||
<li class="Header-menuItem {{if strings.HasPrefix $currentPage.URL .url}} Header-menuItem--active{{end}}">
|
||||
<a href="{{.url}}">{{.name}}</a>
|
||||
<a href="{{if .children}}#{{else}}{{.url}}{{end}}" {{if .children}}aria-haspopup="true" class="js-desktop-menu-hover"{{end}}>
|
||||
{{.name}} {{if .children}}<i class="material-icons">arrow_drop_down</i>{{end}}
|
||||
</a>
|
||||
{{- if .children}}
|
||||
<ul class="Header-submenu js-desktop-submenu-hover" aria-label="submenu">
|
||||
{{- range .children}}
|
||||
<li class="Header-submenuItem">
|
||||
<div>
|
||||
{{- if .url}}
|
||||
<a href="{{.url}}">
|
||||
{{.name}}
|
||||
{{ if .external}} <i class="material-icons">open_in_new</i>{{end}}
|
||||
</a>
|
||||
{{- else}}
|
||||
{{.name}}
|
||||
{{- end}}
|
||||
</div>
|
||||
<p>{{.explanation}}</p>
|
||||
{{- if .socialIconsList}}
|
||||
<div class="Header-socialIcons">
|
||||
{{ range .socialIconsList }}
|
||||
<a class="Header-socialIcon" href="{{.url}}"><img src="/images/logos/social/{{.img}}" /></a>
|
||||
{{- end}}
|
||||
</div>
|
||||
{{- end}}
|
||||
</li>
|
||||
{{- end}}
|
||||
</ul>
|
||||
{{- end}}
|
||||
</li>
|
||||
{{- end}}
|
||||
</ul>
|
||||
|
|
@ -95,9 +123,45 @@
|
|||
</div>
|
||||
<ul class="NavigationDrawer-list">
|
||||
{{- range $menus.main}}
|
||||
{{ if .children }}
|
||||
<li class="NavigationDrawer-listItem js-mobile-subnav-trigger {{if strings.HasPrefix $currentPage.URL .url}} NavigationDrawer-listItem--active{{end}} NavigationDrawer-hasSubnav">
|
||||
<a href="#"><span>{{.name}}</span> <i class="material-icons">navigate_next</i></a>
|
||||
|
||||
<div class="NavigationDrawer NavigationDrawer-submenuItem">
|
||||
<nav class="NavigationDrawer-nav">
|
||||
<div class="NavigationDrawer-header">
|
||||
<a href="#"><i class="material-icons">navigate_before</i>{{.name}}</a>
|
||||
</div>
|
||||
<ul class="NavigationDrawer-list">
|
||||
{{- range .children}}
|
||||
<li class="NavigationDrawer-listItem">
|
||||
{{- if .url}}
|
||||
<a href="{{.url}}">
|
||||
{{.name}}
|
||||
{{ if .external}} <i class="material-icons">open_in_new</i>{{end}}
|
||||
</a>
|
||||
{{ else }}
|
||||
<div>{{.name}}</div>
|
||||
{{- end}}
|
||||
{{- if .socialIconsList}}
|
||||
<div class="Header-socialIcons">
|
||||
{{ range .socialIconsList }}
|
||||
<a class="Header-socialIcon" href="{{.url}}"><img src="/images/logos/social/{{.img}}" /></a>
|
||||
{{- end}}
|
||||
</div>
|
||||
{{- end}}
|
||||
</li>
|
||||
{{- end}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{{ else }}
|
||||
<li class="NavigationDrawer-listItem {{if strings.HasPrefix $currentPage.URL .url}} NavigationDrawer-listItem--active{{end}}">
|
||||
<a href="{{.url}}">{{.name}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{- end}}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче