{"id":1461,"date":"2017-03-20T10:22:56","date_gmt":"2017-03-20T10:22:56","guid":{"rendered":""},"modified":"2025-06-17T21:00:06","modified_gmt":"2025-06-17T21:00:06","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/shiawase.ch\/?page_id=1461","title":{"rendered":"Style Guide"},"content":{"rendered":"\n<p class=\"intro\">You can add an introductory larger size text to your articles by simply wrapping a paragraph in a p tag with the CSS class of \u201cintro\u201d. Put simply, larger text will usually be read before smaller text.<\/p>\n\n\n\n<p>We paid a lot of attention to getting the basics of our typography right in the new WordPress Blog theme. The purpose of this page is to help determine what default settings are with CSS and to make sure that all possible elements are included. For example we looked at headings. Lovely headings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Heading Two Formatting<\/h2>\n\n\n\n<p><strong><span class=\"dropcap\">D<\/span>ropcap<\/strong> can be added by wrapping the first letter of the first word in a span tag with the CSS class of \u201cdropcap\u201d. Instead of using the body text font, we use the display font from our titles. This also ties the two elements together if the display font works well with the body text.openers.<\/p>\n\n\n\n<p>We&#8217;ve considered the needs of cooks that want to start their recipe journal, so we are styled the recipe format in such way that it beautifully displays the preparation steps.<\/p>\n\n\n\n<p>[recipe title=&#187;Pumpkin Pancakes with Apple Compote and Candied Nuts&#187; servings=&#187;4-6&#8243; time=&#187;1hr 15mins&#187; difficulty=&#187;easy&#187;]<\/p>\n\n\n\n<p>Put your recipe here. Tip: use ordered and unordered lists, headings, images, and links to improve the look of your recipe. You can also use special tags to format notes, ingredients, and directions.<\/p>\n\n\n\n<p>[recipe-ingredients]<br>&#8211; 1 cup raw shelled nuts<br>&#8211; 1\/4 cup light brown sugar<br>&#8211; 2 tablespoons unsalted butter<br>&#8211; 2 teaspoons rosemary<br>&#8211; 1 teaspoon flake sea salt<br>&#8211; 1\/2 teaspoon chili flakes<br>[\/recipe-ingredients]<\/p>\n\n\n\n<p>[recipe-directions]<br>1. Line a baking sheet with parchment paper and set it aside.<br>2. Melt the butter over medium high heat in a large frying pan. Add the brown sugar and stir to combine.<br>3. Continue cooking until the sugar melts, about 3 to 5 minutes, stirring every minute.<br>4. Add the nuts and cook until they are toasted and very fragrant, about 8 minutes, stirring every minute.<br>5. If the pan begins smoking, remove it from the heat and stir it until it stops smoking, then place it back over the heat and continue stirring every minute until the nuts are sufficiently toasted.<br>6. Empty the pan contents onto the parchment paper-lined baking sheet and spread the nuts mixture out evenly using a spatula. Immediately sprinkle with the rosemary, salt, and chili. Allow to cool to room temperature.<br>7. Once cooled, break apart any large chunks of nuts into individual nuts and serve.<br>[\/recipe-directions]<\/p>\n\n\n\n<p>[recipe-notes]<\/p>\n\n\n\n<p class=\"p1\">Tips &amp; Tricks: And the whipped cream rounded out all the flavors and just added a nice and fluffy element to the dish. YUM. I got all my ingredients at New Seasons Market, which is a store local to the Pacific Northwest area that sells a huge array of delicious seasonal fresh produce and all-natural ingredients. You can see if there\u2019s a store near you using their find-a-store locator here. [\/recipe-notes]<\/p>\n\n\n\n<p>[\/recipe]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Heading Three<\/h3>\n\n\n\n<p>You can also use a purely decorative font. There are thousands of decorative typefaces, and most of them aren\u2019t appropriate for use in a book\u2019s body text.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Blockquotes are a great way to display and format quotations. Insert beautiful quotes using<em><strong> the \u201cquote\u201d button<\/strong><\/em> from the visual editor. To add an author just wrap its name in a <em><strong>cite<\/strong><\/em> tag.<\/p><\/blockquote>\n\n\n\n<p>Tables are useful for lay\u00adouts where text needs to be po\u00adsi\u00adtioned side-by-side or float\u00ading at spe\u00adcif\u00adic lo\u00adca\u00adtions on the page. If mak\u00ading these is frus\u00adtrat\u00ading with the usu\u00adal lay\u00adout tools, try us\u00ading a table.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"\"><tbody><tr><td><strong>Type<\/strong><\/td><td><strong>Font<\/strong><\/td><td><strong>Description<\/strong><\/td><\/tr><tr><td><strong>Humanist<\/strong><\/td><td>Sabon<\/td><td>Closely connected to calligraphy<\/td><\/tr><tr><td><strong>Transitional<\/strong><\/td><td>Baskerville<\/td><td>More abstract and less organic<\/td><\/tr><tr><td><strong>Modern<\/strong><\/td><td>Bodoni<\/td><td>Note the thin, straight serifs<\/td><\/tr><tr><td><strong>Slab Serif<\/strong><\/td><td>Clarendon<\/td><td>Egyptian typefaces have heavy serifs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>To <span class=\"highlight\">highlight<\/span> a text, you simply need to wrap it into a &lt;span&gt; with the class \u201chighlight\u201d. This can be done in the Text editor view.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Heading four<\/h4>\n\n\n\n<h2 class=\"wp-block-heading\">Image Styles<\/h2>\n\n\n\n<p>Welcome to <strong>image alignment!<\/strong> The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let\u2019s get started.<\/p>\n\n\n\n<div class=\"wp-block-image wp-image-159 size-full\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/demos.pixelgrade.com\/wp-content\/uploads\/sites\/39\/2017\/10\/roman-kraft-156096.jpg?fit=2000%2C1481&amp;ssl=1\" alt=\"\" class=\"wp-image-159\"\/><figcaption>The image above happens to be a centered full-width example.<\/figcaption><\/figure><\/div>\n\n\n\n<p>The rest of this paragraph is filler for the sake of seeing the text wrap around a <strong>right aligned image<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/i1.wp.com\/demos.pixelgrade.com\/wp-content\/uploads\/sites\/39\/2017\/10\/jennifer-pallian-146562.jpg?fit=1000%2C1250&amp;ssl=1\" alt=\"\" class=\"wp-image-154\" width=\"500\" height=\"625\"\/><\/figure><\/div>\n\n\n\n<p>As you can see there should be some space above, below, and to the left of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words.<span style=\"font-size: 1em; line-height: 1.5;\"><br>As you can see there should be some space above, below, and to the left of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words.<\/span><\/p>\n\n\n\n<p>Let them do their jobs without any hassle from the text. In about one more sentence here, we\u2019ll see that the text moves from the right of the image down below the image in seamless transition.<\/p>\n\n\n\n<p>Don\u2019t let anyone&nbsp;else tell you differently. In just a bit here, you should see the text start to wrap below the left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah\u2026 Just like that. It never felt so good to be right.<\/p>\n\n\n\n<p>Let them do their jobs without any hassle from the text. In about one more sentence here, we\u2019ll see that the text moves from the right of the image down below the image in seamless transition.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/demos.pixelgrade.com\/wp-content\/uploads\/sites\/39\/2017\/10\/toa-heftiba-243296.jpg?fit=2300%2C1533&amp;ssl=1\" alt=\"\" class=\"wp-image-158\" width=\"575\" height=\"383\"\/><\/figure><\/div>\n\n\n\n<p>And now we\u2019re going to shift things to&nbsp;the left align. Again, there should be &nbsp;plenty of room above, below, and to the right of the image. Just look at him there\u2026 Hey guy! Way to rock that left side. I don\u2019t care what the right aligned image says, you look great.<br>Don\u2019t let anyone&nbsp;else tell you differently. In just a bit here, you should see the text start to wrap below the left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah\u2026 Just like that. It never felt so good to be right.<\/p>\n\n\n\n<p>And that\u2019s a wrap, yo! You survived the tumultuous waters of alignment. In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can add an introductory larger size text to your articles by simply wrapping a paragraph in a p tag with the CSS class of \u201cintro\u201d. Put simply, larger text will usually be read before smaller text. We paid a lot of attention to getting the basics of our typography right in the new WordPress [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":155,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1461","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/pages\/1461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shiawase.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1461"}],"version-history":[{"count":1,"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/pages\/1461\/revisions"}],"predecessor-version":[{"id":2592,"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/pages\/1461\/revisions\/2592"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shiawase.ch\/index.php?rest_route=\/wp\/v2\/media\/155"}],"wp:attachment":[{"href":"https:\/\/shiawase.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}