/* Theme Name: Anders Drahes Gård Description: theme based on The HTML5 Reset Theme Author: Mads Find Author URI: http://madsfind.dk Version: 1 */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug ***/ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* THEME -------------------------------------------------------------------------------*/ :root { /*colors*/ --background: #f3f3f2; --backgroundDark: #e7e7e6; --company: #163353; --companyLight: #8ab0c1; --companyDark: #0b1b30; --accent: #a85e3d; --accentDark: #6d351f; /*background positions*/ --leftPosition: calc(16.666% - 69px); --rightPosition: calc(83.334% + 69px); } A {text-decoration: none;} H1, H2, H3, H4, H5 {font-weight: bold;} H1, H2, H3, H4, H5 {margin: 2em 0 1em 0;} H5 {font-size: 1.1em;} H4 {font-size: 1.2em;} H3 {font-size: 1.4em;} H2 {font-size: 1.6em;} H1 {font-size: 1.8em;} body, select, input, textarea {color: #000;} a {color: var(--accent);} a:hover {color: black;} /* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */ ::-moz-selection{background: #bacfdd; color: #fff; text-shadow: none;} ::selection {background: #bacfdd; color: #fff; text-shadow: none;} /* j.mp/webkit-tap-highlight-color */ a:link {-webkit-tap-highlight-color: #bacfdd;} ins {background-color: #fcd700; color: #000; text-decoration: none;} mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;} img#wpstats{width:0px;height:0px;overflow:hidden; position: absolute;} HTML{ background-color: var(--background); } BODY { margin: 0 auto; padding: 0; font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans","Tahoma",sans-serif; background: url("gfx/BG.png") var(--rightPosition) top repeat-y, url("gfx/BG.png") var(--leftPosition) top repeat-y; } #site { min-height: 100vh; /* grid container settings */ display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header header" "sidebar main main . " "footer footer footer footer"; } .home #site { grid-template-areas: "header header header header" "main main main main" "footer footer footer footer"; } HEADER#header { grid-area: header; position: relative; grid-area: header; background: url("gfx/BG_t.png") calc(var(--leftPosition) - 18px) top no-repeat, url("gfx/BG_t.png") calc(var(--rightPosition) + 16.5px) top no-repeat; height: 10rem; } .page HEADER#header { height: 8rem; } HEADER#header H1 { margin: 0 auto; display: block; width: 23rem; height: 10rem; position: relative; z-index: 2; } .page HEADER#header H1 { height: 6rem; width: 18.5rem; margin-left: calc(var(--leftPosition) - 4.75rem); float: left; } .page HEADER#header P { font-size: .85em; position: relative; left: -2rem; text-align: left; } HEADER#header H1 A { display: block; height: 100%; overflow: hidden; text-indent: -300em; background: url("gfx/AnderDraghesGaard_Logo.svg") top center; background-repeat: no-repeat; background-size: contain; margin: 0 auto; } HEADER#header .payoff { padding: 2rem 0; text-align: center; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.09em; color: var(--company); } #content { grid-area: main; } #content MENU { display: flex; gap: 5%; padding: 3rem 2.5% 0 3rem; justify-content: space-around; margin: 0 auto; max-width: 1620px; } #content MENU.topmenu { margin-top: 3rem; } .topmenu A { display: block; flex-basis: 23.3333%; flex-grow: 1; text-align: center; outline: .4rem solid var(--companyLight); border: .4rem solid #fff; padding: 10rem 1rem 2rem 1rem; color: var(--background); max-width: 26rem; background-color: var(--company); background-position: top center; background-size: auto 10rem; background-repeat: no-repeat; font-size: 1.1rem; transition: all 280ms ease-in-out; } .topmenu A.lokaler {background-image: url("gfx/f_adg.jpg")} .topmenu A.booking {background-image: url("gfx/f_calendar.jpg")} .topmenu A.medlem {background-image: url("gfx/f_hands.jpg")} .topmenu A P { line-height: 1.4em; } .topmenu A H2 { margin: 0 0 1.5rem 0; padding: 1rem 0 1.5rem 0; text-transform: uppercase; letter-spacing: 0.09em; border-bottom: .3rem solid var(--accent); font-size: 1.4rem; transition: all 280ms ease-in-out; } .topmenu A:hover { background-color: var(--companyDark); outline-color: var(--company); } MENU A:hover H2 { letter-spacing: 0.12em; } .submenu A { display: inline-block; background-color: var(--accent); color: var(--background); text-transform: uppercase; letter-spacing: 0.09em; padding: 1rem; margin: 1rem 0 3rem 0; transition: all 280ms ease-in-out; } .submenu A:hover { background-color: var(--accentDark); } .submenu A H2 { font-size: 1.4rem; margin: 0; transition: all 280ms ease-in-out; } ASIDE.subnav { grid-area: sidebar; text-align: center; padding-top: 4.5rem; padding-right: 3%; padding-left: 37%; } ASIDE.subnav A { display: block; padding: .5rem; border-radius: 1rem; background: var(--accent); color: var(--background); transition: all 280ms ease-in-out; margin: 0 auto 1rem auto; max-width: 208px; } .subnav A:hover { background-color: var(--accentDark); } ASIDE.subnav A.back { position: relative; } ASIDE.subnav A.back:before { content: ""; display: block; height: 100%; width: auto; background: var(--accentDark); position: absolute; left: 0; top: 0; transform: rotate(45deg); } .page #content ARTICLE { margin: 0 auto; padding: 0 2rem 4rem 2rem; color: var(--company); font-size: 1.08rem; line-height: 1.4em; font-weight: normal; max-width: 800px; } .page #content ARTICLE P { margin: 1.5em auto 1em auto; } #content ARTICLE LI{ margin: 1.5em 0 1em 0; } #content ARTICLE UL LI { list-style-type: circle; } #content ARTICLE OL LI { list-style-type:decimal ; } .page #content ARTICLE H1 { text-align: center; text-transform: uppercase; margin-top: 0; margin-bottom: 3rem; letter-spacing: 0.09em; } .wp-block-gallery { margin-top: 3rem; justify-content: center; } .wp-block-image{ padding: .7rem; } .wp-block-image IMG, .fancybox-image { outline: .4rem solid var(--companyLight); border: .4rem solid #fff !important; transition: all 280ms ease-in-out; } .wp-block-image IMG:hover { outline-color: var(--company); } FOOTER#footer { grid-area: footer; background: url("gfx/BG_b.png") var(--rightPosition) top no-repeat, url("gfx/BG_b.png") var(--leftPosition) top no-repeat; background-color: var(--company); text-align: center; text-transform: uppercase; font-size: 0.85em; letter-spacing: .09em; color: var(--background); padding-bottom: 3rem; } #footer:before { content: ""; display: block; height: 3.5rem; border-bottom: .75rem solid #2a4c6b; margin-bottom: 2rem; } INPUT[type=text], INPUT[type=email], INPUT[type=password]{ } INPUT[type=submit] { } LABEL { } IMG.alignleft { float: left; } IMG.alignright { float: right; } .entry-content {} .entry-content a {} .entry-content a:hover {} #meta {} .postmetadata {} #sidebar {} .navgation {} .next-posts {} .prev-posts {} #searchform {} #s {} #searchsubmt {} /* Print styles! -------------------------------------------------------------------------------*/ @media print { } /* Media queries! -------------------------------------------------------------------------------*/ /* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (min-width: 360px) { } @media screen and (min-width: 767px) { } @media all and (orientation: portrait) { } @media all and (orientation: landscape) { }