@charset "UTF-8"; /* •••••••••••••••••••••••••••••••• © 2008-now Harris Blondman All rights reserved www.harrisblondman.nl •••••••••••••••••••••••••••••••• */ /* ! Notes */ /* ================================ */ /* #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 -> … */ /* #note -> Logo as ratio */ /* #note -> Bottom part of logo as ratio */ /* #note -> Images button as ratio */ /* #note -> Images button as ratio of bottom part of logo */ /* #note -> Information button as ratio */ /* #note -> Information button as ratio of bottom part of logo */ /* #note -> Horizontal white space in menu as from grid */ /* #note -> Vertical white space in menu as from grid */ /* #note -> Variable dimensions of blacklight */ /* ! Development */ /* ================================ */ /* 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 -> … */ /* ! 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"); } @media screen and (min-width: 160px) { html { font-size: 1.75vw; } } @media screen and (min-width: 320px) { html { font-size: 1.75vw; } } @media screen and (min-width: 480px) { html { font-size: 1.6vw; } } @media screen and (min-width: 640px) { html { font-size: 1.45vw; } } @media screen and (min-width: 800px) { html { font-size: 1.25vw; } } @media screen and (min-width: 960px) { html { font-size: 0.85vw; } } @media screen and (min-width: 1280px) { html { font-size: 0.7vw; } } @media screen and (min-width: 1600px) { html { font-size: 0.55vw; } } @media screen and (min-width: 1760px) { html { font-size: 0.5vw; } } @media screen and (min-width: 1920px) { html { font-size: 0.5vw; } } @media screen and (min-width: 2080px) { html { font-size: 0.45vw; } } @media screen and (min-width: 2240px) { html { font-size: 0.45vw; } } @media screen and (min-width: 2400px) { html { font-size: 0.425vw; } } @media screen and (min-width: 2560px) { html { font-size: 0.4vw; } } @media screen and (min-width: 2720px) { html { font-size: 0.375vw; } } @media screen and (min-width: 2880px) { html { font-size: 0.36vw; } } .header { display: none; } .header-menu { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 4000; padding: 0.55em 2.255em 1.1em 2.255em; font-family: 'Font Regular', sans-serif; font-size: 1.55rem; line-height: 1.1em; } .header-menu .branding-images { flex-grow: 0; flex-shrink: 0; } .header-menu .branding-images .site-title { position: relative; top: 0; left: 0; z-index: 2100; width: 21.35968em; height: 5.426688em; overflow: hidden; z-index: 3000; } .header-menu .branding-images .site-title span { display: none; } .header-menu .branding-images .site-description { display: none; } .header-menu .icons { display: flex; cursor: pointer; } .header-menu .icons .nav-close { display: none; flex-grow: 0; flex-shrink: 0; width: 2.74776em; height: 2.75529em; } .switch-buttons-panel-1 .header-menu .icons .nav-close, .switch-menu .header-menu .icons .nav-close { display: block; } .header-menu .icons .nav-information { display: block; flex-grow: 0; flex-shrink: 0; width: 2.74776em; height: 2.75529em; } .switch-buttons-panel-1 .header-menu .icons .nav-information, .switch-menu .header-menu .icons .nav-information { display: none; } .header-menu .bottom-icons { position: fixed; right: 0; bottom: 0; padding: 0.55em 2.255em 1.1em 2.255em; } .header-menu .bottom-icons .nav-gotocurrent { display: block; margin: 0; padding: 0; flex-grow: 0; flex-shrink: 0; width: 2.74776em; height: 2.75529em; } .header-menu .bottom-icons .nav-gotocurrent svg { transform: scale3d(1, 1, 1); transition: transform 0.8s ease-out; fill: blue; overflow: visible; } .switch-gotocurrent .header-menu .bottom-icons .nav-gotocurrent svg { transform: scale3d(0, 0, 0); } .body-images .header-menu .bottom-icons .nav-gotocurrent, .body-gallery .header-menu .bottom-icons .nav-gotocurrent, .body-content .header-menu .bottom-icons .nav-gotocurrent, .switch-buttons-panel-1 .header-menu .bottom-icons .nav-gotocurrent, .switch-menu .header-menu .bottom-icons .nav-gotocurrent { display: none; } body.month-1 .header-menu .logo-sexyland, body.month-1 .header-menu .icon-hamburger, body.month-1 .header-menu .icon-x, body.month-1 .header-menu .nav-facebook svg, body.month-1 .header-menu .nav-instagram svg { fill: red; } body.month-2 .header-menu .logo-sexyland, body.month-2 .header-menu .icon-hamburger, body.month-2 .header-menu .icon-x, body.month-2 .header-menu .nav-facebook svg, body.month-2 .header-menu .nav-instagram svg { fill: cyan; } body.month-3 .header-menu .logo-sexyland, body.month-3 .header-menu .icon-hamburger, body.month-3 .header-menu .icon-x, body.month-3 .header-menu .nav-facebook svg, body.month-3 .header-menu .nav-instagram svg { fill: lime; } body.month-4 .header-menu .logo-sexyland, body.month-4 .header-menu .icon-hamburger, body.month-4 .header-menu .icon-x, body.month-4 .header-menu .nav-facebook svg, body.month-4 .header-menu .nav-instagram svg { fill: blue; } body.month-5 .header-menu .logo-sexyland, body.month-5 .header-menu .icon-hamburger, body.month-5 .header-menu .icon-x, body.month-5 .header-menu .nav-facebook svg, body.month-5 .header-menu .nav-instagram svg { fill: yellow; } body.month-6 .header-menu .logo-sexyland, body.month-6 .header-menu .icon-hamburger, body.month-6 .header-menu .icon-x, body.month-6 .header-menu .nav-facebook svg, body.month-6 .header-menu .nav-instagram svg { fill: magenta; } body.month-7 .header-menu .logo-sexyland, body.month-7 .header-menu .icon-hamburger, body.month-7 .header-menu .icon-x, body.month-7 .header-menu .nav-facebook svg, body.month-7 .header-menu .nav-instagram svg { fill: red; } body.month-8 .header-menu .logo-sexyland, body.month-8 .header-menu .icon-hamburger, body.month-8 .header-menu .icon-x, body.month-8 .header-menu .nav-facebook svg, body.month-8 .header-menu .nav-instagram svg { fill: yellow; } body.month-9 .header-menu .logo-sexyland, body.month-9 .header-menu .icon-hamburger, body.month-9 .header-menu .icon-x, body.month-9 .header-menu .nav-facebook svg, body.month-9 .header-menu .nav-instagram svg { fill: cyan; } body.month-10 .header-menu .logo-sexyland, body.month-10 .header-menu .icon-hamburger, body.month-10 .header-menu .icon-x, body.month-10 .header-menu .nav-facebook svg, body.month-10 .header-menu .nav-instagram svg { fill: blue; } body.month-11 .header-menu .logo-sexyland, body.month-11 .header-menu .icon-hamburger, body.month-11 .header-menu .icon-x, body.month-11 .header-menu .nav-facebook svg, body.month-11 .header-menu .nav-instagram svg { fill: magenta; } body.month-12 .header-menu .logo-sexyland, body.month-12 .header-menu .icon-hamburger, body.month-12 .header-menu .icon-x, body.month-12 .header-menu .nav-facebook svg, body.month-12 .header-menu .nav-instagram svg { fill: lime; } body.month-1 .header-menu .nav-gotocurrent svg, body.month-1 .header-menu .logo-societeit { fill: lime; } body.month-2 .header-menu .nav-gotocurrent svg, body.month-2 .header-menu .logo-societeit { fill: red; } body.month-3 .header-menu .nav-gotocurrent svg, body.month-3 .header-menu .logo-societeit { fill: cyan; } body.month-4 .header-menu .nav-gotocurrent svg, body.month-4 .header-menu .logo-societeit { fill: lime; } body.month-5 .header-menu .nav-gotocurrent svg, body.month-5 .header-menu .logo-societeit { fill: blue; } body.month-6 .header-menu .nav-gotocurrent svg, body.month-6 .header-menu .logo-societeit { fill: yellow; } body.month-7 .header-menu .nav-gotocurrent svg, body.month-7 .header-menu .logo-societeit { fill: magenta; } body.month-8 .header-menu .nav-gotocurrent svg, body.month-8 .header-menu .logo-societeit { fill: red; } body.month-9 .header-menu .nav-gotocurrent svg, body.month-9 .header-menu .logo-societeit { fill: yellow; } body.month-10 .header-menu .nav-gotocurrent svg, body.month-10 .header-menu .logo-societeit { fill: cyan; } body.month-11 .header-menu .nav-gotocurrent svg, body.month-11 .header-menu .logo-societeit { fill: blue; } body.month-12 .header-menu .nav-gotocurrent svg, body.month-12 .header-menu .logo-societeit { fill: magenta; } .menu-image { box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.8s ease-in-out; } .menu-image img { object-fit: cover; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } .switch-menu .menu-image { opacity: 0.5; transition: opacity 0.8s ease-in-out 0.8s; } .container-menu-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 3000; transform: translate3d(0%, 100vh, 0); overflow: auto; transition: transform 0.8s ease-in-out; transition: transform 0.7s ease-out 0.1s; } .switch-menu .container-menu-panel { transform: translate3d(0%, 0%, 0); transition: transform 0.8s ease-in-out 0.8s; } .container-menu-panel .menu-panel { position: relative; box-sizing: border-box; left: 50%; width: 50%; margin: calc( ((84.792 * 0.064em) + 0.66em) * 1.5) 0; transform: translateX(-50%); border-left: 1.1275em solid black; border-right: 1.1275em solid black; border-top: 1.1275em solid black; border-bottom: 1.1275em solid black; padding: 2.64em 2.64em; box-shadow: 0 0 0 0; } @media screen and (max-width: 960px) { .container-menu-panel .menu-panel { width: calc(100% - (1.1275em * 4)); } } body.month-1 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, lime, red); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 lime; } body.month-2 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, red, cyan); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 red; } body.month-3 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, cyan, lime); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 cyan; } body.month-4 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, lime, blue); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 lime; } body.month-5 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, blue, yellow); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 blue; } body.month-6 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, yellow, magenta); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 yellow; } body.month-7 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, magenta, red); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 magenta; } body.month-8 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, red, yellow); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 red; } body.month-9 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, yellow, cyan); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 yellow; } body.month-10 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, cyan, blue); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 cyan; } body.month-11 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, blue, magenta); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 blue; } body.month-12 .container-menu-panel .menu-panel { background-image: linear-gradient(90deg, magenta, lime); box-shadow: 0 0 calc(calc( ((84.792 * 0.064em) + 0.66em) * 1.5) * 0.625) 0 magenta; } .container-menu-panel .menu-panel li { color: black; font-size: 3.1rem; line-height: 1.1em; text-align: left; } .container-menu-panel .menu-panel li a { color: black; font-size: 6.2rem; line-height: 1.1em; } .container-menu-panel .menu-panel .bottom-icons { display: flex; } .container-menu-panel .menu-panel .bottom-icons .nav-facebook, .container-menu-panel .menu-panel .bottom-icons .nav-instagram { display: block; margin: 0; padding-top: 1.32em; padding-right: 0.66em; flex-grow: 0; flex-shrink: 0; width: 3.022536em; height: 3.030819em; } .container-menu-panel .menu-panel .bottom-icons .nav-facebook svg, .container-menu-panel .menu-panel .bottom-icons .nav-instagram svg { fill: black; } /* ! 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 { } */