/* ============================================================ Piwigo gallery integration with luczanits.net main site ------------------------------------------------------------ Loaded from /css/piwigo-integration.css and linked from the modus theme's header.tpl. Responsibilities: 1. Render the 1px frame around all gallery content, matching the main site's .page_margins > .page wrapper. We use lz-prefixed class names to avoid colliding with any modus rules on generic ".page". 2. Render a "Picture Galleries" page header above the menu, matching the h2 styling of the main site. 3. Style the main-site navigation that header.tpl injects at the very top of , so it matches the rest of the site. 4. Style Piwigo's own page-banner (#theHeader / .header_msgs) as a small body intro section, used for the CC-licence line. The modus theme's own CSS continues to handle Piwigo's own layout (menubar, content, footer). We only override what we need for the frame, page header, main-site nav, and banner. ============================================================ */ /* ---- 1. Outer frame (mirrors .page_margins / .page in main style.css) ---- */ /* The .lz-page-margins wrapper is opened in header.tpl right after and closed in footer.tpl right before , so it contains the main-site nav, modus's content, and the footer. .lz-page sits inside it and carries the 1px border. Values match main style.css exactly. */ /* Zero out body's default/modus-set margin and padding so the visible gap from the browser edge is purely from .lz-page-margins's padding — otherwise modus's body padding stacks on top of our 24px and the frame appears pushed in further than on main-site pages. */ html, body { margin: 0; padding: 0; } .lz-page-margins { min-width: 320px; width: 100%; margin: 0 auto; padding: 24px; text-align: left; box-sizing: border-box; } .lz-page { padding: 12px 24px; background-color: #ffffff; border: 1px #aaa solid; } @media screen and (max-width: 900px) { .lz-page-margins { min-width: 0; padding: 8px; } } @media screen and (max-width: 540px) { .lz-page-margins { padding: 6px; } .lz-page { padding: 0 12px 12px 12px; } } /* ---- 2. "Picture Galleries" page header (mirrors #header h2 in main style.css) ---- */ /* High-specificity selectors (html body #header h2) so we beat any modus rules that might centre headings, especially in Safari. */ html body #header { position: relative; padding: 12px 0 0 0; color: #000; background: #fff; text-align: left !important; } html body #header h2 { font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif; font-size: 200%; font-weight: normal; font-style: italic; color: #666; border-bottom: 1px #ddd solid; margin: 0; padding: 0.75em 0; line-height: 1.5em; text-align: left !important; } /* ---- 3. Main-site navigation (mirrors nav#headernav in style.css) ---- */ nav#headernav { margin: 0; padding: 0; border-bottom: 1px #ddd solid; } nav#headernav ul { list-style-type: none; position: relative; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } nav#headernav > ul > li { float: left; position: relative; margin: 0; padding: 0; } nav#headernav a { letter-spacing: 2px; text-transform: uppercase; padding: 7px 30px; display: block; text-decoration: none; color: #4D87C7; background: #fff; font-family: Verdana, Arial, sans-serif; font-size: 1em; white-space: nowrap; } nav#headernav a:hover, nav#headernav a:focus { background-color: #f4f4f4; outline: 0 none; } /* Drop-downs */ nav#headernav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.4); z-index: 600; flex-direction: column; flex-wrap: nowrap; } nav#headernav ul ul ul { top: 0; left: 95%; } nav#headernav ul ul li { float: none; /* min-width instead of fixed width so columns expand to fit the widest entry (e.g. "Palden Drepung Chörten"); shorter items in the same column stretch to match the widest, keeping the box edges aligned. */ min-width: 225px; /* Position relative so 3rd-level submenus (e.g. Nako > Lotsawa Lhakhang) anchor to this li instead of the top-level "Sites" li. */ position: relative; } nav#headernav li:hover > ul, nav#headernav li:focus-within > ul { display: flex; flex-direction: column; } nav#headernav li:hover { background-color: #f4f4f4; } nav#headernav ul ul a { letter-spacing: 1px; padding: 7px 20px; } /* Mobile: smaller padding, less letter-spacing */ @media screen and (max-width: 900px) { nav#headernav a { padding: 7px 16px; letter-spacing: 1px; } } @media screen and (max-width: 540px) { nav#headernav a { padding: 8px 12px; letter-spacing: 0; } } /* Spacing between the main-site nav and Piwigo's own header/menubar */ #header + #theHeader, #header + .header_msgs { margin-top: 0; } /* ---- 4. Intro / page-banner area (small body section under the menu) ---- */ /* The gallery's CC-licence line appears in #theHeader (Piwigo's page- banner area) or in .header_msgs. Style it as a small body intro: left-aligned, slightly muted, with breathing room. */ html body #theHeader, html body .header_msgs { margin: 0; padding: 1em 1.5em; background: #f9f9f9; border-bottom: 1px #ddd solid; color: #444; font-family: Verdana, 'Trebuchet MS', Helvetica, Arial, sans-serif; font-size: 0.85em; line-height: 1.5; text-align: left !important; } #theHeader p, .header_msgs p { margin: 0; } #theHeader p + p, .header_msgs p + p { margin-top: 0.4em; } #theHeader a, .header_msgs a { color: #4D87C7; }