{"id":44,"date":"2019-06-19T18:33:35","date_gmt":"2019-06-19T18:33:35","guid":{"rendered":"https:\/\/gpsites.co\/broadcast\/?page_id=44"},"modified":"2019-06-19T18:33:35","modified_gmt":"2019-06-19T18:33:35","slug":"about","status":"publish","type":"page","link":"http:\/\/www.tabletsparaninos.com\/?page_id=44","title":{"rendered":"About"},"content":{"rendered":"\r\n

Thanks for importing Broadcast \ud83d\ude42<\/p>\r\n\r\n\r\n\r\n

Broadcast is constructed primarily using GP\u2019s awesome built-in features with some CSS to provide custom styles.<\/p>\r\n\r\n\r\n\r\n

The sections below provides a quick overview on how the site was built and some potential modifications. All the CSS mentioned below can be found in the Additional CSS<\/a> field in the customizer.<\/p>\r\n\r\n\r\n\r\n

Header\/Navigation<\/h2>\r\n\r\n\r\n\r\n

The header\/navigation is simply created using the customizer options. You can modify them in Site Identity<\/a>, Primary Navigation<\/a> and Sticky Navigation<\/a> sections in the customizer.<\/p>\r\n\r\n\r\n\r\n

Header Element\/Page Hero<\/h2>\r\n\r\n\r\n\r\n

The section below the primary navigation is created using the Header Element<\/a> module. You can find 4 header elements in
Appearance > Elements: Pages hero<\/em>, Archives hero<\/em>, Posts hero<\/em> and Home hero<\/em>.<\/p>\r\n\r\n\r\n\r\n

CSS is used to provide a unique container width, gradient background and styles for the <h2><\/code> and <p><\/code> elements:<\/p>\r\n\r\n\r\n\r\n

\/* Page hero styles *\/\r\n.page-hero.gradient {\r\n    background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);\r\n    max-width: 1440px;\r\n    margin: auto;\r\n}\r\n.inside-page-hero h2 {\r\n    font-size: 40px;\r\n}\r\n.inside-page-hero p {\r\n    font-size: 20px;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n
This site is an excellent resource to tweak the gradient to your liking: https:\/\/cssgradient.io\/<\/a>.<\/p>\r\n\r\n\r\n\r\n
General Container<\/h2>\r\n\r\n\r\n\r\n
The following CSS is used to style the main container, include merging with the header element above.<\/p>\r\n\r\n\r\n\r\n
\/* Main container styles *\/\r\n.separate-containers .page-hero + #page .site-main {\r\n    margin-top: -80px !important;\r\n}\r\n@media (max-width: 768px) {\r\n    body .site.grid-container {\r\n        margin-left: 20px;\r\n        margin-right: 20px;\r\n    }\r\n}\r\n.site-content .inside-article, .sidebar .widget, .comments-area {\r\n    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n
Posts List<\/h2>\r\n\r\n\r\n\r\n
The home page posts list can be modified using our Blog<\/a> module.<\/p>\r\n\r\n\r\n\r\n
Here is the CSS used to style them:<\/p>\r\n\r\n\r\n\r\n
\/* Posts grid styles *\/\r\n@media (min-width: 769px) {\r\n    .generate-columns .inside-article {\r\n        transition: all 0.2s ease-in;\r\n        transform: scale(1);\r\n    }\r\n    .generate-columns .inside-article:hover {\r\n        transform: scale(1.01);\r\n        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);\r\n    }\r\n    p.read-more-container {\r\n        opacity: 0;\r\n        transition: all 0.3s ease-in-out;\r\n    }\r\n    .generate-columns .inside-article:hover p.read-more-container {\r\n        opacity: 1;\r\n    }\r\n}\r\n.generate-columns .inside-article {\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-radius: 3px;\r\n}\r\n.generate-columns .inside-article .entry-summary {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex-grow: 1;\r\n}\r\n.entry-summary p:not(.read-more-container) {\r\n    display: none;\r\n}\r\n.read-more-container {\r\n    margin-top: auto;\r\n    text-align: center;\r\n}\r\nbutton, html input[type=\"button\"], input[type=\"reset\"], input[type=\"submit\"], a.button, a.button:visited {\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    border-color: inherit;\r\n    border-radius: 3px;\r\n}\r\n.blog footer.entry-meta, .archive footer.entry-meta {\r\n    margin-top: 0;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n
Sidebar<\/h2>\r\n\r\n\r\n\r\n
The plugin Recent Posts Widget With Thumbnails<\/a> is used in the left sidebar widgets area to show recent posts in single posts<\/a>.<\/p>\r\n\r\n\r\n\r\n
The first sidebar widget is colored with this CSS below:<\/p>\r\n\r\n\r\n\r\n
\/* Sidebar styles *\/\r\n.sidebar .widget:first-child {\r\n    background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);\r\n}<\/code><\/pre>\r\n","protected":false},"excerpt":{"rendered":"
Thanks for importing Broadcast \ud83d\ude42 Broadcast is constructed primarily using GP\u2019s awesome built-in features with … <\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_generate-full-width-content":"","footnotes":""},"class_list":["post-44","page","type-page","status-publish","infinite-scroll-item","no-featured-image-padding"],"_links":{"self":[{"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44"}],"version-history":[{"count":0,"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=\/wp\/v2\/pages\/44\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.tabletsparaninos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}