{"id":2583,"date":"2019-02-02T19:47:51","date_gmt":"2019-02-02T19:47:51","guid":{"rendered":"https:\/\/gpsites.co\/merch\/?p=2583"},"modified":"2019-02-02T19:47:51","modified_gmt":"2019-02-02T19:47:51","slug":"custom-styling-css","status":"publish","type":"post","link":"https:\/\/notalotofspace.com\/?p=2583","title":{"rendered":"Custom Theme Styling (CSS)"},"content":{"rendered":"\r\n<p>All of the custom CSS can be found in the <strong>Customizer &gt; Additional CSS<\/strong>. At around 400 lines it can happily remain there. But i generally recommend that it finds a home in a child theme stylesheet. Most of the common Theme CSS is covered here for the inquisitive or for those wanting to make changes. CSS for specific pages or elements are covered in their relevant posts.<\/p>\r\n\r\n\r\n\r\n<p>It should be noted that Custom CSS is only displayed on the Front End. Adding editor styles ( at this time ) is not achievable with an imported Site.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Typography<\/h2>\r\n\r\n\r\n\r\n<p>The vast majority of the theme styling, particularly Typography, Spacing and Colors are set in the customizer.  But there is some custom CSS at play.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Large H2 Heading<\/h3>\r\n\r\n\r\n\r\n<p>The <strong>large-heading<\/strong> class can be added to a H2 Title Block to increase its size.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"large-heading wp-block-heading\">This is the large H2 heading<\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>h2.large-heading {\r\n    font-size: calc(28px + (64 - 28)*(100vw - 400px)\/(1600 - 400));\r\n    line-height: 1.1em;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Unless you&#8217;re a fan of algebra this CSS looks complicated. In a nut shell it sets the font size dynamically based on the current screen size. Our font size range is 28px to 64px. And our screen size range is 400px to 1600px. Try adjusting your browser width to see the effect.<br>If you want more information on fluid typography then check out <a href=\"https:\/\/www.smashingmagazine.com\/2016\/05\/fluid-typography\/\">Responsive And Fluid Typography With vh And vw Units<\/a><\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Hover Link<\/h3>\r\n\r\n\r\n\r\n<p>The <strong>loud-link<\/strong> class will add an icon and underline hover effect. It should only be applied to a Text Block that only contains the link.<\/p>\r\n\r\n\r\n\r\n<p class=\"loud-link\"><a href=\"#\">Like this here<\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Buttons<\/h2>\r\n\r\n\r\n\r\n<p>All Theme button colors and typography are controlled via the customizer.  The Happy Forms button has its own styling controls in the plugins settings. The additional rounded corners and hover styling is applied using this CSS:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>a.button,\r\n.wp-block-button__link,\r\n.happyforms-submit,\r\n.woocommerce button.button {\r\n    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);\r\n    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);\r\n    -webkit-transition: all .15s ease;\r\n    transition: all .15s ease;\r\n    border-radius: 4px !important;\r\n}\r\n\r\na.button:hover,\r\na.wp-block-button__link:hover,\r\n.happyforms-submit:hover,\r\n.woocommerce button.button:hover {\r\n    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);\r\n    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);\r\n    -webkit-transform: translateY(-1px);\r\n    transform: translateY(-1px);\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Header<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Underline<\/h3>\r\n\r\n\r\n\r\n<p>For this minimalist design I thought it best that we make a clear distinction between the Site Header and the page content. This is achieved with a simple bottom border on our Site Header. It comes in two varieties. White for pages with a Merged Header Element, and black for the ones without.<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.header-wrap .site-header {\r\n    border-bottom: 1px solid #fff;\r\n}\r\n.site-header {\r\n    border-bottom: 1px solid #ccc;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Primary Navigation<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Hover Effect<\/h3>\r\n\r\n\r\n\r\n<p>A simple underline that scales from zero to menu item width on hover. It inherits the current color of the menu items. <\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.main-navigation .menu>.menu-item>a:before,\r\n.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,\r\n.loud-link a:before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    bottom: 1em;\r\n    width: 0%;\r\n    height: 2px;\r\n    background-color: currentColor;\r\n    -webkit-transition: 0.3s width ease;\r\n    transition: 0.3s width ease;\r\n}\r\n\r\n.main-navigation .menu>.menu-item>a:hover:before,\r\n.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,\r\n.loud-link a:hover:before {\r\n    width: calc(100% - 40px);\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>90% of Merchs design is achieved with the GeneratePress customizer and built in modules. The other 10% is through custom functions and CSS.<\/p>\n","protected":false},"author":1,"featured_media":293,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"_links":{"self":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2583"}],"collection":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2583"}],"version-history":[{"count":0,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/posts\/2583\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notalotofspace.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}