/* ========================================================================== */ /* */ /* */ /* Default styles for ALL screen devices. */ /* */ /* */ /* ========================================================================== */ /* --------------- */ /* Element styles. */ /* --------------- */ * { box-sizing: inherit; margin: 0; } html, body { box-sizing: border-box; font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: rgb(0,0,0); /* Default background colour is black. */ color: rgb(255,255,255); /* Default text colour is white. */ font: normal 16px sans-serif; margin: 0; /* Default no margins. */ width: 100vw; /* Make the the full width of the viewport. */ height: 100%; /* Make the the full height of the viewport. */ overflow: hidden; /* Hide the viewport's scrollbars. */ } /* ----------------------- */ /* Header section classes. */ /* ----------------------- */ .header { display: flex; flex-direction: row; border-bottom: 1px solid white; height: 50px; width: 100%; } .btn-home-wrapper, .btn-menu-wrapper { height: 100%; width: 50px; } .btn-home, .btn-menu { height: 80%; margin: 10%; } .gallery-title { margin: 10px 0 0 0; height: 100%; width: calc(100% - 100px); text-align: center; } .menu-div { display: flex; flex-direction: column; position: absolute; top: 50px; right: 1%; z-index: 1; } .menu-item { background-color: white; border: 1px solid black; color: black; font-weight: bold; padding: 1em 0; text-align: center; text-decoration: none; width: 15em; } /* --------------------- */ /* Main section classes. */ /* --------------------- */ .main { position: relative; margin: 0; width: 100%; } .main-with-thumbnails { height: calc(100% - 140px); } .main-without-thumbnails { height: calc(100% - 50px); } .main-scroll-box { display: flex; position: absolute; height: 100%; top: 0; left: -100vw; } .image-wrapper { width: 100vw; } .image-general { width: 100%; /* These three properties need to be set together */ height: 100%; /* to ensure that the image fills the box whilst */ object-fit: contain; /* maintaining it's original aspect ratio. */ } .image-caption { position: absolute; background-color: rgba(0,0,0,0.5); bottom: 0%; left: 0%; padding: 0% 1% 1%; width: 100%; } .window-size-text { position: absolute; background-color: rgba(0,0,0,0.5); margin: 0; top: 0%; left: 0%; width: 100%; } .image-title { margin: 0 0 0.5%; } @keyframes scroll-left { /* from {left: -100vw;} */ to {left: -200vw;} } @keyframes scroll-right { /* from {left: -100vw;} */ to {left: 0vw;} } @keyframes scroll-undo { to {left: -100vw;} } .animation-scroll-left { animation-name: scroll-left; animation-duration: 0.5s; } .animation-scroll-right { animation-name: scroll-right; animation-duration: 0.5s; } .animation-scroll-undo { animation-name: scroll-undo; animation-duration: 0.5s; } /* ---------------------- */ /* Thumbnail bar classes. */ /* ---------------------- */ .tn-bar { border-top: 1px solid rgb(255,255,255); display: flex; margin: 0; padding-top: 5px; height: 90px; width: 100%; } .tn-box { border: 2px solid black; padding: 0px; width: calc(100% / 14); } .tn-box-medium { border: 2px solid black; padding: 0px; width: calc(100% / 10); } .tn-box-large { border: 2px solid black; padding: 0px; width: calc(100% / 7); } .tn-box:hover { border: 2px solid white; } .tn-highlight { border: 2px solid white; } /* -------------------- */ /* General use classes. */ /* -------------------- */ .hide-on { visibility: hidden; } .hide-off { visibility: visible; } /* ========================================================================== */ /* */ /* */ /* Styles for MEDIUM screen devices. */ /* */ /* */ /* ========================================================================== */ @media only screen and (max-device-width: 1024px) { html, body { font: normal 12px sans-serif; } .main-with-thumbnails { } .main-without-thumbnails { } } /* ========================================================================== */ /* */ /* */ /* Styles for SMALL screen devices. */ /* */ /* */ /* ========================================================================== */ @media only screen and (max-device-width: 428px) { }