Skip to content

Commit

Permalink
docs: ensure there's just one main section per page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludofischer
ludofischer committed Dec 16, 2021
1 parent d5ad5e3 commit c954c71
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 144 deletions.
5 changes: 5 additions & 0 deletions site/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* work well for content-centric websites.
*/
:root {
--ifm-container-width-xl: 120ch;
--ifm-color-primary: #168050;
--ifm-color-primary-dark: #147348;
--ifm-color-primary-darker: #136d44;
Expand All @@ -18,6 +19,10 @@
--ifm-hero-text-color: #fff;
}

section {
padding: calc(2*var(--ifm-spacing-vertical, 1em)) var(--ifm-spacing-horizontal, 1em);
}

/* Carbon Ads */

.carbon_ads_wrapper {
Expand Down
206 changes: 89 additions & 117 deletions site/src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ function Home() {
<p className="hero__subtitle">
Deliver your website&apos;s styles, faster.
</p>
<p className={styles.small_p}>
<p>
Plug in cssnano into your build step for modern CSS compression.
</p>
<div className={styles.buttons}>
Expand All @@ -118,130 +118,102 @@ function Home() {
</div>
</div>
</header>
<main className={styles.main}>
<section className={styles.features}>
<div className="container">
<div className="row">
<h1 className={styles.h1}>What it does ?</h1>
<p>
cssnano takes your nicely formatted CSS and runs it through many
focused optimisations, to ensure that the final result is as
small as possible for a production environment.
</p>
</div>
<div className="row">
<div className={styles.centerSnippet}>
<Tabs
className={'mini'}
defaultValue="Input"
values={[
{
label: <>Input</>,
value: 'Input',
},
{
label: <>Output</>,
value: 'Output',
},
]}
>
<TabItem value="Input">
<CodeBlock className="language-css">
{cssExampleInput}
</CodeBlock>
</TabItem>
<TabItem value="Output">
<CodeBlock className="language-css">
{cssExampleOutput}
</CodeBlock>
</TabItem>
</Tabs>
</div>
</div>
<div className="row" style={{ marginTop: '2em' }}>
<div className="col-xs-9 col-md-9 col-sm-12">
<div className="box">
<p>
The semantics of this CSS have been kept the same, but the
extraneous whitespace has been removed, the identifiers
compressed, and unnecessary definitions purged from the
stylesheet.
<br />
</p>
<p>
This gives you a much smaller CSS for production use. But
don’t just take our word for it; why not try out css-size, a
module especially created to measure CSS size before & after
minification.
</p>
<p>
By default, cssnano performs safe optimisations on your CSS
file, but we also offer an advanced preset with techniques
that you can use to maximise compression. For more details,
see our{' '}
<Link to={useBaseUrl('docs/optimisations')}>
optimisations
</Link>{' '}
guide.
</p>
</div>
</div>
<div className="col-xs-3 col-md-3 col-sm-12">
<div className="box">
<table
className="col-xs-12 col-md-12 col-sm-12"
style={{ margin: 'auto' }}
>
<tbody>
{minifyTableData.map(({ property, value }, i) => (
<tr key={i} style={{ width: '100%', maxWidth: '100%' }}>
<td>{property}</td>
<td>{value}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<main className="container">
<section>
<div className="row">
<h1 className={styles.h1}>What it does ?</h1>
<p>
cssnano takes your nicely formatted CSS and runs it through many
focused optimisations, to ensure that the final result is as small
as possible for a production environment.
</p>
</div>
<div className="row">
<div className={styles.centerSnippet}>
<Tabs
className={'mini'}
defaultValue="Input"
values={[
{
label: <>Input</>,
value: 'Input',
},
{
label: <>Output</>,
value: 'Output',
},
]}
>
<TabItem value="Input">
<CodeBlock className="language-css">
{cssExampleInput}
</CodeBlock>
</TabItem>
<TabItem value="Output">
<CodeBlock className="language-css">
{cssExampleOutput}
</CodeBlock>
</TabItem>
</Tabs>
</div>
</div>
<div className="row">
<p>
The semantics of this CSS have been kept the same, but the
extraneous whitespace has been removed, the identifiers
compressed, and unnecessary definitions purged from the
stylesheet.
<br />
</p>
<p>
This gives you a much smaller CSS for production use. But don’t
just take our word for it; why not try out css-size, a module
especially created to measure CSS size before & after
minification.
</p>
<p>
By default, cssnano performs safe optimisations on your CSS file,
but we also offer an advanced preset with techniques that you can
use to maximise compression. For more details, see our{' '}
<Link to={useBaseUrl('docs/optimisations')}>optimisations</Link>{' '}
guide.
</p>
<table style={{ margin: 'auto' }}>
<tbody>
{minifyTableData.map(({ property, value }, i) => (
<tr key={i} style={{ width: '100%', maxWidth: '100%' }}>
<td>{property}</td>
<td>{value}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
</main>

<main className={styles.main}>
{features && features.length && (
<section className={styles.features}>
<div className="container">
<div className="row">
<h1 className={styles.h1}>Features</h1>
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
<section>
<div className="row">
<h1 className={styles.h1}>Features</h1>
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</section>
)}
</main>
<main className={styles.main}>
<section className={styles.features}>
<div className="container">
<div className="row">
<h1 className={styles.h1}>Technology</h1>
<div className={styles.flex}>
<p className={styles.flex1}>
cssnano is powered by PostCSS, a tool for transforming styles
with JavaScript. Specifically, its plugin architecture allows
us to compose cssnano out of small modules with limited
responsibilities. It also allows you to easily insert cssnano
into your build step, along with other processors that can
lint your CSS for errors, or transpile future syntax.
</p>
<span>
{' '}
<img src={useBaseUrl('img/postcss.svg')} alt="" />
</span>
</div>
</div>

<section>
<div className="row">
<h1 className={styles.h1}>Technology</h1>
<p className={styles.flex1}>
cssnano is powered by PostCSS, a tool for transforming styles with
JavaScript. Specifically, its plugin architecture allows us to
compose cssnano out of small modules with limited
responsibilities. It also allows you to easily insert cssnano into
your build step, along with other processors that can lint your
CSS for errors, or transpile future syntax.
</p>
<img src={useBaseUrl('img/postcss.svg')} alt="" />
</div>
</section>
</main>
Expand Down
28 changes: 1 addition & 27 deletions site/src/pages/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,30 +43,9 @@
justify-content: center;
}

.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}

.h2 {
width: 100%;
text-align: center;
margin: 10px auto;
padding: 10px;
}

.h1 {
.h1, .h2 {
width: 100%;
text-align: center;
margin: 10px auto;
padding: 20px;
}

.flex {
display: flex;
flex-wrap: nowrap;
}

.flex1 {
Expand Down Expand Up @@ -149,8 +128,3 @@
.inputError[data-theme='light'] {
background-color: #ff5959;
}

.main {
padding: 2em 1em;
margin: 2em auto;
}

0 comments on commit c954c71

Please sign in to comment.