/* CTC Separate Stylesheet - Live Updated: 2022-10-12 12:44 */ /* NOTES Search '.post-cat.scoop-mobile' for mobile styling of Latest stories And '.sc-row-cats' for category labels on mobile Constant: #f7fa00 Yellow used for The Scoop */ /* Styles for Recycling */ /* Small boxes */ /* .thesc_sponsored { color: #414042; font-size: 16px; line-height: 27px; font-style: italic; border-top: 1px solid #eee; margin-top: 20px; padding-top: 20px;} .thesc_sponsored img { height: 100px; width: auto !important;} */ /* * HERE STARTS STYLES FOR THE SCOOP * */ /* ----------- */ /* Home Page * * Please note some styles, esp. those specifically for Home Page, are contained in * scoop-homepage.css */ /* * Site Wide * */ span.entry-subtitle, .single span.entry-subtitle, .archive span.entry-subtitle, p.entry-subtitle, .single p.entry-subtitle, .archive p.entry-subtitle { font-family: Georgia; font-style: italic} .post .post-content p, .post-post-entry p, .post .post-content ul li, .post .post-content ol li { font-size: 17px; line-height: 27px} .page-post .post-inwrap .social-share ul li a span { font-size: 14px;} .widget_nav_menu ul li a { font-size: 15px; } .post .post-meta, .post .post-meta .post-date, .post .post-meta .post-date a { font-family: 'PT Sans', sans-serif; } article.post.sticky {border-left: 0;} .sc-hidden {display:none} .desktop {display:block} .mobile {display:none} .sc-button-style1 button, button.sc-button-style1, a.sc-button-style1, /* general */ .schome_video .ytc_link a /* some specific ones, e.g. widgets, that can't be directly given a class */ { /* Examples: YouTube buttons in sidebar/social bar */ color: #fff; background-color: #3a3a3c; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 0px 16px; font-size: 13px; line-height: 26px; border-color: #757577; display: inline-block !important; text-align: center; text-decoration: none !important; -webkit-box-sizing: content-box !important; transition: all .2s; -o-transition: all .2s; -ie-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; } .scoop-section-more {display:none} /* See also scoop-homepage.css for some specific ones */ /* ----------- */ /* * Menu * */ .sticky #menu-main-article-sections #page-item-6985, .sticky #menu-main-article-sections #menu-item-19098 {display:none !important} /* To hide Ramadhan Food Guide in sticky menu * -- Live: page-item-6985, Local: menu-item-19098 */ /* ----------- */ /* * Header * */ header .header-bottom { position: relative } .header-bottom nav.main-menu ul.menu { margin-bottom: 0 } .header-bottom nav.main-menu ul li a { font-size: 17px; font-weight: normal; } .sticky nav.main-menu ul.menu { line-height: initial } /* * Header: Mobile Bar & Logo * */ .mobile-topbar {background: #eeeeee; /*#f7fa00*/ } header .search-button .mobile-search form {top: 70px;z-index:100;} header .mobile-topbar .search-button form input { border-top: #f7fa00 3px solid; height: 35px; font-size: 12px; color: #222; } /* ----------- */ /* * Home Page * */ .blog-main.scoop-tiled { margin: 30px 0; } .blog-main.scoop-latest { margin: 15px 0; } .home .post .post-title h2 span.entry-title-primary, .home .post .post-title h2 span.entry-subtitle, .archive .post .post-title h2 span.entry-title-primary, .archive .post .post-title h2 span.entry-subtitle, .search .post .post-title h2 span.entry-title-primary, .search .post .post-title h2 span.entry-subtitle { font-weight: normal } /* .post.tag-live-blog .post-meta .post-date, .post.tag-live-updates .post-meta .post-date {display:none} */ /* * Home Page: Thumbnail for Promo Content (LegCo, Magazine, etc) next to Sticky * */ .sc_homethumb_container { text-align: center; } .sc_homethumb_container h2 { margin-top: 0px; /* font-family: 'adriane-bold-italic' !important; */ font-family: Georgia !important; font-style: italic; font-size: 29px; text-align: center; color: #111; } .sc_homethumb_image, .sc_legcothumb_image {margin: 25px auto 20px;} /* legcothumb is for LegCo in widget area, should prob rename :| */ .sc_homethumb_image img, .sc_legcothumb_image img { max-width: 85%; margin: auto; } .sc_homethumb_label, .sc_legcothumb_label {text-align:center} .sc_homethumb_label button, .sc_legcothumb_label button { background: dimgrey; color: white; font-family: "PT Sans"; text-transform: uppercase; font-size: 1.15em; padding: 5px 10px; line-height: 1.2; } .sc_legcothumb_label button { margin-bottom: 5px; } /* Temporary May 2019: Ramadhan Food Guide 2019 */ /* Note - For future, may be better to add a 'class' field to the * Customizer and scoop-homepromo.php rather than adding CSS here */ .sc_homethumb_image { height: 400px; margin-top: 65px; margin-bottom: auto; } .sc_homethumb_image img {max-width:100%} /* May 2019: The Scoop Magazine 2019 */ .sc_homethumb_label button {font-size: 13px;} /* * Home Page: Banner above Middle Ads * */ .blog-banner { margin: 0 0 35px 0; } /* Base Style */ .blog-banner .sc_homebanner_label { margin: 20px auto; font-family: 'balto-medium'; width: fit-content; font-weight: normal; } /* Style 1 */ .blog-banner .sc_homebanner_label { color: goldenrod; font-size: 1.6em; } /* Style 2, with Style 1 as base */ .blog-banner .sc_homebanner_label { margin: 30px auto; border-left: 40px solid goldenrod; padding: 5px 15px; background: black; color: white; } .blog-banner img.sc_homebanner_desktop {display: block; max-height: 125px;} .blog-banner img.sc_homebanner_mobile {display: none; max-height: 125px;} .blog-banner img.sc_homebanner_desktop {margin-left: auto;margin-right: auto;} /* * Home Page: Scoop Latest Posts * */ .scoop-latest .post.full-width .post-inwrap { padding: 0px; margin-bottom: 30px; } .scoop-latest .full-width p.entry-subtitle {display: none} .scoop-latest.news-style-5 .full-width p.entry-subtitle, .scoop-latest.latest-style-2 .full-width p.entry-subtitle {display: block} /* * Home Page: Promo Content (LegCo, etc) * */ .thesc_promo {background-color: #eee; padding-top: 5px; padding-bottom: 15px;} .thesc_promo h2 { font-size: 14px; font-weight: bold; text-align: center; padding-bottom: 5px; } .thesc_promo .post-title li.entry-title {font-size:16px;padding-bottom:15px} .thesc_promo .post-title li.entry-title a {color: #111; font-weight: bold; font-family: 'balto-bold';} .thesc_promo .post-title li.entry-title span {font-weight:normal;font-family:'balto-book'} /* Home Page: Extras Box for Mobile */ .scoop-extras-mobile-box {display:none} /* * Home Page: Layout with Extras column * See inc/loops/category-layout-style-3.php */ .scoop-home-layout-2 .category-posts .post.full-width {height: 550px;} .scoop-home-layout-2 .category-posts .post.full-width .post-inwrap { position:static !important; padding: 0px 0px 30px;} .scoop-home-layout-2 .category-posts .post.full-width .post-inwrap .post-title h2 { font-weight: 900; margin: 0 0 10px; letter-spacing: -0.3px; font-size: 24px; line-height: 1.3em; } .scoop-home-layout-2 .category-posts .post.full-width .post-inwrap .post-title .entry-subtitle { font-size: 17.5px; } .scoop-home-layout-2 .category-posts .post .post-content.post-entry {display: none} .scoop-home-layout-2 .category-posts .post.full-width .post-inwrap .post-title h2 a { color: #111 !important; } .scoop-home-layout-2 .category-posts .scoop-extras-box, .scoop-extras-mobile-box .scoop-extras-box { position: relative; padding: 30px; background-color: #eee; margin: 0 0 40px; /* padding-top: 5px; padding-bottom: 15px; */ } .scoop-sidebar-style {margin:50px 0} .scoop-extras-mobile-box .scoop-extras-box {margin: 0px 15px;} .scoop-home-layout-2 .category-posts .scoop-extras-box p.box-heading, .scoop-extras-mobile-box .scoop-extras-box p.box-heading { text-align: center; padding-top: 10px; } .scoop-home-layout-2 .category-posts .scoop-extras-box p.box-heading a, .scoop-extras-mobile-box .scoop-extras-box p.box-heading a { font-family: sans-serif; color: #1e1e1e; font-size: x-large; } .pagination.scoop-nav-more ul {padding-right:0px} .pagination.scoop-nav-more ul li a { display: inline; font-size: 12px; font-weight: normal; width: 50px; /* height: initial; */ text-align: center; line-height: 35px; text-decoration: none; color: #666; padding: 10px 20px; } @media only screen and (max-width: 650px) { .scoop-latest-right {display:none} } /* * Home Page: Section header for 'Latest Stories' * */ /* Style 1: Thin silver gradient on top */ .scoop-latest .scoop-section-header.shstyle1 h2:before { background: linear-gradient(135deg,#9b9c9c,#eaeaea); content: ""; height: 10px; position: absolute; top: 0; width: 100%; } .scoop-latest .scoop-section-header.shstyle1 h2 { /* background-image: url(images/icon_morestories3.png); */ background-repeat: no-repeat; padding-bottom: 20px; /* font-family: 'Adriane Bold Italic'; */ font-family: Georgia; font-style: italic; } /* Style 2: Text-aligned LEFT, Long grey wide line on RIGHT Updated to grey-white gradient */ .featured-style-7 .scoop-section-header.shstyle2 h2:before, .featured-style-8 .scoop-section-header.shstyle2 h2:before, .featured-style-9 .scoop-section-header.shstyle2 h2:before, .scoop-latest .scoop-section-header.shstyle2 h2:before { background: linear-gradient(135deg,#c5c5c5,#fff); content: ""; height: 20px; position: absolute; top: 25px; width: 100%; max-width: 570px; margin-left: 180px; } .featured-style-7 .scoop-section-header.shstyle2 h2:before, .featured-style-8 .scoop-section-header.shstyle2 h2:before, .featured-style-9 .scoop-section-header.shstyle2 h2:before {top:unset; margin-top: 6px} .featured-style-7 .scoop-section-header.shstyle2 h2, .featured-style-8 .scoop-section-header.shstyle2 h2, .featured-style-9 .scoop-section-header.shstyle2 h2, .scoop-latest .scoop-section-header.shstyle2 h2 { background-repeat: no-repeat; padding-bottom: 40px; /* font-family: 'Adriane Bold Italic'; */ font-family: Georgia !important; font-style: italic; } /* Style 3: Text-aligned RIGHT, Long wide grey-white gradient on LEFT */ .scoop-latest .scoop-section-header.shstyle3 h2:before { background: #9b9c9c; /* 5f5d5d -- dark grey */ /* background: linear-gradient(135deg,#fff,#c5c5c5); /* silver */ /* background: linear-gradient(135deg,#fff,#f6f852); /* yellow */ content: ""; height: 20px; position: absolute; top: 25px; right: 245px; width: 100%; max-width: 520px; /* margin-right: 180px; */ } .scoop-latest .scoop-section-header.shstyle3 h2 { background-repeat: no-repeat; padding-bottom: 40px; /* font-family: 'Adriane Bold Italic'; */ font-family: Georgia; font-style: italic; padding-right: 5%; text-align: right; } /* Style 4 & 5: Copy based on Style 1 */ .scoop-latest .scoop-section-header.shstyle4 h2:before, .scoop-latest .scoop-section-header.shstyle5 h2:before { content: ""; height: 10px; position: absolute; top: 0; left: 0; width: 100%; } .scoop-latest .scoop-section-header.shstyle4 h2:before { background: linear-gradient(135deg,#fff,#f5f5f5); } .scoop-latest .scoop-section-header.shstyle5 h2:before { background: linear-gradient(135deg,#f5f5f5,#fff); } .scoop-latest .scoop-section-header.shstyle4 h2, .scoop-latest .scoop-section-header.shstyle5 h2 { /* background-image: url(images/icon_morestories3.png); */ background-repeat: no-repeat; padding-bottom: 20px; text-align: center; font-size: 32px; } @media only screen and (max-width: 767px) { .scoop-latest .scoop-section-header.shstyle4 h2:before, .scoop-latest .scoop-section-header.shstyle5 h2:before { height:initial; position:initial; background:none; width:initial; } } /* Section Header Style on live site: DISABLED (none) or ENABLED (inline) */ .featured-style-7 .scoop-section-header, .featured-style-8 .scoop-section-header, .featured-style-9 .scoop-section-header {display:none} .scoop-latest .scoop-section-header {display:inline} /* * Home Page: Second Category Area * * See inc/loops/category-articles-layout-style-3.php */ .scoop-category-two {background:none} /* ----------- */ /* Home Page, Mix and Match Elements (whoa) */ /* -- See style-homepage.css */ /*.scoop-home-sponsored, .scoop-home-socialbar1 { background: #ccc; margin-bottom: 30px; }*/ /* * Home Page, Mix and Match: Sponsored Bar */ .scoop-home-sponsored .post .post-entry {display: none} /* Not span.entry-subtitle ? */ /* * Home Page, Mix and Match: Social Bars 1 & 2 * Oct 2019: These replace the sidebar in the old Category Posts layout, and are meant to go with 'Scoop. Middle Section' */ .scoop-home-socialbar1 {margin-top:30px;} .scoop-home-socialbar1 h2 {font-size: smaller;} /* ----------- */ /* * Pages * Some specific pages & features are under scoop-style.css * */ .page .blog-main, .archive .blog-main {margin: 35px 0;} @media only screen and (max-width: 991px) { .page .blog-main {margin: 70px 0;} /* revert to original */ } /* Pages: Classifieds */ /** Listing Page **/ .page-id-22141 .blog-main {margin-top:5%} .single-classified .page-post .post-header .post-title h1 { font-size: 26px; text-transform: uppercase;} .single-classified .page-post .post-header .post-title h1:after { content: "Classified Ad"; margin-left: 15px; text-transform: none; font-family: 'balto-book'; color: #333; font-weight: normal; } /* Alt grey label style: text-transform: none; font-size: smaller; font-weight: normal; color: #111; background: lightgrey; padding: 10px; border-radius: 5px; top: -2px; position: relative; */ .single-classified .scoop-byline {display:none} /* Form - Ramadhan Food Guide & Classifieds * Contact 7 (temporary workaround) */ .page-id-7024 .wpcf7-form p, .page-id-22141 .wpcf7-form p { text-transform: none; color: #414042!important; } .page-id-7024 .wpcf7-form p label, .page-id-22141 .wpcf7-form p label { font-size: 17px!important;} .page-id-7024 .wpcf7-form p span, .page-id-22141 .wpcf7-form p span { font-size: 15px!important;} .sc_form_required {color:red} .page-id-7024 .wpcf7-form input.wpcf7-submit, .page-id-22141 .wpcf7-form input.wpcf7-submit { border: grey 1px solid !important; text-transform: uppercase; font-size: 17px !important; margin-top: 15px; } /* COVID-19 Hub - Basic page stuff; see Article > Trending Stories for the rest */ .page-id-28416 .page-header-title { display: none; } .page-id-28416 .blog-main, .page-id-28416 .page-post .post-inwrap, .page-id-28416 .post .post-content, .page-id-28416 .post-entry {margin-top: 0} @media (max-width: 991px) { .page-id-28416 .blog-main {margin-top:70px} } @media (max-width: 650px) { .page-id-28416 .blog-main {margin-top:20px} } /* ----------- */ /* * Sidebar * */ .sidebar-inwrap .widget { /* margin: auto */ } .sidebar-inwrap .widget .widget-title { max-width: 70%; text-align: center; background-color: #f7fa00; margin: auto; padding: 0; display: block; } .sidebar-inwrap .widget .widget-title h4 { font-family: 'balto-bold' !important; font-size: 17px; padding: 15px; margin: 0; } .sidebar-inwrap .widget a:hover {text-decoration: none;} .widget-nomargin { padding: 30px; background-color: #f8f8f8; margin-bottom: 30px; } /* ^-- copies widget styling only but not the main margin values */ /* * Sidebar: Native video player (if in use) * */ .sidebar-inwrap .widget .video-player { padding-top: 20px; } /* * Sidebar but also sitewide: YouTube Channel plugin */ /* Note: Button styling borrowed from Ultimate Shortcodes button minus the gradient, thanks */ .sidebar-inwrap .ytc_video_container { padding-top: 10px; padding-bottom: 20px; } .sidebar-inwrap h3.ytc_title {font-size:14px} /* In Articles, as apparently Homepage uses h5. FUTURE: To check */ .sidebar-inwrap .ytc_link { padding-top: 20px; text-align: center; } .sidebar-inwrap .ytc_link a { color: #fff; background-color: #3a3a3c; /* border-color: #2e2e30; */ border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 0px 16px; font-size: 13px; line-height: 26px; border-color: #757577; display: inline-block !important; text-align: center; text-decoration: none !important; -webkit-box-sizing: content-box !important; transition: all .2s; -o-transition: all .2s; -ie-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; } /* * Sidebar: Shortcodes Ultimate - Sorted by Most Views * */ .textwidget .su-posts {margin:30px 0;} .su-posts-teaser-loop .su-post-thumbnail{ width:120px !important; height:auto !important;} .su-posts-teaser-loop h2.su-post-title a { color:#111; font-size:15px; } /* * Sidebar: Jetpack - Top Posts * */ .widgets-list-layout {margin:30px 0 !important;} .widget_top-posts .widgets-list-layout li { margin-bottom: 1.5em !important; } /* Thumbnail */ .widget_top-posts .widgets-list-layout .widgets-list-layout-blavatar { max-width: 100px !important; width: 100px; padding-top: 5px; } /* Text Link */ .widget_top-posts .widgets-list-layout div.widgets-list-layout-links { width: 50%; padding-left: 15px;} .widget_top-posts .widgets-list-layout-links a { color:#111; font-size:14.5px; font-weight:400; } /* Link in Sidebar */ /* custom-html-2: Home Page (Category sidebar) * custom-html-4: Articles & Pages (Single Post sidebar) * custom-html-5: Categories and other Archives (Sidebar) * custom-html-6: LegCo Category, Tag and Posts (Sidebar) * custom-html-7: The Scoop Magazine (Category Column Sidebar, i.e. homepage) */ #custom_html-2 .widget-title, #custom_html-4 .widget-title, #custom_html-5 .widget-title, #custom_html-6 .widget-title, #custom_html-7 .widget-title {background: none !important; max-width: 100%;} #custom_html-2 .widget-title h4, #custom_html-4 .widget-title h4, #custom_html-5 .widget-title h4, #custom_html-6 .widget-title h4, #custom_html-7 .widget-title h4 { font-family: Georgia !important; /* font-family: serif; /* Previoulsy adriane-bold-italic, defined in UAF*/ text-transform: initial; font-size: 2em; padding: 0; color: #111; font-weight: normal; font-style: italic; } #custom_html-2 .custom-html-widget img, #custom_html-4 .custom-html-widget img, #custom_html-5 .custom-html-widget img, #custom_html-6 .custom-html-widget img, #custom_html-7 .custom-html-widget img {margin:auto} #custom_html-7 .custom-html-widget, #custom_html-7 .sc_homethumb_image {margin-top:0px} @media only screen and (max-width: 991px) { #custom_html-2 .custom-html-widget img, #custom_html-4 .custom-html-widget img, #custom_html-5 .custom-html-widget img, #custom_html-6 .custom-html-widget img, #custom_html-7 .custom-html-widget img {max-width:500px} } @media only screen and (max-width: 650px) { #custom_html-2 .custom-html-widget img, #custom_html-4 .custom-html-widget img, #custom_html-5 .custom-html-widget img, #custom_html-6 .custom-html-widget img, #custom_html-7 .custom-html-widget img {max-width:100%} } /* ----------- */ /* * Footer * */ .footer-sidebar ul#menu-footer {margin-top:0px} .footer-sidebar .widget_nav_menu ul { border: 0px; } .footer-sidebar .widget_nav_menu ul li { display: initial; text-transform: initial; } .footer-sidebar .widget_nav_menu ul li a { float: left; display: inline; padding: 10px 20px 10px 0px; font-size: 16px; } footer .footer-sidebar { padding: 40px 0; } footer .jetpack_widget_social_icons .widget-title h4 {font-weight:normal} footer .jetpack_widget_social_icons ul {padding-top:10px;} footer .jetpack_widget_social_icons svg {color:white} /* ----------- */ /* * Article --- INITIAL * */ header .header-bottom .main-menu ul li a {font-size: 17px;} .post h4 {padding-top:15px} .post .post-content p a, .post .post-content ul li a, .post .post-content ol li a, .post-content table tbody th a, .post-content table tbody td a { background: none; border-bottom: 3px solid #f7fa00; font-weight: normal; } .post .post-content p a:hover, .post .post-content ul li a:hover, .post .post-content ol li a:hover, .post-content table tbody th a:hover, .post-content table tbody td a:hover, .scoop-article-trending-block .jetpack_top_posts_widget ul li a:hover { text-decoration: none; } /* -- For text that just won't go into a p (see: dropcap spans) -- */ .post .post-content, .post-entry { font-size: 17px; line-height: 27px; } /* Blockquotes */ /* [Local Site] .post-6917 - Visual impairment post * [Live Site] .post-13541 - 'Test Blockquote', .post-12019 - J. Shen's post * test blockquotes on a specific post first */ /* .post.post-6917 .post-content blockquote, .post.post-13541 .post-content blockquote, .post.post-12019 .post-content blockquote */ /* base style */ .post .post-content blockquote { border-left: 10px solid #f6d425; margin: 30px 40px; padding: 10px 40px 10px 30px; } /* Jan 2020 - Styles 1 and 2 */ /* .post .post-content blockquote { border-left: 8px solid #333; margin: 30px 25px; padding: 5px 20px 10px; } */ .post .post-content blockquote { border-left: 6px solid #555; margin: 30px 10px; padding: 5px 20px 10px; } .post .post-content blockquote p { text-decoration: none } .post .post-content blockquote p { font-weight: normal; font-size: 16.5px; color: #414042; } .post .post-content blockquote p:first-letter { float: unset; font-size: initial; margin: initial; } /* Pullquotes using Shortcodes Ultimate */ .su-pullquote .su-quote {font-size: 14pt; font-family: Georgia} /* Quotes using Shortcodes Ultimate */ /* [Local Site] .post-6917 - Visual impairment post * [Live Site] .post-13303 - HIV post * test quotes on a specific post first */ .su-quote-style-default { padding: 0.5em 1.5em !important; color: black; margin: 20px 40px 20px 30px; } /* style 1: adriane-italic */ /* * alternate font: balto-book * */ .post-6917 .su-quote-style-default, .post-13303 .su-quote-style-default { font-style: normal; /* font-family: 'adriane-italic'; */ font-family: Georgia; font-style: italic; /* alternative: move font-family setting to UAF */ } /* style 2: adriane-italic + dashed yellow border top and bottom */ .post-6917 .su-quote-style-default:before, .post-13303 .su-quote-style-default:before {margin-top: 20px;} .post-6917 .su-quote-style-default:after, .post-13303 .su-quote-style-default:after {bottom: 30px;} /* yes, not margin, but the position */ .post-6917 .su-quote-style-default, .post-13303 .su-quote-style-default { border-top: 3px dashed #f6d425; border-bottom: 3px dashed #f6d425; padding-left: 2em !important; padding-right: 2em !important; } .post-6917 .su-quote-style-default .su-quote-inner, .post-13303 .su-quote-style-default .su-quote-inner { margin-top: 10px; margin-bottom: 10px; } /* style 3: adriane-italic + solid yellow border top and bottom */ .post-6917 .su-quote-style-default, .post-13303 .su-quote-style-default { border-top: 2px solid #f6d425; border-bottom: 2px solid #f6d425; } /* all styles */ /* * when nested in a blockquote, remove the dashed lines * */ .post-6917 blockquote .su-quote-style-default, .post-13303 blockquote .su-quote-style-default { border: none; } .post figcaption {font-size: 13px; line-height: 1.5em} .su-dropcap-style-simple { width: 0.8em; height: 0.8em; font-size: 40pt; /* font-family: 'adriane-regular'; */ font-family: Georgia; margin-top: 0; margin-right: 0; } .post-tags {clear: both} .post-inwrap .post-directions {display:none;} /* For Paged posts */ .page-links { padding: 5px 0px; width: fit-content; } .page-links.thesc-page-links-top {margin: 4vw auto 4vw 0;} .page-links.thesc-page-links-bottom {margin: 4vw 0 2vw auto;} .post-page-numbers { margin-left: 5px; padding: 15px; box-shadow: 4px 4px #f8f8f8; border: 1px #999 solid; color: #333; font-size: 16px; } .post-page-numbers.current {background:#f7fa00; border-color: #555} @media only screen and (max-width: 500px) { .page-links { display: inline-table; text-align: center; width: 100%; } .page-links.thesc-page-links-top {margin:2vw auto;} .page-links.thesc-page-links-bottom {margin-left:auto;margin-right:auto} span.thesc-page-links-text::after { content: "\a\a"; white-space: pre; } .post-page-numbers {padding: 15px 20px;} } .single-style-3 .post .post-content p, .single-style-3 .post-post-entry p, .single-style-3 .post .post-content ul li, .single-style-3 .post .post-content ol li { letter-spacing: 0.3px; } /* * Article: Top * */ .single .post .post-title { color: #111; } .single span.entry-subtitle { font-size: 21px; padding-top: 10px; letter-spacing: 0px; font-weight: normal; line-height: 24px; } .scoop-byline { font-size: 14px; padding-top: 10px; } .post-author .author-info p {font-size: 14px;} .post .post-meta .post-date {padding: 0;} .post .post-meta .post-date:before {display: none;} /* Featured Image - For the caption style where it overlays on the image */ figure.post-image { /* position: relative; float: left; */ } figcaption.wp-caption-text { /* background: #191919db; margin-top: -85px; padding: 8px 10px; font-size: 14px; color: lightgray; position: absolute; width: 80%; margin-left: 20%; */ } div.sharedaddy .sd-social {padding-top:30px;} /* Articles: Top > Edit Post button for users */ .post-meta .btn {margin-bottom:4px;margin-left:2px} .post-meta .btn a.post-edit-link { text-transform:uppercase; font-family:'PT Sans', sans-serif; color:white} .post-meta .btn a.post-edit-link:hover, .scoop-byline .btn a.post-edit-link:active {text-decoration:none} /* Articles: Featured Images for Style 1, Style 2 (full-image), Style 3 */ .page-post.single-style-2 .post-inwrap {margin-top:-20px;} /* for desktop, Style 2 only */ /* * Article: Share Buttons & Views * */ .page-post .post-inwrap .social-share ul li a.whatsapp {background: #25D366} .page-post .post-inwrap .social-share ul li a.reddit { background: #ff4500; /* orangered */ /* background: #5f99cf; // darker blue */ /* background: #cee3f8 // lighter blue */ } .page-post .post-inwrap .social-share span.post-page-views {display:none} /* * Articles: Post Content * */ .post .post-content ul, .post .post-content ol {color: #414042} .post .post-content ul li, .post .post-content ol li {list-style-position: inside} /* * Article: Photo galleries using FooGallery * */ .single-post .foogallery-container { margin-top: 30px !important; margin-bottom: 30px !important; } /* * Article: Iframe using PDF Viewer * The iframes do not have a class and no option to add a class to them. * So some of the code is to revert changes for embedded native videos, which also use iframes. * Didn't work: .post-content :not(.video-player) iframe * * */ .single .tag-live-blog a.fullscreen-mode {display:none} /* .single .tag-live-blog a.fullscreen-mode { color: #555; font-size: smaller; background: #eee; margin-bottom: 10px; padding: 6px 15px; float: right; border-radius: 4px; } */ .single .tag-live-blog .post-content iframe {margin-top: -20px;} .single .tag-live-blog .post-content .video-player iframe {margin-top: initial;} @media only screen and (max-width: 767px) { .single .tag-live-blog iframe {max-height: 300px !important;} .single .tag-live-blog .video-player iframe {max-height: initial !important;} } @media only screen and (max-width: 500px) { .single .tag-live-blog iframe {max-height: 250px !important;} .single .tag-live-blog .video-player iframe {max-height: initial !important;} } /* * Article: Author Boxes * */ .scoop-firstauthorbox {padding-top: 0px;} .scoop-multiauthorbox {padding-top: 20px;} .post-inwrap #comments, .post-inwrap .post-meta .post-comment {display:none} /* * Article: Related Posts * */ .related-posts .related-posts-inwrap { display: inline; flex-wrap: nowrap; } .related-posts .post { height: auto !important; max-height: initial; /* margin-bottom: -30px; */ } .related-posts .post .post-inwrap { position: initial !important; padding-top: 0px !important; padding-bottom: 0px !important; } .related-posts .post .post-inwrap h4 { font-size: 16px; font-weight: initial; } .related-posts .post .post-inwrap h4 a { color: inherit; } .related-posts .post:nth-child(3), .related-posts .post:nth-child(4) { margin:initial; } /* Header Style 3: Text-aligned RIGHT, Long grey thick line on LEFT, Based on Home Page 'More Stories' that is unused */ .scoop-related-header.shstyle3 h2:before { background: #9b9c9c; content: ""; height: 20px; position: absolute; top: 25px; right: 220px; width: 100%; max-width: 520px; /* margin-right: 180px; */ } .scoop-related-header.shstyle3 h2 { /* background-image: url(images/icon_morestories3.png); */ background-repeat: no-repeat; padding-bottom: 40px; /* font-family: 'Adriane Bold Italic'; */ font-family: Georgia; font-style: italic; padding-right: 5%; text-align: right; } /* And for full-width posts... */ .single-style-3 .scoop-related-header.shstyle3 h2:before { left: 220px; right: 15px; max-width: 620px; /* but might need to cap it for smaller widths */ /* margin-right: 180px; */ } .single-style-3 .scoop-related-header.shstyle3 h2 { padding-left: 5%; text-align: left; } /* * Article: Trending Stories / Page: COVID-19 Hub: Latest Stories * */ .scoop-article-trending-block .jetpack_top_posts_widget {position:relative; margin-top:40px} /* position:relative is important, for the absolute-positioned gradient style to work */ .thesc_covid19hub_header {} .scoop-article-trending-block .jetpack_top_posts_widget h2 { font-size: 30px; font-weight: normal; } /* Trending & Latest -- Style 3: Yellow gradient, left-aligned */ .scoop-article-trending-block .jetpack_top_posts_widget h2 {margin-bottom:15px} .scoop-article-trending-block .jetpack_top_posts_widget h2:after { background: linear-gradient(135deg,#f6f853,#fffddd); content: ""; height: 25px; position: absolute; top: 3px; right: 0; width: 66%; } .scoop-article-trending-block .jetpack_top_posts_widget ul {padding:5px 40px;} .scoop-article-trending-block .jetpack_top_posts_widget ul li, .thesc_covid19hub_textcol ul.su-posts li { list-style-type: none; list-style-position: outside; padding: 2px 5px; } .scoop-article-trending-block .jetpack_top_posts_widget ul li:before { content: "●"; /* Insert content that looks like bullets */ /* padding-right: 8px; */ position: absolute; margin-left: -20px; } .scoop-article-trending-block .jetpack_top_posts_widget ul li a, .thesc_covid19hub_textcol ul.su-posts li a { color: #111; font-size: 17px; border-bottom: none !important; background: none; font-weight: normal; } /* COVID-19 Hub - The rest! */ .thesc_covid19hub_textcol ul li a {border-bottom:none} .thesc_covid19hub_textcol h2, .thesc_covidhub_timeline h3, .thesc_covidhub_extra h3, .thesc_covidhub_highlights h4 { text-transform: uppercase; font-weight: normal; /* because Balto Bold */ } .thesc_covidhub_timeline h3, .thesc_covidhub_extra h3, .thesc_covidhub_highlights h4 { font-size: 19px; margin-bottom: 15px; } .thesc_covidhub_timeline_desktop h3 {font-size:20px} /* COVID-19 Hub: News Stories - Top Story */ .thesc_covidhub_supost_latestnews .imglarge-single-linked { font-family: 'balto-book' !important; border-top: 1px #bbb solid; border-bottom: 1px #bbb solid; padding: 20px 15px 15px; margin-bottom: 20px; /*width: 90%;*/ /*margin: 10px -55px 20px;*/ } .thesc_covidhub_supost_latestnews .imglarge-single-linked a { color: #111; } .thesc_covidhub_supost_latestnews .imglarge-single-linked a span.entry-title-primary { font-size: 22px; /*20px;*/ font-family: 'balto-bold' !important; /*'balto-medium' !important;*/ font-weight: normal; letter-spacing: -0.3px; } .thesc_covidhub_supost_latestnews .imglarge-single-linked a span.entry-subtitle { font-size: 16px; margin-bottom: 10px; } .thesc_covidhub_supost_latestnews .imglarge-single-linked .su-post-thumbnail img { padding: 1vw 0; } /* .thesc_covidhub_supost_latestnews .imglarge-single-linked .su-post { display: flex; align-content: flex-start; align-items: center; } */ /* -- Flex layout option */ @media only screen and (max-width: 600px) { .thesc_covidhub_supost_latestnews .imglarge-single-linked { padding: 30px 0 15px; } .thesc_covidhub_highlights .imglarge-single-linked figure.post-image { margin-bottom: 2vw; } .thesc_covidhub_supost_latestnews .imglarge-single-linked a span.entry-title-primary { font-size: 1.3em; /*28px;*/ line-height: 1.1em; } .thesc_covidhub_supost_latestnews .imglarge-single-linked a span.entry-subtitle { font-size: 1em; line-height: 1.3em; margin-top: 1vw; } } @media only screen and (max-width: 400px) { .thesc_covidhub_highlights .imglarge-single-linked figure.post-image { margin-bottom: 3vw; } } /* COVID-19 Hub: News Stories - The rest */ .thesc_covid19hub_textcol h2 { margin-bottom:15px; font-size: 20px; } .thesc_covid19hub_textcol ul.su-posts { width: fit-content; /*90%*/ padding: 5px 20% 5px 20px; } @media only screen and (max-width: 767px) { .thesc_covid19hub_textcol ul.su-posts { width: 100%; /*95%*/ margin-left: 0; /*auto*/ padding-left: 5%; padding-right: 0; /*5%*/ } .thesc_covidhub_supost_latestnews.thesc_covidhub_extra_mobile .sue-section-content ul.su-posts li:nth-child(n+7) {display: none;} /* ^-- only show first 6 stories on mobile */ } .thesc_covid19hub_textcol ul.su-posts #su-post-28160, .thesc_covid19hub_textcol ul.su-posts #su-post-26907, .thesc_covid19hub_textcol ul.su-posts #su-post-29465, .thesc_covid19hub_textcol ul.su-posts #su-post-30406, .thesc_covid19hub_textcol ul.su-posts #su-post-44627, .thesc_covid19hub_textcol ul.su-posts #su-post-45613 {display:none} /* live blogs - SU's su_posts shortcode doesn't have a field to exclude specific posts, so... * Starts with Mar 2020 */ /* * Differences from Articles > Trending Stories styling */ .thesc_covid19hub_textcol ul.su-posts li {list-style-type: disc;} /*.thesc_covid19hub_textcol ul.su-posts li:nth-child(1):before {} *.thesc_covid19hub_textcol ul.su-posts li:nth-child(1):after {} */ /* .thesc_covid19hub_textcol ul.su-posts li:nth-child(1) { list-style-type: none; border-top: 1px #bbb solid; border-bottom: 1px #bbb solid; padding: 20px 15px 15px; margin: 10px -55px 20px; } @media only screen and (max-width: 768px) { .thesc_covid19hub_textcol ul.su-posts li:nth-child(1) { padding: 5% 15px 3%; margin: 0 0 5% -10px; /*10px 0 20px -40px;*/ /*} } */ /* COVID-19 Hub: Highlights Box: Live Blog */ /*.thesc_covidhub_highlights h4 {display:none}*/ /* -- Heading for 'Latest from the live blog' */ @media only screen and (max-width: 767px) { .thesc_covidhub_highlights h4 {display:block} .thesc_covidhub_highlights figure.post-image { max-width: 550px; margin: auto;} .thesc_covidhub_highlights .thesc_covidhub_liveblog figure.post-image { max-width: initial; margin: initial;} } /*.thesc_covidhub_liveblog,*/ .list-firstthumb .su-post { border-top: 1px #bbb solid; margin-bottom:20px; padding: 20px 10px; } /* .thesc_covidhub_liveblog:not(.tag-top-stories) figure.post-image {display:none} */ .thesc_covidhub_liveblog.post-26907 figure.post-image, .thesc_covidhub_liveblog.post-28160 figure.post-image, .thesc_covidhub_liveblog.post-29465 figure.post-image, .thesc_covidhub_liveblog.post-30406 figure.post-image, .thesc_covidhub_liveblog.post-44627 figure.post-image {display:none} /* live blogs - Hide featured images for all except the current one */ /*.thesc_covid19hub_textcol .su-posts-single-post .su-post-meta, .thesc_covid19hub_textcol .su-posts-single-post .su-post-content {display:none}*/ @media only screen and (max-width: 767px) { .thesc_covidhub_liveblog figure.post-image img {margin: 10px auto 0;} } /* .thesc_covidhub_liveblog h1.entry-title */ .thesc_covidhub_liveblog h1.post-title { /* font-family: 'balto-medium' !important; font-size: 19px !important;*/ line-height: 21px; margin-top: 10px !important; } /* .thesc_covidhub_liveblog h1.entry-title a */ .thesc_covidhub_liveblog h1.post-title a { font-weight: normal !important; color: #111; } .thesc_covidhub_liveblog h1 span.entry-title-primary { font-size: 19px !important; /*line-height: 21px;*/ font-family: 'balto-medium' !important; } .thesc_covidhub_liveblog h1 span.entry-subtitle { font-size: 16px; margin-top: 10px; } /* .thesc_covid19hub_textcol ul.su-posts li:nth-child(1) a span.entry-title-primary { font-size: 20px; font-family: 'balto-medium' !important; } .thesc_covid19hub_textcol ul.su-posts li:nth-child(1) a span.entry-subtitle { font-size: 16px; margin-bottom: 10px; } .thesc_covid19hub_textcol ul.su-posts li:not(:nth-child(1)) a span.entry-subtitle {display:none;} */ .thesc_covid19hub_textcol ul.su-posts li a span.entry-subtitle {display:none;} /* COVID-19 Hub: Highlights Box: Key Announcements */ /*.thesc_covidhub_timeline .sue-section-content {width:100%}*/ .thesc_covidhub_timeline, .thesc_covidhub_timeline .su-spoiler-content { padding-left:0 !important; font-size:15px !important; } .thesc_covidhub_timeline p, .thesc_covid19hub_textcol .su-spoiler-content { font-size:16px !important; line-height:20px !important;} .thesc_covidhub_timeline p strong, .thesc_covidhub_timeline .su-spoiler-content strong {font-family: 'balto-medium' !important} /* COVID-19 Hub: Highlights Box: Extras */ .thesc_covidhub_extra p, .thesc_covidhub_extra ul li { line-height: 25px; margin: 15px 15px; } .thesc_covidhub_extra p a, .thesc_covidhub_extra ul li a { font-size: 17px; border-bottom: none !important; } .thesc_covidhub_extra_desktop, .thesc_covidhub_timeline_desktop, .thesc_covidhub_extra .hotline_desktop {display:block} .thesc_covidhub_extra_mobile, .thesc_covidhub_timeline_mobile, .thesc_covidhub_extra .hotline_mobile {display:none} .thesc_covidhub_extra .hotline_mobile {margin-bottom: 0} .thesc_covidhub_extra .hotline_desktop img, .thesc_covidhub_extra .hotline_mobile img { max-width:fit-content !important; margin: auto; } .thesc_covidhub_extra .hotline_desktop .sue-photo-panel-content, .thesc_covidhub_extra .hotline_mobile .sue-photo-panel-content {display:none} @media only screen and (max-width: 767px) { .thesc_covidhub_extra_desktop, .thesc_covidhub_timeline_desktop, .thesc_covidhub_extra .hotline_desktop {display:none} .thesc_covidhub_extra_mobile, .thesc_covidhub_timeline_mobile {display:block} .thesc_covidhub_extra .hotline_mobile {display:inline-block} } @media only screen and (max-width: 700px) { .thesc_covidhub_extra .hotline_mobile {display:block} } /* * CuboiArt Cartoons [Category] * * And associated pages: Homepage, Article (Single Post), Cartoons Page * * Article-specific styles to be removed after style-article.css goes live */ /* Cartoons Page - Latest Cartoon on Top */ .cuboi-cartoons-single .su-post {max-width: 600px;margin: auto;} .cuboi-cartoons-single .su-post .caption {text-align: center;} /* .page-post.cuboi-cartoons-large .social-share, */ .page-post .post-inwrap .cuboi-cartoons-single .social-share, .single-post .category-cuboiart .post-inwrap .social-share { text-align: center;margin: 20px 0; border-bottom: 0 none; } /* .page-post.cuboi-cartoons-large .post-inwrap .social-share ul, */ .page-post .post-inwrap .cuboi-cartoons-single .social-share ul, .single-post .category-cuboiart .post-inwrap .social-share ul { margin-left:0; padding: 0; } /*-- keep the page-post and post-inwrap to override default styles */ /* .post.cuboi-cartoons-large .post-content ul li a, */ .single-post .category-cuboiart .post-content ul li a, .post .cuboi-cartoons-single ul li a {border-bottom:none} /* Cartoons Page - Author Box */ .cartoons-author-box { width: 100%; max-width: 500px; height: initial; padding: 15px; /*max-width: 600px; height: 250px;*/ } .cartoons-author-box .sue-panel-content {padding: 10px 1em;} .cartoons-author-box h2 {margin-bottom:1vw;} .cartoons-author-box p {margin-top:0;font-size: 15px !important;line-height: 17px !important;} .cartoons-author-box p img {margin-top:0;box-shadow: 0px 0px 1px #ccc;} .cartoons-author-box a.sue-icon {margin-bottom: 0 !important;} .cartoons-author-box a.sue-icon i {padding:10px !important} @media only screen and (max-width: 600px) { .cartoons-author-box {height: initial;} } @media only screen and (max-width: 500px) { .cartoons-author-box {width: 80% !important;padding: 10px 15px 5px;} .cartoons-author-box .sue-panel-content {padding: 10px;} .cartoons-author-box p { /*width: 85%; margin: auto;*/ margin-bottom: 2vw !important; } .cartoons-author-box p img { float: none; margin: 2vw auto 5vw; width: 55%; /*margin: 5vw auto 10vw; width: 250px;*/ } .cartoons-author-box .sue-icon { left: 5%; position: relative; /*left: 40%; margin-left: 2%; margin-right: 2%;*/ } } @media only screen and (max-width: 375px) { .cartoons-author-box {width: 85% !important;margin: 0 auto 5vw;min-width: 250px;} .cartoons-author-box p { font-size: 16.5px !important; line-height: 20px !important; } .cartoons-author-box p img {width: 60%;} } /* Cartoons Page - Thumbnails of Recent Comics with Lightbox */ .cartoons-cuboi.cartoons-cuboi-test {display:block} /* Hide temporarily while there's only one cartoon */ .cartoons-cuboi {border-bottom: 0 none !important;} .cartoons-cuboi .sue-section-background {height: fit-content;} .cartoons-cuboi .sue-section-content {max-width:100% !important;} @media only screen and (max-width: 500px) { .cartoons-cuboi .su-post-thumbnail img {width: 200px !important;} .cartoons-cuboi .su-post-thumbnail div { font-size: 17px; margin-top: 10px; width: 200px !important; } } .cartoons-cuboi .social-share ul li a {width:40px !important} .cartoons-cuboi .social-share ul li a span {display:none !important} .cartoons-cuboi-row {display: flex;justify-content: space-evenly;} .cartoons-cuboi-thumb { font-size: 14px; text-align: center; line-height: 14px; color: #111; } .cartoons-customlightbox { background: none !important; box-shadow: none !important; } .cartoons-customlightbox .mfp-close {color:white !important} .cartoons-customlightbox .social-share ul {display:inline-flex;} .cartoons-customlightbox .social-share ul li { background: #ddd; padding: 2px 5px; margin-right: 5px} .cartoons-customlightbox .social-share ul li a {color:#111} /* Todo: Fix! */ .scsu-imglarge-lightbox .su-post:nth-child(1) {display:none} /* ----------- */ /* Archives: Category, Tag, Author */ .archive .list-style span.entry-subtitle { font-size: 0.8em !important; line-height: 22px; padding-top: 5px; } .archive .post-image a {background: none !important;} .post-author .author-info ul.sc-author-social {margin-top:10px} .post-author .author-info ul.sc-author-social li:first-child {padding-left:0} .post-author .author-info ul.sc-author-social li a {font-size:1.5em;} .page-author-title .container {width:unset} /* Search Pages */ .search-results span.entry-subtitle {font-size: 0.8em !important;} /* ----------- */ /* * Ads * */ /* Note: all imgs have max-width 100% from style.css */ .scoop-mobile-ads, .thesc-iklan-articles-inside-revolving-mobile, .thesc-iklan-articles-inside-mobile, .thesc-iklan-articles-inside-ii-mobile, .thesc-iklan-articles-after-mobile {display:none} .scoop-desktop-ads, .thesc-iklan-articles-inside-revolving, .thesc-iklan-articles-inside, thesc-iklan-articles-inside-ii, .thesc-iklan-articles-after {display:block} /* ---- Banners in TOP position ---- */ .scoop-top-ad .scoop-mobile-ads img { margin: auto; margin-top:-15px; width: 100%; max-width: 300px; /* For 300x250; ^-- old: 400px for 400x125 */ } .scoop-top-ad .scoop-desktop-ads img {width:728px;} .thesc-iklan-front-top-banner .thesc-iklan-adlabel, .thesc-iklan-all-top-banner-under-centred-logo-desktop .thesc-iklan-adlabel, .thesc-iklan-all-top-banner-under-centred-logo .thesc-iklan-adlabel /* local only */ {display:none} .thesc-iklan-all-top-banner-under-centred-logo img, .thesc-iklan-all-top-banner-under-centred-logo-desktop img { margin: 2em auto 1em; max-width: 728px; } /* Temporary Widening of Masthead to accommodate some specific wide ad banners * in Top Leaderboard position (Desktop) - 12-Oct-2022 */ /** Desktop **/ @media only screen and (min-width: 992px) { header.style-2 .header-main .row .col-md-4 { margin-bottom: 2.5em; margin-top: 2em; } } /** Tablet **/ @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-main, .page-header-title {margin-top: 9em;} } /* ---- Mobile Banners ---- */ .scoop-front-ads .scoop-mobile-ads img, .thesc-iklan-articles-inside-revolving-mobile img, .thesc-iklan-articles-inside-mobile img, .thesc-iklan-articles-inside-ii-mobile img, .thesc-iklan-articles-after-mobile img { margin: auto; padding:15px 0; width: 100%; max-width: 300px; /* For 300x250; ^-- old: 400px for 400x125 */ } /* ---- Desktop Banners ---- */ .scoop-front-ads .scoop-desktop-ads img { margin: auto; width:728px; padding:30px 0; } /* -- Ads in Widgets */ .advads-widget, .thesc-iklan-widget {padding: 0; background: none;} .advads-widget img {margin:auto} .thesc-iklan-widget img {margin:auto; padding-top:20px} .thesc-iklan-front-above-footer {margin-bottom: 20px} .thesc-iklan-widget .thesc-iklan-adlabel {margin-bottom: -10px;text-align: center;} /* ---- AdSense Ads ---- */ .thesc-iklan-widget.optimas-adsense-mrec {padding: 0; background: none;} .thesc-iklan-widget.optimas-adsense-mrec .thesc-iklan-adlabel {margin-bottom: 10px;} /* -- Ads in Articles */ .post-entry .thesc-iklan-adlabel, .thesc-iklan-articles-after-share .thesc-iklan-adlabel {font-size: 14px; color: #333; padding-bottom: 10px;} /* post-entry: Banners in MIDDLE position */ /* ---- Desktop ---- */ .thesc-iklan-articles-inside-revolving, .thesc-iklan-articles-inside, .thesc-iklan-articles-inside-ii, .thesc-iklan-articles-after { padding-top: 15px; padding-bottom: 30px; clear: both; } .thesc-iklan-articles-after-share { padding-top: 30px; padding-bottom: 15px; clear: both; } /* 'after-share' is a new AdSense-related position, added Jun/Jul 2020 */ .thesc-iklan-articles-inside-revolving img, .thesc-iklan-articles-inside img, .thesc-iklan-articles-after img, .thesc-iklan-articles-inside-ii img, {width: 728px; margin: auto; padding: 10px 0;} .single-style-3 .thesc-iklan-home-articles-sidebar, .single-style-3 .thesc-iklan-articles-sidebar {max-width:900px; margin: 30px 0;} .single-style-3 .thesc-iklan-articles-sidebar {padding-top:30px;} .single-style-3 .thesc-iklan-home-articles-sidebar img, .single-style-3 .thesc-iklan-articles-sidebar img { width: 33%; margin: auto; display: inline; padding: 10px; } /* ---- Mobile ---- */ .thesc-iklan-articles-inside-revolving-mobile, .thesc-iklan-articles-after-mobile {padding-top:30px;padding-bottom:20px} .thesc-iklan-articles-inside-mobile, .thesc-iklan-articles-inside-ii-mobile, .thesc-iklan-articles-after-mobile {padding-top:20px;padding-bottom: 30px;} .thesc-iklan-articles-inside-revolving-mobile img, .thesc-iklan-articles-inside-mobile img, .thesc-iklan-articles-inside-ii-mobile img .thesc-iklan-articles-after-mobile img { padding:10px 0; } /* ---- Specific to AdSense Ads * Jul 2020: Centering doesn't seem to work for the iframe directly, but for its div parent instead * ---- */ .single.single-post .thesc-iklan-articles-inside .thesc-iklan-articles-inside div > div, .single.single-post .thesc-iklan-articles-inside-ii .thesc-iklan-articles-inside-ii div > div, .single.single-post .thesc-iklan-articles-inside-mobile .thesc-iklan-articles-inside-mobile div > div, .single.single-post .thesc-iklan-articles-inside-ii-mobile .thesc-iklan-articles-inside-ii-mobile div > div, .single.single-post .thesc-iklan-articles-after .thesc-iklan-articles-after div > div, .single.single-post .thesc-iklan-articles-after-share .thesc-iklan-articles-after-share div > div {text-align:center; margin-bottom: 2vw} /* class is stacked twice by Adv Ads */ /* ----------- */ /* * Misc * */ .video-player { text-align: center; } /* * Misc: Subtitles in sidebar, related posts * */ .widget span.entry-subtitle, .related-posts span.entry-subtitle { display: none; } .page-header-title { padding: 40px 50px; } /* For The Scoop: Layout/Responsive CSS */ /* Defaults for over 1200px */ /* ----------- */ /* General */ .thesc-show-desktop {display:block} .thesc-show-mobile {display:none} /* ----------- */ /* Home Page */ .logged-in div.main { margin-top: 30px; } /* Home Page: Scoop Featured (Sticky) */ /* Only for stuff that changes based on device screen; the others are at the top! */ /* ~~~ */ /* Style 5: Original Single Featured Story */ .scoop-featured .featured-style-5 { padding-top: 50px; padding-bottom: 30px; max-width: 100%; max-height: 800px; } .scoop-featured .featured-style-5 .scoop-sticky-featured-col {padding-top:0px;} /* ~~~ */ /* Style 6: */ .scoop-featured .featured-style-6 { padding-top: 50px; padding-bottom: 30px; max-width: 100%; /* max-height: 800px; */ } /* Home Page: Scoop Top Stories (Tiled) */ .scoop-tiled .post-content.post-entry {display:none} /* Extracts, hidden at higher screen sizes only */ .scoop-tiled .post.grid-style {margin: 0 0 20px;} .scoop-tiled span.entry-subtitle {font-size:18px;line-height:26px} /* Home Page: Scoop Latest Posts */ .scoop-latest span.entry-subtitle, .scoop-latest p.entry-subtitle {font-size:0.8em;padding-top:5px;} .scoop-latest .full-width span.entry-subtitle {line-height:26px; /* first post */} .scoop-latest .list-style span.entry-subtitle {line-height:22px; /* the rest */} .sc-row-cats { display: none; } .local .post .post-cat.scoop-mobile, .author .post .post-cat.scoop-mobile {display:none} /* not just in Latest Posts, but this shows up in content-full template so it is hidden by default. Also hidden in local index.php for Home Page */ /* ----------- */ /* Articles */ /* Articles: Featured Images for Style 3 (full-width) */ .page-post.single-style-3 figure.post-image .wp-caption-text { position: relative; top: -40px; left: 120px; margin-right: 240px; z-index: 100; } .page-post.single-style-3 .post-inwrap {padding-top:30px} /* Articles: Center-aligned images in Standard and Full-Image layouts (Styles 1 and 2) For these layouts, maximum column width for content is 750px anyway, so we fix the captions and images accordingly. img.size-large: Images with "large size" (1024) class -- wp-caption-text: Captions -- removed cos they are within wp-caption container anyway wp-caption w/o img.size-large: Caption container set at max width, so images & captions within this container will follow suit */ .single-style-1 .post-entry .wp-caption.aligncenter img.size-large, .single-style-2 .post-entry .wp-caption.aligncenter img.size-large /*, .single-style-1 .post-entry .wp-caption.aligncenter .wp-caption-text, .single-style-2 .post-entry .wp-caption.aligncenter .wp-caption-text */ {width:750px;max-width:750px} .single-style-1 .post-entry .wp-caption.aligncenter, .single-style-2 .post-entry .wp-caption.aligncenter {max-width:750px;} .single-style-1 .post-entry .wp-caption.aligncenter, .single-style-2 .post-entry .wp-caption.aligncenter, .single-style-1 .post-entry .wp-caption.alignnone, .single-style-2 .post-entry .wp-caption.alignnone { padding-top:10px;padding-bottom:10px; /* bonus Align None cos they should have padding too! */ } /* Articles: Center-aligned images in Full-Width layouts (Style 3) For these layouts, maximum column width for content is 900px anyway. Only seems to be a problem if image has caption. */ .single-style-3 .post-entry .wp-caption.aligncenter img.size-large .single-style-3 .post-entry .wp-caption.aligncenter .wp-caption-text {width:900px;max-width:900px} .single-style-3 .post-entry .wp-caption.aligncenter {max-width:900px;} .single-style-3 .post-entry .wp-caption.aligncenter, .single-style-3 .post-entry .wp-caption.alignnone { padding-top:10px;padding-bottom:10px; /* bonus Align None cos they should have padding too! */ } /* Articles: Related posts thumbnails in Full-Width layouts (Style 3) */ .single-style-3 .related-posts .post .post-image a img {max-height:initial} /* Articles: Embedded YouTube videos, i.e. in iframe */ .single-style-1 p iframe, .single-style-2 p iframe {width: 100%; margin-left:10px;margin-right:10px;} .single-style-3 p iframe {width:720px;margin-left:80px;margin-right:136px;} /* because text is not justify-aligned, seems ok to align video closer to the left */ .single-style-1 p iframe, .single-style-2 p iframe, .single-style-3 p iframe {padding-top:10px;padding-bottom:10px;height: 450px;} /* ----------- [Default Sizes] */ /* Category & Tag Archive Pages */ /* Categories & Tags: Description & Featured Image (thanks WPCustom Category Image plugin) */ .scoop-cat-main {display:none} /* large image won't show on large screens */ .category.category-not-that-kind-of-doctor .post .post-image, .category.category-winnie-wisdom .post .post-image {display:none} .category.category-not-that-kind-of-doctor .post .post-inwrap, .category.category-winnie-wisdom .post .post-inwrap {width:80%;margin-left:20px} .scoop-cat-side .scoop-cat-image {padding-bottom:10px} .scoop-cat-desc, .scoop-tag-desc {font-size:16px} .tag-tiny-lit-fest .scoop-tag-desc {display: none;} .tag-tiny-lit-fest .scoop-tag-main .scoop-tag-image img {display: none;} .thesc_sidebar_tagpage_tinylitfest {display: block;} .sidebar-inwrap .widget.thesc_sidebar_tagpage_tinylitfest .widget-title {display: none;} /*-- enable description in widget on large screens */ .thesc_sidebar_tagpage_tinylitfest .sc_legcothumb_label {text-align: left;} /* ----------- */ /* Menu */ .header-bottom.sticky .menu-item-home {display:none} /* --hiding Home so to make space for COVID menu label on sticky menu */ /* --End of defaults-- */ /* * Mobile Responsive * */ /* note the typo 'syle' is actually used by Broden */ /************************* 1199px *************************/ @media only screen and (max-width: 1199px) { /* @media only screen and (max-width: 1200px) { */ /* Home Page: Scoop Top Stories (Tiled) - Thumbnails */ /* note: These are the the top 2 tiles of the original 5 tiles. Since we have changed the layout to only show the bottom 3, these don't apply anymore.*/ .blog-posts-syle-3 .half-width span.entry-title-primary {font-size: 26px} .blog-posts-syle-3 .half-width span.entry-title-primary {line-height: 1em} .blog-posts-syle-3 .half-width span.entry-subtitle { display:none; /* line-height: 1.6em */} .blog-posts-syle-3 .post.half-width .post-inwrap { padding: 30px 30px 15px 30px; } /* Home Page: Scoop Featured (Sticky) */ /* ~~~ */ /* Style 7: */ /* Sticky post */ .scoop-featured .featured-style-7 .trending-column.big .trending-big-wrapper { padding: 0px 20px; } /* .scoop-featured .featured-style-7 .trending-column.big .post .post-image img */ .scoop-featured .featured-style-7 .trending-column.big figure.post-image img { max-width: 490px; max-height: 400px; } .scoop-featured .featured-style-7 .trending-column.big .post .post-inwrap .post-title h2 a { font-size: 26px; } .scoop-featured .featured-style-7 .trending-column.big span.entry-subtitle { font-size: 18px; } /* Bottom thumbs */ .scoop-featured .featured-style-7-bottomrow figure img { height: 210px; } /* unless col-md-3, in which case: */ .scoop-featured .featured-style-7-bottomrow .col-md-3 figure img { height: 150px; } /* ----------- */ /* * Articles * */ /* Articles: Featured Images for Style 3 (full-width) */ .page-post.single-style-3 figure.post-image .wp-caption-text { position: relative; top: -10px; left: initial; margin-right: initial; z-index: 100; } .page-post.single-style-3 .post-inwrap {padding-top:50px} /* Articles: Padding around Share Icons */ .page-post .post-single-width:before { left: -30px;right: -30px;top: 0px; } .page-post .post-inwrap .social-share ul {margin-top: 25px;} /* Articles: Images and/or their captions with aligncenter; in Standard and Full-Width layouts */ .single-style-1 .post-entry .wp-caption.aligncenter img.size-large, .single-style-2 .post-entry .wp-caption.aligncenter img.size-large/*, .single-style-1 .post-entry .wp-caption.aligncenter .wp-caption-text, .single-style-2 .post-entry .wp-caption.aligncenter .wp-caption-text*/ {width:600px;max-width:600px} .single-style-1 .post-entry .wp-caption.aligncenter, .single-style-2 .post-entry .wp-caption.aligncenter { max-width:600px; } /* Articles: Embedded YouTube videos, i.e. in iframe */ .single-style-1 p iframe, .single-style-2 p iframe {width: 100%;height: 400px; margin-left:0;margin-right:0;} /* ----------- */ /* * Article: Trending Stories * */ /* ~~~ Style 3: Yellow gradient, left-aligned */ .scoop-article-trending-block .jetpack_top_posts_widget h2:after { width: 61%; } /* ----------- */ /* Category Archive Pages */ /* Categories: Description & Featured Image (thanks WPCustom Category Image plugin) */ .category.category-not-that-kind-of-doctor .post .post-inwrap, .category.category-winnie-wisdom .post .post-inwrap {width:90%;margin-left:0px} /* ----------- */ /** Classifieds & COVID-19 - Menu **/ .header-bottom:not(.sticky) #menu-item-22319, .header-bottom:not(.sticky) #menu-item-29441, {display: flex; margin-top: -20px;} .header-bottom:not(.sticky) #menu-item-1746 { /*width:150px -- used when Classifieds label was present; deactivated after */ width:200px; } /* --making the Extras box longer so to push Classifieds (22319) and COVID (29441) down; * --may not be needed when there is more space */ } /*** end 1199px ***/ /************************* 1024px *************************/ @media only screen and (max-width: 1024px) { /* Home Page */ .scoop-featured .featured-style-5 .scoop-sticky-featured-col { padding-top:10px; } /* Home Page: Featured, Style 7 */ /* Main Sticky */ /* Top Stories - Right of Main Sticky */ /* ----------- */ /* Articles */ /* * Article: Share Icons * */ .page-post .post-inwrap .social-share ul li a.whatsapp {display:none} .thesc_sponsored_shareblock {display:none} /* Cos it messes up the floating sponsored content box. Re-enable again at 768px, once content box is display:block rather than float */ /* Padding around Share Icons */ .page-post .post-single-width:before { left: -30px; right: -30px; top: 0px; height: 100px; } .page-post .post-inwrap .social-share ul { margin-top: 15px; } /* ----------- */ /* * Articles: Images and/or their captions with aligncenter; in Standard and Full-Image layouts * */ .single-style-1 .post-entry .wp-caption.aligncenter img.size-large, .single-style-2 .post-entry .wp-caption.aligncenter img.size-large, .single-style-1 .post-entry .wp-caption.aligncenter .wp-caption-text, .single-style-2 .post-entry .wp-caption.aligncenter .wp-caption-text {width:600px;max-width:600px} .single-style-1 .post-entry .wp-caption.aligncenter, .single-style-2 .post-entry .wp-caption.aligncenter { max-width:600px; } /* ----------- */ /* * Articles: Pull Quotes under Shortcode Ultimate * */ .su-pullquote {width:60% !important} .su-pullquote-align-left, .su-pullquote-align-right {clear:both} /* ----------- */ /* * Article: Trending Stories * */ /* ~~~ Style 3: Yellow gradient, left-aligned */ .scoop-article-trending-block .jetpack_top_posts_widget h2:after { width: 64%; } /* ----------- */ /* Category Archive Pages */ /* Categories: Description & Featured Image (thanks WPCustom Category Image plugin) */ .category.category-not-that-kind-of-doctor .post .post-inwrap, .category.category-winnie-wisdom .post .post-inwrap {width:100%;} } /************************* 1000px *************************/ /* 1000px is a specific size; in Standard Layout articles, sidebar disappears here */ @media only screen and (max-width: 1000px) { /* Articles: Images and/or their captions with aligncenter; in Standard and Full-Image layouts */ /* Actually, is fine, same as max-width: 1024px */ } /************************* 991px *************************/ /* 991px is a specific size; in Full-Width Layout articles, related posts resizes; on Home Page, the Tiled posts stack into two rows */ @media only screen and (max-width: 991px) { /* Home Page */ .logged-in div.main { margin-top: initial; } /* Home Page: Scoop Top Stories (Tiled) */ .scoop-tiled .post.grid-style {margin: 0 0 40px;} /* * Home Page: Banner above Middle Ads * */ .blog-banner img.sc_homebanner_desktop { display: none; /*height: 100px; object-fit: cover; object-position: center center;*/ } /* -- Makes banner wider and more visible (sides cut off) on smaller desktop sizes */ /* Articles: Center-aligned images in Full-Width layouts */ .single-style-3 .post-entry .wp-caption.aligncenter img.size-large .single-style-3 .post-entry .wp-caption.aligncenter .wp-caption-text {width:720px;max-width:720px} .single-style-3 .post-entry .wp-caption.aligncenter { max-width:720px; } /* Home Page: Promo Content */ .thesc_promo.col-sm-12 { margin: 30px 0px; padding: 10px 20px; } .thesc_promo.col-sm-12 img { height: 150px; width: auto; float: left; padding-right: 5px; } .thesc_promo.col-sm-12 h2 {text-align:left} .thesc_promo .post-title li.entry-title {font-size:15px;padding-bottom:5px} .thesc_promo p.more {padding-top: 25px;} /* * Home Page: Layout with Extras column * See inc/loops/category-layout-style-3.php */ .scoop-home-layout-2 .category-posts .post.full-width {height: 570px;} /* ----------- */ /* * Sidebar: Jetpack - Top Posts * */ .widget_top-posts .widgets-list-layout div.widgets-list-layout-links { width: 80%; } /* ----------- */ /* * Sidebar but also sitewide: YouTube Channel plugin */ .sidebar-inwrap h3.ytc_title {font-size:18px} /* In Articles, as apparently Homepage uses h5. FUTURE: To check */ /* ----------- */ /* Footer */ .footer-sidebar .widget.widget_media_image img {margin:auto} .footer-sidebar ul#menu-footer {text-align:center} .footer-sidebar ul#menu-footer li {border:none} .footer-sidebar ul#menu-footer li a {float:none;} .footer-sidebar ul#menu-footer li:last-child a {padding-right:0px} /* ----------- */ /* Articles: Related posts thumbnails in Full-Width layouts */ .single-style-3 .related-posts .post .post-image a img {max-height:100%} /* This was originally in CSS anyway, putting it here to differentiate between posts above/under 991px */ /* Articles: Embedded YouTube videos, i.e. in iframe */ .single-style-3 p iframe {width: 100%;height: 400px; margin-left:0;margin-right:0;} /* ----------- [991px] */ /* Category & Tag Archive Pages */ /* Categories & Tags: Description & Featured Image (thanks WPCustom Category Image plugin) */ .scoop-cat-main {display:block;} .scoop-cat-main .scoop-cat-image img, .scoop-cat-main .scoop-cat-desc, .scoop-tag-main .scoop-tag-image img, .scoop-tag-main .scoop-tag-desc {padding-bottom:40px} .scoop-cat-side .scoop-cat-image, .scoop-cat-side .scoop-cat-desc {display:none} /*.tag-tiny-lit-fest .scoop-tag-main .scoop-tag-image img { padding-bottom: initial; max-width: 400px; / *600px;* / margin-left: auto; margin-right: auto; }*/ .scoop-cat-desc, .scoop-tag-desc {font-size:17px} /* ----------- */ /* * Ads * */ .thesc-iklan-widget {background: none} .thesc-iklan-widget .thesc-iklan-home-articles-sidebar .thesc-iklan-adlabel, .thesc-iklan-widget .thesc-iklan-articles-sidebar .thesc-iklan-adlabel { text-align: center; padding-bottom: 10px; } .thesc-iklan-widget .thesc-iklan-home-articles-sidebar img, .thesc-iklan-widget .thesc-iklan-articles-sidebar img { margin: auto; max-width: 300px; } /* ----------- */ /** Classifieds & COVID-19 - Menu **/ #menu-item-22319, #menu-item-29441 {display: initial; margin-top: initial} } /************************* 768px *************************/ @media only screen and (max-width: 767px) { /* * Home Page * */ .scoop-featured img.wp-post-image, .scoop-tiled img.wp-post-image, .scoop-latest img.wp-post-image {width:100%;} .scoop-latest span.entry-subtitle {padding-top:10px;} /* Home Page: Standardise heading and subtitle styles */ .scoop-tiled .post-title h2, .scoop-latest .list-style .post-title h2 {font-size: 30px;} /* Headings - Tiled & Non-first Latest Posts to match Featured & First Latest Post Note h2 vs h2 span, see under Latest Stories subsection below */ .scoop-featured span.entry-subtitle, .scoop-tiled span.entry-subtitle {font-size:0.8em} /* Subtitles - Featured & Tiled */ .scoop-latest .list-style span.entry-subtitle {line-height:26px;} /* Subtitles - Non-first Latest Posts to match First Latest Post */ /* Home Page: Scoop Featured (Sticky) */ .scoop-featured .post-image {margin-left:-15px;margin-right:-15px} /* Offsets the 15px padding coming from Bootstrap for the column. TODO: Really just needs better structure & CSS for /inc/featured/featured-style-5.php */ .scoop-featured .featured-style-5 .scoop-sticky-featured-col { padding-left:0px;padding-right:0px; } /* Home Page: Scoop Top Stories (Tiled) */ .scoop-tiled .post-content.post-entry {display:block} /* Extracts, at lower screen sizes they are visible again */ .scoop-tiled .post.grid-style {margin: 0 0 20px;} /* Home Page: Scoop Top Stories (Tiled) - Thumbnails */ /* note: These are the the top 2 tiles of the original 5 tiles. Since we have changed the layout to only show the bottom 3, these don't apply anymore.*/ .blog-posts-syle-3 .half-width span.entry-title-primary {font-size: 1.25em} .blog-posts-syle-3 .half-width span.entry-title-primary {line-height: 1.4em} .blog-posts-syle-3 .half-width span.entry-subtitle {display:block} .blog-posts-syle-3 .post.half-width .post-inwrap { padding: 30px 30px 30px 30px; } /* Home Page: Featured, Style 7 */ /* Main Sticky */ .scoop-featured .featured-style-7 .trending-column.big figure.post-image { width: 100%; margin-right: initial; margin-left: initial; } .scoop-featured .featured-style-7 .trending-column.big figure.post-image img { max-width: 70%; margin-left: 35%; height: 380px; } .scoop-featured .featured-style-7 .trending-column.big .trending-big-wrapper { height: 380px; width: 35%; padding: 5px 15px; } .scoop-featured .featured-style-7 .trending-column.big .post .post-inwrap .post-title h2 a { font-size: 24px; } .scoop-featured .featured-style-7 .trending-column.big span.entry-subtitle { font-size: 18px; } /* * Reset mobile style to match Style 5 * */ .scoop-featured .featured-style-7 .trending-column.big .post .post-date { color: #999; } /* Top Stories - Right of Main Sticky */ .scoop-featured .featured-style-7-toprow .trending-column.small { width: initial; /* i.e. col-md-4 */ max-width: 100%; margin-bottom: initial; margin-left: 15px; margin-right: 15px; } .scoop-featured .featured-style-7-toprow .trending-column.small figure.post-image { padding-bottom: 40px; max-width: 65%; } .scoop-featured .featured-style-7-toprow .trending-column.small figure.post-image img { object-fit: cover; max-height: 300px; } .scoop-featured .featured-style-7-toprow .trending-column.small .post .post-inwrap { max-width: 35%; } /* * Reset mobile style to match Style 5 * */ .scoop-featured .featured-style-7-toprow .trending-column.small { margin-left: initial; margin-right: initial; } .scoop-featured .featured-style-7-toprow .trending-column.small .post .post-inwrap { padding: initial; } .scoop-featured .featured-style-7-toprow .trending-column.small .post-title h2 { font-size: 24px; } .scoop-featured .featured-style-7-toprow .trending-column.small span.entry-subtitle { font-size: 22px; } /* Top Stories - Bottom Thumbs */ .scoop-featured .featured-style-7-bottomrow .post figure img { object-fit: cover; max-height: 250px; height: fit-content; } /* * Reset mobile style to match Style 5 * */ .scoop-featured .featured-style-7 .trending-column.small .post .post-inwrap .post-title h2 { font-size: 24px; font-weight: normal; } /* Promo */ .featured-style-7 .trending-column.small.col-sm-12 .thesc_promo { padding: 10px 20px; height: 180px; } .featured-style-7 .trending-column.small.col-sm-12 .thesc_promo img { height: 150px; width: auto; float: left; padding-right: 5px; } .featured-style-7 .trending-column.small.col-sm-12 .thesc_promo h2 {text-align:left} /* * Home Page: Thumbnail for Promo Content (LegCo, Magazine, etc) next to Sticky * */ .sc_homethumb_container {margin-bottom:40px;} /* Home Page: Scoop Latest Stories */ .scoop-latest img.wp-post-image {max-height: 400px; object-fit: cover;} .home .scoop-latest .post .post-title h2 span.entry-title-primary, .archive .post .post-title h2 span.entry-title-primary { font-size: 24px; } .home .scoop-latest span.entry-subtitle, .archive .post .post-title h2 span.entry-subtitle {font-size:22px} /* * Home Page: Layout with Extras column * See inc/loops/category-layout-style-3.php */ .scoop-home-layout-2 .category-posts .post.full-width {height: auto;} /* ----------- */ /* * Articles * */ /* Articles: Share Icons */ /* Padding around Share Icons */ /* .page-post .post-single-width:before -- same as max-1024px */ .page-post .post-inwrap .social-share ul { margin-top: 15px; } .page-post .post-inwrap .social-share ul li a.whatsapp {display:inline-block} .thesc_sponsored_shareblock {display:inline-block} /* Cos it messes up the floating sponsored content box. Hidden at 1024px but re-enabled again here, once content box is display:block rather than float */ /* Articles: Images and/or their captions with aligncenter; in Standard and Full-Image layouts */ /* .single-style-1 .post-entry figure.wp-caption.aligncenter, .single-style-2 .post-entry figure.wp-caption.aligncenter {width: 100% !important} */ /* See below on 100% screen width */ .single-style-1 .post-entry .wp-caption.aligncenter img.size-large, .single-style-2 .post-entry .wp-caption.aligncenter img.size-large, .single-style-1 .post-entry .wp-caption.aligncenter .wp-caption-text, .single-style-2 .post-entry .wp-caption.aligncenter .wp-caption-text {width:initial;max-width:100%} /* Figure set to 100% and image width resets to initial; because under 768px it's unlikely an image less than 768px has been used; so it's okay to resize it to 100% screen width */ .single-style-1 .post-entry .wp-caption.aligncenter, .single-style-2 .post-entry .wp-caption.aligncenter, .single-style-1 .post-entry .wp-caption.alignnone, .single-style-2 .post-entry .wp-caption.alignnone { padding-left: 0px; padding-right: 0px; width: fit-content !important; /* 100% screen width, no padding */ } .single-style-1 .post-entry .wp-caption.alignnone, .single-style-2 .post-entry .wp-caption.alignnone { margin-left: -15px; margin-right: -15px; /* 100% screen width, no padding */ } .single-style-1 .post-entry .wp-caption.aligncenter img, .single-style-2 .post-entry .wp-caption.aligncenter img { max-width: unset; /* width: fit-content; */ width:100%; } .single-style-1 .post-entry .wp-caption.aligncenter figcaption.wp-caption-text, .single-style-2 .post-entry .wp-caption.aligncenter figcaption.wp-caption-text, .single-style-1 .post-entry .wp-caption.alignnone figcaption.wp-caption-text, .single-style-2 .post-entry .wp-caption.alignnone figcaption.wp-caption-text { padding-right: 10px; padding-left: 10px; } /* Articles: Center-aligned images in Full-Width layouts */ .single-style-3 .post-entry figure.wp-caption.aligncenter {width: 100% !important} .single-style-3 .post-entry .wp-caption.aligncenter img.size-large .single-style-3 .post-entry .wp-caption.aligncenter .wp-caption-text {width:initial;max-width:100%} .single-style-3 .post-entry .wp-caption.aligncenter, .single-style-3 .post-entry .wp-caption.alignnone { padding-left:15px;padding-bottom:15px; } /* Articles: Pull Quotes under Shortcode Ultimate */ .su-pullquote {width:100% !important} .su-pullquote-align-left, .su-pullquote-align-right {float:none !important} /* Articles: Embedded YouTube videos, i.e. in iframe */ .single-style-1 p iframe, .single-style-2 p iframe, .single-style-3 p iframe { width: 95%; margin-left: 2.5%; margin-right: 2.5%; height: 350px; /* Couldn't get margin:auto to work and can't select parent which is just a regular p, so...*/ } /* ----------- */ /* * Article: Trending Stories * */ /* ~~~ Style 3: Yellow gradient, left-aligned */ .scoop-article-trending-block .jetpack_top_posts_widget h2 {margin-bottom:35px} .scoop-article-trending-block .jetpack_top_posts_widget h2:after { height: 20px; /* 15px */ position: absolute; top: 38px; right: -20px; width: 120%; } /*.scoop-article-trending-block .jetpack_top_posts_widget ul {padding:5px 40px;} .scoop-article-trending-block .jetpack_top_posts_widget ul li { list-style-type: none; list-style-position: outside; padding: 2px 5px; }*/ .scoop-article-trending-block .jetpack_top_posts_widget ul li:before { /* Insert content that looks like bullets */ content: "•"; /* Did this even come from me? • | Other: ●∙ */ /* padding-right: 8px; */ position: absolute; margin-left: -20px; } /*.scoop-article-trending-block .jetpack_top_posts_widget ul li a { color: #111; font-size: 17px; background: none; border-bottom: none; font-weight: normal; }*/ /* ----------- [768px] */ /* Category & Tag Archive Pages */ /* Categories: Description & Featured Image (thanks WPCustom Category Image plugin) */ .thesc_sidebar_tagpage_tinylitfest {display: none;} .tag-tiny-lit-fest .scoop-tag-desc {display: block;} .tag-tiny-lit-fest .scoop-tag-main .scoop-tag-image img { display: block; padding-bottom: 0; margin-bottom: 5em; border-bottom: 5px solid #f7fa00; border-top: 5px solid #f7fa00; max-width: 400px; /*600px;*/ margin-left: auto; margin-right: auto; } /* ----------- */ } /************************* 650px *************************/ /* 650px is a specific size - note that for Samsung phones, device width is 640px */ @media only screen and (max-width: 650px) { /* * General * */ .thesc-show-desktop {display:none} .thesc-show-mobile {display:block} /* ----------- */ /* * Header: Mobile Bar & Logo * */ /* -- Moves the logo up onto the header bar */ header .mobile-topbar .sidebar-button a { height: 70px; top: 10px; } header .search-button a {top: 10px;} header .header-main .brand-logo { position: relative; top: -80px; } header .header-main .brand-logo a img { max-height: 45px !important; } /* ----------- */ /* * Home Page: Banner above Middle Ads * */ .blog-banner { /* margin: 0 0 35px 0; */ } .blog-banner img.sc_homebanner_desktop {display: none;} .blog-banner img.sc_homebanner_mobile {display: block;} .blog-banner img.sc_homebanner_mobile { height: 100px; object-fit: cover; object-position: center center; } /* -- quick fix for when there is no mobile version of a banner; should adjust later */ /* ----------- */ /* Home Page: Latest */ .scoop-latest .post .post-content p {display:none} .scoop-latest .full-width span.entry-subtitle, .scoop-latest .list-style span.entry-subtitle { font-size: 19px; line-height: 23px; } /* first post and the rest too */ /* Mobile Style 2 - Grey cards */ /* Note: .sc-row-cats for archive pages (uses content-list.php) * .post-cat.scoop-mobile for Home Page (uses content-full.php) */ /* -- local -- */ .scoop-featured .featured-style-7 .trending-column.small {max-width:100%} .scoop-featured .featured-style-7 .post .post-cat.scoop-mobile, .scoop-featured .featured-style-7 .trending-column.small .sc-row-cats { display: block; max-height: 45px; } .scoop-featured .featured-style-7 .trending-column.small article { position: relative; /* need this so that the absolute position of .scoop-latest article .post-inwrap works */ background: whitesmoke; height: 220px; margin-left: -15px; margin-right: -15px; border-top: 15px #ccc solid; margin-bottom: 0; /* height: fit-content; */ clear: both; } .scoop-featured .featured-style-7 .trending-column.small article figure.post-image, .blog-main.scoop-latest article figure.post-image { /* float: left; */ max-width: 40%; margin: 15px; display: inline-block; } /* Some specific styling to standardise all the thumbs */ .scoop-featured .featured-style-7-toprow .trending-column.small figure.post-image a { margin-right: 15px; } .scoop-featured .featured-style-7-bottomrow .trending-column.small figure.post-image { /* .scoop-featured .featured-style-7-bottomrow .trending-column.small.col-md-4 figure.post-image { */ /* .scoop-featured .featured-style-7 .trending-column.small.col-md-4 figure.post-image { */ padding-left: 0px; } .scoop-featured .featured-style-7-bottomrow .trending-column.small article .post-inwrap .post-title { margin: 0px; } /* -- !standardising -- */ .scoop-featured .featured-style-7 .trending-column.small article figure.post-image a { background: transparent } .scoop-featured .featured-style-7 .trending-column.small article figure.post-image a img { margin: auto; max-height: 150px; } .scoop-featured .featured-style-7 .trending-column.small.col-md-4 figure img { /* .scoop-featured .featured-style-7-bottomrow .trending-column.small.col-md-4 figure img { */ max-width: 100%; height: auto; max-height: none; } .scoop-featured .featured-style-7 .trending-column.small article .post-inwrap { width: 40%; display: block; position: absolute; /* this positioning only works if its ancestor parent has been positioned too, see .blog-main article */ top: 0; left: 50%; padding: 15px; margin-left: 30px; margin-top: 20px !important; } .scoop-featured .featured-style-7 .trending-column.small h2.entry-title a { /* .scoop-featured .featured-style-7 .trending-column.small span.entry-title-primary { */ line-height: 0px; font-size: 19px !important; } .scoop-featured .featured-style-7 .trending-column.small span.entry-subtitle { display:none; } .scoop-featured .featured-style-7 .trending-column.small .post .post-content { display:none; } .archive .sc-row-cats, .blog-main.scoop-latest .sc-row-cats { display: block; max-height: 45px; } .archive .blog-main article, .blog-main.scoop-latest article { position: relative; /* need this so that the absolute position of .scoop-latest article .post-inwrap works */ background: whitesmoke; height: 220px; margin-left: -15px; margin-right: -15px; border-top: 15px #ccc solid; margin-bottom: 0; /* height: fit-content; */ clear: both; } .archive .blog-main article figure.post-image, .blog-main.scoop-latest article figure.post-image { /* float: left; */ max-width: 40%; margin: 15px; display: inline-block; } .archive .blog-main article figure.post-image a, .blog-main.scoop-latest article figure.post-image a { background: transparent } .archive .blog-main article figure.post-image a img, .blog-main.scoop-latest article figure.post-image a img { margin: auto } /* categories: display y/n */ /* -- testing grey cards on local Apr 2019 -- */ .scoop-featured .featured-style-7 .post .post-cat.scoop-mobile, .scoop-featured .featured-style-7 .trending-column.small .post .post-cat, .scoop-featured .featured-style-7 .trending-column.small .post .post-cat { display:none } .scoop-featured .featured-style-7 .trending-column.small .post .sc-row-cats .post-cat { display: block; } .scoop-featured .featured-style-7 .trending-column.small .post .post-cat.scoop-mobile {display:block} /* -- !end testing --*/ .archive .blog-main .post .post-cat { display:none } .archive .blog-main .post .sc-row-cats .post-cat { display: block; } .archive .blog-main .post .post-cat.scoop-mobile {display:block} .archive .blog-main article .post-inwrap { width: 40%; display: block; position: absolute; /* this positioning only works if its ancestor parent has been positioned too, see .blog-main article */ top: 0; left: 50%; padding: 15px; margin-left: 30px; margin-top: 20px !important; } .archive .blog-main span.entry-title-primary { line-height: 0px; font-size: 19px !important; } .archive .blog-main span.entry-subtitle { display:none; } .archive .post .post-content { display:none; } /* categories: stylin' */ /* grey cards batch II: base style with grey stripe */ /* -- testing grey cards on local Apr 2019 -- */ .scoop-featured .featured-style-7 .trending-column.small .sc-row-cats .post-cat {margin:15px;} .scoop-featured .featured-style-7 .trending-column.small .post .post-cat.scoop-mobile { width: fit-content; margin-left: 15px; margin-bottom: 15px; } .scoop-featured .featured-style-7 .trending-column.small .sc-row-cats .post-cat ul {text-align: left;} .scoop-featured .featured-style-7 .trending-column.small article .post-inwrap, /* .scoop-latest.news-style-5 .news5-left article .post-inwrap, */ .scoop-latest.news-style-5 article .post-inwrap { width: 60%; left: 40%; margin-left: 0px; margin-top: 5px !important; top: 45px; padding: 10px 15px 15px; } /* grey card style 3 only: gradient */ .scoop-featured .featured-style-7 .trending-column.small .sc-row-cats, .scoop-featured .featured-style-7 .trending-column.small .post .post-cat.scoop-mobile { max-height: 45px; background: -webkit-linear-gradient(top, #ddd 0%,#eee 47%,whitesmoke 100%); margin-bottom: 5px; padding-top: 5px; } .scoop-featured .featured-style-7 .trending-column.small .sc-row-cats .post-cat, .scoop-featured .featured-style-7 .trending-column.small .post .post-cat.scoop-mobile .post-cat {margin:15px;} .scoop-featured .featured-style-7 .trending-column.small article { height: 210px; border-top: 3px #ddd solid; } .scoop-featured .featured-style-7 .trending-column.small article .post-inwrap { padding-top: 15px; } /* -- !end testing -- */ /* grey cards batch II: base style with grey stripe */ /* * * for alternate center-aligned, change: .author .sc-row-cats .post-cat ul {text-align: center;} * * */ .archive .sc-row-cats .post-cat {margin:15px;} .archive .blog-main .post .post-cat.scoop-mobile { width: fit-content; margin-left: 15px; margin-bottom: 15px; } .archive .sc-row-cats .post-cat ul {text-align: left;} .archive .blog-main article .post-inwrap { width: 60%; left: 40%; margin-left: 0px; margin-top: 5px !important; top: 45px; padding: 10px 15px 15px; } /* grey card style 3 only: gradient */ .archive .sc-row-cats { max-height: 45px; background: -webkit-linear-gradient(top, #ddd 0%,#eee 47%,whitesmoke 100%); margin-bottom: 5px; padding-top: 5px; } .archive .sc-row-cats .post-cat {margin:15px;} .archive .blog-main article { height: 210px; border-top: 3px #ddd solid; } .archive .blog-main article .post-inwrap { padding-top: 15px; } /* Home Page: Sidebar */ .home .sidebar .widget_top-posts {display:none} /* * Articles * */ /* Articles: Featured Images for Style 3 (full-width) */ .page-post.single-style-3 figure.post-image {margin-bottom:40px} .page-post.single-style-3 figure.post-image .wp-caption-text { position: relative; top: 0px; z-index: 100; } /* .page-post.single-style-3 .post-inwrap {padding-top:50px} */ /* * Pages * */ /* Pages: CuboiArt Cartoons */ /* .page-post.cuboi-cartoons-large .social-share ul, */ .page-post .post-inwrap .cuboi-cartoons-single .social-share ul, .single-post .category-cuboiart .post-inwrap .social-share ul { display: inline-grid; grid-template-columns: auto auto auto auto; grid-gap: 0 3px; justify-content: center; } /*-- keep the page-post and post-inwrap to override default styles */ /* ----------- [650px] */ /* * Ads * */ .logged-in div.main { margin-top: 30px; } /* Ads: Top Banner, Header Style 2 - Logo with Ad inline */ header.style-2 .header-main .header-ads { float: none; margin: 30px 0 20px !important; } .thesc-iklan-front-top-banner-mobile .thesc-iklan-adlabel {float: none;} header.style-2 .header-main .header-ads {max-height: 146px;} .scoop-top-ad .scoop-mobile-ads img {margin-top:0px} /* Give space to top ad */ /* Ads: Top Banner, Header Style 1 - Centred Logo */ /* -- without the 'desktop/mobile' identifier, * all-top-banner-under-centred-logo is local only */ header.style-1 .header-main .container, header.style-2 .header-main .container .row .col-md-4 {height: 1em;} header.style-2 .header-main .header-ads {max-height: none;} /* -- Style 2 added here for transitional stage where logo has been moved to top bar * but we are still using Style 2 and haven't switched to Style 1 */ .thesc-iklan-all-top-banner-under-centred-logo, .thesc-iklan-all-top-banner-under-centred-logo-mobile { float: none; margin: 2em; } .thesc-iklan-all-top-banner-under-centred-logo .thesc-iklan-adlabel, .thesc-iklan-all-top-banner-under-centred-logo-mobile .thesc-iklan-adlabel {float: none; margin-top: -15px; margin-bottom: -15px;} .thesc-iklan-all-top-banner-under-centred-logo img, .thesc-iklan-all-top-banner-under-centred-logo-mobile img, .thesc-iklan-front-top-banner-mobile img { margin: 0 auto; max-width: 300px; } /* -- Style 2 added here for transitional stage where logo has been moved to top bar * but we are still using Style 2 and haven't switched to Style 1 */ .scoop-mobile-ads, .thesc-iklan-articles-inside-revolving-mobile, .thesc-iklan-articles-inside-mobile, .thesc-iklan-articles-inside-ii-mobile, .thesc-iklan-articles-after-mobile {display:block;} .scoop-mobile-ads .thesc-iklan-front-above-footer-mobile {margin-bottom:3em} .scoop-desktop-ads, .thesc-iklan-articles-inside-revolving, .thesc-iklan-articles-inside, .thesc-iklan-articles-inside-ii, .thesc-iklan-articles-after {display:none} .post-entry .thesc-iklan-adlabel, /* Article Middle Banners */ .single-style-3 .thesc-iklan-home-articles-sidebar .thesc-iklan-adlabel, .single-style-3 .thesc-iklan-articles-sidebar .thesc-iklan-adlabel { text-align: center; padding-bottom: 10px; } .single-style-3 .thesc-iklan-home-articles-sidebar img, .single-style-3 .thesc-iklan-articles-sidebar img { width: 100%; max-width: 300px; display: block; } /* ----------- */ /* * Sidebar: Jetpack - Top Posts * */ .widget_top-posts .widgets-list-layout div.widgets-list-layout-links { width: 70%; } /* ----------- [650px] */ /* Archives: Author Pages */ .page-author-title .author-image {width:100%} .page-author-title .author-image img {margin-left: auto; margin-right: auto} .page-author-title .author-name {width: 100%; text-align: center} .page-author-title .sc-author-social {text-align: center} /* Category & Tag Archive Pages */ /* Categories: Description & Featured Image (thanks WPCustom Category Image plugin) */ .tag-tiny-lit-fest .scoop-tag-main .scoop-tag-image img { border-bottom: 0; border-top: 0; max-width: 100%; margin-left: initial; margin-right: initial; } } /************************* 600px *************************/ /* 600px is a specific size */ @media only screen and (max-width: 600px) { .desktop {display:none} .mobile {display:block} /* Home Page: Promo Content */ .thesc_promo.col-xs-12 { margin: 30px 0px; padding: 5px; } .thesc_promo.col-xs-12 h2 { text-align: center; padding-bottom: 10px; font-size: 22px; } .thesc_promo.col-xs-12 img { width: 150px; height: auto; float: left; } .thesc_promo .post-title li.entry-title {font-size:16px} .thesc_promo p.more {padding-top: 25px;float:right} /* Home Page: Featured, Style 7 */ /* Main Sticky */ .scoop-featured .featured-style-7 .trending-column.big { } .scoop-featured .featured-style-7 .trending-column.big figure.post-image img { max-height: 350px; height: auto; } /* Top Stories - Right of Main Sticky */ .scoop-featured .featured-style-7-toprow .trending-column.small { } /* Top Stories - Bottom Thumbs */ /* Thumbs in col-md-3 (i.e. 4-thumbs) */ .scoop-featured .featured-style-7-bottomrow .col-md-3 figure img { max-height: 190px } /*** Alternate style: Thumb on left, title & excerpt on right ***/ /* .scoop-featured .featured-style-7-bottomrow .trending-column.small { max-width: initial; } .scoop-featured .featured-style-7-bottomrow .post .post-image { width: 50%; float: left; margin: auto; padding: 15px; } .scoop-featured .featured-style-7-bottomrow .post .post-content p { display: block; font-size: smaller; line-height: 20px; } */ /* ----------- [600px] */ /* Articles: Images and/or their captions with alignleft/alignright */ .post-entry .wp-caption {width:100% !important} .post-entry .alignright img, .post-entry .alignleft img, .post-entry .aligncenter img { width: initial; max-width: 100%; } /* ----------- [600px] */ /* Articles: Images and/or their captions with aligncenter; * in Standard, Full-Image, Full-Width layouts */ .single-style-1 .post-entry .wp-caption.aligncenter, .single-style-2 .post-entry .wp-caption.aligncenter, .single-style-3 .post-entry .wp-caption.aligncenter { margin-left: -15px; margin-right: -15px; /*width: 140vh !important;*/ } /*.single-style-1 .post-entry .wp-caption.aligncenter .wp-caption-text, .single-style-2 .post-entry .wp-caption.aligncenter .wp-caption-text, .single-style-3 .post-entry .wp-caption.aligncenter .wp-caption-text,*/ .single-style-1 .post-entry .wp-caption.aligncenter img.size-large, .single-style-2 .post-entry .wp-caption.aligncenter img.size-large, .single-style-3 .post-entry .wp-caption.aligncenter img.size-large { max-width: 140vw; width: 100%; } /* ----------- [600px] */ /* Articles: Embedded YouTube videos, i.e. in iframe */ .single-style-1 p iframe, .single-style-2 p iframe, .single-style-3 p iframe { width: 95%; margin-left: 2.5%; margin-right: 2.5%; height: 250px; } } /************************* 500px *************************/ @media only screen and (max-width: 500px) { /* Home Page: Scoop Top Stories (Tiled) - Thumbnails */ /* note: These are the the top 2 tiles of the original 5 tiles. Since we have changed the layout to only show the bottom 3, these don't apply anymore.*/ .blog-posts-syle-3 .half-width span.entry-title-primary {font-size: 24px} .blog-posts-syle-3 .half-width span.entry-title-primary {line-height: 1em} .blog-posts-syle-3 .half-width span.entry-subtitle {display:none} .blog-posts-syle-3 .post.half-width .post-inwrap { padding: 30px 30px 10px 30px; } /* * Home Page: Thumbnail for Promo Content (LegCo, Magazine, etc) next to Sticky * */ .sc_homethumb_image img, #custom_html-5 .custom-html-widget .sc_legcothumb_image img, #custom_html-6 .custom-html-widget .sc_legcothumb_image img {max-width:80%;} /* Temporary May 2019: Ramadhan Food Guide 2019 */ .sc_homethumb_image img {max-width:100%;} /* Home Page: Extras Box for Mobile */ .scoop-extras-mobile-box {display:block} #custom_html-2 {display:none} /* if extras box shows, the widget box is hidden */ /* Home Page: Scoop Latest Stories */ /* .home .scoop-latest .post .post-title h2 span.entry-title-primary, .archive .post .post-title h2 span.entry-title-primary { font-size: 22px; } */ /* keep at 24px, same as Featured/Top Stories */ /* .home .scoop-latest span.entry-subtitle, .archive .post .post-title h2 span.entry-subtitle {font-size:22px} */ /* already set under 768px */ /* ----------- [500px] */ /* * Page: COVID-19 Hub: Latest Stories * */ .thesc_covid19hub_header .sue-section-background { background-image: url('https://thescoop.co/wp-content/uploads/2020/05/COVID-19-hub-banner-mobile.png') !important; } /* ----------- [500px] */ /* Category & Tag Archive Pages */ /* Categories: Description & Featured Image (thanks WPCustom Category Image plugin) */ .scoop-cat-main .scoop-cat-image img, .scoop-cat-main .scoop-cat-desc, .scoop-tag-main .scoop-tag-image img, .scoop-tag-main .scoop-tag-desc {padding:0 20px 30px} .tag-tiny-lit-fest .scoop-tag-main .scoop-tag-image img {padding-bottom: 0; margin-bottom: 0;} /* ----------- */ /* * Sidebar: Jetpack - Top Posts * */ .widget_top-posts .widgets-list-layout div.widgets-list-layout-links { width: 60%; } /* ----------- */ /* * Ads * */ .thesc-iklan-widget {background: #f8f8f8} /* Ads in Articles -- To be removed after style-article.css goes live */ .thesc-iklan-articles-after-share .thesc-iklan-adlabel { padding-bottom: 0; padding-top: 20px; } } /************************* 420px *************************/ /* 420px is a specific size */ @media only screen and (max-width: 400px) { /* ----------- */ /* Archives: Author */ .page-author-title { padding-left: 20px; padding-right: 20px; } } /************************* 375px *************************/ /* 375px is a specific size */ @media only screen and (max-width: 375px) { /* * Pages * */ /* Pages: CuboiArt Cartoons */ /* .page-post.cuboi-cartoons-large .social-share ul, */ .page-post .post-inwrap .cuboi-cartoons-single .social-share ul, .single-post .category-cuboiart .post-inwrap .social-share ul { grid-template-columns: 75px 75px 75px 75px; grid-gap: 0 7px; } /*-- keep the page-post and post-inwrap to override default styles */ /* * Sidebar: Jetpack - Top Posts * */ .widget_top-posts .widgets-list-layout div.widgets-list-layout-links { width: 50%; } }