diff --git a/wp-content/themes/bitwms-child/functions.php b/wp-content/themes/bitwms-child/functions.php new file mode 100644 index 0000000..a6ee156 --- /dev/null +++ b/wp-content/themes/bitwms-child/functions.php @@ -0,0 +1,54 @@ +get( 'Version' ) + ); + + // Child theme stylesheet — depends on parent. + wp_enqueue_style( + 'bitwms-child-style', + get_stylesheet_uri(), + array( 'generatepress-style' ), + wp_get_theme()->get( 'Version' ) + ); +} + +// --------------------------------------------------------------------------- +// 2. Load include files +// --------------------------------------------------------------------------- + +$bitwms_includes = array( + 'inc/enqueue.php', +); + +foreach ( $bitwms_includes as $bitwms_file ) { + $bitwms_path = get_stylesheet_directory() . '/' . $bitwms_file; + if ( file_exists( $bitwms_path ) ) { + require_once $bitwms_path; + } +} +unset( $bitwms_file, $bitwms_path ); diff --git a/wp-content/themes/bitwms-child/inc/enqueue.php b/wp-content/themes/bitwms-child/inc/enqueue.php new file mode 100644 index 0000000..d2899c3 --- /dev/null +++ b/wp-content/themes/bitwms-child/inc/enqueue.php @@ -0,0 +1,28 @@ +get( 'Version' ); + + // Sidebar navigation — loaded in footer (5th arg: true). + wp_enqueue_script( + 'bitwms-sidebar-nav', + get_stylesheet_directory_uri() . '/js/sidebar-nav.js', + array(), // no dependencies + $theme_version, + true // load in footer + ); +} diff --git a/wp-content/themes/bitwms-child/js/sidebar-nav.js b/wp-content/themes/bitwms-child/js/sidebar-nav.js new file mode 100644 index 0000000..917a54e --- /dev/null +++ b/wp-content/themes/bitwms-child/js/sidebar-nav.js @@ -0,0 +1,71 @@ +/** + * БИТ.WMS Child Theme — js/sidebar-nav.js + * + * Sidebar navigation toggle behaviour. + * Placeholder for Task 3 — full sidebar implementation will extend this file. + * + * Behaviour: + * - Clicking the hamburger button toggles `.sidebar-nav--open` on the sidebar. + * - Simultaneously toggles `.sidebar-overlay` on to show the dim overlay. + * - Clicking the overlay closes the sidebar. + */ + +document.addEventListener( 'DOMContentLoaded', function () { + 'use strict'; + + // Guard: abort if there is no sidebar on this page. + var sidebar = document.querySelector( '.sidebar-nav' ); + if ( ! sidebar ) { + return; + } + + var hamburger = document.querySelector( '.sidebar-nav__toggle' ); + var body = document.body; + + /** + * Open the sidebar and show the overlay. + */ + function openSidebar() { + sidebar.classList.add( 'sidebar-nav--open' ); + body.classList.add( 'sidebar-overlay' ); + } + + /** + * Close the sidebar and hide the overlay. + */ + function closeSidebar() { + sidebar.classList.remove( 'sidebar-nav--open' ); + body.classList.remove( 'sidebar-overlay' ); + } + + /** + * Toggle sidebar state. + */ + function toggleSidebar() { + if ( sidebar.classList.contains( 'sidebar-nav--open' ) ) { + closeSidebar(); + } else { + openSidebar(); + } + } + + // Attach toggle to hamburger button (if present). + if ( hamburger ) { + hamburger.addEventListener( 'click', function ( e ) { + e.preventDefault(); + toggleSidebar(); + } ); + } + + // Close sidebar when the overlay (body::after pseudo-element area) is clicked. + // We detect clicks on that land outside the sidebar itself. + body.addEventListener( 'click', function ( e ) { + if ( + body.classList.contains( 'sidebar-overlay' ) && + ! sidebar.contains( e.target ) && + ( ! hamburger || ! hamburger.contains( e.target ) ) + ) { + closeSidebar(); + } + } ); +} ); diff --git a/wp-content/themes/bitwms-child/style.css b/wp-content/themes/bitwms-child/style.css new file mode 100644 index 0000000..39bbc20 --- /dev/null +++ b/wp-content/themes/bitwms-child/style.css @@ -0,0 +1,279 @@ +/* +Theme Name: БИТ.WMS Child +Theme URI: https://bitwms.ru/ +Description: GeneratePress child theme for the БИТ.WMS expert portal. Brandbook styles: corporate pink #E50071, minimalist layout, Suisse Int'l typography. +Author: БИТ.WMS +Author URI: https://bitwms.ru/ +Template: generatepress +Version: 1.0.0 +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Text Domain: bitwms-child +*/ + +/* ========================================================================== + @font-face — Suisse Int'l (woff2 files go into fonts/ directory) + Fallback to Arial until font files are deployed. + ========================================================================== */ + +@font-face { + font-family: 'Suisse Intl'; + src: url('fonts/SuisseIntl-Book.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Suisse Intl'; + src: url('fonts/SuisseIntl-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +/* ========================================================================== + CSS Custom Properties — brandbook tokens + ========================================================================== */ + +:root { + /* --- Colors --- */ + --color-white: #FFFFFF; + --color-pink: #E50071; /* Pantone 213 C, RGB 229 0 113 — primary corporate */ + --color-black: #000000; + --color-gray-light: #EBEBEB; /* RGB 235 235 235 — secondary */ + + /* --- Typography --- */ + --font-family-base: 'Suisse Intl', Arial, sans-serif; + --font-weight-book: 400; + --font-weight-bold: 700; + + --font-size-base: 16px; + --line-height-base: 1.6; + + /* --- Layout dimensions --- */ + --sidebar-width-collapsed: 70px; + --sidebar-width-expanded: 250px; + --content-max-width: 1200px; + --header-height: 60px; + + /* --- Spacing scale --- */ + --space-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 40px; + --space-2xl: 64px; + + /* --- Transition --- */ + --transition-base: 0.2s ease; +} + +/* ========================================================================== + Global reset / base + ========================================================================== */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-size: var(--font-size-base); + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + padding: 0; + font-family: var(--font-family-base); + font-weight: var(--font-weight-book); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--color-black); + background-color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ========================================================================== + Headings + ========================================================================== */ + +h1, +h2, +h3, +h4 { + font-family: var(--font-family-base); + font-weight: var(--font-weight-bold); + color: var(--color-black); + line-height: 1.2; + margin-top: 0; + margin-bottom: var(--space-md); +} + +h1 { + font-size: 2.5rem; /* 40px */ +} + +h2 { + font-size: 2rem; /* 32px */ +} + +h3 { + font-size: 1.5rem; /* 24px */ +} + +h4 { + font-size: 1.125rem; /* 18px */ +} + +/* ========================================================================== + Links + ========================================================================== */ + +a { + color: var(--color-pink); + text-decoration: none; + transition: color var(--transition-base); +} + +a:hover, +a:focus { + color: var(--color-black); + text-decoration: underline; +} + +a:focus-visible { + outline: 2px solid var(--color-pink); + outline-offset: 2px; +} + +/* ========================================================================== + Paragraphs & lists + ========================================================================== */ + +p { + margin-top: 0; + margin-bottom: var(--space-md); +} + +ul, +ol { + margin-top: 0; + margin-bottom: var(--space-md); + padding-left: var(--space-lg); +} + +/* ========================================================================== + Container utility + ========================================================================== */ + +.container { + width: 100%; + max-width: var(--content-max-width); + margin-right: auto; + margin-left: auto; + padding-right: var(--space-lg); + padding-left: var(--space-lg); +} + +/* ========================================================================== + Buttons + ========================================================================== */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: 12px var(--space-lg); + font-family: var(--font-family-base); + font-weight: var(--font-weight-bold); + font-size: 1rem; + line-height: 1; + text-align: center; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + border: 2px solid transparent; + border-radius: 0; /* brandbook: no rounded corners */ + transition: + background-color var(--transition-base), + color var(--transition-base), + border-color var(--transition-base); + -webkit-user-select: none; + user-select: none; + appearance: none; +} + +.btn:focus-visible { + outline: 2px solid var(--color-pink); + outline-offset: 2px; +} + +/* Primary — corporate pink fill */ +.btn-primary { + background-color: var(--color-pink); + border-color: var(--color-pink); + color: var(--color-white); +} + +.btn-primary:hover, +.btn-primary:focus { + background-color: var(--color-black); + border-color: var(--color-black); + color: var(--color-white); + text-decoration: none; +} + +/* Outline — transparent with black border */ +.btn-outline { + background-color: transparent; + border-color: var(--color-black); + color: var(--color-black); +} + +.btn-outline:hover, +.btn-outline:focus { + background-color: var(--color-black); + color: var(--color-white); + text-decoration: none; +} + +/* Small modifier */ +.btn-sm { + padding: 8px var(--space-md); + font-size: 0.875rem; /* 14px */ +} + +/* ========================================================================== + Badge utility + ========================================================================== */ + +.badge { + display: inline-block; + padding: 2px var(--space-sm); + font-family: var(--font-family-base); + font-weight: var(--font-weight-book); + font-size: 0.75rem; /* 12px */ + line-height: 1.4; + color: var(--color-black); + background-color: var(--color-gray-light); + border-radius: 0; + white-space: nowrap; + vertical-align: middle; +} + +/* ========================================================================== + Sidebar overlay (used by sidebar-nav.js) + ========================================================================== */ + +body.sidebar-overlay::after { + content: ''; + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.4); + z-index: 199; +}