@charset "UTF-8"; /* •••••••••••••••••••••••••••••••• © 2008-now Harris Blondman All rights reserved www.harrisblondman.nl •••••••••••••••••••••••••••••••• */ /* ! Notes */ /*s ================================ */ /* #note -> The home page is redirected to the first location page, in order to keep the site organized in such a way that a home page showing several locations could be added later. */ /* #note -> Add possibility to directly link and redirect to a specific year, month, day, or to the first highlighted item. */ /* #note -> On edge, the first month in the side bar isn't properly placed, and its sticky position isn't correct. This seems to be related to the dimensions of the archive link, and to padding which is added to the top of the month name. */ /* #note -> Enable caching for all templates, set cache for 1 day, and delete entire cache whenever any file is saved. To do this, the handheld check needs to be made client-side. Right now, this check is done in php, and it adds a class to . This is problematic because a big part of the design uses this class. */ /* #note -> In some situations, when the entry panel is lower than 100%, blend-mode didn't seem to work properly, perhaps in combination with .switch-buttons-panel-2. This problem seems to have solved itself, but wasn't actively fixed, so might return. */ /* #note -> On handheld, when using direct link to the information page, menu items don't scroll to their correct position. */ /* #note -> When the current button is hidden (when the first current event is at the top of the page), and the event panel is opened and closed, that button hides again with an animation. Add a change to the script to keep it hidden in this case. */ /* #note -> In mages gallery, sort images in random order every time the gallery images panel is opened. */ /* #todo -> Don't remove these todos. They contain important instructions. */ /* #todo -> A fallback was made for display: grid, because support for CSS grids wasn't optimal yet at time of publishing. This type of fallback should be made and checked every time changes are made to CSS grid. See #fix -> Fallback for grid */ /* #todo -> A fallback was made for --css-variables, because support for CSS variables wasn't optimal yet at time of publishing. There is a style-fallback.css, which is a quickly made, simplified version of the css for the entire site. In javascript, there is a functionality which checks whether CSS variables are supported. If they're not, the default CSS file is replaced with that fallback file, and the default CSS won't be not used at all. Additionaly, certain javascript functionalities are turned off. The fallback CSS file should be remade and validated every time changes are made to CSS, replacing any variables with their corresponding values. See #fix -> Fallback for variables */ /* #fix -> 1018-07-19 Showing more columns and items */ /* #note -> Aukje asked to show more items, in order to show that there are a lot of events and people involved. To do this, more columns needed to be added for smaller sizes. This was done by moving the break points. The 960px breakpoint has a lot of changes, so this was kept in tact. Also, because below this point there are a lot of handheld devices. So, the 1280px breakpoint was moved 2 steps down to the 960px breakpoint. Consequently, one full step in breakpoints was removed, and the largest breakpoints disappeared. In the old situation, as the page grew the amount of columns would grow from 1, 2, 3, 4, 5 etcetera. Now, the amount of columns grows from 1, 2, 4, 5, 6 etcetera. Also, the font-size was changed at the same breakpoint in the html tag, to make everything a bit smaller. */ /* Diagram showing how the breakpoints were changed. 160p× -> 160p× 320p× -> 320p× 480px -> 480px 640px -> 640px 800px -> 800px 960px -> 960px 1120px -> … 1280px -> 960px 1440px -> 1120px 1600px -> 1280px 1760px -> 1440px 1920px -> 1600px 2080px -> 1760px 2240px -> 1920px 2400px -> 2080px 2560px -> 2240px 2720px -> 2400px 2880px -> 2560px 3040px -> 2720px 3200px -> 2880px 3040px -> … 3200px -> … */ /* 2024-13-12 changed done for PHP8 */ /* ! Development */ /* ================================ */ /* ! Structure & Styling */ /* ================================ */ @font-face { font-style: normal; font-weight: normal; font-family: 'Font Regular'; src: url(../fonts/SuisseIntl-Medium-WebS.woff2) format('woff2'), url(../fonts/SuisseIntl-Medium-WebS.woff) format('woff'), url(../fonts/SuisseIntl-Medium-WebS.ttf) format('truetype'); } html { width: 100%; /* height: 100%; */ /* #note -> Logo as ratio */ --menu-logo-r-w: 333.745; --menu-logo-r-h: 84.792; --menu-logo-r: calc(var(--menu-logo-r-w) / var(--menu-logo-r-h)); /* #note -> Bottom part of logo as ratio */ --menu-logo-sexyland-r-w: 333.745; --menu-logo-sexyland-r-h: 46.038; --menu-logo-sexyland-r: calc(var(--menu-logo-sexyland-r-w) / var(--menu-logo-sexyland-r-h)); /* #note -> Images button as ratio */ --menu-images-r-w: 61.08; --menu-images-r-h: 45.9215; --menu-images-r: calc(var(--menu-images-r-w) / var(--menu-images-r-h)); /* #note -> Images button as ratio of bottom part of logo */ --menu-images-r-w-logo-sexyland: calc(var(--menu-images-r) * var(--menu-logo-sexyland-r-h)); /* #note -> Information button as ratio */ --menu-information-r-w: 45.796; --menu-information-r-h: 45.9215; --menu-information-r: calc(var(--menu-information-r-w) / var(--menu-information-r-h)); /* #note -> Information button as ratio of bottom part of logo */ --menu-information-r-w-logo-sexyland: calc(var(--menu-information-r) * var(--menu-logo-sexyland-r-h)); /* #note -> Close button as ratio */ --menu-close-r-w: 45.796; --menu-close-r-h: 45.9215; --menu-close-r: calc(var(--menu-close-r-w) / var(--menu-close-r-h)); /* #note -> Close button as ratio of bottom part of logo */ --menu-close-r-w-logo-sexyland: calc(var(--menu-close-r) * var(--menu-logo-sexyland-r-h)); /* #note -> Gotocurrent button as ratio */ /* #note -> Circle button was made wider because it was hard to touch */ --menu-gotocurrent-r-w: 60.796; --menu-gotocurrent-r-h: 45.9215; --menu-gotocurrent-r: calc(var(--menu-gotocurrent-r-w) / var(--menu-gotocurrent-r-h)); /* #note -> Gotocurrent button as ratio of bottom part of logo */ --menu-gotocurrent-r-w-logo-sexyland: calc(var(--menu-gotocurrent-r) * var(--menu-logo-sexyland-r-h)); /* #note -> Facebook button as ratio */ --menu-facebook-r-w: 45.796; --menu-facebook-r-h: 45.9215; --menu-facebook-r: calc(var(--menu-facebook-r-w) / var(--menu-facebook-r-h)); /* #note -> Facebook button as ratio of bottom part of logo */ --menu-facebook-r-w-logo-sexyland: calc(var(--menu-facebook-r) * var(--menu-logo-sexyland-r-h)); /* #note -> Instagram button as ratio */ --menu-instagram-r-w: 45.796; --menu-instagram-r-h: 45.9215; --menu-instagram-r: calc(var(--menu-instagram-r-w) / var(--menu-instagram-r-h)); /* #note -> Instagram button as ratio of bottom part of logo */ --menu-instagram-r-w-logo-sexyland: calc(var(--menu-instagram-r) * var(--menu-logo-sexyland-r-h)); /* #note -> Horizontal white space in menu as from grid */ --menu-gutter-top: calc(var(--item-padding-horizontal) / 2); /* #note -> Vertical white space in menu as from grid */ --menu-gutter-left: var(--grid-gutter-vertical); --menu-gutter-middle: calc(var(--item-padding-vertical) + var(--grid-gutter-vertical) + var(--item-padding-vertical)); --menu-gutter-right: var(--grid-gutter-vertical); /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 100vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); /* #note -> Menu width as ratio of bottom part of logo */ --menu-r-w: calc( var(--menu-logo-sexyland-r-w) + var(--menu-information-r-w-logo-sexyland) + var(--menu-images-r-w-logo-sexyland) ); /* #note -> Variable dimensions of menu elements */ --menu-logo-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-logo-sexyland-r-w)); --menu-logo-c-h: calc(var(--menu-logo-c-w) / var(--menu-logo-r)); --menu-images-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-images-r-w-logo-sexyland)); --menu-images-c-h: calc(var(--menu-images-c-w) / var(--menu-images-r)); --menu-information-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-information-r-w-logo-sexyland)); --menu-information-c-h: calc(var(--menu-information-c-w) / var(--menu-information-r)); --menu-close-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-close-r-w-logo-sexyland)); --menu-close-c-h: calc(var(--menu-close-c-w) / var(--menu-close-r)); --menu-gotocurrent-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-gotocurrent-r-w-logo-sexyland)); --menu-gotocurrent-c-h: calc(var(--menu-gotocurrent-c-w) / var(--menu-gotocurrent-r)); --menu-facebook-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-facebook-r-w-logo-sexyland)); --menu-facebook-c-h: calc(var(--menu-facebook-c-w) / var(--menu-facebook-r)); --menu-instagram-c-w: calc((var(--menu-w) / var(--menu-r-w)) * var(--menu-instagram-r-w-logo-sexyland)); --menu-instagram-c-h: calc(var(--menu-instagram-c-w) / var(--menu-instagram-r)); /* #note -> Variable dimensions of blacklight */ --blacklight-h: calc((var(--menu-logo-c-h) + var(--menu-gutter-top)) * 1.5); /* #note -> Months sidebar */ --archive-h: calc(4 * 1.1em); --archive-padding-top: 0.135em; /* #note -> Months sidebar */ --months-w: calc(4 * 1.1em); --months-padding-left: 0.135em; --months-padding-horizontal: calc((var(--line-height) / 2) * 1.2); /* #note -> Grid */ --grid-gutter-horizontal: calc(var(--line-height) * 1); --grid-gutter-vertical: calc(var(--grid-gutter-horizontal) * 1.025); /* #note -> Items */ --item-h: calc(var(--line-height) * 20); --item-option-top: calc(var(--item-h) / 2); --item-padding-horizontal: calc(((var(--line-height) / 2) * 1.2) * 2); --item-padding-vertical: calc((var(--line-height) / 2) * 1.2); /* #note -> Panel */ --panel-h: var(--item-h); --panel-gutter-horizontal: var(--grid-gutter-horizontal); --panel-gutter-vertical: var(--grid-gutter-vertical); /* #note -> Corresponding, values for panel padding are set responsively */ --panel-padding-outside-vertical: calc((var(--months-w) - var(--panel-gutter-vertical)) * 0.5); --panel-padding-horizontal: var(--item-padding-horizontal); --panel-padding-vertical: var(--item-padding-vertical); /* #note -> Fonts */ --font-size: 1.55rem; --line-height: 1.1em; --font-size-factor-m: 1.5; --line-height-factor-m: 1.01010101; --font-size-factor-l: 2; --line-height-factor-l: 0.90909091; --font-size-factor-xl: 4; --line-height-factor-xl: 0.81818182; --font-size-factor-xxl: 8; --line-height-factor-xxl: 0.73636364; /* #note -> Colors */ --color-background: rgba(0, 0, 0, 1); --color-text: rgba(0, 0, 0, 1); --color-menu-blacklight-1: rgba(0, 0, 0, 1); --color-menu-blacklight-2: rgba(0, 0, 0, 0); --color-content-information-background: rgba(0, 0, 0, 1); --color-content-information-content: rgba(255, 255, 255, 1); --color-content-panel-background: rgba(0, 0, 0, 1); --color-content-panel-content: rgba(255, 255, 255, 1); /* --color-month-01: rgba(255, 0, 0, 1); --color-month-02: rgba(0, 255, 255, 1); --color-month-03: rgba(255, 255, 0, 1); --color-month-04: rgba(255, 0, 0, 1); --color-month-05: rgba(0, 255, 0, 1); --color-month-06: rgba(0, 0, 255, 1); --color-month-07: rgba(255, 0, 255, 1); --color-month-08: rgba(0, 255, 255, 1); --color-month-09: rgba(0, 0, 255, 1); --color-month-10: rgba(255, 255, 0, 1); --color-month-11: rgba(0, 255, 0, 1); --color-month-12: rgba(255, 0, 255, 1); */ --color-month-01: rgba(0, 255, 0, 1); --color-month-02: rgba(255, 0, 0, 1); --color-month-03: rgba(0, 255, 255, 1); --color-month-04: rgba(0, 255, 0, 1); --color-month-05: rgba(0, 0, 255, 1); --color-month-06: rgba(255, 255, 0, 1); --color-month-07: rgba(255, 0, 255, 1); --color-month-08: rgba(255, 0, 0, 1); --color-month-09: rgba(255, 255, 0, 1); --color-month-10: rgba(0, 255, 255, 1); --color-month-11: rgba(0, 0, 255, 1); --color-month-12: rgba(255, 0, 255, 1); /* --color-current-1: var(--color-month-12); --color-current-2: var(--color-month-01); --color-current-gotocurrent: var(--color-month-01); --color-current-1: js; --color-current-2: js; --color-current-gotocurrent: js; */ --color-current-1: rgba(0, 0, 0, 0); --color-current-2: rgba(0, 0, 0, 0); --color-current-gotocurrent: rgba(0, 0, 0, 0); } /* #fix -> 1018-07-19 Showing more columns and items */ @media screen and (min-width: 960px) { html { font-size: 8px; } } @media screen and (min-width: 1280px) { html { font-size: 9px; } } @media screen and (min-width: 1600px) { html { font-size: 10px; } } .flag-handheld-false { /* #note -> Corresponding, values for panel padding are set responsively */ --panel-padding-outside-vertical: calc((var(--months-w) + var(--panel-gutter-vertical)) * 0.5); } @media screen and (min-width: 160px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 100vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } @media screen and (min-width: 320px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 100vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } @media screen and (min-width: 480px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 90vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } .flag-handheld-false { /* #note -> Vertical white space in menu as from grid */ --menu-gutter-left: calc(var(--item-padding-vertical) + var(--grid-gutter-vertical) + var(--item-padding-vertical)); --menu-gutter-middle: calc(var(--item-padding-vertical) + var(--grid-gutter-vertical) + var(--item-padding-vertical)); --menu-gutter-right: calc(var(--item-padding-vertical) + var(--grid-gutter-vertical) + var(--item-padding-vertical)); } } @media screen and (min-width: 640px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 80vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); /* #note -> Corresponding, values for panel padding are set responsively */ --panel-padding-outside-vertical: calc( (var(--months-w) - var(--panel-gutter-vertical) + ((100% - var(--months-w)) / 2) - (var(--panel-gutter-vertical) * 1)) * 0.5 ); } .flag-handheld-false { /* #note -> Corresponding, values for panel padding are set responsively */ --panel-padding-outside-vertical: calc( (var(--months-w) + var(--panel-gutter-vertical) + ((100% - var(--months-w)) / 2) - (var(--panel-gutter-vertical) * 1)) * 0.5 ); } } @media screen and (min-width: 800px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 70vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } @media screen and (min-width: 960px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 63.33vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); /* #note -> Corresponding, values for panel padding are set responsively */ /* --panel-gutter-horizontal: calc(var(--grid-gutter-horizontal) * 2); */ --panel-gutter-horizontal: calc(var(--grid-gutter-horizontal) * 1.25); /* --panel-gutter-vertical: calc(var(--grid-gutter-vertical) * 2); */ --panel-gutter-vertical: calc(var(--grid-gutter-vertical) * 1.25); --panel-padding-outside-vertical: calc((100% - (960px - (var(--months-w) - var(--panel-gutter-vertical)))) / 2); --panel-padding-horizontal: calc(var(--item-padding-horizontal) * 2.25); /* --panel-padding-vertical: calc(var(--item-padding-vertical) * 2); */ --panel-padding-vertical: calc(var(--item-padding-vertical) * 4.5); } .flag-handheld-false { /* #note -> Corresponding, values for panel padding are set responsively */ --panel-padding-outside-vertical: calc((100% - (960px - (var(--months-w) + var(--panel-gutter-vertical)))) / 2); } } @media screen and (min-width: 1120px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 54.29vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1280px) { */ @media screen and (min-width: 960px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 47.5vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1440px) { */ @media screen and (min-width: 1120px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 43.43vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1600px) { */ @media screen and (min-width: 1280px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 38vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1760px) { */ @media screen and (min-width: 1440px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 34.55vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1920px) { */ @media screen and (min-width: 1600px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 31.67vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2080px) { */ @media screen and (min-width: 1760px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 29.23vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2240px) { */ @media screen and (min-width: 1920px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 27.14vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2400px) { */ @media screen and (min-width: 2080px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 25.33vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2560px) { */ @media screen and (min-width: 2240px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 23.75vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2720px) { */ @media screen and (min-width: 2400px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 22.35vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2880px) { */ @media screen and (min-width: 2560px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 21.11vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 3040px) { */ @media screen and (min-width: 2720px) { html { --font-size: 1.75rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 20vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 3200px) { */ @media screen and (min-width: 2880px) { html { --font-size: 1.65rem; /* #note -> Menu width as space that is left besides white space */ --menu-w: calc( 19vw - var(--menu-gutter-left) - var(--menu-gutter-middle) - var(--menu-gutter-middle) - var(--menu-gutter-right) ); } } body { width: 100%; /* height: 100%; */ margin-right: auto; margin-left: auto; text-align: center; background-color: var(--color-background); font-size: var(--font-size); font-family: 'Font Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--color-text); line-height: var(--line-height); -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -o-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } hr { display: none; } a { color: var(--color-text); text-decoration: none; } a:link, a:visited { text-decoration: none; } a:hover, a:active { text-decoration: none; } a:focus { text-decoration: none; } a.current-parent, .current-parent a { text-decoration: none; } a.current, .current a { text-decoration: none; } .bodier .container-content-information a, .bodier .container-content-panel a { color: var(--color-current-1); } @supports (mix-blend-mode: multiply) { .bodier .container-content-information a { color: var(--color-content-information-content); } .bodier .container-content-panel a { color: var(--color-content-panel-content); } } .bodier .container-content-information .content-information .content-information-header .contact a, .bodier .container-content-information .content-information .entry .entry-bodier a { text-decoration: underline; } .bodier .container-content-information .content-information a.current-parent, .bodier .container-content-information .content-information .current-parent a { text-decoration: none; } .bodier .container-content-information .content-information a.current, .bodier .container-content-information .content-information .current a { text-decoration: none; } .bodier .container-content-panel .content-panel .entry .entry-intro a, .bodier .container-content-panel .content-panel .entry .entry-bodier a, .bodier .container-content-panel .content-panel .entry .entry-footer a { text-decoration: underline; } .bodier .container-content-panel .content-panel .entry a.current-parent, .bodier .container-content-panel .content-panel .entry .current-parent a { text-decoration: none; } .bodier .container-content-panel .content-panel .entry a.current, .bodier .container-content-panel .content-panel .entry .current a { text-decoration: none; } input, button, select, textarea { -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -o-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; } .assistive-text { display: none; } .container-main { /* #note -> Default, center */ width: 100%; /* height: 100%; */ margin-right: auto; margin-left: auto; text-align: center; } /* #fix -> Prevent scroll from being handed to body when scrolling in panels, and restore scroll position when panel is closed. */ /* .switch-buttons-images-1 .container-main, */ .switch-buttons-information .container-main, .switch-buttons-panel-2 .container-main { width: 100%; height: 100vh; overflow: hidden; } .preview { display: none; } .header { position: relative; z-index: 200; /* #note -> Default, center */ width: auto; margin-right: auto; margin-left: auto; text-align: left; } .header .branding .site-title { position: fixed; top: var(--menu-gutter-top); left: var(--menu-gutter-left); z-index: 210; width: var(--menu-logo-c-w); height: var(--menu-logo-c-h); overflow: hidden; } .header .branding .site-title span { display: none; } .header .branding .site-title .logo .logo-societeit { fill: var(--color-current-1); } .header .branding .site-title .logo .logo-sexyland { fill: var(--color-current-2); } .header .branding .site-description { display: none; } .header .access .menu { display: none; } .header .access .nav-images { display: block; position: fixed; top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) - var(--menu-images-c-h)); right: calc(var(--menu-gutter-right) + var(--menu-information-c-w) + var(--menu-gutter-middle)); z-index: 250; width: var(--menu-images-c-w); height: var(--menu-images-c-h); overflow: hidden; } .switch-buttons-images-1 .header .access .nav-images, .switch-buttons-information .header .access .nav-images, .switch-buttons-panel-1 .header .access .nav-images { display: none; } .header .access .nav-images .icon-square { fill: var(--color-current-2); } .header .access .nav-information { display: block; position: fixed; top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) - var(--menu-information-c-h)); right: var(--menu-gutter-right); z-index: 260; width: var(--menu-information-c-w); height: var(--menu-information-c-h); overflow: hidden; } .switch-buttons-images-1 .header .access .nav-information, .switch-buttons-information .header .access .nav-information, .switch-buttons-panel-1 .header .access .nav-information { display: none; } .header .access .nav-information .icon-hamburger { fill: var(--color-current-2); } .header .access .nav-close { display: none; position: fixed; top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) - var(--menu-close-c-h)); right: var(--menu-gutter-right); z-index: 240; width: var(--menu-close-c-w); height: var(--menu-close-c-h); overflow: hidden; } .switch-buttons-images-1 .header .access .nav-close, .switch-buttons-information .header .access .nav-close, .switch-buttons-panel-1 .header .access .nav-close { display: block; } .header .access .nav-close .icon-x { fill: var(--color-current-2); } .header .access .nav-gotocurrent { display: block; position: fixed; bottom: var(--item-padding-horizontal); right: var(--menu-gutter-right); z-index: 230; width: var(--menu-gotocurrent-c-w); height: var(--menu-gotocurrent-c-h); overflow: hidden; } /* .switch-buttons-images-1 .header .access .nav-gotocurrent, */ .switch-buttons-information .header .access .nav-gotocurrent, .switch-buttons-panel-1 .header .access .nav-gotocurrent { display: none; } .flag-autoscroll-false .header .access .nav-gotocurrent, .flag-gotocurrent-false .header .access .nav-gotocurrent { display: none; } /* #note -> Corresponding gotocurrent switch */ .switch-buttons-images-1 .header .access .nav-gotocurrent, .switch-gotocurrent .header .access .nav-gotocurrent { pointer-events: none; } /* #note -> Corresponding gotocurrent switch */ .header .access .nav-gotocurrent .icon-circle { fill: var(--color-current-gotocurrent); transform: scale3d(1, 1, 1); transform-origin: calc(100% - (var(--menu-gotocurrent-c-h) / 2)) 50% 0; transition: transform 0.8s ease-out; } /* #note -> Corresponding gotocurrent switch */ .switch-buttons-images-1 .header .access .nav-gotocurrent .icon-circle, .switch-gotocurrent .header .access .nav-gotocurrent .icon-circle { transform: scale3d(0, 0, 0); } .header .access .nav-facebook { display: none; position: fixed; bottom: calc(var(--item-padding-horizontal) + var(--menu-instagram-c-h) + var(--menu-gutter-top)); right: var(--menu-gutter-right); z-index: 230; width: var(--menu-facebook-c-w); height: var(--menu-facebook-c-h); overflow: hidden; } .switch-buttons-information .header .access .nav-facebook { display: block; } .header .access .nav-facebook .icon-facebook { fill: var(--color-current-2); } .header .access .nav-instagram { display: none; position: fixed; bottom: var(--item-padding-horizontal); right: var(--menu-gutter-right); z-index: 220; width: var(--menu-instagram-c-w); height: var(--menu-instagram-c-h); overflow: hidden; } .switch-buttons-information .header .access .nav-instagram { display: block; } .header .access .nav-instagram .icon-instagram { fill: var(--color-current-2); } .bodier { position: relative; z-index: 100; /* #note -> Default, center */ width: auto; margin-right: auto; margin-left: auto; text-align: left; } .bodier .menu.menu-archive { position: relative; z-index: 110; /* margin-top: var(--grid-gutter-horizontal); */ margin-top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) + var(--grid-gutter-horizontal)); /* #fix -> 2019-10-10 Changing opacity and adding back Available */ opacity: 0.45; } .flag-handheld-false .bodier .menu.menu-archive { margin-right: var(--grid-gutter-vertical); margin-left: var(--grid-gutter-vertical); } .bodier .menu.menu-archive ul { width: 100%; height: var(--archive-h); background-position: 100% 0; background-repeat: no-repeat; background-size: 300% 100%; /* #note -> Corresponding duration on transition, blacklight */ transition: background-position 1.2s linear; } .switch-buttons-panel-1 .bodier .menu.menu-archive ul { background-position: 0 0; } .bodier .menu.menu-archive ul.archive-month-01 { background-color: var(--color-month-01); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-01), var(--color-month-02) ); } .bodier .menu.menu-archive ul.archive-month-02 { background-color: var(--color-month-02); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-02), var(--color-month-03) ); } .bodier .menu.menu-archive ul.archive-month-03 { background-color: var(--color-month-03); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-03), var(--color-month-04) ); } .bodier .menu.menu-archive ul.archive-month-04 { background-color: var(--color-month-04); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-04), var(--color-month-05) ); } .bodier .menu.menu-archive ul.archive-month-05 { background-color: var(--color-month-05); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-05), var(--color-month-06) ); } .bodier .menu.menu-archive ul.archive-month-06 { background-color: var(--color-month-06); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-06), var(--color-month-07) ); } .bodier .menu.menu-archive ul.archive-month-07 { background-color: var(--color-month-07); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-07), var(--color-month-08) ); } .bodier .menu.menu-archive ul.archive-month-08 { background-color: var(--color-month-08); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-08), var(--color-month-09) ); } .bodier .menu.menu-archive ul.archive-month-09 { background-color: var(--color-month-09); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-09), var(--color-month-10) ); } .bodier .menu.menu-archive ul.archive-month-10 { background-color: var(--color-month-10); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-10), var(--color-month-11) ); } .bodier .menu.menu-archive ul.archive-month-11 { background-color: var(--color-month-11); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-11), var(--color-month-12) ); } .bodier .menu.menu-archive ul.archive-month-12 { background-color: var(--color-month-12); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-12), var(--color-month-01) ); } .bodier .menu.menu-archive ul li a { display: block; width: auto; height: var(--archive-h); padding-right: var(--item-padding-vertical); padding-left: var(--item-padding-vertical); text-align: center; } .bodier .menu.menu-archive ul li a span { display: block; width: 100%; padding-top: var(--archive-padding-top); overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); text-transform: uppercase; } .bodier .blacklight { visibility: block; position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: var(--blacklight-h); /* #note -> Box shadow is rendered very differently in different browsers */ /* height: 0; box-shadow: 0 0 calc((var(--menu-logo-c-h) + var(--menu-gutter-top)) * 1) calc((var(--menu-logo-c-h) + var(--menu-gutter-top)) * 1) var(--color-menu-blacklight-1); */ background-image: linear-gradient(180deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-2)), linear-gradient(180deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-2)); background-position: 0 0, 0 0; background-repeat: no-repeat; background-size: 100% 100%, 100% 100%; pointer-events: none; } /* .switch-buttons-images-1 .bodier .blacklight, */ /* //TODO: REMOVE THIS HIDE LINE */ /* .switch-buttons-information .bodier .blacklight, */ .switch-buttons-panel-2 .bodier .blacklight { display: none; } /* //HACK: 2019-12-20 Adding black menu transition to calendar */ .body-location .bodier .blacklight { transition: background-size 0.8s ease-in-out, height 0.8s ease-in-out; transition-delay: 0.8s; background-image: linear-gradient( 180deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-menu-blacklight-2) ), linear-gradient(180deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-menu-blacklight-2)); background-position: 0 100%, 0 100%; background-size: 100vw calc(var(--blacklight-h) * 2), 100vw calc(var(--blacklight-h) * 2); } /* //HACK: 2019-12-20 Adding black menu transition to calendar */ .body-location.flag-transitions-true .bodier .blacklight { transition: background-size 0.8s ease-in-out, height 0.8s ease-in-out; transition-delay: 0.8s; } /* //HACK: 2019-12-20 Adding black menu transition to calendar */ .body-location.switch-menu .bodier .blacklight { height: 200vh; background-size: 100vw 200vh, 100vw 200vh; } /* //HACK: 2019-12-20 Adding black menu transition to calendar */ .body-location.switch-menu.flag-transitions-true .bodier .blacklight { transition: background-size 0.8s ease-in-out, height 0.8s ease-in-out; } .bodier .neon { display: none; position: fixed; top: 0; left: 0; z-index: 130; width: 100%; height: 100%; background-color: var(--color-current-1); background-image: linear-gradient(90deg, var(--color-current-1), var(--color-current-2)); } /* //HACK: 2019-12-20 Adding black menu transition to calendar */ .body-location.switch-menu .bodier .neon { display: none; } .switch-buttons-information .bodier .neon { display: block; background-image: linear-gradient(180deg, var(--color-current-1), var(--color-current-2)); } .switch-buttons-panel-2 .bodier .neon { display: block; } .bodier .container-calendar { display: grid; grid-template-areas: 'months days'; grid-template-columns: [months] var(--months-w) [days] auto; grid-template-rows: auto; grid-column-gap: var(--grid-gutter-vertical); justify-items: stretch; align-items: stretch; justify-content: stretch; align-content: stretch; } .flag-handheld-false .bodier .container-calendar { margin-right: var(--grid-gutter-vertical); margin-left: var(--grid-gutter-vertical); } .bodier .container-calendar .content-months ul { grid-area: months; justify-self: stretch; align-self: stretch; display: grid; justify-items: stretch; align-items: stretch; justify-content: stretch; align-content: stretch; /* #note -> Guirlandes */ /* grid-auto-rows: calc((var(--item-h) + var(--grid-gutter-horizontal)) / 2); */ grid-auto-rows: calc(var(--item-h) / 2); /* #note -> Overflow will break sticky in .bodier .container-calendar .content-months ul li a */ /* overflow: hidden; */ margin-top: var(--grid-gutter-horizontal); } .bodier .container-calendar .content-months ul li { justify-self: stretch; align-self: stretch; /* #note -> Corresponding, values for various row span are set individually for each month in hb-include-bodier.php and called in @media queries in style.css */ grid-row-end: span var(--rowspan-1); /* #note -> Overflow will break sticky in .bodier .container-calendar .content-months ul li a */ /* overflow: hidden; */ margin-bottom: var(--grid-gutter-horizontal); background-position: 100% 0; background-repeat: no-repeat; background-size: 300% 100%; cursor: pointer; /* #note -> Corresponding duration on transition, blacklight */ transition: background-position 1.2s linear; /* #note -> Corresponding, values for various row span are set individually for each month in hb-include-bodier.php and called in @media queries in style.css */ /* --rowspan-1: php; --rowspan-2: php; --rowspan-3: php; --rowspan-4: php; --rowspan-5: php; --rowspan-6: php; --rowspan-7: php; --rowspan-8: php; --rowspan-9: php; --rowspan-10: php; */ } .switch-buttons-panel-1 .bodier .container-calendar .content-months ul li { background-position: 0 0; } .bodier .container-calendar .content-months ul li.months-month-01 { background-color: var(--color-month-01); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-01), var(--color-month-01) ); } .bodier .container-calendar .content-months ul li.months-month-02 { background-color: var(--color-month-02); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-02), var(--color-month-02) ); } .bodier .container-calendar .content-months ul li.months-month-03 { background-color: var(--color-month-03); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-03), var(--color-month-03) ); } .bodier .container-calendar .content-months ul li.months-month-04 { background-color: var(--color-month-04); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-04), var(--color-month-04) ); } .bodier .container-calendar .content-months ul li.months-month-05 { background-color: var(--color-month-05); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-05), var(--color-month-05) ); } .bodier .container-calendar .content-months ul li.months-month-06 { background-color: var(--color-month-06); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-06), var(--color-month-06) ); } .bodier .container-calendar .content-months ul li.months-month-07 { background-color: var(--color-month-07); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-07), var(--color-month-07) ); } .bodier .container-calendar .content-months ul li.months-month-08 { background-color: var(--color-month-08); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-08), var(--color-month-08) ); } .bodier .container-calendar .content-months ul li.months-month-09 { background-color: var(--color-month-09); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-09), var(--color-month-09) ); } .bodier .container-calendar .content-months ul li.months-month-10 { background-color: var(--color-month-10); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-10), var(--color-month-10) ); } .bodier .container-calendar .content-months ul li.months-month-11 { background-color: var(--color-month-11); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-11), var(--color-month-11) ); } .bodier .container-calendar .content-months ul li.months-month-12 { background-color: var(--color-month-12); background-image: linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-12), var(--color-month-12) ); } /* #note -> Corresponding, values for various row span are set individually for each month in hb-include-bodier.php and called in @media queries in style.css */ /* @media screen and (min-width: 320px) {} */ @media screen and (min-width: 640px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-2); } } @media screen and (min-width: 960px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-3); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1280px) { */ @media screen and (min-width: 960px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-4); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1600px) { */ @media screen and (min-width: 1280px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-5); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1920px) { */ @media screen and (min-width: 1600px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-6); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2240px) { */ @media screen and (min-width: 1920px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-7); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2560px) { */ @media screen and (min-width: 2240px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-8); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2880px) { */ @media screen and (min-width: 2560px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-9); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 3200px) { */ @media screen and (min-width: 2880px) { .bodier .container-calendar .content-months ul li { grid-row-end: span var(--rowspan-10); } } .bodier .container-calendar .content-months ul li.months-past { /* #fix -> 2019-10-10 Changing opacity and adding back Available */ opacity: 0.45; } .bodier .container-calendar .content-months ul li a { display: none; width: var(--months-w); /* height: js; */ position: -webkit-sticky; position: -moz-sticky; position: -o-sticky; position: -ms-sticky; position: sticky; top: 0; padding-top: var(--months-padding-horizontal); } .switch-layout-months .bodier .container-calendar .content-months ul li a { display: block; } .bodier .container-calendar .content-months ul li a .datetime-year { display: block; text-align: center; letter-spacing: 0.025em; } .bodier .container-calendar .content-months ul li a .datetime-month { display: block; padding-top: var(--months-padding-left); padding-right: 0.025em; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); text-transform: uppercase; transform: rotate(-90deg) translate3d(-100%, 0, 0); transform-origin: 0 0 0; } @media screen and (max-height: 480px) { .bodier .container-calendar .content-months ul li a .datetime-month .datetime-month-hide { display: none; } } .bodier .container-calendar .content-months ul li a .datetime-hide { display: none; } .bodier .container-calendar .content { grid-area: days; justify-self: stretch; align-self: stretch; display: grid; /* #note -> Corresponding, values for various row span are set individually for each month in hb-include-bodier.php and called in @media queries in style.css */ grid-template-columns: 1fr; grid-column-gap: var(--grid-gutter-vertical); /* #note -> Guirlandes */ /* grid-row-gap: var(--grid-gutter-horizontal); */ justify-items: stretch; align-items: stretch; justify-content: stretch; align-content: stretch; grid-auto-rows: var(--item-h); grid-auto-flow: row; overflow: hidden; margin-top: var(--grid-gutter-horizontal); margin-bottom: var(--grid-gutter-horizontal); } /* #note -> Corresponding, values for various row span are set individually for each month in hb-include-bodier.php and called in @media queries in style.css */ @media screen and (min-width: 640px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr; } } @media screen and (min-width: 960px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1280px) { */ @media screen and (min-width: 960px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1600px) { */ @media screen and (min-width: 1280px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1920px) { */ @media screen and (min-width: 1600px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2240px) { */ @media screen and (min-width: 1920px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2560px) { */ @media screen and (min-width: 2240px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 2880px) { */ @media screen and (min-width: 2560px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 3200px) { */ @media screen and (min-width: 2880px) { .bodier .container-calendar .content { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } .bodier .container-calendar .content .entry { justify-self: stretch; align-self: stretch; /* #fix -> Fallback for grid */ min-height: calc(var(--item-h) - var(--item-padding-horizontal) - var(--item-padding-horizontal)); overflow: hidden; padding-top: var(--item-padding-horizontal); padding-right: var(--item-padding-vertical); padding-bottom: var(--item-padding-horizontal); padding-left: var(--item-padding-vertical); background-position: 0 0, 0 100%, 100% 0; background-repeat: no-repeat; /* #note -> Top image has an art board height of 100, bottom image has an art board height of 110. */ background-size: calc(100% + 1px) var(--grid-gutter-horizontal), calc(100% + 1px) calc(var(--grid-gutter-horizontal) * 1.1), 300% 100%; cursor: pointer; /* #note -> Corresponding duration on transition, blacklight */ transition: background-position 1.2s linear; } .switch-buttons-panel-1 .bodier .container-calendar .content .entry { background-position: 0 0, 0 100%, 0 0; } .bodier .container-calendar .content .entry.entry-month-01 { background-color: var(--color-month-01); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-01), var(--color-month-02) ); } .bodier .container-calendar .content .entry.entry-month-02 { background-color: var(--color-month-02); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-02), var(--color-month-03) ); } .bodier .container-calendar .content .entry.entry-month-03 { background-color: var(--color-month-03); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-03), var(--color-month-04) ); } .bodier .container-calendar .content .entry.entry-month-04 { background-color: var(--color-month-04); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-04), var(--color-month-05) ); } .bodier .container-calendar .content .entry.entry-month-05 { background-color: var(--color-month-05); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-05), var(--color-month-06) ); } .bodier .container-calendar .content .entry.entry-month-06 { background-color: var(--color-month-06); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-06), var(--color-month-07) ); } .bodier .container-calendar .content .entry.entry-month-07 { background-color: var(--color-month-07); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-07), var(--color-month-08) ); } .bodier .container-calendar .content .entry.entry-month-08 { background-color: var(--color-month-08); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-08), var(--color-month-09) ); } .bodier .container-calendar .content .entry.entry-month-09 { background-color: var(--color-month-09); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-09), var(--color-month-10) ); } .bodier .container-calendar .content .entry.entry-month-10 { background-color: var(--color-month-10); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-10), var(--color-month-11) ); } .bodier .container-calendar .content .entry.entry-month-11 { background-color: var(--color-month-11); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-11), var(--color-month-12) ); } .bodier .container-calendar .content .entry.entry-month-12 { background-color: var(--color-month-12); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-12), var(--color-month-01) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-01 { background-color: var(--color-month-01); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-01), var(--color-month-01) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-02 { background-color: var(--color-month-02); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-02), var(--color-month-02) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-03 { background-color: var(--color-month-03); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-03), var(--color-month-03) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-04 { background-color: var(--color-month-04); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-04), var(--color-month-04) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-05 { background-color: var(--color-month-05); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-05), var(--color-month-05) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-06 { background-color: var(--color-month-06); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-06), var(--color-month-06) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-07 { background-color: var(--color-month-07); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-07), var(--color-month-07) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-08 { background-color: var(--color-month-08); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-08), var(--color-month-08) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-09 { background-color: var(--color-month-09); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-09), var(--color-month-09) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-10 { background-color: var(--color-month-10); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-10), var(--color-month-10) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-11 { background-color: var(--color-month-11); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-11), var(--color-month-11) ); } .bodier .container-calendar .content .entry.entry-current.entry-month-12 { background-color: var(--color-month-12); background-image: url(/site/templates/hb-resources/images/guirlande-top.svg), url(/site/templates/hb-resources/images/guirlande-bottom.svg), linear-gradient( 90deg, var(--color-menu-blacklight-1), var(--color-menu-blacklight-1), var(--color-month-12), var(--color-month-12) ); } /* .bodier .container-calendar .content .entry.entry-available { #fix -> 2019-10-10 Changing opacity and adding back Available opacity: 0.45; } */ .bodier .container-calendar .content .entry.entry-closed { /* #fix -> 2019-10-10 Changing opacity and adding back Available */ opacity: 0.45; } .bodier .container-calendar .content .entry.entry-past { /* #fix -> 2019-10-10 Changing opacity and adding back Available */ opacity: 0.45; } /* #fix -> 2019-04-25 muting future items */ /* #fix -> 2019-10-10 Changing opacity and adding back Available */ .bodier .container-calendar .content .entry.entry-future, .bodier .container-calendar .content .entry.entry-unavailable { opacity: 0.45; } .bodier .container-calendar .content .entry a { pointer-events: none; } .bodier .container-calendar .content .entry .entry-option { /* width: 200%; */ height: 0; overflow: visible; text-transform: uppercase; } /* .bodier .container-calendar .content .entry.entry-available.entry-current .entry-option, */ .bodier .container-calendar .content .entry.entry-available.entry-past .entry-option { display: none; } /* #fix -> 2019-04-25 muting future items */ /* #fix -> 2019-10-10 Changing opacity and adding back Available */ .bodier .container-calendar .content .entry.entry-available.entry-unavailable .entry-option { display: none; } .bodier .container-calendar .content .entry .entry-option p { padding-top: calc( ((var(--item-option-top) - var(--item-padding-horizontal)) / var(--font-size-factor-xl)) - (var(--line-height) / 2) ); font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); text-align: center; white-space: nowrap; } .bodier .container-calendar .content .entry .entry-option p span { display: block; width: 200%; /* #note -> Compensate */ margin-top: 0.15em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.025em; transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -55deg); } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: stretch; } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .datetime { flex-grow: 0; align-self: flex-start; width: 33%; min-width: 6.25em; overflow: visible; white-space: nowrap; } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .datetime .datetime-day-name { display: block; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .datetime .datetime-day { display: block; margin-top: 0.025em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.035em; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .datetime .datetime-month-name-year { display: none; } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .datetime .datetime-time { display: block; margin-bottom: 0.4em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .datetime .datetime-hide { display: none; } .bodier .container-calendar .content .entry .entry-header .container-datetime-tags .tags { flex-grow: 1; align-self: flex-start; width: 100%; /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ max-height: calc(var(--line-height) * 3); overflow: hidden; margin-top: calc(var(--line-height) + ((var(--font-size-factor-xl) * var(--line-height) * var(--line-height-factor-xl)) / 2)); /* margin-right: var(--item-padding-vertical); */ margin-left: var(--item-padding-vertical); text-align: center; text-overflow: ellipsis; text-transform: uppercase; transform: translate3d(0, -50%, 0); } .bodier .container-calendar .content .entry .entry-header h2 { width: 100%; /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ max-height: calc((var(--line-height) * var(--line-height-factor-l)) * 6); overflow: hidden; padding-bottom: 0.05em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; text-overflow: ellipsis; font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } .bodier .container-calendar .content .entry.entry-available .entry-header h2 { display: none; } .bodier .container-calendar .content .entry .entry-intro { width: 100%; /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ /* max-height: js; */ overflow: hidden; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; text-overflow: ellipsis; } .bodier .container-calendar .content .entry .entry-bodier { display: none; } .bodier .container-calendar .content .entry .entry-footer { display: none; } .bodier .container-calendar .content .entry .entry-option-footer { display: none; } .bodier .container-content-images { display: none; position: fixed; top: 0; left: 0; z-index: 140; width: 100%; height: 100%; overflow: auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } .switch-buttons-images-1 .bodier .container-content-images { display: block; visibility: hidden; } .switch-buttons-images-2 .bodier .container-content-images { visibility: visible; } .bodier .container-content-images .content-images { transform: none; } .switch-buttons-images-1 .bodier .container-content-images .content-images { /* #note -> will-change creates layout error, by creating additional space, perhaps as preparation for the transition */ /* will-change: transform; */ transform: translate3d(0, 100vh, 0); /* #note -> Corresponding duration on transition, panel */ transition: transform 0.8s ease-in-out; } .switch-buttons-images-2 .bodier .container-content-images .content-images { /* #note -> will-change creates layout error, by creating additional space, perhaps as preparation for the transition */ /* will-change: transform; */ transform: none; } .switch-buttons-images-3 .bodier .container-content-images .content-images { /* #note -> will-change creates layout error, by creating additional space, perhaps as preparation for the transition */ /* will-change: transform; */ transform: translate3d(0, -100%, 0); } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry { /* #note -> Clicking outside of images closes the gallery */ pointer-events: none; } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images { width: 100%; } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image { position: -webkit-sticky; position: -moz-sticky; position: -o-sticky; position: -ms-sticky; position: sticky; top: calc(-1 * var(--blacklight-h)); padding-top: var(--blacklight-h); } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image:first-child { top: 0; padding-top: 0; } /* .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image p {} */ .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image p img { width: auto; height: auto; max-width: calc(100vw - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) + 0.5px); max-height: calc(100vh - var(--grid-gutter-horizontal) - var(--grid-gutter-horizontal) + 0.5px); /* margin-right: auto; */ /* margin-left: auto; */ padding-top: var(--grid-gutter-vertical); padding-right: var(--grid-gutter-horizontal); padding-bottom: var(--grid-gutter-vertical); padding-left: var(--grid-gutter-horizontal); background-color: var(--color-current-1); background-image: linear-gradient(90deg, var(--color-current-1), var(--color-current-2)); background-size: 100vw auto; /* background-position: 50% 50%; */ /* #note -> Clicking outside of images closes the gallery */ pointer-events: all; } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image:nth-child(3n + 1) p img { margin-right: auto; margin-left: 0; background-position: 0% 50%; } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image:nth-child(3n + 2) p img { margin-right: auto; margin-left: auto; background-position: 50% 50%; } .switch-buttons-images-1 .bodier .container-content-images .content-images .entry .entry-images .entry-image:nth-child(3n + 3) p img { margin-right: 0; margin-left: auto; background-position: 100% 50%; } .bodier .container-content-information { display: none; position: fixed; top: 0; left: 0; z-index: 150; width: 100%; height: 100%; overflow: auto; overflow-x: hidden; overflow-y: auto; color: var(--color-current-1); background-color: var(--color-content-information-background); -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } @media screen and (min-width: 960px) { .bodier .container-content-information { display: none; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; } } @supports (mix-blend-mode: multiply) { .bodier .container-content-information { color: var(--color-content-information-content); -ms-mix-blend-mode: multiply; -o-mix-blend-mode: multiply; -moz-mix-blend-mode: multiply; -webkit-mix-blend-mode: multiply; mix-blend-mode: multiply; } } .switch-buttons-information .bodier .container-content-information { display: block; } @media screen and (min-width: 960px) { .switch-buttons-information .bodier .container-content-information { display: flex; } } .bodier .container-content-information .content-information { width: calc(100% - var(--months-w)); height: auto; overflow: visible; } .flag-handheld-false .bodier .container-content-information .content-information { width: calc(100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical)); margin-left: var(--grid-gutter-vertical); } @media screen and (min-width: 960px) { .bodier .container-content-information .content-information-0 { order: 2; flex-grow: 0; align-self: flex-start; width: calc(((100% - var(--months-w) - var(--grid-gutter-vertical)) / 2) * 1); height: 100%; overflow: auto; overflow-x: hidden; overflow-y: auto; margin-left: var(--grid-gutter-vertical); padding-right: var(--months-w); -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } .flag-handheld-false .bodier .container-content-information .content-information-0 { width: calc( ( ( 100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) ) / 2 ) * 1 ); margin-left: var(--grid-gutter-vertical); padding-right: calc(var(--months-w) + var(--grid-gutter-vertical) + var(--grid-gutter-vertical)); } .bodier .container-content-information .content-information-1 { order: 1; flex-grow: 0; align-self: flex-start; width: calc(((100% - var(--months-w) - var(--grid-gutter-vertical)) / 2) * 1); height: 100%; overflow: auto; overflow-x: hidden; overflow-y: auto; margin-left: 0; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } .flag-handheld-false .bodier .container-content-information .content-information-1 { width: calc( ( ( 100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) ) / 2 ) * 1 ); margin-left: var(--grid-gutter-vertical); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1280px) { */ @media screen and (min-width: 960px) { .bodier .container-content-information .content-information-0 { width: calc(((100% - var(--months-w) - var(--grid-gutter-vertical)) / 5) * 3); } .flag-handheld-false .bodier .container-content-information .content-information-0 { width: calc( ( ( 100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) ) / 5 ) * 3 ); } .bodier .container-content-information .content-information-1 { width: calc(((100% - var(--months-w) - var(--grid-gutter-vertical)) / 5) * 2); } .flag-handheld-false .bodier .container-content-information .content-information-1 { width: calc( ( ( 100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) ) / 5 ) * 2 ); } } /* #fix -> 1018-07-19 Showing more columns and items */ /* @media screen and (min-width: 1600px) { */ @media screen and (min-width: 1280px) { .bodier .container-content-information .content-information-0 { width: calc(((100% - var(--months-w) - var(--grid-gutter-vertical)) / 3) * 2); } .flag-handheld-false .bodier .container-content-information .content-information-0 { width: calc( ( ( 100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) ) / 3 ) * 2 ); } .bodier .container-content-information .content-information-1 { width: calc(((100% - var(--months-w) - var(--grid-gutter-vertical)) / 3) * 1); } .flag-handheld-false .bodier .container-content-information .content-information-1 { width: calc( ( ( 100% - var(--months-w) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) - var(--grid-gutter-vertical) ) / 3 ) * 1 ); } } .bodier .container-content-information .content-information-1 article:last-child { /* #note -> Corresponding horizontal space, below columns */ margin-bottom: calc(var(--line-height) * 6); } @media screen and (min-width: 960px) { .bodier .container-content-information .content-information-0 article:last-child { /* #note -> Corresponding horizontal space, below columns */ margin-bottom: calc(var(--line-height) * 6); } } .bodier .container-content-information .content-information .content-information-header { /* #note -> Corresponding horizontal space, above headers */ /* #note -> Padding instead of margin because focus scrolls the focused element to top, and margins are outside of the element so the element's top becomes incorrect, and for some reason the element is always scrolled to the top in this case, and as an effect the element's scroll position isn't remembered. */ /* padding-top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) + var(--menu-gutter-top)); */ padding-top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) + var(--menu-gutter-top) + 0.125em); /* #note -> Corresponding horizontal space, below headers */ margin-bottom: calc(var(--line-height) * 3); padding-right: var(--item-padding-vertical); padding-left: var(--item-padding-vertical); } .bodier .container-content-information .content-information .entry { padding-right: var(--item-padding-vertical); padding-left: var(--item-padding-vertical); } .bodier .container-content-information .content-information-1 .content-information-header { display: none; } @media screen and (min-width: 960px) { .bodier .container-content-information .content-information .content-information-header { /* #note -> Corresponding horizontal space, below headers */ margin-bottom: calc(var(--line-height) * 6); } .bodier .container-content-information .content-information-0 .content-information-header { /* #note -> Corresponding horizontal space, above headers */ padding-top: calc(var(--menu-gutter-top) + var(--menu-logo-c-h) - var(--menu-information-c-h)); } .bodier .container-content-information .content-information-1 .content-information-header { display: block; } } .bodier .container-content-information .content-information-0 .content-information-header .access { /* #note -> Corresponding horizontal space, above menu */ padding-top: calc(var(--line-height) * 3); } @media screen and (min-width: 960px) { .bodier .container-content-information .content-information-0 .content-information-header .contact { display: none; } .bodier .container-content-information .content-information-0 .content-information-header .access { /* #note -> Corresponding horizontal space, above menu */ padding-top: 0; } .bodier .container-content-information .content-information-1 .content-information-header .access { display: none; } } .bodier .container-content-information .content-information .content-information-header .access .menu ul li { width: 100%; overflow: hidden; text-overflow: ellipsis; } .bodier .container-content-information .content-information .content-information-header .contact p { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; /* width: 100%; */ /* overflow: hidden; */ /* #note -> Ellipsis on lowercase text cuts descenders */ /* text-overflow: ellipsis; */ } @media screen and (min-width: 640px) { .bodier .container-content-information .content-information .content-information-header .contact p { margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-information .content-information .content-information-header .access .menu { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; text-transform: uppercase; text-align: center; } @media screen and (min-width: 640px) { .bodier .container-content-information .content-information .content-information-header .access .menu { margin-left: -0.045em; font-size: calc(var(--font-size) * var(--font-size-factor-m)); line-height: calc(var(--line-height) * var(--line-height-factor-m)); } } .bodier .container-content-information .content-information .entry .entry-header { /* #note -> Corresponding horizontal space, above elements */ margin-top: calc(var(--line-height) * 3); } .bodier .container-content-information .content-information .entry .entry-header h2 { /* width: 100%; */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; /* #note -> Ellipsis on lowercase text cuts descenders */ /* text-overflow: ellipsis; */ font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } @media screen and (min-width: 640px) { .bodier .container-content-information .content-information .entry .entry-header h2 { margin-left: -0.035em; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); } } .bodier .container-content-information .content-information .entry .entry-header h2 + h3 { /* #note -> Corresponding horizontal space, above elements */ /* #note -> Optical compensation */ margin-top: calc(var(--line-height) * 0.25); } .bodier .container-content-information .content-information .entry .entry-header h2 a { cursor: text; } .bodier .container-content-information .content-information .entry .entry-header h3 { /* width: 100%; */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; /* #note -> Ellipsis on lowercase text cuts descenders */ /* text-overflow: ellipsis; */ } @media screen and (min-width: 640px) { .bodier .container-content-information .content-information .entry .entry-header h3 { margin-left: -0.045em; font-size: calc(var(--font-size) * var(--font-size-factor-m)); line-height: calc(var(--line-height) * var(--line-height-factor-m)); } } .bodier .container-content-information .content-information .entry .entry-bodier { /* #note -> Corresponding horizontal space, above elements */ /* #note -> Optical compensation */ /* margin-top: calc(var(--line-height) * 3); */ margin-top: calc((var(--line-height) * 3) - 0.2em); } .bodier .container-content-information .content-information .entry .entry-header + .entry-bodier { /* #note -> Corresponding horizontal space, above elements */ /* #note -> Optical compensation */ margin-top: calc(var(--line-height) * 0.5); } .bodier .container-content-information .content-information .entry .entry-images + .entry-bodier { /* #note -> Corresponding horizontal space, above elements */ /* #note -> Optical compensation */ margin-top: calc(var(--line-height) * 0.75); } .bodier .container-content-information .content-information .entry .entry-bodier p { /* width: 100%; */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; /* #note -> Ellipsis on lowercase text cuts descenders */ /* text-overflow: ellipsis; */ text-indent: var(--line-height); } .bodier .container-content-information .content-information .entry .entry-bodier p:first-child { text-indent: 0; } @media screen and (min-width: 640px) { .bodier .container-content-information .content-information .entry .entry-bodier p { margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-information .content-information .entry .entry-images { /* #note -> Corresponding horizontal space, above elements */ margin-top: calc(var(--line-height) * 3); } .bodier .container-content-information .content-information .entry .entry-header + .entry-images { /* #note -> Corresponding horizontal space, above elements */ margin-top: calc(var(--line-height) * 0.75); } .bodier .container-content-information .content-information .entry .entry-images .entry-image p { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ /* margin-left: -0.05em; */ } .bodier .container-content-information .content-information .entry .entry-images .entry-image p img { width: 100%; } @supports (mix-blend-mode: multiply) { .bodier .container-content-information .content-information .entry .entry-images .entry-image p img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } } .bodier .container-content-information .content-information .entry .entry-images .entry-image figcaption { /* #note -> Corresponding horizontal space, above elements */ /* #note -> Optical compensation */ margin-top: calc(var(--line-height) * 0.25); } .bodier .container-content-information .content-information .entry .entry-images .entry-image figcaption p { /* width: 100%; */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; /* #note -> Ellipsis on lowercase text cuts descenders */ /* text-overflow: ellipsis; */ } .bodier .container-content-panel { display: none; position: fixed; top: 0; left: 0; z-index: 160; /* #fix -> A pixel rounding on the width of this element sometimes results in blend mode not working properly. */ /* width: calc(100% - var(--panel-padding-outside-vertical) - var(--panel-padding-outside-vertical)); */ width: calc(100% - var(--panel-padding-outside-vertical) - var(--panel-padding-outside-vertical) + 0.5px); height: 100%; overflow: hidden; overflow-x: hidden; overflow-y: auto; padding-right: var(--panel-padding-outside-vertical); padding-left: var(--panel-padding-outside-vertical); color: var(--color-current-1); background-color: var(--color-content-panel-background); -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; } @supports (mix-blend-mode: multiply) { .bodier .container-content-panel { color: var(--color-content-panel-content); -ms-mix-blend-mode: multiply; -o-mix-blend-mode: multiply; -moz-mix-blend-mode: multiply; -webkit-mix-blend-mode: multiply; mix-blend-mode: multiply; } } .switch-buttons-panel-1 .bodier .container-content-panel { display: block; visibility: hidden; } .switch-buttons-panel-2 .bodier .container-content-panel { visibility: visible; } .bodier .container-content-panel .content-panel { transform: none; } .switch-buttons-panel-1 .bodier .container-content-panel .content-panel { /* #note -> will-change creates layout error, by creating additional space, perhaps as preparation for the transition */ /* will-change: transform; */ transform: translate3d(0, 100vh, 0); /* #note -> Corresponding duration on transition, panel */ transition: transform 0.8s ease-in-out; } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel { padding-top: var(--blacklight-h); padding-bottom: calc(var(--blacklight-h) / 2); /* #note -> will-change creates layout error, by creating additional space, perhaps as preparation for the transition */ /* will-change: transform; */ transform: none; } .switch-buttons-panel-3 .bodier .container-content-panel .content-panel { /* #note -> will-change creates layout error, by creating additional space, perhaps as preparation for the transition */ /* will-change: transform; */ transform: translate3d(0, -100%, 0); } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande-bottom { width: 100%; /* #note -> Pixel rounding */ /* height: var(--panel-gutter-horizontal); */ height: calc(var(--panel-gutter-horizontal) - 0.25px); } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande-top { width: 100%; /* #note -> Pixel rounding */ /* height: calc(var(--panel-gutter-horizontal) * 1.1); */ height: calc((var(--panel-gutter-horizontal) * 1.1) + 0.25px); } /* .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande-1 { */ /* #note -> Pixel rounding */ /* margin-bottom: -1px; } */ .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande-2 { margin-bottom: calc((var(--panel-gutter-horizontal) * 1.1) * -1); } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande-3 { margin-top: calc(var(--panel-gutter-horizontal) * -1); /* #note -> Pixel rounding */ /* margin-bottom: -1px; */ } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande .guirlande-bottom { width: 100%; height: var(--panel-gutter-horizontal); fill: var(--color-current-2); } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande .guirlande-top { width: 100%; height: calc(var(--panel-gutter-horizontal) * 1.1); fill: var(--color-current-2); } @supports (mix-blend-mode: multiply) { .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande .guirlande-bottom, .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .content-panel-guirlande .guirlande-top { fill: var(--color-content-panel-content); } } .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .entry { width: calc( 100% - var(--panel-border-vertical) - var(--panel-padding-vertical) - var(--panel-padding-vertical) - var(--panel-border-vertical) ); min-height: calc(var(--panel-h) - var(--panel-padding-horizontal) - (var(--panel-padding-horizontal) + var(--line-height))); padding-top: var(--panel-padding-horizontal); padding-right: var(--panel-padding-vertical); /* padding-bottom: var(--panel-padding-horizontal); */ padding-bottom: calc(var(--panel-padding-horizontal) + var(--line-height)); padding-left: var(--panel-padding-vertical); border-right: var(--panel-gutter-vertical) solid var(--color-current-2); border-left: var(--panel-gutter-vertical) solid var(--color-current-2); box-shadow: 0 0 calc(var(--blacklight-h) * 0.625) 0; } @supports (mix-blend-mode: multiply) { .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .entry { border-color: var(--color-content-panel-content); } } @media screen and (min-width: 1120px) { .switch-buttons-panel-2 .bodier .container-content-panel .content-panel .entry { box-shadow: 0 0 calc(var(--blacklight-h) * 1.25) 0; } } .bodier .container-content-panel .content-panel .entry .entry-option { display: none; } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; align-content: stretch; } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime { flex-grow: 0; align-self: flex-start; width: 33%; min-width: 6.25em; overflow: visible; white-space: nowrap; } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime { min-width: calc(6.25em * 2); } } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-day-name { display: block; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-day-name { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-day { display: block; margin-top: 0.025em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.035em; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-day { margin-top: calc(0.025em * 3.75); /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.03em; font-size: calc(var(--font-size) * var(--font-size-factor-xxl)); line-height: calc(var(--line-height) * var(--line-height-factor-xxl)); } } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-month-name-year { display: block; /* #note -> Compensation */ margin-top: -0.1em; margin-bottom: 0.4em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-month-name-year { /* #note -> Compensation */ margin-top: 0.1em; margin-bottom: calc(0.4em * 1.25); /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-time { display: block; /* #note -> Compensation */ margin-top: -0.4em; margin-bottom: 0.4em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-time { /* #note -> Compensation */ margin-top: calc(-0.4em / 1.25); margin-bottom: calc(0.4em * 1.25); /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .datetime .datetime-hide { display: none; } .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .tags { flex-grow: 1; align-self: flex-start; width: 100%; /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ max-height: calc(var(--line-height) * 3); overflow: hidden; margin-top: calc(var(--line-height) + ((var(--font-size-factor-xl) * var(--line-height) * var(--line-height-factor-xl)) / 2)); /* margin-right: var(--item-padding-vertical); */ margin-left: var(--item-padding-vertical); text-align: center; text-overflow: ellipsis; text-transform: uppercase; transform: translate3d(0, -50%, 0); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header .container-datetime-tags .tags { /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ max-height: calc((var(--line-height) * var(--line-height-factor-l)) * 3); margin-top: calc( (var(--line-height) * var(--line-height-factor-l)) + ((var(--font-size-factor-xxl) * var(--line-height) * var(--line-height-factor-xxl)) / 4) ); font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-header h2 { /* width: 100%; */ /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ /* overflow: hidden; */ /* #note -> Compensate */ padding-top: 0.175em; padding-bottom: 0.05em; /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; /* text-overflow: ellipsis; */ font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header h2 { /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ /* #note -> Compensate */ padding-top: 0.175em; padding-bottom: calc(0.05em * 1.25); /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.035em; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); /* line-height: calc(var(--line-height) * var(--line-height-factor-xl)); */ line-height: calc(var(--line-height) * var(--line-height-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-header h2 a { cursor: text; } .bodier .container-content-panel .content-panel .entry .entry-intro { /* width: 100%; */ /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ /* max-height: js; */ /* #note -> Override max-height which may be set in .entry in calendar list */ max-height: none !important; /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; /* text-overflow: ellipsis; */ } .bodier .container-content-panel .content-panel .entry .entry-intro p { text-indent: var(--line-height); } .bodier .container-content-panel .content-panel .entry .entry-header.entry-header-noh2 + .entry-intro { padding-top: calc(var(--line-height) - (0.4em * 1.25)); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header.entry-header-noh2 + .entry-intro { padding-top: calc((var(--line-height) * var(--font-size-factor-l)) - ((0.4em * 1.25) * 2)); } .bodier .container-content-panel .content-panel .entry .entry-intro p { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); /* line-height: calc(var(--line-height) * var(--line-height-factor-l)); */ line-height: var(--line-height); } } .bodier .container-content-panel .content-panel .entry .entry-intro p:first-child { text-indent: 0; } .bodier .container-content-panel .content-panel .entry .entry-bodier { /* width: 100%; */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; padding-top: var(--line-height); /* text-overflow: ellipsis; */ } .bodier .container-content-panel .content-panel .entry .entry-header.entry-header-noh2 + .entry-bodier { padding-top: calc(var(--line-height) - (0.4em * 1.25)); } .bodier .container-content-panel .content-panel .entry .entry-header + .entry-bodier { padding-top: 0; } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header + .entry-bodier { padding-top: 0; } .bodier .container-content-panel .content-panel .entry .entry-header.entry-header-noh2 + .entry-bodier { padding-top: calc((var(--line-height) * var(--font-size-factor-l)) - ((0.4em * 1.25) * 2)); } .bodier .container-content-panel .content-panel .entry .entry-bodier { padding-top: calc(var(--line-height) * var(--font-size-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-bodier p { text-indent: var(--line-height); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-bodier p { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; font-size: calc(var(--font-size) * var(--font-size-factor-l)); /* line-height: calc(var(--line-height) * var(--line-height-factor-l)); */ line-height: var(--line-height); } } .bodier .container-content-panel .content-panel .entry .entry-bodier p:first-child { text-indent: 0; } .bodier .container-content-panel .content-panel .entry .entry-footer { /* width: 100%; */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.05em; padding-top: var(--line-height); /* text-overflow: ellipsis; */ } .bodier .container-content-panel .content-panel .entry .entry-header + .entry-footer { padding-top: 0; } .bodier .container-content-panel .content-panel .entry .entry-header.entry-header-noh2 + .entry-footer { padding-top: calc(var(--line-height) - (0.4em * 1.25)); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-header + .entry-footer { padding-top: 0; } .bodier .container-content-panel .content-panel .entry .entry-header.entry-header-noh2 + .entry-footer { padding-top: calc((var(--line-height) * var(--font-size-factor-l)) - ((0.4em * 1.25) * 2)); } .bodier .container-content-panel .content-panel .entry .entry-footer { padding-top: calc(var(--line-height) * var(--font-size-factor-l)); } } .bodier .container-content-panel .content-panel .entry .entry-footer p { text-indent: var(--line-height); } .bodier .container-content-panel .content-panel .entry .entry-footer p:first-child { text-indent: 0; } .bodier .container-content-panel .content-panel .entry .entry-option-footer { padding-top: var(--line-height); } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-option-footer { padding-top: calc(var(--line-height) * var(--font-size-factor-l)); } } .bodier .container-content-panel .content-panel .entry.entry-available .entry-option-footer { display: none; } .bodier .container-content-panel .content-panel .entry .entry-option-footer p { /* width: 100%; */ /* #fix -> In some browsers, when combining overflow-x: hidden with overflow-y: visible, overflow-y:will become auto, and scrollbars may show if content is taller. If this happens, add padding below child element, so overflow can be hidden and descendants are not cut. */ /* overflow: hidden; */ /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.04em; /* text-overflow: ellipsis; */ font-size: calc(var(--font-size) * var(--font-size-factor-l)); line-height: calc(var(--line-height) * var(--line-height-factor-l)); text-transform: uppercase; } /* #note -> Size changes in panel */ @media screen and (min-width: 960px) { .bodier .container-content-panel .content-panel .entry .entry-option-footer p { /* #note -> Corresponding, blocks in items are given negative margin left to remove some of the left side rag. */ margin-left: -0.035em; font-size: calc(var(--font-size) * var(--font-size-factor-xl)); line-height: calc(var(--line-height) * var(--line-height-factor-xl)); } } .footer { display: none; /* #note -> Default, center */ /* width: auto; margin-right: auto; margin-left: auto; text-align: left; */ } /* ! Utilities */ /* ================================ */ /* Blocks, General -------------------------------- */ .flag-blocks-true p { background-color: rgba(255, 255, 255, 0.5); } .flag-blocks-true li { background-color: rgba(255, 255, 255, 0.5); } .flag-blocks-true li li { background-color: transparent; } .flag-blocks-true dt, .flag-blocks-true dd { background-color: rgba(255, 255, 255, 0.5); } .flag-blocks-true address { background-color: rgba(255, 255, 255, 0.5); } .flag-blocks-true h1, .flag-blocks-true h2, .flag-blocks-true h3, .flag-blocks-true h4, .flag-blocks-true h5, .flag-blocks-true h6 { background-color: rgba(255, 255, 255, 0.5); } .flag-blocks-true form { background-color: rgba(255, 255, 255, 0.5); } /* Blocks, Structure -------------------------------- */ .flag-blocks-true .container-main { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .header { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .branding { background-color: rgba(127, 255, 255, 0.25); } .flag-blocks-true .site-title { background-color: rgba(255, 127, 255, 0.25); } .flag-blocks-true .site-description { background-color: rgba(255, 255, 127, 0.25); } .flag-blocks-true .header .access { background-color: rgba(127, 255, 255, 0.25); } .flag-blocks-true .header .access .assistive-text { background-color: rgba(255, 127, 255, 0.25); } .flag-blocks-true .header .access .menu { background-color: rgba(255, 255, 127, 0.25); } .flag-blocks-true .bodier { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .content { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .content .entry-first { background-color: rgba(255, 127, 127, 0.25); } .flag-blocks-true .content .entry { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .content .entry-container { background-color: rgba(127, 255, 127, 0.25); } .flag-blocks-true .content .entry .entry-header { background-color: rgba(127, 127, 255, 0.25); } .flag-blocks-true .content .entry .entry-bodier { background-color: rgba(127, 255, 255, 0.25); } .flag-blocks-true .content .entry .entry-footer { background-color: rgba(255, 127, 255, 0.25); } .flag-blocks-true .content .entry .entry-video { background-color: rgba(255, 255, 127, 0.25); } .flag-blocks-true .content .entry .entry-images { background-color: rgba(127, 255, 255, 0.25); } .flag-blocks-true .aside { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .footer { background-color: rgba(0, 0, 0, 0.1); } .flag-blocks-true .footer .access { background-color: rgba(127, 255, 255, 0.25); } .flag-blocks-true .footer .access .assistive-text { background-color: rgba(255, 127, 255, 0.25); } .flag-blocks-true .footer .access .menu { background-color: rgba(255, 255, 127, 0.25); } .flag-blocks-true .colophon { background-color: rgba(255, 127, 127, 0.25); } .flag-blocks-true .content-colophon { background-color: rgba(127, 255, 127, 0.25); } .flag-blocks-true .colophon .assistive-text { background-color: rgba(127, 127, 255, 0.25); } .flag-blocks-true .colophon .legal { background-color: rgba(127, 255, 255, 0.25); } .flag-blocks-true .colophon .copyright-notice { background-color: rgba(255, 127, 255, 0.25); } /* ! Index */ /* ================================ */ /* Display & Visibility -------------------------------- display flex flex-parent flex-direction flex-wrap flex-flow align-items justify-content align-content flex-child order flex-grow flex-shrink flex-basis flex align-self visibility opacity */ /* Position -------------------------------- position top right bottom left z-index clip */ /* Float & Clear -------------------------------- float clear */ /* Width & Height -------------------------------- width min-width max-width height min-height max-height overflow overflow-x overflow-y */ /* Margin -------------------------------- margin margin-top margin-right margin-bottom margin-left */ /* Padding -------------------------------- padding padding-top padding-right padding-bottom padding-left */ /* Text -------------------------------- text-align vertical-align white-space text-overflow direction unicode-bidi */ /* Table -------------------------------- table-layout empty-cells border-spacing border-collapse caption-side */ /* Background -------------------------------- background background-color background-image background-repeat background-attachment background-position background-origin background-size background-clip */ /* Border -------------------------------- border border-top border-right border-bottom border-left border-width border-style border-color */ /* Font -------------------------------- font font-style font-variant font-weight font-size font-family font-size-adjust color text-decoration text-shadow text-transform text-stroke */ /* Text -------------------------------- line-height word-spacing letter-spacing text-indent font-stretch */ /* Media -------------------------------- fill fill-opacity fill-rule stroke stroke-opacity stroke-width stroke-linecap stroke-dasharray filter */ /* List -------------------------------- list-style list-style-type list-style-position list-style-image marker-offset */ /* Generated -------------------------------- content quotes counter-reset counter-increment */ /* Animation -------------------------------- will-change animation keyframes */ /* Transition -------------------------------- will-change transition */ /* Transform -------------------------------- will-change transform transform-origin transform-style backface-visibility perspective perspective-origin */ /* Miscellaneous -------------------------------- border-radius outline outline-color outline-style outline-width appearance text-rendering cursor pointer-events overflow-scrolling */ /* ! Miscellaneous */ /* ================================ */ /* Vendor Prefixed -------------------------------- -webkit-attribute: value; -moz-attribute: value; -o-attribute: value; -ms-attribute: value; attribute: value; attribute: -webkit-value; attribute: -moz-value; attribute: -o-value; attribute: -ms-value; attribute: value; */ /* Momentum scrolling -------------------------------- -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; */ /* Media queries -------------------------------- @media screen and (min-width: 1601px) { } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1120px) { } @media screen and (max-width: 960px) { } @media screen and (max-width: 800px) { } @media screen and (max-width: 640px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 320px) { } @media screen and (min-width: 0) { } @media screen and (min-width: 320px) { } @media screen and (min-width: 480px) { } @media screen and (min-width: 640px) { } @media screen and (min-width: 800px) { } @media screen and (min-width: 960px) { } @media screen and (min-width: 1120px) { } @media screen and (min-width: 1280px) { } @media screen and (min-width: 1440px) { } @media screen and (min-width: 1600px) { } @media print { } */