{"id":28,"date":"2019-02-19T21:40:05","date_gmt":"2019-02-19T19:40:05","guid":{"rendered":"https:\/\/liviucerchez.com\/vipo\/?page_id=28"},"modified":"2019-02-25T11:43:38","modified_gmt":"2019-02-25T09:43:38","slug":"styleguide","status":"publish","type":"page","link":"https:\/\/liviucerchez.com\/vipo\/styleguide\/","title":{"rendered":"Styleguide"},"content":{"rendered":"\n<h2 class=\"text-uppercase wp-block-heading\">01. Grid<\/h2>\n\n\n\n<div class=\"wp-block-columns has-6-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:120px;background-color:#f2f2f2;box-shadow: 0 -4px 0 0 rgba(32,32,32,.1) inset;\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:120px;background-color:#f2f2f2;box-shadow: 0 -4px 0 0 rgba(32,32,32,.1) inset;\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:120px;background-color:#f2f2f2;box-shadow: 0 -4px 0 0 rgba(32,32,32,.1) inset;\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:120px;background-color:#f2f2f2;box-shadow: 0 -4px 0 0 rgba(32,32,32,.1) inset;\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:120px;background-color:#f2f2f2;box-shadow: 0 -4px 0 0 rgba(32,32,32,.1) inset;\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:120px;background-color:#f2f2f2;box-shadow: 0 -4px 0 0 rgba(32,32,32,.1) inset;\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"text-uppercase wp-block-heading\">02. Colors<\/h2>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 style=\"text-align:left\" class=\"text-uppercase no-margin-bottom wp-block-heading\">Background<\/h6>\n\n\n\n<div style=\"height:60px;margin-top:8px;margin-bottom:8px;border:4px solid rgba(34,34,34,.1);\"><\/div>\n\n\n\n<p style=\"text-align:left\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">R: 255 G:255 B:255 &#8211; #FFFFFF<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 style=\"text-align:left\" class=\"text-uppercase no-margin-bottom wp-block-heading\">Alt Background<\/h6>\n\n\n\n<div style=\"height:60px;margin-top:8px;margin-bottom:8px;background-color:#f2f2f2;border:4px solid #f2f2f2;\"><\/div>\n\n\n\n<p style=\"text-align:left\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">R: 242 G:242 B:242 &#8211; #F2F2F2<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 style=\"text-align:left\" class=\"text-uppercase no-margin-bottom wp-block-heading\">Heading, Text<\/h6>\n\n\n\n<div style=\"height:60px;margin-top:8px;margin-bottom:8px;background-color:#222222;border:4px solid #222222;\"><\/div>\n\n\n\n<p style=\"text-align:left\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">R: 34 G:34 B:34 &#8211; #222222<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 style=\"text-align:left\" class=\"text-uppercase no-margin-bottom wp-block-heading\">Secondary text<\/h6>\n\n\n\n<div style=\"height:60px;margin-top:8px;margin-bottom:8px;background-color:#797D86;border:4px solid #797D86;\"><\/div>\n\n\n\n<p style=\"text-align:left\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">R: 121 G:125 B:134 &#8211; #797D86<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 style=\"text-align:left\" class=\"text-uppercase no-margin-bottom wp-block-heading\">Accent<\/h6>\n\n\n\n<div style=\"height:60px;margin-top:8px;margin-bottom:8px;background-color:#FFC962;border:4px solid #FFC962;\"><\/div>\n\n\n\n<p style=\"text-align:left\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">R: 255 G:201 B:98 &#8211; #ffc962<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 style=\"text-align:left\" class=\"text-uppercase no-margin-bottom wp-block-heading\">Links<\/h6>\n\n\n\n<div style=\"height:60px;margin-top:8px;margin-bottom:8px;background-color:#ED553B;border:4px solid #ED553B;\"><\/div>\n\n\n\n<p style=\"text-align:left\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">R: 237 G:85 B:59 &#8211; #ed553b<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"text-uppercase wp-block-heading\">03. Typography<\/h2>\n\n\n\n<p class=\"text-uppercase no-margin-bottom\"><strong>Playfair Display<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns has-3-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"background-color:#f2f2f2;padding:44px 15px;margin:8px 0;text-align:center;font-family:'Playfair Display', serif;font-size:53px;font-weight:700\">AaZz<\/div>\n\n\n\n<p style=\"text-align:center\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">Bold<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p class=\"text-uppercase no-margin-bottom\"><strong>Open&nbsp;Sans<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns has-3-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"background-color:#f2f2f2;padding:44px 15px;margin:8px 0;text-align:center;font-family:'Open Sans', serif;font-size:53px;font-weight:400\">AaZz<\/div>\n\n\n\n<p style=\"text-align:center\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">Regular<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"background-color:#f2f2f2;padding:44px 15px;margin:8px 0;text-align:center;font-family:'Open Sans', serif;font-size:53px;font-weight:600\">AaZz<\/div>\n\n\n\n<p style=\"text-align:center\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">Semibold<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"background-color:#f2f2f2;padding:44px 15px;margin:8px 0;text-align:center;font-family:'Open Sans', serif;font-size:53px;font-weight:700\">AaZz<\/div>\n\n\n\n<p style=\"text-align:center\" class=\"text-uppercase text-strong text-color-grey no-margin-bottom\">Bold<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Display<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 53px \u2014 L-Height: 1.15 (61px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"display wp-block-heading\">Display 0<\/h1>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Heading H1<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 43px \u2014 L-Height: 1.15 (50px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Heading 1<\/h1>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Heading H2<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 34px \u2014 L-Height: 1.15 (39px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Heading 2<\/h2>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Heading H3<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 27px \u2014 L-Height: 1.15 (31px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Heading 3<\/h3>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Heading H4<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 22px \u2014 L-Height: 1.15 (25px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Heading 4<\/h4>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Heading H5<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 17px \u2014 L-Height: 1.15 (21px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Heading 5<\/h5>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"text-uppercase no-margin-bottom\"><strong>Body \/ Paragraph<\/strong> <br><span class=\"text-strong text-color-grey\">Size: 14px \u2014 L-Height: 1.48 (21px)<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"no-margin-bottom\">Whenever I go back to the guest house during the morning to copy out the contract, these gentlemen are still sitting there eating their breakfasts.<\/p>\n<\/div>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Blockquote pariatur commodi enim, nobis voluptate dolorum odit laudantium fugiat cumque voluptate eligendi consequatur!<\/p><cite>Allan Johnson<\/cite><\/blockquote>\n\n\n\n<h2 class=\"text-uppercase wp-block-heading\">04. buttons &amp; media<\/h2>\n\n\n\n<p>\n<a href=\"#\" class=\"button button-primary\">Primary Button<\/a>\n<a href=\"#\" class=\"button button-secondary\">Secondary<\/a>\n<a href=\"#\" class=\"button button-grey\">Dark<\/a>\n<a href=\"#\" class=\"button\">Default<\/a>\n<\/p>\n\n\n<audio class=\"wp-audio-shortcode\" id=\"audio-28-1\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/liviucerchez.com\/vipo\/wp-content\/uploads\/sites\/25\/2019\/02\/audio-sample.mp3?_=1\" \/><a href=\"https:\/\/liviucerchez.com\/vipo\/wp-content\/uploads\/sites\/25\/2019\/02\/audio-sample.mp3\">https:\/\/liviucerchez.com\/vipo\/wp-content\/uploads\/sites\/25\/2019\/02\/audio-sample.mp3<\/a><\/audio>\n\n\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-28-1\" width=\"640\" height=\"360\" poster=\"http:\/\/media.w3.org\/2010\/05\/sintel\/poster.png\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.mp4?_=1\" \/><source type=\"video\/webm\" src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.webm?_=1\" \/><source type=\"video\/ogg\" src=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.ogv?_=1\" \/><a href=\"http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.mp4\">http:\/\/media.w3.org\/2010\/05\/sintel\/trailer.mp4<\/a><\/video><\/div>\n","protected":false},"excerpt":{"rendered":"<p>01. Grid 02. Colors Background R: 255 G:255 B:255 &#8211; #FFFFFF Alt Background R: 242 G:242 B:242 &#8211; #F2F2F2 Heading, Text R: 34 G:34 B:34 &#8211; #222222 Secondary text R: 121 G:125 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":0,"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"wp:attachment":[{"href":"https:\/\/liviucerchez.com\/vipo\/wp-json\/wp\/v2\/media?parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}