:root { --site-width: 90ch; --site-lr-margin: 1rem; --site-header-height: 6rem; --site-breadcrumb-height: 2rem; --sitemenu-nav-height: 3rem; --card-size: 20ch; --text-color: #333333; --body-bg-color: #FFFFFF; --page-footer-color: #333333; --page-footer-link-color: #2A64A2; --page-footer-bg-color: #EFEFEF; --site-footer-color: #FFFFFF; --site-footer-link-color: #ADD8E6; --site-footer-bg-color: #3B3B3B; --text-shawdow-color: rgba(0, 0, 0, 0.004); --link-color: #337AB7; --hline-color: #EEEEEE; /* --category-contrast-color: #FFFFFF; */ --category-contrast-color: #000000; --header-menu-bg-color: rgb(240, 240, 240, 0.8); --header-menu-hover-bg-color: #E6E6E6; --header-menu-button-size: 3rem; --outline-color: #337AB7; --col-width: auto; --max-image-height: 60vh; --min-main-height: 60vh; } * { background: transparent; border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline; box-sizing: border-box; scroll-behavior: smooth; scroll-margin: var(--sitemenu-nav-height); } body { line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; color: var(--text-color); background-color: var(--body-bg-color); max-width: none; letter-spacing: 0.025rem; text-shadow: 0 0 1rem transparent, 1px 1px 1.2px var(--text-shawdow-color); overflow: visible; z-index: 0; } body > * { display: grid; grid-template-columns: [complete-start] minmax(var(--site-lr-margin), 1fr) [content-start] minmax(0px, var(--site-width)) [content-end] minmax(var(--site-lr-margin), 1fr) [complete-end]; /*column-gap: 3rem; padding-left: 3rem; padding-right: 3rem;*/ max-width: none; } body > * > * { grid-column: content } body > header a { min-height: calc( var(--site-header-height) - 1rem ); margin: 0.5rem; border-bottom: 0 solid transparent; margin-left: auto; margin-right: auto; padding: 0; display: flex; line-height: calc( var(--site-header-height) - 1rem ); text-align: center; font-size: 2rem; font-weight: 600; } body > header a span { display: inline-block; line-height: calc( var(--site-header-height) - 1rem ); text-align: center; color: var(--text-color); } body > header img { display: inline-block; height: calc(var(--site-header-height) - 1rem); } body > main { min-height: var(--min-main-height); } #sitemenu-container { top: -0.3rem; position: sticky; background-color: var(--body-bg-color); } #sitemenu-container nav { /*font-size: 0.875rem;*/ border-top: 0.3rem solid var(--hline-color); } #sitemenu-container nav > ul { width: 100%; display: flex; align-items: stretch; flex-wrap: nowrap; /*flex-wrap: wrap;*/ flex-direction: row; } #sitemenu-container nav > ul > li { list-style: none; display: block; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } #sitemenu-container nav > ul > li > a { width: 100%; height: 100%; display: flex; text-align: center; justify-content: center; align-items: center; min-height: var(--sitemenu-nav-height); /*border: 0.1rem solid var(--hline-color);*/ border-bottom: 0.3rem solid var(--category-color); color: var(--text-color); padding-left: 0.3rem; padding-right: 0.3rem; transition: all 0.2s; } #sitemenu-container nav > ul > li > a:focus, #sitemenu-container nav > ul > li > a:hover { color: var(--category-contrast-color); background-color: var(--category-color); } #sitemenu-container .show-header-menu { display: none; font-size: 1rem; font-style: normal; /*padding: 1rem;*/ background-color: var(--header-menu-bg-color); -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ cursor: pointer; position: fixed; top: 0; left: 0; z-index: 11; width: var(--header-menu-button-size); height: var(--header-menu-button-size); padding-top: calc(var(--header-menu-button-size) / 2 - 0.75rem); text-align: center; } #sitemenu-container .show-header-menu:focus, #sitemenu-container .show-header-menu:hover { background-color: var(--header-menu-hover-bg-color); /*border-bottom: 0.2rem solid #536;*/ } #sitemenu-container .show-header-menu-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(120,120, 120, 0.7); -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ cursor: pointer; z-index: 5; } #sitemenu-container input[type=checkbox] { display: none; } footer.page-footer { padding-top: 1rem; padding-bottom: 1rem; background-color: var(--page-footer-bg-color); color: var(--page-footer-color); } footer.page-footer a { color: var(--page-footer-link-color); } footer#site-footer { /*margin-top: 50vh;*/ padding-top: 1rem; padding-bottom: 1rem; background-color: var(--site-footer-bg-color); color: var(--site-footer-color); } footer#site-footer a { color: var(--site-footer-link-color); } nav.breadcrumb { color: var(--category-contrast-color); background-color: var(--category-color); line-height: var(--site-breadcrumb-height); margin-top: 0.5rem; } nav.breadcrumb ul li { display: inline-block; } nav.breadcrumb ul li::after { content: ' > '; white-space: pre-wrap; } nav.breadcrumb ul li:last-child::after { content: ''; display: none; } nav.breadcrumb a { color: var(--category-contrast-color); background-color: var(--category-color); padding-left: 0.5rem; padding-right: 0.5rem; } /* nav.breadcrumb a::before { content: ''; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.5em solid #fff; position: absolute; left: 0; top: 0; } nav.breadcrumb a::after { content: ''; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.5em solid #E7E9EB; position: absolute; right: -0.5em; top: 0; z-index: 1; } nav.breadcrumb ul li:first-child a::before { content: ''; display: none; } */ .globalsections { font-size: 0.7em; } a { color: var(--link-color); text-decoration: none; } a:focus, a:hover, a:focus *, a:hover * { text-decoration: underline; } a.external span::after { /* content: '↪'; */ /* content: '🡕'; */ content: '⤤'; /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20.092'%3E%3Cpath d='m12 0 2.561 2.537-6.975 6.976 2.828 2.828 6.988-6.988L20 7.927 19.998 0H12z'/%3E%3Cpath d='M9 4.092v-2H0v18h18v-9h-2v7H2v-14h7z'/%3E%3C/svg%3E"); background-repeat: no-repeat no-repeat; background-position: center center; background-size: cover;*/ } a.external[href^="mailto:"] span::after { content: ''; } a.external[href^="mailto:"] span::before { content: '📧'; } a.tag-link, footer.page-footer a.tag-link { border-radius: 0.5rem; padding-left: 0.3rem; padding-right: 0.3rem; color: var(--category-contrast-color); background-color: var(--category-color); display: inline-block; margin-left: 0.1rem; margin-top: 0.05rem; margin-bottom: 0.05rem; } hr { height: 0.25rem; margin: 0.6rem 0; background-color: var(--hline-color); border: 0; width: 100%; } sub { vertical-align: -25%; } sup { vertical-align: 50%; } .content .underline { text-decoration: underline; } .content .smallcaps { font-variant: small-caps; } .content iframe { width: 100%; min-height: var(--site-width); overflow: scroll; } .content p, .content blockquote, .content ul, .content ol, .content dl, .content table, .content pre { margin: 0.5em 0 0.5em 0; } .content dt { font-weight: bold; } .content dt::after { content: ': ' } .content dd { margin-left: 1em; margin-bottom: 0.1em; } .content ul, .content ol { padding-left: 2em; margin-top: 0em; } .content h1 { padding-bottom: 0.3em; font-size: 2em; border-bottom: 0.1em solid var(--hline-color); } .content h2 { padding-bottom: 0.3em; font-size: 1.5em; border-bottom: 0.1em solid var(--hline-color); } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin-top: 0.8em; margin-bottom: 0.5em; font-weight: 600; line-height: 1.25; } .content .codeinline, .content .codeblock { /*white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all;*/ overflow: scroll; } .content .codeinline { background-color: rgba(0, 0, 0, 0.04); color: inherit; padding: 0.1em 0.4em; } .content .codeblock { background-color: #272822; color: #f8f8f2; padding: 0.5em 1em; } .content blockquote { border-left: 0.25em solid #ddd; padding: 0 1em; color: #777; } .content img { /* width: 100%; */ max-width: 100%; max-height: var(--max-image-height); overflow: scroll; } .content table { width: 100%; display: block; border-collapse: collapse; border-spacing: 0; overflow: scroll; } .content table tr { width: 100%; background-color: #fff; border: 0.1em solid #ccc; } .content table tr:nth-child(2n) { background-color: #f8f8f8; } .content table th { font-weight: bold; text-align: left; } .content table th, .content table td { padding: 0.4em 0.9em; border: 0.1em solid #ddd; } .content table .has_recommended_width { width: var(--recommended_width); } .content table .align_left { text-align: start; } .content table .align_right { text-align: end; } .content table .align_center { text-align: center; } .content table .align_default { text-align: start; } ul.cards { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; flex-direction: row; padding: 0; } ul.cards li { display: inline-block; list-style: none; width: var(--card-size); height: var(--card-size); /* font-size: 125%; */ overflow-wrap: break-word; flex-grow: 1; flex-shrink: 1; /*flex-basis: 30%;*/ flex-basis: minmax(var(--card-size), 30%); } ul.cards li a { display: inline-block; width: calc(100% - 1.3rem ); height: calc(100% - 1.3rem ); /* padding: 0.5rem; */ transition: all 0.2s; /* padding: 1rem; */ /*width: var(--card-size); height: var(--card-size);*/ color: var(--category-contrast-color); background-color: var(--category-color); /* text-align: center; */ border: 0.2rem solid var(--category-color); line-height: 2rem; /* font-size: large; */ } ul.cards li a:focus, ul.cards li a:hover { background-color: var(--category-contrast-color); color: var(--category-color); } ul.cards li a span { display: inline-block; /*position: relative; top: 0.5rem; left: 0rem;*/ padding: 0rem 0.5rem; /*padding-top: 0.5rem; padding-left: 0.5rem;*/ } ul.cards li a.has-image { /* background-image: var(--card-image); */ background-origin: border-box; background-position: center; background-repeat: no-repeat; background-size: cover; background-blend-mode: normal; /* background-blend-mode: luminosity; */ /* background-blend-mode: overlay; */ /* background-blend-mode: multiply; */ } ul.cards li a.has-image:focus, ul.cards li a.has-image:hover { color: var(--category-contrast-color); background-color: var(--category-color); background-blend-mode: overlay; } ul.cards li a.has-image:focus span, ul.cards li a.has-image:hover span { /* border-radius: 0.3rem; */ /* font-weight: bold; */ } ul.cards li a.has-image span { background-color: var(--category-color); } .columns { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .column { /*width: auto;*/ width: var(--col-width); } .info, .success, .warning, .danger, .alert { padding:1em; margin-top: 0.4em; margin-bottom: 0.4em; border:0.1em solid transparent; border-radius:0.25em; /*padding:15px; margin-bottom:20px; border:1px solid transparent; border-radius:4px;*/ } .info a, .success a, .warning a, .danger a, .alert a{ text-decoration: underline; } .info a:focus, .success a:focus, .warning a:focus, .danger a:focus, .alert a:focus, .info a:hover, .success a:hover, .warning a:hover, .danger a:hover, .alert a:hover { background-color: var(--body-bg-color); } .info h4 { margin-top:0; color:inherit; } .success h4 { margin-top:0; color:inherit; } .warning h4 { margin-top:0; color:inherit; } .danger h4 { margin-top:0; color:inherit; } .alert h4 { margin-top:0; color:inherit; } .alert .alert-link { font-weight:700; } /* .alert > p, .alert > ul { margin-bottom:0; } .info > p, .info > ul { margin-bottom:0; } .success > p, .success > ul { margin-bottom:0; } .warning > p, .warning > ul { margin-bottom:0; } .danger > p, .danger > ul { margin-bottom:0; } .alert > p+p { margin-top:0.33em; } .info > p+p { margin-top:0.33em; } .success > p+p { margin-top:0.33em; } .warning > p+p { margin-top:0.33em; } .danger > p+p { margin-top:0.33em; } */ .alert-dismissable, .alert-dismissible { padding-right:2em; } .alert-dismissable .close,.alert-dismissible .close{ position:relative; top:-0.1em; right:-1.4em; color:inherit; } .success { color:#3c763d; background-color:#dff0d8; border-color:#d6e9c6; } .success hr { border-top-color:#c9e2b3; } .success .alert-link { color:#2b542c; } .info { color:#31708f; background-color:#d9edf7; border-color:#bce8f1; } .info hr { border-top-color:#a6e1ec; } .info .alert-link { color:#245269; } .warning { color:#8a6d3b; background-color:#fcf8e3; border-color:#faebcc; } .warning hr { border-top-color:#f7e1b5; } .warning .alert-link { color:#66512c; } .danger { color:#a94442; background-color:#f2dede; border-color:#ebccd1; } .danger hr { border-top-color:#e4b9c0; } .danger .alert-link { color:#843534; } [tabindex]:not([tabindex="-1"]):focus, a:focus, button:focus, input:focus, select:focus:focus, textarea:focus { outline-color: var(--outline-color); outline-offset: 0.125em; } [tabindex]:not([tabindex="-1"]), a, button, input, select, textarea { outline: transparent solid 2px; outline-offset: 0.25em; transition: outline-offset 0.2s linear 0s; } @keyframes makeopaque { from { opacity: 0%; } to { opacity: 100%; } } @keyframes slidein-lr { from { left: -100%; } to { left: 0%; } } @media only screen and (max-width: 94ch) { body > header { margin-left: var(--header-menu-button-size); } body > header a { justify-content: center; flex-wrap: wrap; } #sitemenu-container { margin-bottom: 0.2rem; font-size: 1.2rem; } #sitemenu-container nav { display: none; border-top: 0; position: fixed; top: var(--header-menu-button-size); left: 0; z-index: 10; width: 100%; animation-duration: 0.2s; animation-name: slidein-lr; } #sitemenu-container nav > ul { flex-direction: column; max-height: calc(100vh - var(--header-menu-button-size)); overflow: scroll; } #sitemenu-container nav > ul > li { width: 100%; /* background-color: var(--category-contrast-color); */ background-color: var(--body-bg-color); } #sitemenu-container .show-header-menu { display: inline-block; } #sitemenu-container a { width: 100%; /*! margin-top: 0.2rem; */ /* padding-bottom: 0.2rem;*/ box-sizing: border-box; display: block; line-height: 2rem; /* border-top: 0.1rem solid #333; */ } /*#sitemenu-container a:focus, #sitemenu-container a:hover { border-bottom: 0.1rem solid #536; }*/ #sitemenu-container input[type=checkbox]:checked ~ .show-header-menu-bg { display: block; animation-duration: 0.2s; animation-name: makeopaque; } #sitemenu-container input[type=checkbox]:checked ~ nav { display: block; } :root { --site-header-height: 3rem; /* --sitemenu-nav-height: 3rem; */ } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin-top: 0.2em; margin-bottom: 0.2em; } } .visuallyhidden { border: 0px none; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; }