website: upgrade content and global styles (#11151)

* website: upgrade global-styles packages

* website: upgrade community page

* website: hide alert-banner on mobile

* website: replace g-container with g-grid-container

* website: delete unused CSS

* website: backfill missing type styles

* website: fix style import path

* website: bump to latest patched dependencies
pull/11205/head
Zachary Shilton 5 years ago committed by GitHub
parent 54a4f59fc7
commit adcd472873
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -3,7 +3,7 @@ import Link from 'next/link'
export default function Footer({ openConsentManager }) {
return (
<footer className="g-footer">
<div className="g-container">
<div className="g-grid-container">
<div className="left">
<Link href="/intro">
<a>Intro</a>

@ -3,7 +3,7 @@
flex-shrink: 0;
display: flex;
& .g-container {
& .g-grid-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;

File diff suppressed because it is too large Load Diff

@ -4,24 +4,24 @@
"version": "1.0.0",
"author": "HashiCorp",
"dependencies": {
"@hashicorp/mktg-global-styles": "^3.1.0",
"@hashicorp/mktg-global-styles": "4.0.0",
"@hashicorp/mktg-logos": "^1.2.0",
"@hashicorp/nextjs-scripts": "^19.0.3",
"@hashicorp/platform-code-highlighting": "^0.1.1",
"@hashicorp/platform-runtime-error-monitoring": "^0.1.0",
"@hashicorp/platform-util": "^0.1.0",
"@hashicorp/react-alert-banner": "^6.1.2",
"@hashicorp/react-alert-banner": "6.2.0",
"@hashicorp/react-button": "^5.2.1",
"@hashicorp/react-command-line-terminal": "^2.0.3",
"@hashicorp/react-consent-manager": "^6.0.0",
"@hashicorp/react-docs-page": "^13.5.1",
"@hashicorp/react-docs-page": "14.0.1",
"@hashicorp/react-hashi-stack-menu": "^2.0.6",
"@hashicorp/react-head": "^3.1.1",
"@hashicorp/react-inline-svg": "^6.0.2",
"@hashicorp/react-markdown-page": "^1.3.1",
"@hashicorp/react-product-downloads-page": "^2.3.1",
"@hashicorp/react-markdown-page": "1.4.2",
"@hashicorp/react-product-downloads-page": "2.4.0",
"@hashicorp/react-product-features-list": "^4.1.2",
"@hashicorp/react-search": "^5.1.1",
"@hashicorp/react-search": "5.1.2",
"@hashicorp/react-section-header": "^5.0.3",
"@hashicorp/react-subnav": "^8.4.0",
"@hashicorp/react-text-split-with-image": "^4.2.2",

@ -17,7 +17,7 @@ export default function NotFound() {
return (
<div id="p-404">
<h1>Page Not Found</h1>
<h1 className="g-type-display-1">Page Not Found</h1>
<p>
We&apos;re sorry but we can&apos;t find the page you&apos;re looking
for.

@ -35,7 +35,7 @@ export default function App({ Component, pageProps }) {
icon={[{ href: '/favicon.ico' }]}
/>
{ALERT_BANNER_ACTIVE && (
<AlertBanner {...alertBannerData} product="packer" />
<AlertBanner {...alertBannerData} product="packer" hideOnMobile />
)}
<HashiStackMenu />
<ProductSubnav />

@ -1,10 +1,11 @@
import VerticalTextBlockList from '@hashicorp/react-vertical-text-block-list'
import SectionHeader from '@hashicorp/react-section-header'
import Head from 'next/head'
import s from './style.module.css'
export default function CommunityPage() {
return (
<div id="p-community">
<div className={s.root}>
<Head>
<title key="title">Community | Packer by HashiCorp</title>
</Head>

@ -1,8 +0,0 @@
#p-community {
max-width: var(--site-max-width);
margin: 72px auto;
& .g-section-header {
margin-bottom: 100px;
}
}

@ -0,0 +1,9 @@
.root {
composes: g-grid-container from global;
margin-top: 72px;
margin-bottom: 72px;
& :global(.g-section-header) {
margin-bottom: 100px;
}
}

@ -1,9 +1,3 @@
.root {
composes: .g-container from global;
margin-top: 72px;
margin-bottom: 72px;
}
.logo {
width: 105px;
}

@ -70,7 +70,7 @@
@media print {
/* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
.g-container {
.g-grid-container {
/*
* A measure is the number of characters in a line of text.
* Long lines fatique readers as they find the start of a new line of text.

@ -1,7 +1,5 @@
/* Global Component Styles */
@import '~@hashicorp/mktg-global-styles/style.css';
@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/layout.css';
@import '~@hashicorp/mktg-global-styles/_temporary-to-remove/tables.css';
:root {
--highlight-color: var(--packer-link);
@ -11,8 +9,6 @@
@import '~@hashicorp/react-alert-banner/style.css';
@import '~@hashicorp/react-button/styles/index.css';
@import '~@hashicorp/react-consent-manager/style.css';
@import '~@hashicorp/react-content/style.css';
@import '~@hashicorp/react-docs-page/style.css';
@import '~@hashicorp/react-product-features-list/style.css';
@import '~@hashicorp/react-search/style.css';
@import '~@hashicorp/react-subnav/style.css';
@ -25,9 +21,6 @@
@import '../components/footer/style.css';
@import '../components/search-bar/style.css';
/* Local Pages */
@import './community/style.css';
/* Print Styles */
@import './print.css';
@ -91,12 +84,12 @@
padding-bottom: 96px;
& > .g-section-header + *,
& > .g-container > .g-section-header + * {
& > .g-grid-container > .g-section-header + * {
margin-top: 72px;
}
& > * + *,
& > .g-container > * + * {
& > .g-grid-container > * + * {
margin-top: 96px;
}
}
@ -111,7 +104,7 @@
}
.g-section-block section > * + .button-container,
.g-section-block section > .g-container > * + .button-container {
.g-section-block section > .g-grid-container > * + .button-container {
margin-top: 40px;
}

Loading…
Cancel
Save