/* Theme Name: Pixelated Orange Theme URI: https://pixelatedorange.co.uk Author: Pixelated Orange Author URI: https://pixelatedorange.co.uk Description: Barebones parent theme for Pixelated Orange child themes. Version: 1.8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: pixelated-orange Tags: custom-menu, custom-logo, threaded-comments, translation-ready */ /* * Pixelated Orange Theme — Critical CSS * Structural scaffolding only. All visual styling belongs in the child theme. */ /* ========================================================= * RESET & BOX MODEL * ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; } img, video { max-width: 100%; height: auto; } /* ========================================================= * CLEARINGS * ========================================================= */ .clear::before, .clear::after, .entry-content::before, .entry-content::after, .entry-footer::before, .entry-footer::after, .site-header::before, .site-header::after, .site-content::before, .site-content::after, .site-footer::before, .site-footer::after, .widget-area::before, .widget-area::after, .widget::before, .widget::after { content: ""; display: table; table-layout: fixed; } .clear::after, .entry-content::after, .entry-footer::after, .site-header::after, .site-content::after, .site-footer::after, .widget-area::after, .widget::after { clear: both; } /* ========================================================= * TYPOGRAPHY RESET * ========================================================= */ h1, h2, h3, h4, h5, h6 { margin-top: 0; } p { margin-top: 0; } /* ========================================================= * FORMATTING * ========================================================= */ hr { background-color: #bbb; border: 0; height: 1px; margin-bottom: 1.5em; } /* ========================================================= * LISTS — reset globally, restore in content * ========================================================= */ ul, ol { margin: 0; padding: 0; } .entry-content ul, .entry-summary ul, .comment-content ul { list-style: disc; margin: 0 0 1.5em; padding-left: 1.5em; } .entry-content ol, .entry-summary ol, .comment-content ol { list-style: decimal; margin: 0 0 1.5em; padding-left: 1.5em; } .entry-content li > ul, .entry-content li > ol, .comment-content li > ul, .comment-content li > ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /* ========================================================= * TABLES * ========================================================= */ table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%; } thead th { border-bottom: 2px solid #bbb; padding-bottom: 0.5em; } th { padding: 0.4em; text-align: left; } tr { border-bottom: 1px solid #eee; } td { padding: 0.4em; } /* ========================================================= * LINKS * ========================================================= */ a { background-color: transparent; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /* ========================================================= * LAYOUT * ========================================================= */ #page { width: 100%; } #content { width: 100%; } .site-content-contain { width: 100%; } /* ========================================================= * HEADER TOP CONTENT * Optional wrapper output at the top of .site-header-inner (see * header.php) when "content at top of header" is on in Theme Settings. * .site-header-inner wraps so this sits on its own full-width row * above the logo and menu in the "logo left" (row) layout. * ========================================================= */ .site-header-inner { flex-wrap: wrap; } .site-header-top-content { width: 100%; } /* ========================================================= * SITE LOGO * Width is set on .site-logo itself (see the Theme Settings CSS * output in inc/theme-settings.php, driven by the Logo Width field) - * the image just fills that wrapper. * ========================================================= */ .site-logo { display: inline-block; line-height: 0; } .site-logo img { display: block; width: 100%; height: auto; } /* ========================================================= * PRIMARY NAVIGATION * ========================================================= */ .main-navigation { display: flex; align-items: center; } /* WordPress core wraps wp_nav_menu()'s output in a
unless 'container' => false is passed - this theme * doesn't pass that. The class depends on the menu's name (e.g. * .menu-menu-1-container, .menu-main-menu-container), so it's targeted * structurally rather than by name. It needs to actually fill .main-navigation's * width, or logoleft's "flex: 1" on .main-navigation (and any * justify-content set on .primary-menu below) has no room to work with - * a block-level div doesn't stretch to fill a flex parent on its own. */ .menu-menu-1-container, .menu-main-menu-container, .main-navigation > div { width: 100%; } /* Sensible defaults for both header layouts - spread the menu items * across the row/column evenly with a gap at each end. Theme Settings' * Header > "nav button alignment" fields (see inc/theme-settings.php's * wp_head CSS output) override this with 'flex-end'/'center'/'space- * evenly' when the user picks something else; this is only what shows * before any of those fields have been set. */ .pot-header-layout-logoleft .main-navigation .primary-menu, .pot-header-layout-logotop .main-navigation .primary-menu { justify-content: space-between; } .main-navigation ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: var(--pot-global-padding, 1em); } .main-navigation ul ul { display: none; position: absolute; top: 100%; left: 0; z-index: 999; min-width: 200px; flex-direction: column; } .main-navigation ul ul.toggled-on { display: flex; } .main-navigation ul ul ul { top: 0; left: 100%; } .main-navigation li { position: relative; } .main-navigation a { display: block; text-decoration: none; } .main-navigation .dropdown-toggle { background: transparent; border: none; cursor: pointer; padding: 0; } /* ========================================================= * POST/PAGE NAVIGATION * ========================================================= */ .posts-navigation, .post-navigation, .comments-pagination, .pagination { clear: both; margin: 0 0 1.5em; } .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; } .post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; } .post-navigation .nav-next { text-align: right; } /* ========================================================= * POST THUMBNAIL * ========================================================= */ .post-thumbnail { display: block; margin-bottom: 1em; } .post-thumbnail img { display: block; width: 100%; height: auto; } .post-thumbnail a img { transition: opacity 0.2s; } .post-thumbnail a:hover img, .post-thumbnail a:focus img { opacity: 0.7; } /* ========================================================= * ACCESSIBILITY * ========================================================= */ .screen-reader-text { border: 0; clip: rect( 1px, 1px, 1px, 1px ); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.6 ); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* ========================================================= * ALIGNMENTS * ========================================================= */ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .alignwide { /* margin-left: calc( -8vw ); */ /* margin-right: calc( -8vw ); */ /* max-width: calc( 100% + 16vw ); */ } /* Disabled - see assets/css/theme.css for why (breaks WooCommerce checkout). */ .alignfull { /* margin-left: calc( 50% - 50vw ); */ /* margin-right: calc( 50% - 50vw ); */ /* max-width: 100vw; */ /* width: 100vw; */ } /* ========================================================= * CONTENT / SIDEBAR LAYOUT * The .has-sidebar flex split (widths driven by the "Main content / * sidebar width" setting) lives in the Theme Settings CSS output (see * inc/theme-settings.php) - this is just the no-sidebar default so * #main quietly takes the full row when there's nothing beside it. * ========================================================= */ .content-area #main { width: 100%; } /* ========================================================= * FOOTER (settings-driven layout) * Structural only - colours, split widths, fonts etc. all live in the * Theme Settings CSS output (see inc/theme-settings.php), driven by * the Footer tab. This is just enough for the pieces to lay out * sensibly with no settings applied at all. * ========================================================= */ .footer-column-menu, .footer-contact-details, .footer-legal-menu { list-style: none; margin: 0; padding: 0; } /* Row title: text left, accordion icon right (icon only shows on mobile - see the footer media query in inc/theme-settings.php). */ .footer-column-title { display: flex; justify-content: space-between; align-items: center; } .footer-column-icon { display: none; } /* Footer right content "buttons in row" (2 or 3 links per row). */ .footer-column-menu--cols { display: grid; column-gap: var(--pot-global-padding, 1em); } .footer-column-menu--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-column-menu--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-contact-details li { display: flex; align-items: center; gap: var(--pot-global-padding, 0.5em); } /* "Footer main content layout" (Theme Settings > Footer) - class added to .footer-right by footer.php. */ #colophon .footer-right--flex-start { justify-content: flex-start; } #colophon .footer-right--space-between { justify-content: space-between; } #colophon .footer-right--flex-end { justify-content: flex-end; } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pot-global-padding, 1em); margin-top: 2em; } .footer-legal-nav { flex: 1; } .footer-legal-nav ul, .footer-legal-menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: var(--pot-global-padding, 1em); } .footer-legal-menu li { margin: 0; } /* ========================================================= * WIDGET AREAS * ========================================================= */ .widget-area { width: 100%; } .widget { margin-bottom: 1.5em; } .widget:last-child { margin-bottom: 0; } /* ========================================================= * WOOCOMMERCE — STRUCTURAL RESET * ========================================================= */ .woocommerce, .woocommerce-page { width: 100%; } .woocommerce ul.products { list-style: none; margin: 0; padding: 0; } /* ========================================================= * PRINT * ========================================================= */ @media print { *, *::before, *::after { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }