Commit 2a89d235 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

copyedits and refinements

- copy edits to content
- add correct text for Try It Out section
- update Try It Out sample to make it clear it is interactive
- add smooth scroll to page
- remove unnecessary / at the end of URLs
parent f2cde4c1
......@@ -22,6 +22,10 @@
--brand-font-secondary: "Urbanist", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--brand-font-primary);
color: var(--gray-color-600);
......@@ -218,7 +222,7 @@ header .logo > img {
padding-top: 2em;
padding-bottom: .75em;
line-height: 1.15rem;
letter-spacing: .025em;
letter-spacing: .0625rem;
font-weight: 600;
}
......@@ -233,7 +237,7 @@ section.users {
.main section.users > h2 {
font-family: var(--brand-font-primary);
font-size: 2.25rem;
font-size: 2rem;
line-height: normal;
font-style: normal;
font-weight: 700;
......@@ -468,7 +472,7 @@ section.try .toggle {
}
#editorCode .cm-editor {
max-height: 340px;
max-height: 380px;
}
#editorCode .cm-editor.cm-focused {
......@@ -669,7 +673,11 @@ section.try .toggle {
#editor {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 340px;
grid-template-rows: 380px;
}
#editorCode .cm-editor {
max-height: none;
}
}
......@@ -731,6 +739,10 @@ section.try .toggle {
}
}
span.attn {
border-bottom: 1px dotted currentColor;
}
/* compare */
section.compare {
max-width: 1120px;
......@@ -751,6 +763,9 @@ section.compare h2 {
section.compare h2 {
padding-top: 7rem;
}
section.compare {
padding-bottom: 6rem;
}
}
section.compare .sectionbody > .paragraph {
......@@ -813,24 +828,36 @@ section.compare > .content > .paragraph > p {
line-height: 1.5rem;
}
@media screen and (min-width: 769px) {
section.specifications {
padding-left: 8rem;
padding-right: 8rem;
border-radius: 1rem;
}
}
section.specifications {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: var(--brand-color);
padding-bottom: 3rem;
padding-top: 3rem;
}
@media screen and (min-width: 640px) {
section.specifications {
padding-left: 2.625rem;
padding-right: 2.625rem;
border-radius: 1rem;
margin-left: 2rem;
margin-right: 2rem;
}
}
@media (min-width: 1024px) {
section.specifications {
padding-left: 7.5rem;
padding-right: 13rem;
}
}
@media (min-width: 1184px) {
section.specifications {
margin: 0 auto;
max-width: 1120px;
}
}
section.specifications h2 {
color: white;
padding-top: 0;
......@@ -865,7 +892,7 @@ section.specifications .paragraph:not(:last-child) {
/* tools */
section.tools {
margin-top: 3rem;
margin-bottom: 3rem;
padding-bottom: 5.75rem;
max-width: 1360px;
}
......@@ -938,17 +965,16 @@ section.tools h3 {
section.tools .cards {
margin-bottom: 4rem;
display: flex;
flex-direction: column;
gap: 2rem;
display: grid;
grid-auto-flow: row;
row-gap: 1.25rem;
}
section.tools .cards > .card {
grid-row: 1;
background: #FFFFFF;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 4.5rem 2rem;
padding: 4.1875rem 1.75rem;
z-index: 1;
overflow: hidden;
position: relative;
......@@ -959,30 +985,39 @@ section.tools .cards > .card p {
line-height: 1.625rem;
}
@media screen and (min-width: 950px) {
@media screen and (min-width: 640px) {
section.tools .cards > .card {
padding: 4.1875rem 7.625rem 2.5rem 3.8125rem;
}
section.tools .cards {
row-gap: 2rem;
}
}
@media screen and (min-width: 1024px) {
section.tools .cards {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: row;
grid-gap: 0.25rem 1rem;
grid-auto-flow: column;
grid-gap: 0.25rem 1.25rem;
}
}
@media screen and (max-width: 949px) and (min-width: 769px) {
section.tools .cards > .card {
padding: 3rem 4rem;
margin-left: 3rem;
margin-right: 3rem;
padding-top: 3.75rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 2.5rem;
}
}
@media screen and (min-width: 1408px) {
@media screen and (min-width: 1280px) {
section.tools .cards {
grid-gap: 0.25rem 2rem;
}
section.tools .cards > .card {
padding: 6rem 4rem;
padding: 4.75rem;
padding-bottom: 2.5rem;
}
}
......@@ -1032,10 +1067,9 @@ section.tools .cards > .card h3 {
padding-bottom: 1rem;
font-family: var(--brand-font-primary);
color: #3E3E3E;
display: flex;
flex-direction: column;
align-items: flex-start;
display: grid;
gap: 3rem;
justify-content: start;
}
section.tools .cards > .card a {
......@@ -1053,13 +1087,13 @@ section.tools .cards > .card a {
@media screen and (min-width: 1024px) {
section.tools {
margin-top: 7rem;
padding-bottom: 7rem;
margin-top: 6.125rem;
padding-bottom: 6.125rem;
margin-left: auto;
margin-right: auto;
}
section.tools h3 {
padding-bottom: 5rem;
padding-bottom: 5.75rem;
}
}
......@@ -1067,7 +1101,7 @@ section.tools .cards > .card a {
section.docs {
color: white;
background-color: var(--brand-color-100);
padding-bottom: 4rem;
padding-bottom: 4.5rem;
}
section.docs h2 {
......@@ -1090,7 +1124,7 @@ section.docs h2 {
font-size: 3rem;
line-height: 4rem;
max-width: 780px;
padding-bottom: 2.5rem;
padding-bottom: 1.875rem;
}
}
......@@ -1109,7 +1143,8 @@ section.docs a {
background-color: var(--brand-color-700);
font-weight: 500;
font-size: 1rem;
padding: 1rem 2rem;
line-height: 1.5rem;
padding: 0.875rem 1.5rem;
font-family: var(--brand-font-secondary);
}
......@@ -1127,7 +1162,7 @@ section.docs a {
margin-bottom: .5rem;
background-color: white;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
color: #CB2B48;
color: var(--brand-color-700);
cursor: pointer;
text-align: center;
white-space: nowrap;
......
......@@ -10,14 +10,14 @@ export function init() {
const processor = Asciidoctor()
const input = `= Hello, AsciiDoc!
Doc Writer <doc@example.com>
An introduction to https://asciidoc.org[AsciiDoc].
This is an interactive editor.
Use it to try https://asciidoc.org[AsciiDoc].
== First Section
== Section Title
* item 1
* item 2
* list item 1
* list item 2
[,ruby]
----
......
......@@ -5,16 +5,16 @@ layout: main
:includedir@: ./examples
AsciiDoc is a plain text markup language for writing technical content.
It's packed with semantic elements and equipped with features to reuse and modularize content.
It's packed with semantic elements and equipped with features to modularize and reuse content.
AsciiDoc content can be composed using a text editor, managed in a version control system, and published in a variety of output formats.
xref:#docs[Get started,role=button]
xref:#try[Try it out,button,role="button invert"]
xref:#try[Get started,role=button]
https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/[Quick Reference,button,role="button invert"]
image::./assets/img/intellij-asciidoc-editor.png[]
[#users.user]
== Trusted by developers and technical writers
== Trusted by developers and technical writers worldwide
[unstyled.companies]
* image:./assets/img/couchbase-logo-white.svg[]
......@@ -31,8 +31,8 @@ image::./assets/img/intellij-asciidoc-editor.png[]
AsciiDoc provides all the semantic elements you need to write and publish a technical book.
And yet, it's simple enough to use for a README or note taking.
Where youll see AsciiDoc used most often is for writing technical documentation.
It also can be used to create HTML-based slides for presentations.
Where you'll find AsciiDoc used most often is for writing technical documentation.
It can also be used to create HTML-based slides for presentations.
Explore some of these use cases in this section.
[.tab]
......@@ -86,17 +86,21 @@ image::./assets/img/man-page-git-for-each-ref.png[]
[#try-it-out.try]
== Try it out: Experience the magic of a lightweight markup language
AsciiDoc was designed to strike a balance between a formalized, machine-oriented syntax and raw text with shorthands.
In fact, it's able to capture and encode nearly all of the semantics of a formalized language while still looking mostly like raw text.
You write AsciiDoc using plain text.
That means most of what you type is what you want to communicate.
You only have to enter special characters (aka markup) when you need to encode meaning that cannot otherwise be inferred.
Start a line with a series of equal signs to make a section title.
Prefix text with an asterisk to make an item in a list.
[.attn]#Try it out below to see for yourself!#
[#compare.compare,separator=?]
== How does it stack up? Compare AsciiDoc against alternative document formats
[#compare.compare]
== How AsciiDoc stacks up: Compare AsciiDoc against alternative document formats
AsciiDoc was designed to strike a balance between a formalized, machine-oriented syntax and raw text with shorthands.
In fact, it's able to capture and encode nearly all of the semantics of a formalized language while still looking mostly like raw text.
AsciiDoc is designed to strike a balance between a formalized, machine-oriented syntax and plain text with shorthands.
In fact, it's able to capture and encode nearly all of the semantics of a formalized language while still being readable in source form.
Want to see how AsciiDoc stacks up against alternatives?
Browse the sample documents prepared below.
Browse the sample documents below to compare.
[.tab.compare]
--
......@@ -264,7 +268,7 @@ The specification for that language is managed and governed by the AsciiDoc Lang
Having a specification allows the language to be processed consistently by a variety of implementations that span language runtimes, authoring environments, and application integrations.
The process for developing the specification is underway.
https://asciidoc-wg.eclipse.org/[Get involved,role=action]
https://asciidoc-wg.eclipse.org[Get involved,role=action]
[#tools]
== A growing ecosystem: Support for AsciiDoc is at your fingertips
......@@ -276,7 +280,7 @@ https://asciidoc-wg.eclipse.org/[Get involved,role=action]
If you want to convert AsciiDoc documents yourself, you may look for a processor like Asciidoctor.
https://docs.asciidoctor.org/[Explore,role=action]
https://docs.asciidoctor.org[Explore,role=action]
--
[.card]
......@@ -286,7 +290,7 @@ https://docs.asciidoctor.org/[Explore,role=action]
If you want to preview AsciiDoc, then you'll be interested in the browser and IDE plugins that provide tooling like a live preview.
https://docs.asciidoctor.org/[Explore,role=action]
https://docs.asciidoctor.org[Explore,role=action]
--
[.card]
......@@ -296,12 +300,12 @@ https://docs.asciidoctor.org/[Explore,role=action]
If you want your AsciiDoc content to be discovered, converted, and published into a website, then you'll want a static site generator or build tool that knows how to process AsciiDoc such as Antora, the Gradle or Maven plugin, Hugo, or Jekyll.
https://docs.asciidoctor.org/[Explore,role=action]
https://docs.asciidoctor.org[Explore,role=action]
--
https://docs.asciidoctor.org/[Explore Use Cases,role="explore action"]
https://docs.asciidoctor.org[Explore the Awesomeness of AsciiDoc,role="explore action"]
[#docs]
== Get started with AsciiDoc today
https://docs.asciidoctor.org/asciidoc/latest/[View Documentation]
https://docs.asciidoctor.org/asciidoc/latest[View Documentation]
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment