diff --git a/_compress_images_cache.yml b/_compress_images_cache.yml index e44af77c7..93ccf2609 100644 --- a/_compress_images_cache.yml +++ b/_compress_images_cache.yml @@ -394,4 +394,4 @@ assets/images/guide/foundations/wallet-interoperability/wallet-interoperability. assets/images/guide/foundations/wallet-interoperability/wallet-interoperability-mobile.jpg: wallet-interoperability-mobile.jpg assets/images/guide/foundations/wallet-interoperability/wallet-interoperability-mobile@2x.jpg: wallet-interoperability-mobile@2x.jpg assets/images/guide/foundations/wallet-interoperability/wallet-interoperability-preview.jpg: wallet-interoperability-preview.jpg -assets/images/guide/foundations/foundations-preview.jpg: foundations-preview.jpg +assets/images/guide/foundations/foundations-preview.jpg: foundations-preview.jpg \ No newline at end of file diff --git a/assets/images/guide/resources/content-guidelines-preview.jpg b/assets/images/guide/contribute/content-guidelines-preview.jpg similarity index 100% rename from assets/images/guide/resources/content-guidelines-preview.jpg rename to assets/images/guide/contribute/content-guidelines-preview.jpg diff --git a/assets/images/guide/contribute/contribute-preview.jpg b/assets/images/guide/contribute/contribute-preview.jpg new file mode 100644 index 000000000..a17450402 Binary files /dev/null and b/assets/images/guide/contribute/contribute-preview.jpg differ diff --git a/assets/images/guide/resources/formatting-preview.jpg b/assets/images/guide/contribute/formatting-preview.jpg similarity index 100% rename from assets/images/guide/resources/formatting-preview.jpg rename to assets/images/guide/contribute/formatting-preview.jpg diff --git a/assets/images/guide/resources/resources-preview.jpg b/assets/images/guide/resources/resources-preview.jpg deleted file mode 100644 index e747d59f1..000000000 Binary files a/assets/images/guide/resources/resources-preview.jpg and /dev/null differ diff --git a/guide/contribute/content-guidelines.md b/guide/contribute/content-guidelines.md new file mode 100644 index 000000000..7282d879d --- /dev/null +++ b/guide/contribute/content-guidelines.md @@ -0,0 +1,89 @@ +--- +layout: guide +title: Content guidelines +description: Writing tips for authors of the Bitcoin Design Guide. +nav_order: 10 +parent: Contribute +permalink: /guide/contribute/content-guidelines/ +image: /assets/images/guide/contribute/content-guidelines-preview.jpg +--- + +# Content guidelines + +The Bitcoin Design Guide is the work of many authors with different backgrounds, each with their own unique voice and perspective. To help us ensure a consistent written voice throughout the guide, follow these content guidelines. + +#### Know your reader + +This guide is crafted for anyone interested in building an effective Bitcoin application. To understand who are you writing for, familiarize yourself with our [Target audience]({{ '/guide/target-audience' | relative_url }}). + +#### Speak to the reader + +Address the reader directly. Whenever possible, try using active instead of passive voice. Make reader a part the conversation by using second-person pronouns like "you, your and yours". Do not write in first-person and avoid giving predictions and personal opinions. + +##### Don't + +*My wallet balance is 1 bitcoin (BTC). If I have recently mined a block, this could be a fresh whole bitcoin. However, it is most likely going to be an accumulation of UTXOs (change) from previous bitcoin transactions.* + +##### Do + +*Your wallet balance is 1 bitcoin (BTC). If you have recently mined a block, this could be a fresh whole bitcoin. However, it is most likely going to be an accumulation of UTXOs (change) from your previous bitcoin transactions.* + + +#### Use simple language + +Bitcoin is a global currency. Not everyone using this guide is a native English speaker. Make sure you are writing in plain, easy to follow English. If you're still not sure, try using a readability tool to analyze your text and make recommendations. We like [Hemingway](http://www.hemingwayapp.com). + +#### Be concise + +Focus on information relevant to the reader. Use direct, clear, concise sentences that are easy to understand. Try to reduce the word count to just the right brevity without being obscure. + +##### Don't + +*The wallet-application will generate a wallet with a keypair, then encrypt and back the key up to a location that the user is unlikely to lose access to, while hard for a malicious third party to gain access to.* + +##### Do + +*First the application generates a wallet with a keypair. Then, the key is encrypted and backed up to a location convenient and safe for the user, yet hard to for a malicious third-party to gain access to.* + +#### Make content scannable + +On the internet, majority of people scans the content before reading it. By scanning, a reader tries to search for relevant information on the page. +Split text into paragraphs, use links, text styling and images to enhance the scanability. Per paragraph, you should have 3-4 sentences. + +#### Linking + +[Linking]({{ '/guide/contribute/formatting/#links' | relative_url }}) provides necessary context and helps avoid information repetition. Link to the [Glossary]({{ '/guide/glossary' | relative_url }}) or to another page in the guide whenever possible. If information isn't available, consider linking to a reputable third-party resource. + +#### Give tips, not commands + +When giving instruction, stick to broad strokes. They can be adjusted over time to grow with a project and its designer. Overly-detailed instructions could easily get outdated with the next software patch. + +#### Get the reader involved + +The Design Guide is a set of recommended solutions and practices based on our research that should encourage self-sufficient thinking and creativity. Motivate people to think critically and inspire them to come up with their own solutions. + +#### Show, don’t tell + +When it's possible, try to provide an example or a visual instead of highly-technical or text-heavy explanation. Feel free to reference other software using screenshots. + +##### Do + +*The user’s wallet currently has a balance of 2.845 BTC, and is comprised of 4 UTXOs:* +* *1 BTC from Ed* +* *0.5 BTC from Ed* +* *0.845 BTC from Jane* +* *0.5 from Joe* +*These UTXOs can also be grouped into “clusters” from the individual senders (see diagram)*. +![](assets/images/payments/cluster-options.png) + +#### Use the right medium + +A picture is worth a thousand words, but so are videos, interactive prototypes, diagrams, and more. Don't be afraid to try a different medium if you think it will inform better than text or a picture. + +#### Be humble + +The guide is a work in progress and needs to evolve to stay relevant. What we write today may not be applicable tomorrow. Have fun. Don't overthink things. Bitcoin, and therefore this guide, is the ultimate work-in-progress. + +#### Write in the open + +It's a good idea to ask for directions by seeking feedback early. This may stop you from wandering too far in the wrong direction. There is a whole community around you that's ready to jump in and help. diff --git a/guide/contribute/contribute.md b/guide/contribute/contribute.md new file mode 100644 index 000000000..4f1e0f5b0 --- /dev/null +++ b/guide/contribute/contribute.md @@ -0,0 +1,31 @@ +--- +layout: guide +title: Contribute +description: Additional material for both readers and writers of the guide. +nav_order: 9 +has_children: true +permalink: /guide/contribute/ +image: /assets/images/guide/contribute/contribute-preview.jpg +--- + +# Contribute to the Guide + +People around the internet build and shape the Bitcoin Design Guide every day. You can be the part of our open community too! + +This page shows you how to get involved and start contributing. + +--- + +**[Content guidelines]({{ '/guide/contribute/content-guidelines/' | relative_url }})** + +Tips on how to write for the guide, with the goal of achieving a consistent tone across all pages. + +--- + +**[Formatting]({{ '/guide/contribute/formatting/' | relative_url }})** + +Layout and formatting options available for content pages, from headers and blockquotes to images and embeds. + +--- + +These contribution guidelines are for the Bitcoin Design Guide project. To get involved with the broader Bitcoin Design community and projects, check out [general contribution guidelines](https://bitcoin.design/contribute/). diff --git a/guide/contribute/formatting.md b/guide/contribute/formatting.md new file mode 100644 index 000000000..4ad00df21 --- /dev/null +++ b/guide/contribute/formatting.md @@ -0,0 +1,420 @@ +--- +layout: guide +title: Formatting +description: Visual examples of formatting options available for content authors. +nav_order: 11 +parent: Contribute +permalink: /guide/contribute/formatting/ +image: /assets/images/guide/contribute/formatting-preview.jpg +--- + +# Formatting + +This page showcases the various formatting and layout options available for content. This allows editors to better understand their toolbox and access reference code. It also allows for designers to see the design system in one place. The design source file is a public Figma community file you can find [here](https://www.figma.com/community/file/862622015964353400/Bitcoin-Designers-site). To improve the design, please start with the Figma file and make a proposal in Slack or Github before implementing. + + +## Basic markdown formatting + +We use [Markdown](https://daringfireball.net/projects/markdown/) when writing content. Markdown is a plain-text formatting syntax that helps us better prepare our text for the web. Below you can find an overview of commonly used syntax elements. + +### Text formatting + +Text can be **bold**, _italic_, or ~~strikethrough~~. + +```markdown +**bold** +_italic_ +~~strikethrough~~ +``` +There should be whitespace between paragraphs. + +### Headers + +```markdown +# h1 +## h2 +### h3 +#### h4 +##### h5 +###### h6 +``` + +# h1 header +## h2 header +### h3 header +#### H4 header +##### h5 header +###### h6 header + +### Blockquote + +```markdown +> This is a blockquote text. +``` + +> This is a blockquote text. + + +### Links + +### External Links + +```markdown +[Link to another page](https://bitcoin.org/bitcoin.pdf). +``` + +[Link to another page](https://bitcoin.org/bitcoin.pdf). + +#### Internal links + +```markdown +[Linking]({{ '/guide/getting-started/why-bitcoin-is-unique/' | relative_url }}) +``` +[Linking]({{ '/guide/getting-started/why-bitcoin-is-unique/' | relative_url }}) + +### Images + +Let's start with a very wide image that extends beyond the content with on desktops. Note how a different images is shown on mobile. This can be used to reformat image content to a portrait format. + +{% raw %} +```liquid +{% include picture.html + image = "/assets/images/style/example-image-wide-desktop.jpg" + retina = "/assets/images/style/example-image-wide-desktop@2x.jpg" + mobile = "/assets/images/style/example-image-wide-mobile.jpg" + mobileRetina = "/assets/images/style/example-image-wide-mobile@2x.jpg" + alt-text = "Example image" + width = 1600 + height = 800 + layout = "full-width" +%} +``` +{% endraw %} + +{% include picture.html + image = "/assets/images/style/example-image-wide-desktop.jpg" + retina = "/assets/images/style/example-image-wide-desktop@2x.jpg" + mobile = "/assets/images/style/example-image-wide-mobile.jpg" + mobileRetina = "/assets/images/style/example-image-wide-mobile@2x.jpg" + alt-text = "Example image" + width = 1600 + height = 800 + layout = "full-width" +%} + +#### Image fits content width + +{% raw %} +```liquid +{% include picture.html + image = "/assets/images/style/example-image-wide-desktop.jpg" + retina = "/assets/images/style/example-image-wide-desktop@2x.jpg" + mobile = "/assets/images/style/example-image-wide-mobile.jpg" + mobileRetina = "/assets/images/style/example-image-wide-mobile@2x.jpg" + alt-text = "Example image" + width = 1600 + height = 800 +%} +``` +{% endraw %} + +{% include picture.html + image = "/assets/images/style/example-image-wide-desktop.jpg" + retina = "/assets/images/style/example-image-wide-desktop@2x.jpg" + mobile = "/assets/images/style/example-image-wide-mobile.jpg" + mobileRetina = "/assets/images/style/example-image-wide-mobile@2x.jpg" + alt-text = "Example image" + width = 1600 + height = 800 +%} +### Image inline with the content + +Images can also be inline with the content. This one is inline on desktop, but takes the full screen width on mobile. + +{% raw %} +```liquid +
+ +{% include image.html + image = "/assets/images/style/example-image-square.jpg" + retina = "/assets/images/style/example-image-square@2x.jpg" + alt-text = "Example image" + width = 400 + height = 400 + layout = "float-left-desktop" +%} +``` +{% endraw %} + +
+ +{% include image.html + image = "/assets/images/style/example-image-square.jpg" + retina = "/assets/images/style/example-image-square@2x.jpg" + alt-text = "Example image" + width = 400 + height = 400 + layout = "float-left-desktop" +%} + +Mobile app stores do a good job at providing previews of what using an app will be like. Through copy, videos, images and reviews, users can make informed decisions about the product they are evaluating. Open-source software is typically downloaded via a website or from Github and each project decides what information to present. + +
+ +#### Image inline on mobile and desktop + +This next image is inline on both mobile and desktop. + +{% raw %} +```liquid +
+ +{% include image.html + image = "/assets/images/style/example-image-square.jpg" + retina = "/assets/images/style/example-image-square@2x.jpg" + alt-text = "Example image" + width = 100 + height = 100 + layout = "float-left" +%} + +Mobile app stores do a good job at providing previews of what using an app will be like. Through copy, videos, images and reviews, users can make informed decisions about the product they are evaluating. Open-source software is typically downloaded via a website or from Github and each project decides what information to present. + +
+``` +{% endraw %} + +
+ +{% include image.html + image = "/assets/images/style/example-image-square.jpg" + retina = "/assets/images/style/example-image-square@2x.jpg" + alt-text = "Example image" + width = 100 + height = 100 + layout = "float-left" +%} + +Mobile app stores do a good job at providing previews of what using an app will be like. Through copy, videos, images and reviews, users can make informed decisions about the product they are evaluating. Open-source software is typically downloaded via a website or from Github and each project decides what information to present. + +
+ +### Lists + +Breaking down content into lists is useful for readability. Here are examples of different list types. + +#### Unordered list: + +```markdown +* Item foo +* Item bar +* Item baz +* Item zip +``` +* Item foo +* Item bar +* Item baz +* Item zip + +#### Ordered list: + +```markdown +1. Item one +1. Item two +1. Item three +1. Item four +``` +1. Item one +1. Item two +1. Item three +1. Item four + +#### Nested list + +```markdown +- level 1 item + - level 2 item + - level 2 item + - level 3 item + - level 3 item +- level 1 item + - level 2 item + - level 2 item + - level 2 item +- level 1 item + - level 2 item + - level 2 item +- level 1 item +``` +- level 1 item + - level 2 item + - level 2 item + - level 3 item + - level 3 item +- level 1 item + - level 2 item + - level 2 item + - level 2 item +- level 1 item + - level 2 item + - level 2 item +- level 1 item + +#### Nesting an ol in ul in an ol + +```markdown +- level 1 item (ul) + 1. level 2 item (ol) + 1. level 2 item (ol) + - level 3 item (ul) + - level 3 item (ul) +- level 1 item (ul) + 1. level 2 item (ol) + 1. level 2 item (ol) + - level 3 item (ul) + - level 3 item (ul) + 1. level 4 item (ol) + 1. level 4 item (ol) + - level 3 item (ul) + - level 3 item (ul) +- level 1 item (ul) +``` +- level 1 item (ul) + 1. level 2 item (ol) + 1. level 2 item (ol) + - level 3 item (ul) + - level 3 item (ul) +- level 1 item (ul) + 1. level 2 item (ol) + 1. level 2 item (ol) + - level 3 item (ul) + - level 3 item (ul) + 1. level 4 item (ol) + 1. level 4 item (ol) + - level 3 item (ul) + - level 3 item (ul) +- level 1 item (ul) + +#### Task list + +```markdown +- [ ] Hello, this is a TODO item +- [ ] Hello, this is another TODO item +- [x] Goodbye, this item is done +``` +- [ ] Hello, this is a TODO item +- [ ] Hello, this is another TODO item +- [x] Goodbye, this item is done + +#### Definition with HTML syntax. + +```markdown +
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+``` +
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+ +### Tables + +```markdown +| head1 | head two | three | +|:-------------|:------------------|:------| +| ok | good swedish fish | nice | +| out of stock | good and plenty | nice | +| ok | good `oreos` | hmm | +| ok | good `zoute` drop | yumm | +``` + +| head1 | head two | three | +|:-------------|:------------------|:------| +| ok | good swedish fish | nice | +| out of stock | good and plenty | nice | +| ok | good `oreos` | hmm | +| ok | good `zoute` drop | yumm | + +### Code embedding + +```js +// Javascript code with syntax highlighting. +var fun = function lang(l) { + dateformat.i18n = require('./lang/' + l) + return true; +} +``` + +```ruby +# Ruby code with syntax highlighting +GitHubPages::Dependencies.gems.each do |gem, version| + s.add_dependency(gem, "= #{version}") +end +``` +### Single-line code blocks + +```markdown +Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. +``` + +``` +Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. +``` + +### There's a horizontal rule below this. + +```markdown +* * * +``` +* * * + +### Embedding content from external sources + +#### YouTube video embed + +```markdown +[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/zKMRSLbQEqk/mqdefault.jpg)](https://www.youtube.com/watch?v=zKMRSLbQEqk) +``` +[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/zKMRSLbQEqk/mqdefault.jpg)](https://www.youtube.com/watch?v=zKMRSLbQEqk) + +#### Figma embed + +Figma embeds are automatically resized to comfortable fit into the visible screen area. + +```html +
+ +
+``` + +
+ +
+ +### Footnotes + +With footnotes you can add notes and references without them appearing on page. + +```markdown +Here's a simple footnote[^1] +``` +Here's a simple footnote[^1] + +```markdown +[^1]: https://bitcoin.design "Footnote with a caption" +``` +[^1]: https://bitcoin.design "Footnote with a caption" diff --git a/guide/resources/content-guidelines.md b/guide/resources/content-guidelines.md deleted file mode 100644 index b7c9eefe6..000000000 --- a/guide/resources/content-guidelines.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -layout: guide -title: Content guidelines -description: Writing tips for authors of the Bitcoin Design Guide. -nav_order: 10 -parent: Resources -permalink: /guide/resources/content-guidelines/ -image: /assets/images/guide/resources/content-guidelines-preview.jpg ---- - -# Content guidelines - -The Bitcoin Design Guide is the work of many authors from many different backgrounds, each with their own unique voice and perspective. To help us ensure a consistent written voice throughout the guide, follow these content guidelines. - -#### Know your reader - -This guide was created specifically for designers who work on open-source, non-custodial bitcoin projects. It isn't the biggest audience in design, but it is among the most specialized. - -#### Use simple language - -Bitcoin is a global currency, so not everyone using this guide will be a native English speaker. Make sure you are are writing plain, easy to follow English. If you're still not sure, try using a readability tool to analyze your text and make recommendations. We like [Hemingway](http://www.hemingwayapp.com). - -#### Be precise - -Focus on what's most useful to your reader. If you suspect that something isn't working, it probably isn't. If a page or a paragraph gets too long, split it up. If you want users to dive deeper into a topic that is not essential to the guide, consider linking to a third-party resource. - -#### Speak to the reader - -Address the reader directly and make them a part of the conversation by using second-person pronouns like "you," "your," and "yours." - -#### Give tips, not commands - -When giving instruction, stick to broad strokes. They can be adjusted over time to grow with a project and its designer. Overly detailed instructions are usually outdated by the next software patch. - -#### Get the reader involved - -Consider asking questions before giving answers. This encourages self-sufficient thinking that will benefit readers more than cutting straight to the chase. You can also add work-sheets, to-do lists, do's and don'ts, and other instructive examples. - -#### Use the right medium - -A picture is worth a thousand words, but so are videos, interactive prototypes, diagrams, and more. Don't be afraid to try a different medium if you think it will inform better than text or a picture. If you'd like to help us create this kind of content, visit https://bitcoin.design/ and join our Slack. - -#### Show examples - -Feel free to reference other software using screenshots. Remember to indicate the product and version. Focus on what you like about them instead of what you don't like. - -#### Be humble - -The guide is a work in progress and needs to evolve to stay relevant. What we write today may not be applicable tomorrow. Have fun. Don't overthink things. Bitcoin, and therefore this guide, is the ultimate work-in-progress. - -#### Write in the open - -It's a good idea to ask for directions by seeking feedback early. This may stop you from wandering too far in the wrong direction. There is a whole community around you that's ready to jump in and help. - - diff --git a/guide/resources/formatting.md b/guide/resources/formatting.md deleted file mode 100644 index 5f0719856..000000000 --- a/guide/resources/formatting.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -layout: guide -title: Formatting -description: Visual examples of formatting options available for content authors. -nav_order: 11 -parent: Resources -permalink: /guide/resources/formatting/ -image: /assets/images/guide/resources/formatting-preview.jpg ---- - -# Formatting - -This page showcases the various formatting and layout options available for content. This allows editors to better understand their toolbox and access reference code. It also allows for designers to see the design system in one place. - -The design source file is a public Figma community file you can find [here](https://www.figma.com/community/file/862622015964353400/Bitcoin-Designers-site). To improve the design, please start with the Figma file and make a proposal in Slack or Github before implementing. - ---- - -Text can be **bold**, _italic_, or ~~strikethrough~~. - -[Link to another page]({{ '/guide' | relative_url }}). - -There should be whitespace between paragraphs. - -There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project[^1]. - -# [](#header-1)Header 1 - -This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. - -## [](#header-2)Header 2 - -> This is a blockquote following a header. -> -> When something is important enough, you do it even if the odds are not in your favor. - -### [](#header-3)Header 3 - -```js -// Javascript code with syntax highlighting. -var fun = function lang(l) { - dateformat.i18n = require('./lang/' + l) - return true; -} -``` - -```ruby -# Ruby code with syntax highlighting -GitHubPages::Dependencies.gems.each do |gem, version| - s.add_dependency(gem, "= #{version}") -end -``` - -#### [](#header-4)Header 4 - -* This is an unordered list following a header. -* This is an unordered list following a header. -* This is an unordered list following a header. - -##### [](#header-5)Header 5 - -1. This is an ordered list following a header. -2. This is an ordered list following a header. -3. This is an ordered list following a header. - -###### [](#header-6)Header 6 - -| head1 | head two | three | -|:-------------|:------------------|:------| -| ok | good swedish fish | nice | -| out of stock | good and plenty | nice | -| ok | good `oreos` | hmm | -| ok | good `zoute` drop | yumm | - -### There's a horizontal rule below this. - -* * * - -### Here is an unordered list: - -* Item foo -* Item bar -* Item baz -* Item zip - -### And an ordered list: - -1. Item one -1. Item two -1. Item three -1. Item four - -### And a nested list: - -- level 1 item - - level 2 item - - level 2 item - - level 3 item - - level 3 item -- level 1 item - - level 2 item - - level 2 item - - level 2 item -- level 1 item - - level 2 item - - level 2 item -- level 1 item - -### Nesting an ol in ul in an ol - -- level 1 item (ul) - 1. level 2 item (ol) - 1. level 2 item (ol) - - level 3 item (ul) - - level 3 item (ul) -- level 1 item (ul) - 1. level 2 item (ol) - 1. level 2 item (ol) - - level 3 item (ul) - - level 3 item (ul) - 1. level 4 item (ol) - 1. level 4 item (ol) - - level 3 item (ul) - - level 3 item (ul) -- level 1 item (ul) - -### And a task list - -- [ ] Hello, this is a TODO item -- [ ] Hello, this is another TODO item -- [x] Goodbye, this item is done - -### Figma embed - -Figma embeds are automatically resized to comfortable fit into the visible screen area. - -
- -
- -### Small encoded image - -![](data:image/png;base64,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) - -### Image - -Let's start with a very wide image that extends beyond the content with on desktops. Note how a different images is shown on mobile. This can be used to reformat image content to a protrait format. - -{% include picture.html - image = "/assets/images/style/example-image-wide-desktop.jpg" - retina = "/assets/images/style/example-image-wide-desktop@2x.jpg" - mobile = "/assets/images/style/example-image-wide-mobile.jpg" - mobileRetina = "/assets/images/style/example-image-wide-mobile@2x.jpg" - alt-text = "Example image" - width = 1600 - height = 800 - layout = "full-width" -%} - -**Next is an image that fits exactly the content width.** - -{% include picture.html - image = "/assets/images/style/example-image-wide-desktop.jpg" - retina = "/assets/images/style/example-image-wide-desktop@2x.jpg" - mobile = "/assets/images/style/example-image-wide-mobile.jpg" - mobileRetina = "/assets/images/style/example-image-wide-mobile@2x.jpg" - alt-text = "Example image" - width = 1600 - height = 800 -%} - -**Images can also be inline with the content. This one is inline on desktop, but takes the full screen width on mobile.** - -
- -{% include image.html - image = "/assets/images/style/example-image-square.jpg" - retina = "/assets/images/style/example-image-square@2x.jpg" - alt-text = "Example image" - width = 400 - height = 400 - layout = "float-left-desktop" -%} - -Mobile app stores do a good job at providing previews of what using an app will be like. Through copy, videos, images and reviews, users can make informed decisions about the product they are evaluating. Open-source software is typically downloaded via a website or from Github and each project decides what information to present. - -
- -**This next image is inline on both mobile and desktop.** - -
- -{% include image.html - image = "/assets/images/style/example-image-square.jpg" - retina = "/assets/images/style/example-image-square@2x.jpg" - alt-text = "Example image" - width = 100 - height = 100 - layout = "float-left" -%} - -Mobile app stores do a good job at providing previews of what using an app will be like. Through copy, videos, images and reviews, users can make informed decisions about the product they are evaluating. Open-source software is typically downloaded via a website or from Github and each project decides what information to present. - -
- -### Definition lists can be used with HTML syntax. - -
-
Name
-
Godzilla
-
Born
-
1952
-
Birthplace
-
Japan
-
Color
-
Green
-
- -``` -Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. -``` - -``` -The final element. -``` - -[^1]: https://bitcoin.design "Footnote with a caption" diff --git a/guide/resources/resources.md b/guide/resources/resources.md deleted file mode 100644 index 440e16075..000000000 --- a/guide/resources/resources.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: guide -title: Resources -description: Additional material for both readers and writers of the guide. -nav_order: 11 -has_children: true -permalink: /guide/resources/ -image: /assets/images/guide/resources/resources-preview.jpg ---- - -# Resources - -This section includes additional materials for both readers and writers of the guide. - ---- - -**[Content guidelines]({{ '/guide/resources/content-guidelines/' | relative_url }})** - -Tips on how to write for the guide, with the goal of achieving a consistent tone across all pages. - ---- - -**[Formatting]({{ '/guide/resources/formatting/' | relative_url }})** - -Layout and formatting options available for content pages, from headers and blockquotes to images and embeds.