diff --git a/static/frontend/homepage/homepage.css b/static/frontend/homepage/homepage.css index 596175624..362688fdb 100644 --- a/static/frontend/homepage/homepage.css +++ b/static/frontend/homepage/homepage.css @@ -88,6 +88,34 @@ } } +.Homepage-closeIcon { + background: var(--color-input); + border-bottom: var(--border); + border-color: var(--color-brand-primary); + border-left: 0; + border-top: var(--border); + color: var(--color-button); + cursor: pointer; + display: inline-block; + font-weight: bold; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.Homepage-closeIcon:hover, +.Homepage-closeIcon:focus, +.Homepage-closeIcon:focus-within, +.Homepage-closeIcon:active { + border-left: 0 !important; +} + +.Homepage-search--input:hover, +.Homepage-search--input:focus, +.Homepage-search--input:focus-within, +.Homepage-search--input:active { + border-right: 0 !important; +} + input[type='search']::-webkit-search-decoration { display: none; } diff --git a/static/frontend/homepage/homepage.min.css b/static/frontend/homepage/homepage.min.css index 755b4df4e..fb0356c95 100644 --- a/static/frontend/homepage/homepage.min.css +++ b/static/frontend/homepage/homepage.min.css @@ -3,7 +3,7 @@ * Use of this source code is governed by a BSD-style * license that can be found in the LICENSE file. */ -.go-SearchForm{display:none}.Homepage-logo{border-radius:var(--border-radius);display:block;height:10rem;margin:3.125rem auto;width:auto}[data-theme=dark] .Homepage-logo{mix-blend-mode:difference}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .Homepage-logo{mix-blend-mode:difference}}@media only screen and (min-width: 52rem){.Homepage{margin:2rem auto}.Homepage-logo{margin:3.5rem auto}}.Homepage-search{--border-radius: .5rem;height:3rem;margin:2.5rem auto 0;max-width:45.0625rem;position:relative;width:100%}.Homepage-search:before{background:url(/static/shared/icon/search_gm_grey_24dp.svg) left no-repeat;content:"";height:3rem;left:.75rem;position:absolute;width:1.5rem;z-index:3}.Homepage-search .go-Select,.Homepage-search .go-Input{padding-left:2.5rem}.Homepage-search--symbol .go-Input{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:2.5rem}.Homepage-search .go-Button{justify-content:center;width:7.375rem}.Homepage-search--symbol .go-Button{display:none}@media only screen and (min-width: 30rem){.Homepage-search--symbol .go-Input{border-bottom-right-radius:0;border-top-right-radius:0}.Homepage-search--symbol .go-Button{display:inline-flex}}input[type=search]::-webkit-search-decoration{display:none}.Homepage-tips{margin:auto;max-width:45.0625rem;width:100%}[data-local=true] .Homepage-tips{display:none}.Homepage-examples{align-items:center;display:flex;flex-direction:column;font-size:.875rem;gap:.5rem 1rem;justify-content:space-between;margin:0 auto;max-width:45.0625rem;white-space:nowrap;width:inherit}@media only screen and (min-width: 52rem){.Homepage-examples{flex-direction:row}}.Homepage-examplesTitle{color:var(--color-text-subtle);font-weight:500;text-transform:uppercase}.Homepage-examplesList{display:flex;flex-grow:1;flex-wrap:wrap;gap:.5rem 2rem}a.Homepage-helpLink{align-items:center;display:inline-flex;font-size:1em;font-weight:initial;margin-left:.5rem;white-space:nowrap}.Homepage-helpLink img{height:1rem;margin-left:.25rem;position:relative;top:.1875rem;width:1rem}.Homepage-modules{margin:auto;max-width:45.0625rem;width:100%}.Homepage-modules-header{color:var(--color-text);font-weight:700}.Homepage-modules ul{list-style:circle;padding:0 1.5rem}.Homepage-modules ul>li{font-size:1rem;line-height:1.75rem}.Questions{background:var(--color-background-accented);color:var(--color-text);display:flex;padding-bottom:1rem;padding-top:.5rem}.Questions-header{color:var(--color-text);font-weight:700;margin:1rem 0}.Questions-content{flex-grow:1;margin:0 auto;max-width:75.75rem;padding:0 1.5rem}.Questions-content a{color:var(--color-bright-text-link)}.Questions-content ul{list-style:none;padding-inline-start:0}.Questions-content ul>li{font-size:.875rem;line-height:1.75rem} +.go-SearchForm{display:none}.Homepage-logo{border-radius:var(--border-radius);display:block;height:10rem;margin:3.125rem auto;width:auto}[data-theme=dark] .Homepage-logo{mix-blend-mode:difference}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .Homepage-logo{mix-blend-mode:difference}}@media only screen and (min-width: 52rem){.Homepage{margin:2rem auto}.Homepage-logo{margin:3.5rem auto}}.Homepage-search{--border-radius: .5rem;height:3rem;margin:2.5rem auto 0;max-width:45.0625rem;position:relative;width:100%}.Homepage-search:before{background:url(/static/shared/icon/search_gm_grey_24dp.svg) left no-repeat;content:"";height:3rem;left:.75rem;position:absolute;width:1.5rem;z-index:3}.Homepage-search .go-Select,.Homepage-search .go-Input{padding-left:2.5rem}.Homepage-search--symbol .go-Input{border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding-left:2.5rem}.Homepage-search .go-Button{justify-content:center;width:7.375rem}.Homepage-search--symbol .go-Button{display:none}@media only screen and (min-width: 30rem){.Homepage-search--symbol .go-Input{border-bottom-right-radius:0;border-top-right-radius:0}.Homepage-search--symbol .go-Button{display:inline-flex}}.Homepage-closeIcon{border-color:var(--color-brand-primary);padding-left:.5rem;padding-right:.5rem;background:var(--color-input);border-top:var(--border);border-bottom:var(--border);border-left:0;display:inline-block;color:var(--color-button);font-weight:700;cursor:pointer}.Homepage-closeIcon:hover,.Homepage-closeIcon:focus,.Homepage-closeIcon:focus-within,.Homepage-closeIcon:active{border-left:0!important}.Homepage-search--input:hover,.Homepage-search--input:focus,.Homepage-search--input:focus-within,.Homepage-search--input:active{border-right:0!important}input[type=search]::-webkit-search-decoration{display:none}.Homepage-tips{margin:auto;max-width:45.0625rem;width:100%}[data-local=true] .Homepage-tips{display:none}.Homepage-examples{align-items:center;display:flex;flex-direction:column;font-size:.875rem;gap:.5rem 1rem;justify-content:space-between;margin:0 auto;max-width:45.0625rem;white-space:nowrap;width:inherit}@media only screen and (min-width: 52rem){.Homepage-examples{flex-direction:row}}.Homepage-examplesTitle{color:var(--color-text-subtle);font-weight:500;text-transform:uppercase}.Homepage-examplesList{display:flex;flex-grow:1;flex-wrap:wrap;gap:.5rem 2rem}a.Homepage-helpLink{align-items:center;display:inline-flex;font-size:1em;font-weight:initial;margin-left:.5rem;white-space:nowrap}.Homepage-helpLink img{height:1rem;margin-left:.25rem;position:relative;top:.1875rem;width:1rem}.Homepage-modules{margin:auto;max-width:45.0625rem;width:100%}.Homepage-modules-header{color:var(--color-text);font-weight:700}.Homepage-modules ul{list-style:circle;padding:0 1.5rem}.Homepage-modules ul>li{font-size:1rem;line-height:1.75rem}.Questions{background:var(--color-background-accented);color:var(--color-text);display:flex;padding-bottom:1rem;padding-top:.5rem}.Questions-header{color:var(--color-text);font-weight:700;margin:1rem 0}.Questions-content{flex-grow:1;margin:0 auto;max-width:75.75rem;padding:0 1.5rem}.Questions-content a{color:var(--color-bright-text-link)}.Questions-content ul{list-style:none;padding-inline-start:0}.Questions-content ul>li{font-size:.875rem;line-height:1.75rem} /*! * Copyright 2020 The Go Authors. All rights reserved. * Use of this source code is governed by a BSD-style diff --git a/static/frontend/homepage/homepage.min.css.map b/static/frontend/homepage/homepage.min.css.map index 031143e8a..5a1a19a75 100644 --- a/static/frontend/homepage/homepage.min.css.map +++ b/static/frontend/homepage/homepage.min.css.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["homepage.css"], - "sourcesContent": ["/*!\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/* Hide the search form in the header. */\n.go-SearchForm {\n display: none;\n}\n\n.Homepage-logo {\n border-radius: var(--border-radius);\n display: block;\n height: 10rem;\n margin: 3.125rem auto;\n width: auto;\n}\n\n[data-theme='dark'] .Homepage-logo {\n mix-blend-mode: difference;\n}\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme='light']) .Homepage-logo {\n mix-blend-mode: difference;\n }\n}\n@media only screen and (min-width: 52rem) {\n .Homepage {\n margin: 2rem auto;\n }\n\n .Homepage-logo {\n margin: 3.5rem auto;\n }\n}\n\n.Homepage-search {\n --border-radius: 0.5rem;\n\n height: 3rem;\n margin: 2.5rem auto 0;\n max-width: 45.0625rem;\n position: relative;\n width: 100%;\n}\n\n.Homepage-search::before {\n background: url('/static/shared/icon/search_gm_grey_24dp.svg') left no-repeat;\n content: '';\n height: 3rem;\n left: 0.75rem;\n position: absolute;\n width: 1.5rem;\n z-index: 3;\n}\n\n.Homepage-search .go-Select {\n padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Input {\n padding-left: 2.5rem;\n}\n\n.Homepage-search--symbol .go-Input {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Button {\n justify-content: center;\n width: 7.375rem;\n}\n\n.Homepage-search--symbol .go-Button {\n display: none;\n}\n@media only screen and (min-width: 30rem) {\n .Homepage-search--symbol .go-Input {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .Homepage-search--symbol .go-Button {\n display: inline-flex;\n }\n}\n\ninput[type='search']::-webkit-search-decoration {\n display: none;\n}\n\n.Homepage-tips {\n margin: auto;\n max-width: 45.0625rem;\n width: 100%;\n}\n\n[data-local='true'] .Homepage-tips {\n display: none;\n}\n\n.Homepage-examples {\n align-items: center;\n display: flex;\n flex-direction: column;\n font-size: 0.875rem;\n gap: 0.5rem 1rem;\n justify-content: space-between;\n margin: 0 auto;\n max-width: 45.0625rem;\n white-space: nowrap;\n width: inherit;\n}\n@media only screen and (min-width: 52rem) {\n .Homepage-examples {\n flex-direction: row;\n }\n}\n\n.Homepage-examplesTitle {\n color: var(--color-text-subtle);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.Homepage-examplesList {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n gap: 0.5rem 2rem;\n}\n\na.Homepage-helpLink {\n align-items: center;\n display: inline-flex;\n font-size: 1em;\n font-weight: initial;\n margin-left: 0.5rem;\n white-space: nowrap;\n}\n\n.Homepage-helpLink img {\n height: 1rem;\n margin-left: 0.25rem;\n position: relative;\n top: 0.1875rem;\n width: 1rem;\n}\n\n.Homepage-modules {\n margin: auto;\n max-width: 45.0625rem;\n width: 100%;\n}\n\n.Homepage-modules-header {\n color: var(--color-text);\n font-weight: bold;\n}\n\n.Homepage-modules ul {\n list-style: circle;\n padding: 0 1.5rem;\n}\n\n.Homepage-modules ul > li {\n font-size: 1rem;\n line-height: 1.75rem;\n}\n\n.Questions {\n background: var(--color-background-accented);\n color: var(--color-text);\n display: flex;\n padding-bottom: 1rem;\n padding-top: 0.5rem;\n}\n\n.Questions-header {\n color: var(--color-text);\n font-weight: bold;\n margin: 1rem 0;\n}\n\n.Questions-content {\n flex-grow: 1;\n margin: 0 auto;\n max-width: 75.75rem;\n padding: 0 1.5rem;\n}\n\n.Questions-content a {\n color: var(--color-bright-text-link);\n}\n\n.Questions-content ul {\n list-style: none;\n padding-inline-start: 0;\n}\n\n.Questions-content ul > li {\n font-size: 0.875rem;\n line-height: 1.75rem;\n}\n"], - "mappings": ";;;;;AAOA,eACE,aAGF,eACE,mCACA,cACA,aAdF,qBAgBE,WAGF,iCACE,0BAEF,oCACE,+CACE,2BAGJ,0CACE,UA5BF,iBAgCE,eAhCF,oBAqCA,iBACE,uBAEA,YAxCF,qBA0CE,qBACA,kBACA,WAGF,wBACE,2EACA,WACA,YACA,YACA,kBACA,aACA,UAGF,uDACE,oBAOF,mCACE,gDACA,6CACA,oBAGF,4BACE,uBACA,eAGF,oCACE,aAEF,0CACE,mCACE,6BACA,0BAGF,oCACE,qBAIJ,8CACE,aAGF,eA9FA,YAgGE,qBACA,WAGF,iCACE,aAGF,mBACE,mBACA,aACA,sBACA,kBACA,eACA,8BA9GF,cAgHE,qBACA,mBACA,cAEF,0CACE,mBACE,oBAIJ,wBACE,+BACA,gBACA,yBAGF,uBACE,aACA,YACA,eACA,eAGF,oBACE,mBACA,oBACA,cACA,oBACA,kBACA,mBAGF,uBACE,YACA,mBACA,kBACA,aACA,WAGF,kBAxJA,YA0JE,qBACA,WAGF,yBACE,wBACA,gBAGF,qBACE,kBApKF,iBAwKA,wBACE,eACA,oBAGF,WACE,4CACA,wBACA,aACA,oBACA,kBAGF,kBACE,wBACA,gBAvLF,cA2LA,mBACE,YA5LF,cA8LE,mBA9LF,iBAkMA,qBACE,oCAGF,sBACE,gBACA,uBAGF,yBACE,kBACA", + "sourcesContent": ["/*!\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/* Hide the search form in the header. */\n.go-SearchForm {\n display: none;\n}\n\n.Homepage-logo {\n border-radius: var(--border-radius);\n display: block;\n height: 10rem;\n margin: 3.125rem auto;\n width: auto;\n}\n\n[data-theme='dark'] .Homepage-logo {\n mix-blend-mode: difference;\n}\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme='light']) .Homepage-logo {\n mix-blend-mode: difference;\n }\n}\n@media only screen and (min-width: 52rem) {\n .Homepage {\n margin: 2rem auto;\n }\n\n .Homepage-logo {\n margin: 3.5rem auto;\n }\n}\n\n.Homepage-search {\n --border-radius: 0.5rem;\n\n height: 3rem;\n margin: 2.5rem auto 0;\n max-width: 45.0625rem;\n position: relative;\n width: 100%;\n}\n\n.Homepage-search::before {\n background: url('/static/shared/icon/search_gm_grey_24dp.svg') left no-repeat;\n content: '';\n height: 3rem;\n left: 0.75rem;\n position: absolute;\n width: 1.5rem;\n z-index: 3;\n}\n\n.Homepage-search .go-Select {\n padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Input {\n padding-left: 2.5rem;\n}\n\n.Homepage-search--symbol .go-Input {\n border-bottom-right-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n padding-left: 2.5rem;\n}\n\n.Homepage-search .go-Button {\n justify-content: center;\n width: 7.375rem;\n}\n\n.Homepage-search--symbol .go-Button {\n display: none;\n}\n@media only screen and (min-width: 30rem) {\n .Homepage-search--symbol .go-Input {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .Homepage-search--symbol .go-Button {\n display: inline-flex;\n }\n}\n\n.Homepage-closeIcon {\n border-color: var(--color-brand-primary);\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n background: var(--color-input);\n border-top: var(--border);\n border-bottom: var(--border);\n border-left: 0;\n display: inline-block;\n color: var(--color-button);\n font-weight: bold;\n cursor: pointer;\n}\n\n.Homepage-closeIcon:hover,\n.Homepage-closeIcon:focus,\n.Homepage-closeIcon:focus-within,\n.Homepage-closeIcon:active {\n border-left: 0 !important;\n}\n\n.Homepage-search--input:hover,\n.Homepage-search--input:focus,\n.Homepage-search--input:focus-within,\n.Homepage-search--input:active {\n border-right: 0 !important;\n}\n\ninput[type='search']::-webkit-search-decoration {\n display: none;\n}\n\n.Homepage-tips {\n margin: auto;\n max-width: 45.0625rem;\n width: 100%;\n}\n\n[data-local='true'] .Homepage-tips {\n display: none;\n}\n\n.Homepage-examples {\n align-items: center;\n display: flex;\n flex-direction: column;\n font-size: 0.875rem;\n gap: 0.5rem 1rem;\n justify-content: space-between;\n margin: 0 auto;\n max-width: 45.0625rem;\n white-space: nowrap;\n width: inherit;\n}\n@media only screen and (min-width: 52rem) {\n .Homepage-examples {\n flex-direction: row;\n }\n}\n\n.Homepage-examplesTitle {\n color: var(--color-text-subtle);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.Homepage-examplesList {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n gap: 0.5rem 2rem;\n}\n\na.Homepage-helpLink {\n align-items: center;\n display: inline-flex;\n font-size: 1em;\n font-weight: initial;\n margin-left: 0.5rem;\n white-space: nowrap;\n}\n\n.Homepage-helpLink img {\n height: 1rem;\n margin-left: 0.25rem;\n position: relative;\n top: 0.1875rem;\n width: 1rem;\n}\n\n.Homepage-modules {\n margin: auto;\n max-width: 45.0625rem;\n width: 100%;\n}\n\n.Homepage-modules-header {\n color: var(--color-text);\n font-weight: bold;\n}\n\n.Homepage-modules ul {\n list-style: circle;\n padding: 0 1.5rem;\n}\n\n.Homepage-modules ul > li {\n font-size: 1rem;\n line-height: 1.75rem;\n}\n\n.Questions {\n background: var(--color-background-accented);\n color: var(--color-text);\n display: flex;\n padding-bottom: 1rem;\n padding-top: 0.5rem;\n}\n\n.Questions-header {\n color: var(--color-text);\n font-weight: bold;\n margin: 1rem 0;\n}\n\n.Questions-content {\n flex-grow: 1;\n margin: 0 auto;\n max-width: 75.75rem;\n padding: 0 1.5rem;\n}\n\n.Questions-content a {\n color: var(--color-bright-text-link);\n}\n\n.Questions-content ul {\n list-style: none;\n padding-inline-start: 0;\n}\n\n.Questions-content ul > li {\n font-size: 0.875rem;\n line-height: 1.75rem;\n}\n"], + "mappings": ";;;;;AAOA,eACE,aAGF,eACE,mCACA,cACA,aAdF,qBAgBE,WAGF,iCACE,0BAEF,oCACE,+CACE,2BAGJ,0CACE,UA5BF,iBAgCE,eAhCF,oBAqCA,iBACE,uBAEA,YAxCF,qBA0CE,qBACA,kBACA,WAGF,wBACE,2EACA,WACA,YACA,YACA,kBACA,aACA,UAGF,uDACE,oBAOF,mCACE,gDACA,6CACA,oBAGF,4BACE,uBACA,eAGF,oCACE,aAEF,0CACE,mCACE,6BACA,0BAGF,oCACE,qBAIJ,oBACE,wCACA,mBACA,oBACA,8BACA,yBACA,4BACA,cACA,qBACA,0BACA,gBACA,eAGF,gHAIE,wBAGF,gIAIE,yBAGF,8CACE,aAGF,eA1HA,YA4HE,qBACA,WAGF,iCACE,aAGF,mBACE,mBACA,aACA,sBACA,kBACA,eACA,8BA1IF,cA4IE,qBACA,mBACA,cAEF,0CACE,mBACE,oBAIJ,wBACE,+BACA,gBACA,yBAGF,uBACE,aACA,YACA,eACA,eAGF,oBACE,mBACA,oBACA,cACA,oBACA,kBACA,mBAGF,uBACE,YACA,mBACA,kBACA,aACA,WAGF,kBApLA,YAsLE,qBACA,WAGF,yBACE,wBACA,gBAGF,qBACE,kBAhMF,iBAoMA,wBACE,eACA,oBAGF,WACE,4CACA,wBACA,aACA,oBACA,kBAGF,kBACE,wBACA,gBAnNF,cAuNA,mBACE,YAxNF,cA0NE,mBA1NF,iBA8NA,qBACE,oCAGF,sBACE,gBACA,uBAGF,yBACE,kBACA", "names": [] } diff --git a/static/frontend/homepage/homepage.tmpl b/static/frontend/homepage/homepage.tmpl index a3deb55dc..6d9949e66 100644 --- a/static/frontend/homepage/homepage.tmpl +++ b/static/frontend/homepage/homepage.tmpl @@ -16,12 +16,11 @@