/* ============== Set Color and style Variables ============== See separate file that explain this color palette Variables not supported by Internet Explorer v.11 (2013). In HTML, :root represents the element and is identical to the selector html, except that its specificity is higher. */ :root { --bodytext: #222; --body-a-link: #22d; /* = AAA-passed blue; or can be AAA-passed #22a; indigo */ --body-a-hover: #c00; /* = AAA-passed red; or #812 burgundy */ --body-a-visited: #80b; /* = AAA-passed purple; #306; standard purple */ --main-background: #fff; /* also breadcrumb background, nav link hover background color */ --main-box-shadow: rgba(0,0,0,0.2); --white: #fff; --a1: #62583C; --a2: #827A66; --a3: #715D29; --a4: #EEE3C6; --a5: #EEE9DB; --b1: #ACA97C; --b2: #828066; --b3: #615D19; --b4: #EEECC6; --b5: #EEEDDB; --c1: #AC917C; --c2: #827266; --c3: #714929; --c4: #EED8C6; --c5: #EEE4DB; --bannerpic: url(/guide/assets/images/triccali1100.jpg); --homelinkpic: url(/guide/assets/images/home2.png); --box-backgroundpic: url(/guide/assets/images/triccali300_eee4db.jpg); } /* ========set the variable: containing-element { --main-bg-color: brown; --a1: #62583C; } ========use the variable: element { background-color: var(--main-bg-color); color: var(--a1); } ====================== */ /* ================== Caligatum2 color scheme 3 rows (a, b, c) of 5 complementary colors: 1st 3 dark, last 2 light. ==> test for color contrasts: http://accessible-colors.com/ * colors used on taxon pages Primary Page Colors (brown to cream) * --a1: #62583C; = header text; h1, h3, h5; --a2: #827A66; = gray version of a1 BUT for text = not enough contrast on white; banner and primary nav border color --a3: #715D29; = dark brown, a bit olive; h2, h4, h6; breadcrumb; * --a4: #EEE3C6; = banner and primary nav background * --a5: #EEE9DB; = HTML background, Search input background Secondary Page Colors (olive analogs) * --b1: #ACA97C; = banner and primary nav border color; borders in main text areas = details box and #core border; --b2: #828066; = gray version of b1, but darker * --b3: #615D19; = moderate dark olive; secondary nav links; original theme color #716D29 was too light for text --b4: #EEECC6; = very pale yellow olive; * --b5: #EEEDDB; = very pale gray version (palest color); secondary nav Guide category page link; details summary text; Tertiary Page Colors (salmon analogs) = mainly used for ASIDE --c1: #AC917C; = dull salmon --c2: #827266; = gray version of c1 * --c3: #714929; = dark red-brown; aside box h3 --c4: #EED8C6; = pale salmon; aside box borders --c5: #EEE4DB; = very pale gray-salmon; aside box background background: #faf7ee; matches exactly the 0.7 transparency on top of #eee3c6; Miscellaneous: #22a = indigo #306 = standard purple #812 = light burgundy #b3d4fc = pale blue --------------------------*/ /* #pagefoot p:last-child::after { content: "

\2002 \007c \2002 MycoGuide Theme (Page Style): Caligatum

"; color: var(--a1); } HTML | == CSS \007c ; HTML     == CSS \00a0 but \2002 (en space) is what matches ----- */ /* p.copyright::after { content: " \2002 \007c \2002 MycoGuide Theme (Page Style): Caligatum"; } */ /* ============== Basics ============== */ /* Home link */ .stylehidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;} html { color: var(--bodytext); background: var(--a5); } main { box-shadow: 0 1px 0 var(--main-box-shadow); background: var(--main-background); border-bottom-left-radius: 2em; } h1, h3, h5, #mainhead p { color: var(--a1); } h2, h4, h6 { color: var(--a3); } /* ============== Link Colors ============== */ a, a:link { /* putting transition here affects all styles of links regardless of later styling */ color: var(--body-a-link); text-decoration: none; transition: all 0.3s ease; } /* http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html */ a:visited {color: var(--body-a-visited);} html body a:hover, html body a:focus, html body a:active {color: var(--body-a-hover) !important;} /* using html body will over-ride the a:link, a:visited styles below but #banner a will over-ride the hover color above. So added !important here. */ #core a:link, #core a:visited, #taxoncomps a:link, #taxoncomps a:visited, #taxoninfo a:link, #taxoninfo a:visited, #mainfoot p a:link, #mainfoot p a:visited, #pagefoot p a:link, #pagefoot p a:visited { text-decoration: none; padding-bottom: 1px; border-bottom: 1px dotted; }/*border color inherited, and the dotted focus box overlaps it. */ nav a:link, nav a:visited, nav strong, main footer a:link, main footer a:visited { color: var(--b3); } /* =========Breadcrumb, Banner Header, Site Menu ============== */ #breadcrumb { /* you are here navigation */ color: var(--a3); background: var(--main-background); /* while it is below the header nav */ } #banner a { color: var(--a1); } #banner { color: var(--a1); border-top: 1px solid var(--a2); background: var(--a4) var(--bannerpic) left top no-repeat; /* var(--a4) */ background-size: cover; background-position: center center; } #sitenav { border: 1px solid var(--a2); /* bottom border and right increased 1 px from li */ } #sitenav a { color: var(--a1); }/* be careful not to over-ride the hover color */ #sitenav li.isOpen a { color: var(--a1); background: var(--a5); } #sitenav li.isActive a { background: var(--main-background); } #sitenav li a:hover, /* hover replaced by animation below */ #sitenav li a:focus, #sitenav li a:active { background: var(--main-background); } #sitenav li.isOpen a:hover, #sitenav li.isOpen a:focus, #sitenav li.isOpen a:active { background: var(--main-background); } #sitenav li { border: 0 solid var(--a2); border-right-width: 1px; border-bottom-width: 1px; } /* previously had width: 21px; but with flex now has line-height: 26px; */ #sitenav .home a { /* height: 100%; fixed problem with 0 height of anchor */ /* padding changed in guide css; and the 100% now buggy but not needed */ /* for this image to work, the HTML needs the blank.gif in place */ background: var(--homelinkpic) 13px 6px; background-repeat: no-repeat; transition: none !important; } #sitenav .home a:hover { /* rgba(255,255,255,0.55) */ background: var(--main-background) var(--homelinkpic) 13px -23px; background-repeat: no-repeat; } /* ============== MAIN GALLERY ============== */ /* ============== MAIN HEADER ============== */ /* ============== #PAGESIDE1 ============== */ /* ======= Page Menu (page related navigation [#pageside1]) ======= */ #pageside1 nav ul:first-child { border-right: 1px solid var(--b1); } #pageside1 nav li.depth-1>a, #pageside1 nav li.depth-1>span { border: 1px solid var(--b1); border-width: 1px 0; background: var(--b5); } #pageside1 nav li:not(.depth-1) .isActive { border-bottom: 3px solid var(--b1); color: black; } #taxaside { border-right: 1px solid var(--b1); } #taxaside h3 { padding-left: 10px; border: 1px solid #ACA97C; border-width: 1px 0; background: var(--b5); } /* ============== Content Elements ============== */ #taxoncomps ol { border-bottom: 2px solid var(--b2); } /* expanding DETAILS element */ details summary { background-color: var(--b5); border-color: var(--b1); } /* uses h3 */ .pagecite { border-top: 1px solid var(--b1); } /* ============== #PAGESIDE2 ============== */ #pageside2 figcaption { color: var(--c3); } #pageside2 blockquote { border-color: var(--c4); } #pageside2 .box { border-top-left-radius: 1em; border-bottom-left-radius: 1em; box-shadow: 0 1px 0 rgba(0,0,0,0.2); border-color: var(--c4); background: var(--c5) var(--box-backgroundpic) left top no-repeat; } /* ============== page Footer ============== */ #pagefoot a:link, #pagefoot a:visited { color: var(--a1); } /* ============== Link Animation ============== */ /* source: https://www.creativebloq.com/inspiration/css-animation-examples/2 https://codepen.io/matchboxhero/pen/EwdmmP?editors=1100 The animation consists of positioning the ::after pseudo element to the bottom and then scaling it when the button is interacted with. */ /* :not(.home) :not(.isOpen) */ #sitenav li:not(.home) a { position: relative; overflow: hidden; z-index: 1; } #sitenav li:not(.home) a::before { content: ''; position: absolute; left: 0; top: 0; transform: scaleX(0); transform-origin: 100% 50%; width: 100%; height: 100%; background-color: var(--main-background); z-index: -1; transition: transform 250ms; } #sitenav li:not(.home) a:hover::before { transform: scaleX(1); } /* source: https://www.creativebloq.com/inspiration/css-animation-examples/2 https://codepen.io/matchboxhero/pen/VMEWrq?editors=1100 The animation consists of positioning the ::after pseudo element to the bottom and then scaling it when the button is interacted with. */ main nav a::before, main nav a::after { box-sizing: border-box; } main nav a { position: relative; } main nav a::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scaleX(0); transform-origin: 100%; width: 100%; height: 1px; background-color: var(--b1); /* line color */ transition: transform 250ms; } main nav a:hover::after { transform: translateX(-50%) scaleX(1); } /* ============== Media queries ============== */ @media only screen and (max-width: 29.99em) { nav#primary li.isOpen a { background-color: #fafaf0 !important; /* over-ride the following color css file */ } nav#primary li.isActive a { background: #fff !important; } } @media screen and (min-width: 30em) { /* make number match #3 CSS file */ header input[type="search"] { background: var(--a5); } nav#primary { background: var(--a4); } }