{"id":156,"date":"2017-08-04T16:35:53","date_gmt":"2017-08-04T14:35:53","guid":{"rendered":"http:\/\/themedemos.webmandesign.eu\/reykjavik\/?p=156"},"modified":"2021-01-29T12:38:07","modified_gmt":"2021-01-29T12:38:07","slug":"post-2","status":"publish","type":"post","link":"https:\/\/longwaypy.com\/index.php\/2017\/08\/04\/post-2\/","title":{"rendered":"Style guide"},"content":{"rendered":"\n<p class=\"has-drop-cap wp-block-paragraph\">Below is just about every HTML element you might want to use in your blog posts. Check the source code to see the many embedded elements within paragraphs. This is also an example of text paragraph with dropcap first letter.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Heading Two<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Lorem ipsum dolor sit amet, <a title=\"test link\" href=\"#0\">test link<\/a> adipiscing elit. <strong>This is strong.<\/strong> Nullam dignissim convallis est. Quisque aliquam. <em>This is emphasized.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Heading Three<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Donec faucibus. Nunc iaculis suscipit dui. 5<sup>3<\/sup> = 125. Water is H<sub>2<\/sub>O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.<br \/>\n<cite>The New York Times<\/cite> (That\u2019s a citation).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Heading Four<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline;\">Underline.<\/span> Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Heading Five<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><abbr title=\"HyperText Markup Language\">HTML<\/abbr> and <abbr title=\"Cascading Style Sheets\">CSS<\/abbr> are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Heading Six<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type <code>COPY <var>filename<\/var><\/code>. <del>Dinner\u2019s at 5:00.<\/del><ins>Let\u2019s make that 7.<\/ins> This <span style=\"text-decoration: line-through;\">text<\/span> has been struck.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Quotes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Blockquote<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The blockquote is used to indicate the quotation of a large section of text from another source. It can be as long or as short as you\u2019d like.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>It is what you read when you don&#8217;t have to that determines what you will be when you can&#8217;t help it.<\/p><cite>Oscar Wilde<\/cite><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Pull Quote Styles<\/h3>\n\n\n\n<figure class=\"wp-block-pullquote alignright\"><blockquote><p>This pull quote is just hanging out on the right side of the post. Lorem ipsum dolor sit amet, consectetur. <\/p><\/blockquote><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Placement of a pull quote on a page may be defined in a publication\u2019s or website\u2019s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote alignleft\"><blockquote><p>And this pull quote is pulling text to the left, like a sir. Lorem ipsum dolor sit amet, consectetur. <\/p><\/blockquote><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication\u2019s house style pull quotes may be abbreviated for space and\/or paraphrased for clarity, with or without indication. There are no hard-and-fast rules for the exact formatting of pull quotes.<\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">List Items<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Unordered Lists (Nested)<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>List item one <ul><li>List item one <ul><li>List item one<\/li><li>List item two<\/li><li>List item three<\/li><li>List item four <\/li><\/ul><\/li><li>List item two<\/li><li>List item three<\/li><li>List item four <\/li><\/ul><\/li><li>List item two<\/li><li>List item three<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Ordered List (Nested)<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>List item one\n<ol>\n<li>List item one\n<ol>\n<li>List item one<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ol>\n<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ol>\n<\/li><li>List item two<\/li><li>List item three<\/li><li>List item four<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Ordered List With <code>start<\/code> and <code>reversed<\/code> Attribute<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>List item one (<code>start=\"8\"<\/code>)\n<ol>\n<li>List item one\n<ol reversed=\"reversed\">\n<li>List item one (<code>reversed=\"reversed\"<\/code>)<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ol>\n<\/li>\n<li>List item two<\/li>\n<li>List item three<\/li>\n<li>List item four<\/li>\n<\/ol>\n<\/li><li>List item two<\/li><li>List item three<\/li><li>List item four<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Definition Lists<\/h3>\n\n\n\n<dl>\n<dt>Definition List Title<\/dt>\n<dd>Definition list division.<\/dd>\n<dt>Startup<\/dt>\n<dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.<\/dd>\n<dt>#dowork<\/dt>\n<dd>Coined by Rob Dyrdek and his personal body guard Christopher \u00abBig Black\u00bb Boykins, \u00abDo Work\u00bb works as a self motivator, to motivating your friends.<\/dd>\n<dt>Do It Live<\/dt>\n<dd>I&#8217;ll let Bill O&#8217;Reilly will <a title=\"We'll Do It Live\" href=\"https:\/\/www.youtube.com\/watch?v=O_HyZ5aW76c\">explain<\/a> this one.<\/dd>\n<\/dl>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Code Formatting, Tables, Marker&nbsp;and Address<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Preformatted Text and Inline Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Code can be presented inline, like <code>&lt;?php bloginfo('stylesheet_url'); ?&gt;<\/code>, or within a <code>&lt;pre&gt;<\/code> block.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">pre {\n\tpadding: 4%;\n\tmargin-bottom: 1.62em;\n\tbackground: #eaecee;\n\toverflow: auto;\n\ttab-size: 2;\n}<\/pre>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Table Styles<\/h3>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><th>Table Header 1<\/th><th>Table Header 2<\/th><th>Table Header 3<\/th><\/tr><tr><td>Division 1<\/td><td>Division 2<\/td><td>Division 3<\/td><\/tr><tr><td>Division 1<\/td><td>Division 2<\/td><td>Division 3<\/td><\/tr><tr><td>Division 1<\/td><td>Division 2<\/td><td>Division 3<\/td><\/tr><\/tbody><\/table>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Highlight Text Style (Marker)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To use the highlight, you simply need to&nbsp;<mark>wrap the text in <code>mark<\/code> HTML tag<\/mark>. This can be done in the Text editor view. See an example below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;mark&gt;This will be highlighted.&lt;\/mark&gt;<\/pre>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Address Tag<\/h3>\n\n\n\n<address>1 Infinite Loop<br \/>\nCupertino, CA 95014<br \/>\nUnited States<\/address>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Images and Galleries<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Image Alignment<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/placehold.it\/640x480\/273a7d\/ffffff.png?text=placehold.it\" alt=\"placeholder image\" width=\"320\" height=\"277\"\/><figcaption>Captioned image<\/figcaption><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator clear is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Right Aligned Image<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/placehold.it\/640x480\/273a7d\/ffffff.png?text=placehold.it\" alt=\"placeholder text\" width=\"200\" height=\"185\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue or hologram. They may be captured by optical devices \u2013 such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.<\/p>\n\n\n\n<hr class=\"wp-block-separator clear is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Left Aligned Image<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/placehold.it\/640x480\/273a7d\/ffffff.png?text=placehold.it\" alt=\"\" width=\"200\" height=\"308\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The word image is also used in the broader sense of any two-dimensional figure such as a map, a graph, a pie chart, or an abstract painting. In this wider sense, images can also be rendered manually, such as by drawing, painting, carving, rendered automatically by printing or computer graphics technology, or developed by a combination of methods.<\/p>\n\n\n\n<hr class=\"wp-block-separator clear is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Image Gallery<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is a traditional WordPress thumbnail gallery available in all WordPress sites. To add this gallery, simply use Gallery block.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/andrew-neel-296630.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1800\" src=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/andrew-neel-296630.jpg\" alt=\"Sailing forward\" data-id=\"249\" class=\"wp-image-249\" srcset=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/andrew-neel-296630.jpg 1200w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/andrew-neel-296630-600x900.jpg 600w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/andrew-neel-296630-744x1116.jpg 744w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/andrew-neel-296630-1024x1536.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713.jpg\" alt=\"Yacht detail\" data-id=\"247\" class=\"wp-image-247\" srcset=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713.jpg 1920w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713-600x338.jpg 600w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713-744x418.jpg 744w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713-1200x675.jpg 1200w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/ian-keefe-304713-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656.jpg\" alt=\"Yacht on the sea\" data-id=\"243\" class=\"wp-image-243\" srcset=\"https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656.jpg 1920w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656-600x338.jpg 600w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656-744x418.jpg 744w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656-1200x675.jpg 1200w, https:\/\/longwaypy.com\/wp-content\/uploads\/2017\/10\/jeremy-bishop-351656-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The style guide provides you with a blueprint of the theme\u2019s default post and page HTML styles. This post also displays automatically generated table of contents. Intro image is disabled on this post.<\/p>\n","protected":false},"author":1,"featured_media":247,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[44],"class_list":["post-156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-with-sidebar"],"_links":{"self":[{"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":1,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/posts\/156\/revisions\/1245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/media\/247"}],"wp:attachment":[{"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/longwaypy.com\/index.php\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}