/* Theme Name: Coplica Theme URI: http://gantry.org Author: RocketTheme, LLC Author URI: http://rockettheme.com Description: Theme for Coplica by Stephen Hoper. A child theme of the Gantry 5 framework Helium theme. Version: @version@ License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Template: g5_helium */ /* Coplica red #de2725 [formerly #ee2d24] 100vw is the full width of the screen 100vh is the full height of the screen */ /*hide Edit link*/ .edit-link { display: none; } /*redefine cursor as a PNG file with a #de2725-stroked black arrow*/ body { cursor: url(mouse-pointer-15w-24h.png), pointer; } /*THIS IS ADRIENNE-COPIED CODE BUT MIGHT BE IMPORTANT*//*remove large padding from above/below the main content panel AND the footer*/ #g-mainbar, #g-footer { padding:0; } /*style footer links*/ #g-footer a, #g-footer a:hover { color:#de2725; } /*style all link hovers*/ a:hover { cursor: url(hand-pointer-17w-27h.png), pointer; } /*style the headings and the text on the Legal page*/ body.outline-coplica_legal_page h2 { color:#de2725; text-align:center !important; font-size: 2.5rem; } body.outline-coplica_legal_page .entry { text-align:center !important; } /*restrict the width of the Legal text block so that it roughly forms a square*/ #post-17 p { max-width:405px; text-align:justify; } /* the wrappers around the label images and the footer must be the same height as the screen, and the contents must be centred */ /* AND the Legal text */ #logo-4711-particle, #logo-3151-particle, body.outline-coplica_legal_page .entry, #g-footer { height:100vh !important; /*centre-align the contents using info from https://stackoverflow.com/questions/2743989/how-to-vertically-center-divs */ display: flex; align-items: center; justify-content: center; } /*narrow the gap on the right of the Spotify icon, i.e. on the left of the Apple Music icon*/ .g-social a:first-of-type { padding-right: 0px !important; /*NB this overrides a rem-based default padding*/ } /* -----MEDIA QUERIES BEGIN----- */ /* ------------------------------------ */ /*ALL LANDSCAPE SCREENS*/ @media all and (orientation: landscape) { /*make the first spacer (between SideA and SideB) 46WAS50% of the full height of the screen, so that as SideA scrolls off-screen SideB appears ON ALL LANDSCAPE SCREENS*/ #custom-3793-particle { height:46vh !important; } /*make the second spacer (between SideB and the footer) 27WAS40% of the full height of the screen, so that as SideB scrolls off-screen the footer appears ON ALL LANDSCAPE SCREENS*/ #custom-9850-particle { height:27vh !important; } /*on Legal, make the spacer 20% of the full height of the screen, so that as the Legal text scrolls off-screen the footer appears ON ALL LANDSCAPE SCREENS*/ #custom-1765-particle /*the Legal spacer*/ { height:20vh !important; } /*footer SVG logo must be 1/5 (was 1/3) of screen width ON ALL LANDSCAPE SCREENS*/ /*#logo-6122-particle svg*/ #g-footer svg { width:20vw !important; } } /* ------------------------------------ */ /*ALL PORTRAIT SCREENS*/ @media all and (orientation: portrait) { /*make the first spacer (between SideA and SideB) 25WAS33% of the full height of the screen, so that as SideA scrolls off-screen SideB appears ON ALL PORTRAIT SCREENS*/ #custom-3793-particle, /*the homepage first spacer*/ #custom-1765-particle /*the Legal spacer*/ { height:25vh !important; } /*make the second spacer (between SideB and the footer) 20WAS25% of the full height of the screen, so that as SideB scrolls off-screen the footer appears ON ALL PORTRAIT SCREENS*/ #custom-9850-particle { height:20vh !important; } /*footer SVG logo must be 1/3 of screen width ON ALL PORTRAIT SCREENS*/ /*#logo-6122-particle svg*/ #g-footer svg { width:33vw !important; } } /* ------------------------------------ */ /*LARGER LANDSCAPE SCREENS*/ @media all and (min-width: 80rem) and (orientation: landscape) { /*label images must be 1/3 of screen width ON A LARGER LANDSCAPE SCREEN*/ #logo-4711-particle img, #logo-3151-particle img, NOTNEEDEDbody.outline-coplica_legal_page #post-17 /*the Legal text - it might work better with .entry instead of #post-17 */ { width:33vw; } } /* ------------------------------------ */ /*LARGER PORTRAIT SCREENS*/ @media all and (min-width: 80rem) and (orientation: portrait) { /*label images must be 1/3 of screen height ON A LARGER PORTRAIT SCREEN*/ #logo-4711-particle img, #logo-3151-particle img, body.outline-coplica_legal_page #post-17 /*the Legal text - it might work better with .entry instead of #post-17 */ { height:33vh; } } /* ------------------------------------ */ /*SMALLER LANDSCAPE SCREENS*/ @media all and (max-width: 79.999rem) and (orientation: landscape) { /*label images must be 85% of screen height ON A SMALLER LANDSCAPE SCREEN*/ #logo-4711-particle img, #logo-3151-particle img, body.outline-coplica_legal_page #post-17 /*the Legal text - it might work better with .entry instead of #post-17 */ { height:85vh; } } /* ------------------------------------ */ /*SMALLER PORTRAIT SCREENS*/ @media all and (max-width: 79.999rem) and (orientation: portrait) { /*label images must be 85% of screen width ON A SMALLER PORTRAIT SCREEN*/ #logo-4711-particle img, #logo-3151-particle img, body.outline-coplica_legal_page #post-17 /*the Legal text - it might work better with .entry instead of #post-17 */ { width:85vw; } } /* ------------------------------------ */ /* FAILED ATTEMPT TO FORCE LANDSCAPE MODE ON MOBILES*/ /* http://fuel-efficient-vehicles.org/pwsdb/?p=330 */ /* @media only screen and (orientation:portrait){ body { height: 100vw; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } } @media only screen and (orientation:landscape){ body { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } */ /* -----MEDIA QUERIES END----- */