/*
* @import url('https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible|Roboto+Mono|Roboto+Slab|Ubuntu|Lora|Lato');*/
@font-face{font-family:'Roboto';src:local('Roboto'),url('/fonts/roboto-regular.woff2'),url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');};
@font-face{font-family:'Fantasque Sans Mono';src:local('Fantasque Sans Mono'),url('/fonts/fantasquesansmono.woff2');}
@font-face{font-family:'Bahnschrift';src:local('Bahnschrift'),url('/fonts/bahnschrift.woff2');}
@font-face{font-family:'Inter';src:local('Inter'),url('/fonts/inter.woff2');}
@font-face{font-family:'Roboto Mono';src:local('Roboto Mono'),url('/fonts/robotomono.woff2');}
@font-face{font-family:'Roboto Slab';src:local('Roboto Slab'),url('/fonts/robotoslab.woff2');}
@font-face{font-family:'Ubuntu';src:local('Ubuntu'),url('/fonts/ubuntu.woff2');}
@font-face{font-family:'Lora';src:local('Lora'),url('/fonts/lora.woff2');}
/*@font-face{font-family:'Alegreya'; src:local('Alegreya'),url(/fonts/Alegreya/Alegreya-Regular.ttf); }*/
/*
* ┌────────────────────────────┐
* │ OTHER FONTS │
* └────────────────────────────┘
@font-face{font-family:Roboto;src:url(/fonts/roboto-regular.woff2)}
@font-face{font-family:Atkinson Hyperlegible;src:url(/fonts/atkinsonhyperlegible.woff2)}
@font-face{font-family:Cabin;src:url(/fonts/cabin.woff2)}
@font-face{font-family:BBC Reith Sans;src:url(/fonts/bbcreithsans.woff2)}
@font-face{font-family:BBC Reith Sans Light;src:url(/fonts/bbcreithsanslight.woff2)}
@font-face{font-family:Inter;src:url(/fonts/inter.woff2)}
@font-face{font-family:GDS Transport;src:url(/fonts/gdstransport.woff2)}
@font-face{font-family:Lato;src:url(/fonts/lato.woff2)}
@font-face{font-family:Raleway;src:url(/fonts/raleway.woff2)}
@font-face{font-family:Source Sans Pro;src:url(/fonts/sourcesanspro.woff2)}
@font-face{font-family:Ubuntu;src:url(/fonts/ubuntu.woff2)}
@font-face{font-family:Noto Sans;src:url(/fonts/notosans.woff2)}
@font-face{font-family:Open Sans;src:url(/fonts/opensans.woff2)}
@font-face{font-family:Montserrat;src:url(/fonts/montserrat.woff2)}
@font-face{font-family:Alegreya Sans;src:url(/fonts/alegreyasans.woff2)}
@font-face{font-family:Poiret One;src:url(/fonts/poiretone.woff2)}
@font-face{font-family:Roboto Condensed;src:url(/fonts/robotocondensed.woff2)}
@font-face{font-family:Bahnschrift;src:url(/fonts/bahnschrift.woff2)}
@font-face{font-family:GDS Transport Bold;src:url(/fonts/gdstransportbold.woff2)}
@font-face{font-family:Lora;src:url(/fonts/lora.woff2)}
@font-face{font-family:Crimson Text;src:url(/fonts/crimsontext.woff2)}
@font-face{font-family:Source Serif Pro;src:url(/fonts/sourceserifpro.woff2)}
@font-face{font-family:Cheltenham;src:url(/fonts/cheltenham.woff2)}
@font-face{font-family:BBC Reith Serif;src:url(/fonts/bbcreithserif.woff2)}
@font-face{font-family:BBC Reith Serif Light;src:url(/fonts/bbcreithseriflight.woff2)}
@font-face{font-family:Alegreya;src:url(/fonts/alegreya.woff2)}
@font-face{font-family:Roboto Slab;src:url(/fonts/robotoslab.woff2)}
@font-face{font-family:Arvo;src:url(/fonts/arvo.woff2)}
@font-face{font-family:Droid Serif;src:url(/fonts/droidserif.woff2)}
@font-face{font-family:Noto Serif;src:url(/fonts/notoserif.woff2)}
@font-face{font-family:Cormorant;src:url(/fonts/cormorant.woff2)}
@font-face{font-family:Fantasque Sans Mono;src:url(/fonts/fantasquesansmono.woff2)}
@font-face{font-family:Ubuntu Mono;src:url(/fonts/ubuntumono.woff2)}
@font-face{font-family:Roboto Mono;src:url(/fonts/robotomono.woff2)}
@font-face{font-family:Inconsolata;src:url(/fonts/inconsolata.woff2)}
@font-face{font-family:Anonymous Pro;src:url(/fonts/anonymouspro.woff2)}
@font-face{font-family:Encode Sans;src:url(/fonts/encodesans.woff2)}
@font-face{font-family:IBM Plex Mono;src:url(/fonts/ibmplexmono.woff2)}
@font-face{font-family:Special Elite;src:url(/fonts/specialelite.woff2)}
@font-face{font-family:Jetbrains Mono;src:url(/fonts/jetbrainsmono.woff2)}
@font-face{font-family:Oxygen Mono;src:url(/fonts/oxygen-mono.woff2)}
*/
body{
font-family:'Roboto',/*'Atkinson Hyperlegible','Ubuntu',*/sans-serif;
}
h1,h2,h3,h4,h5,h6{font-family:'Roboto Slab',sans-serif;text-wrap:balance;}
.fant,.fant *{font-family:'Fantasque Sans Mono',monospace}
.sans{font-family:'Roboto',sans-serif;}
.serif{font-family:'Lora',serif;}
.mono{font-family:'Roboto Mono',monospace;}
.poem{font-family:'Lora',serif;}
main{padding-bottom:40vh;}
@media print{
main{padding-bottom:0;}
}
/*
* ==================== HOLYGRAIL ====================
*/
body.holygrail {
margin:0;padding:0;
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 8em 1fr 8em; /*200px 1fr 200px;*/
grid-template-rows: auto 1fr auto;
grid-gap: 1vh;
height: 98vh;
padding:1vh;
/*--aj: --*/
max-width:60rem;
left:0;right:0;margin:auto;
}
.holygrail{
& header { grid-area: header; }
& nav { grid-area: nav; }
& main { grid-area: main; }
& aside { grid-area: aside; }
& footer { grid-area: footer; }
& :is(header,nav,main,aside,footer){
padding:0.5vh;
background:white;
}
& :is(header,nav,aside,footer){
padding:0.2em 0.5em;
}
& :is(header,footer){
max-height:2em;
text-align:left;
margin:0;
}
& :is(header,footer) p{
margin:0;
}
& header{
border-bottom:1px solid #888;
}
& footer{
border-top:1px solid #888;
}
& nav{
border-right:1px solid #888;
}
& aside{
border-left:1px solid #888;
}
}
/*
* ==================== MEDIA ====================
*/
@page{
size:A4 portrait;
/* NB: works only if PRINT DIALOG MARGINS are set to DEFAULT for this to work!!! : */
/* margin: 20mm 30mm;*/
margin: 10mm 15mm;
orphans:4;
widows:2;
}
@media print{
.noprint,[noprint]{display:none !important;}
body.holygrail header,
body.holygrail nav,
body.holygrail aside,
body.holygrail footer{
display:none;
}
body.holygrail main{
width:210mm;
max-width:100%;
margin:0;
padding:0;
border:0px solid red;
}
}
@media (max-width: 768px) {
.holygrail {
grid-template-areas:
"header" "nav" "main" "aside" "footer";
grid-template-columns: 1fr;
grid-template-rows: auto /* Header */
minmax(75px, auto) /* Nav */
1fr /* Content */
minmax(75px, auto) /* Sidebar */
auto; /* Footer */
}
.holygrail nav, .holygrail aside {
margin: 0;
}
}
/*
* ==================== SIMPLE ====================
*/
.nobreak,[nobreak]{
page-break-inside:avoid;
}
/*
* ==================== SIMPLE ====================
*/
body.simple{
margin:0;
padding:5px;
/* padding:2vh;*/
max-width:200mm;/*60rem;*/
/*left:0;right:0;*/
margin:auto;
& :is(header,nav,aside,footer){
border-bottom:1px solid gainsboro;
padding:1vh;
}
& footer{
border-bottom:none;
}
& :is(header,footer) p{
padding:0;
margin:0;
max-height:1.5em;
position:relative;
}
& header span{
display:inline-block;
position:absolute;
left:30%;
top:0;
width:40%;
text-align:center;
}
}
/*
* ==================== SIMPLE ====================
*/
body.sheet{
margin:0;padding:0;
padding:0vh;
left:0;right:0;margin:auto;
}
ul.sheet{
list-style-type:none;
margin-left:0;padding-left:0;
& li{
margin-left:0;padding-left:0;
}
}
/*
* ==================== ELSE ====================
*/
ul.inline
{
display:inline;
margin:0;padding:1vh;
&>li{ display:inline; }
&>li:before{
content:'\25cf';
color:grey;
padding-right:0.2em;
}
}
/*
* in order to use bigger fonts (ie heading size) within lists:
*/
li :is(h1,h2,h3,h4,h5,h6),
:is(h1,h2,h3,h4,h5,h6).narrow{
margin:0;padding:0;
}
/*
* ==================== LINKS ====================
*/
body.links{
margin:0;padding:0;
padding:0vh;
max-width:60rem;
left:0;right:0;margin:auto;
height:100vh;
background-image:none;
height:100vh;
background-position:center;
background-repeat:repeat-y;/*no-repeat;*/
background-size:cover;
text-align:left;
font-family:sans-serif;
}
.links{
& :is(header,nav,main,aside,footer){
padding:1vh;
}
& header p, & footer p{
padding:0;
margin:0;h
max-height:1.5em;
}
& nav ul, .links aside ul{
display:inline;
margin:0;padding:1vh;
}
& nav li, & aside li{
display:inline;
}
& nav li:before, .links aside li:before{
content:'\25cf';
color:grey;
padding-right:0.2em;
}
}
/*
* ==================== SECTION ====================
*/
section{
border-top:1px dashed grey;
border-bottom:1px dashed grey;
border:2px dotted grey;
padding:0.5rem;
margin:0 0 9px;
border-radius:20px;
page-break-inside:avoid;
& img{max-width:100%;}
}
/*┌────────────────────────────┐
│ BOX │
└────────────────────────────┘*/
.box,[box]{
padding:0.5em;
margin:0.5em;
display:inline-block;
width:17em;
border:2px solid #ccc;
border-radius:0.5em;
vertical-align:top;
background:#ffffff;
text-align:left;
/* headings etc. inside should have no top margin: */
&>*{
margin-top:0;
}
& ul{
margin:0 0 0 1em;padding:0;
}
}
/* -------------------- end: box --------------------*/
/*┌────────────────────────────┐
│ LINKS │
└────────────────────────────┘*/
.links{
& main{
background:white;
border:0px solid #ccc;
border-radius:0.3em;
margin:1vh;
padding:0.2vh;
}
& h2{
margin:0 auto 0 1rem;
}
& footer{
font-size:0.8em;
color:grey;
}
}
/* -------------------- end: links --------------------*/
a:focus{
background:black;
color:red;
border-color:red
}
li a.internal{
background:navajowhite;
}
.news{
background:#bb1919;color:white;
}
.sport{
background:#ffd230;color:black;
}
.nhs{
background:#005eb8;color:white;padding:0 0.5em;
}
.clinical{
background:#bb1919;color:white;padding:0 0.5em;
}
.google{
/*background:#fefefe;border:2px solid grey;*/
background:white;
}
.kds{
background:#32cd32;
}
.shop{
background:#d3b58d;
}
/*
* ==================== OUTLINE ====================
*/
ul.outline{
display:inline;
text-indent:0;
margin:0;
padding:0;
list-style-type:none;
& li{
display:inline;
margin:0 0 0 0.2em;
}
& li:before
{
content:"\25cf";
color:black;
margin-right:0.2em;
}
}
@media print{
div#top{display:none;}
}
/*
* ==================== TOC ====================
*/
/* div.toc */
body.toc{
/* body.toc H1/H2s: */
& h1{
background:#c3c3ff;
border-right:0px solid #3333ff;
}
& h2{
background:#afeded;
border-right:0px solid #26a6a6;
clear:left;
}
& span.char-count{
user-select:none;
font-size:0.8rem;background:wheat;
vertical-align:top;
padding:0 0.3rem 0 0.6rem;
border-radius:0.5em 0.5em 0.5em 0;
}
& div.toc{
& ul{
list-style-type:none;
& li{
display:inline-block;
background:#e0f2e1;
padding:0.2em 0.5em;
margin:0.1em;
border-radius:0 1em 0 0;
&.H1{
background:#c3c3ff;
}
&.H2{
background:#afeded;
}
}
}
& :is(a,a:visited){
color:black;
text-decoration:none;
}
& img{
/*max-width:1em;max-height:1em;*/
/*width:auto;height:auto;*/
width:1em;height:1em;object-fit:contain;
border:3px solid #f00;
vertical-align:middle;
}
}
}
@media print{
body.toc span.char-count{display:none}
}
/*
* ==================== NAV ====================
*/
ul.nav{
display:inline;
text-indent:0;
margin:0;
padding:0;
list-style-type:none;
& li{
display:inline;
margin:0 0 0 0.2em;
}
& :is(li,header) a{
background:whitesmoke;
text-decoration:none;
padding:0.2em 0.5em;
color:#000;
font-size:0.8em;
}
}
/*
┌────────────────────────────┐
│ EXPANDING CHECKBOX │
└────────────────────────────┘
*/
:root{
--checkbox-width:25px;
--checkbox-border-width:3px;
--checkbox-border-clr:#888;
}
input[type='checkbox'][expand]{
position: relative;
cursor: pointer;
margin:0 20px 20px 4px;
/*margin-bottom:20px;
margin-right:20px;*/
vertical-align:top;
&:before {
content: "";
display: block;
width:var(--checkbox-width);
height:var(--checkbox-width);
position: absolute;
top: 0;
left: 0;
border: var(--checkbox-border-width) solid var(--checkbox-border-clr);
border-radius: 3px;
background-color: #fff;/*#2196f3;*/
}
&:after{
content: "";
display: block;
width: 10px;
height: 10px;
border: solid var(--checkbox-border-clr);
position: absolute;
top: calc(var(--checkbox-border-width) + 6px);
left: calc(var(--checkbox-border-width) + 6px);
transform: rotate(45deg);
border-width: 0 0 var(--checkbox-border-width) var(--checkbox-border-width);
}
&:checked:after {
border-width: var(--checkbox-border-width) var(--checkbox-border-width) 0 0;
}
&+*{
/* excellent: overlapping order seem right to left! */
box-shadow:-4px 0 0 0 white,-8px 0 0 0 gainsboro;
}
&:is(.small,[small]){
margin:0 4px 4px 4px;
&:before {
width:12px;
height:12px;
border:2px solid var(--checkbox-border-clr);
border-radius:2px;
}
&:after {
width:6px;
height:6px;
top: 4px;
left: 4px;
border-width: 0 0 2px 2px;
}
&:checked:after {
border-width: 2px 2px 0 0;
}
}
}
/*
* was:
* input[type='checkbox'][expand]:checked+*{
display:none;
}*/
/*
EXCELLENT 2023-03-11
collapse all elements following input[type='checkbox'][checked]
but exclude if heading before is targeted "(:not(:target)+"
or if target is inside the to-be-collapsed element ":not(:has(:target))"
*/
:not(:target)+input[type='checkbox'][expand]:checked+*:not(:has(:target)){
display:none;
}
/* 2023-03-09: highlight target elements: */
:is(h1,h2,h3,h4,h5,h6):target{color:#c00;}
/* 2023-03-09: mark forced expand with red: */
:target+input[type='checkbox'][expand]::after{border-color:#c33;}
/*
* ==================== TABBED ====================
*/
/* see: http://code.iamkate.com/html-and-css/tabbed-panels/ */
/* We start by hiding the radio buttons: */
div.tabbed{
padding:5px 10px 10px;
background:whitesmoke;
margin-bottom:1rem;
float: left;
width: 98%;
display:block;
&>input[type=radio]{
display: none;
/* We then hide the content of any panel whose radio button is not checked: */
&:not(:checked) + div > div{
display: none;
}
}
/* We then display the tab labels in a row by floating them: */
&>div{
&>h3{
float: left;
box-sizing: border-box;
margin: 0;
padding: 0.5em 0.5em 0;
overflow: hidden;
font-weight: normal;
/* At this point the row of tab labels is interrupted by the content */
/*of the selected panel.*/
/*We prevent this by floating the content to the right, with a*/
/*negative left margin to prevent it affecting the layout and*/
/*a top margin to position it below the labels. Note that the required*/
/*top margin depends on the styling of the tab labels. The value of 2.5ems*/
/*used here is based on a line-height of 1.5 combined with the tab styling*/
/*described below.*/
&>div{
float: right;
width: 100%;
margin: 40px 0 0 -100%;
box-sizing: border-box;
padding: 0.5em 0.75em;
border: 0px solid #ddd;
border-top:none;
border-radius: 4px;
background: #fff;
}
/*Finally, we change the mouse pointer to indicate that tabs can be clicked, and prevent accidental selection of the tab text:*/
&>label{
cursor: pointer;
user-select: none;
display: block;
padding: 0.25em 0.75em;
border: 0px solid #ddd;
border-bottom: none;
border-radius: 8px 8px 0 0;
background:gainsboro;
font-weight:normal;
}
}
}
/* We then indent the first tab so that it is not too close to the edge: */
& > input:first-child + div > h3{
padding-left: 1em;
}
& > div > div{
position: relative;
z-index: 1;
}
/* Finally, we stack the elements so that the selected tab appears above the panel content, which in turn appears above the other unselected tabs: */
& > input:checked + div > h3{
position: relative;
z-index: 2;
}
&>input:checked+div>h3>label{
background:white;
font-weight:bold;
}
}
/*
* ==================== EXPAND ====================
*/
div.expand{
display:none;
&:target{
display: block;
border:1px dashed grey;
padding:1rem;
margin-left:1rem;
border-radius:9px;
}
}
ul.tab{
display:inline;
text-indent:0;
margin:0;
padding:0;
list-style-type:none;
& li{
display:inline;
margin:0 0 0 0.2em;
border:2px solid grey;
border-bottom:none;
padding:4px 4px 0;
border-radius:4px 4px 0 0;
font-size:1.5rem;
& a{
text-decoration:none;
}
&:last-of-type{
border:none;
color:grey;
}
}
&>li>a:focus{background:whitesmoke;}
}
/*
* ==================== HORIZONTAL ====================
*/
ul.horizontal{
margin:0;
padding:0 0 0 1rem;
& li{
display:inline-block;
/*background:white;*/
}
& li{
& a{
display:inline-block;
text-decoration:none;
background:white;
/*color:blue;*/
padding:0.5em ;
margin:0em 0.3em 0.2em 0.1em;
border:1px solid grey;
border-radius:0.5em;
&:is(:hover,:focus){
background:black;
color:white;
}
}
}
/*&.www li a{ border-style:dotted; } & li a.pdf{ color:red; }*/
}
/*
* ==================== TILES ====================
*/
@media print{
ul.tiles{display:none;}
}
ul.tiles{
--tile-size: 6rem;
display:grid;
grid-template-columns: repeat(auto-fill,var(--tile-size));
grid-template-rows: repeat(auto-fill,var(--tile-size));
grid-gap:0.4rem;
margin:0 1rem;
padding:0.2rem;
/*background:#fefefe;*/
list-style:none;
&>li{
height:5.8rem;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:0;
overflow:hidden;
/*background:white;*/
&>a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
line-height:1; /* 2024-07-29 */
height:5.6rem;
width:5.6rem;
text-decoration:none;
color:black;
font-weight:bold;
border:2px solid grey;
border-radius:0.5em;
background:white;
box-sizing:border-box;
&:is([href^="http"],[href^="ftp"]){
border-style:dashed;border-color:#ccc;
}
&:is(:hover,:focus){
background:grey;
color:white !important;
border-color:red;
}
&[target="_blank"]{
border-color:dodgerblue;
}
&>img{
height:3rem;
width:3rem;
}
&.priv{
border-style:dotted;
}
}
}
}
/*
* ==================== SINGLE TILE ====================
*/
:is(a,p).tile{
display:table-cell;
height:5.6rem;
width:5.6rem;
padding:0.5rem;
margin:0.5rem;
vertical-align:middle;
text-align:center;
text-decoration:none;
color:black;
font-weight:bold;
border:2px solid grey;
border-radius:0.5em;
}
a.tile:is(:hover,:focus){
background:black;
color:white;
border-color:red;
}
/* excellent: certain styling for all same level INTERNAL links, i.e.
* (EXCLUDING within "ul.tiles" or "ul.horizontal")
* NOT CONTAINING any "/" or "#" in the http field:
* or if mentioned explicitely as class="pg"
*/
a.pg,
ul:not(.tiles):not(.horizontal):not(.nav)>
li a_old[href]:not([href*="/"]):not([href^="#"]):not([href^="mailto:"]):not([class])
{
font-weight:bold;
background:lightblue;
padding-left:5px;
padding-right:5px;
border-radius:8px 8px 4px 4px;
border:2px solid blue;
text-decoration:none;
line-height:1.4em;/* = excellent: allows line spacing so they don't overlap */
&>img,a.pg>img{
background:white;border:1px solid silver;
}
}
/* link within same page: */
a_old[href^="#"]:not([href^="#top"]){
color:midnightblue;
font-weight:bold;
background:aliceblue;
border:1px dashed midnightblue;
padding-left:5px;
padding-right:5px;
border-radius:8px 8px 4px 4px;
text-decoration:none;
line-height:1.4em;
}
/* link to other server directory: different color */
ul.tiles li a[href^="/"]{
/*border-color:royalblue;*/
/*border-style:dotted;*/
color:mediumblue;
}
/*
ul.tiles>li>a[href],
ul.horizontal>li>a[href]:not([href*="/"]):not([href^="#"]):not([href^="mailto:"]):not([class]){
background:white;
border-width:3px;
border-radius:8px;
border-color:grey;
}*/
/*
* ==================== AUTOGRID ====================
*/
ul.autogrid{
--auto-grid-min-size: 10rem;
display:grid;
grid-template-columns: repeat(auto-fill,
minmax(var(--auto-grid-min-size),1fr));
grid-gap:0.3rem;
margin:0 1rem;
padding:0.2rem 0;
&>li{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
vertical-align:middle;
padding:0;
border:2px solid grey;
border-radius:0.5em;
background:white;
}
}
/*
* ==================== COL ====================
*/
:is(ul,div).col{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap:0.8rem;
padding:0.3rem;
margin:0.3rem;
list-style-type:none;
}
ul.col>li, div.col>*{
/*display:flex;*/
margin:0;
align-items:start;
justify-content:start;
/*text-align:center;*/
vertical-align:top;
/*padding:0.5em;*/
/*border:1px solid lightgrey;*/
/*border-radius:0.5em;*/
background:white;
}
/*
* ==================== CLM ====================
*/
ul.clm, div.clm{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap:0.8rem;
padding:0.3rem;
margin:0.3rem;
/*margin:0 1rem;*/
/*padding:0.2rem 0;*/
list-style-type:none;
}
@media (max-width: 768px){
ul.clm{
grid-template-columns: 1fr;
grid-template-rows:auto;
}
}
ul.clm > li{
/*display:flex;*/
margin:0;
align-items:start;
justify-content:start;
/*text-align:center;*/
vertical-align:top;
/*padding:0.5em;*/
/*border:1px solid lightgrey;*/
/*border-radius:0.5em;*/
background:white;
}
/*
* ==================== COLUMN2 ====================
*/
ul.column2{
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:0.3rem;
margin:0 1rem;
padding:0.5rem;
&>li{
display:flex;
flex-direction:column;
align-items:top;
justify-content:top;
text-align:left;
vertical-align:middle;
padding:0;
border:0px solid grey;
border-radius:0.1em;
background:white;
}
&:is(h2,h3,h4){
margin:0 0.2em;padding:0;text-align:left;
}
}
/*
* ==================== article ====================
*/
/* conversion: em = px ÷ px root = px ÷ 16 */
h1{font-size:2.25em /* 36px */;}
h2{font-size:1.6875em /* 27px */;}
h3{font-size:1.50em /* 24px */;}
h4{font-size:1.3125em /* 21px */;}
h5{font-size:1.25em /* 20px */;}
h6{font-size:1.125em /* 18px */;}
h1,h2,h3,h4,h5,h6{margin-block:0.25em /* 4px */;}
p[pp],div[pp] p{margin:0;}
/* NB: can't apply any padding-left or margin-left headings: because
* if followed by it puts
* the content over two lines!?!
*
* h4{margin-left:0.25em /* 4px */;}
/* h5{margin-left:0.5em /* 4px */;}
/* h6{margin-left:0.75em /* 4px */;}
/*
* ================= INLINE ===================
* see also: https://css-tricks.com/injecting-line-break/
* (with codepen: https://codepen.io/chriscoyier/pen/LNamvy )
* although still unresolved if the element AFTER should be on the same line?!
* currently just can't use padding-left on the "INLINE" element!
*/
/* ┌────────────────────────────┐
/* │ EXPLICIT INLINE │
/* └────────────────────────────┘
*/
.inline,[inline]{
/*display:inline-block;*/
display:inline;
&::before{
content:'\A';white-space:pre;
/* OR: content:""; */
padding-right:5px;
display:block;
height:5px; /* gives a 5px gap above the "inline" element */
/*height:1px;*/
}
}
/* ┌────────────────────────────┐
/* │ IMPLIED INLINE │
/* └────────────────────────────┘
*/
*:has(+input[type='checkbox'][expand]){
display:inline;
vertical-align:top;
margin-top:5px;
&::before{
content:'\A';white-space:pre;
/* OR: content:""; */
padding-right:5px;
display:block;
height:5px; /* gives a 5px gap above the "inline" element */
}
}
h1.cnt:has(+input[type='checkbox'][expand])::before{
content: '\A' counter(h1count) " \2022 ";
display:inline;
}
h2.cnt:has(+input[type='checkbox'][expand])::before{
content: '\A ' counter(h2count) " \2022 ";
display:inline;
}
/*
* ================= NODISPLAY ===================
*/
.nodisplay{
display:none !important;
}
ul{margin-top:0.2em;margin-bottom:0.2em;}
/*
* ==================== DEFINITION LIST ====================
*/
/* if not part of a definition list, e.g. inline German translations:*/
body.translate{
&:not(dl){
&>:is(dt,dd){
display:inline-block;
margin:0;
}
&>dt{
font-weight:bold;
margin-right:0.3em;
}
&>dd{
color:grey;
font-family:serif;
&:after{
content:" ";
}
}
}
& dd:before{
content:" = ";
}
/* if dt and dd are part of a defintion list dd, style normally: */
& dl{
&>dt{font-weight:bold;}
&>dd{margin:0 0 0 1em;}
}
}
body:not(.translate,.de){
& dt{font-weight:bold;margin-top:0.5em;font-size:1.1em;}
& dd{margin-left:1em;margin-bottom:0.5em;border-left:2px solid grey;padding-left:0.5em;}
}
body.de{
& *{font-family:'Roboto',sans-serif;}
& dd:before{content:" = ";margin-left:0.5em;}
& :is(dt,dd){
display:inline-block;
margin:0;
}
& ul li button.show{
background:darkseagreen;
width:4em;
height:1.4em;
margin:0;
padding:0 0.5em;
border:1px solid darkslategrey;
border-radius:0.2em;
color:white;
}
/* * styling for vocab.js: */
button.test{
font-size:1.5em;
border:1px solid darkslategrey;
border-radius:0.3em;
padding:0.3em;
background:darkseagreen;
color:white;
}
}
body.de dt, p.de, div.table.de ul li:nth-of-type(1){
font-family:'Lora',serif;color:#009;
}
body.en dd, p.en{
font-family:'Roboto',sans-serif;
}
.transparent{
color:transparent;
}
/*
* ==================== ELSE ====================
*/
code,.code,[code]{
display:block;
white-space:pre-wrap;
background:#e3ecfc;
color:#006;
font-family:'Roboto Mono', monospace;
border-radius:0.3em;
line-height:1.4;
display:inline-block;
width:max-content;
max-width:90%;
padding:0 1em;
border-radius:0.5em;
}
code{ padding:0.0em 0.5em; }
textarea,pre[contenteditable]{
/*width:100%;
height:40ex;*/
vertical-align:top;
background:#e3ecfc;
color:#006;
/*font-size:1em;*/
border:1px solid dodgerblue;
}
textarea:focus,pre[contenteditable]:focus{
outline:3px solid red;
}
pre[contenteditable]{
background:hsl(240,100%,99%);
border:1px solid hsl(240,60%,70%);
white-space:pre-wrap;word-wrap:break-word;
font-family:'Fantasque Sans Mono','Roboto Mono',monospace;
padding:0.2em;
border-radius:0.2em;
}
textarea[async]{border-left:3px solid red;}
textarea.script{width:90%;}
div.div-ta-chart button{font-size:1.5em;border-radius:0.3em;margin-right:0.3em;padding:0.2em 0.5em;}
div.div-ta-chart button.btn-help-ta-chart{color:gainsboro;border-color:gainsboro;}
div.div-ta-chart button.btn-help-ta-chart.help{color:black;background:lightgreen;border-color:#000;}
div.script{
display:block;
white-space:pre-wrap;
font-family:'Roboto Mono',monospace;
font-size:0.8em;
}
img.tile{
max-height:4rem;
/*excellent: keeps proportions:*/
object-fit:contain;
display:inline;
}
img.icon{
height:1em;max-width:1em;
vertical-align:text-bottom;
}
img.icon.small{
height:1em;max-width:1em;
vertical-align:bottom;
}
img.icon.large{
height:2em;width:2em;
vertical-align:bottom;
}
img.thumb{height:5rem;max-width:5rem;}
img.thumb.large{height:8rem;max-width:8rem;}
img.large{width:200mm;
border:2px solid grey;
padding:2px;
}
span.icon{
display:inline-block;height:3rem;
font-size:1.3rem;
line-height:3rem;
background:oldlace;padding:0 5px;
border-radius:0.5rem;
}
img.logo{border:3px solid #888;background:#fcfcfc;width:100px;border-radius:8px;}
/*img.icon.logo{width:3rem;height:3rem;}*/
img.smallicon{width:1.8rem;height:1.8rem;}
img.page{
width:100%;height:auto;object-fit:contain;
border:2px solid silver;
border-bottom-color:#666;
border-right-color:#666;
}
.email{
padding:1em;
border:2px solid #99c;
border-bottom-color:#336;
border-right-color:#336;
border-radius:0.5em 0 0 0;
font-family:Lora;
}
.ht10{height:1.0em;}
.sum{
font-family:"Roboto Mono",monospace;
text-align:right;
font-weight:bold;
color:darkblue;
}
.total{
/* excellent: */
/*text-decoration:underline double;*/
display:inline-block;
border-bottom:6px double;
/*margin-bottom:6px;*/
}
:root{
--red :#f70000;
--orange :#dd8100;
--yellow :#8f8f00;
--green :#009200;
--cyan :#008989;
--blue :#3a3aff;
--magenta:#ce00ce;
--grey :#808080;
--redlight :#ffc6c6;
--orangelight :#ffd8a1;
--yellowlight :#f1f18d;
--greenlight :#a8f4a8;
--cyanlight :#afeded;
--bluelight :#b7e1ff;
--magentalight:#fec5fe;
--greylight :#b8b8b8;
--reddark :#7a0000ff;
--orangedark :#6a3c00ff;
--yellowdark :#494900ff;
--greendark :#005100ff;
--cyandark :#005757ff;
--bluedark :#000071ff;
--magentadark:#5b005bff;
--greydark :#4b4b4bff;
--dialog-timeout:3s;
}
.red {color:var(--red );}
.orange {color:var(--orange );}
.yellow {color:var(--yellow );}
.green {color:var(--green );}
.cyan {color:var(--cyan );}
.blue {color:var(--blue );}
.magenta {color:var(--magenta);}
.grey {color:var(--grey );}
.black {color:#000;}
.white {color:#fff;}
.gold {color:gold;}
.redlight {color:var(--redlight );}
.orangelight {color:var(--orangelight );}
.yellowlight {color:var(--yellowlight );}
.greenlight {color:var(--greenlight );}
.cyanlight {color:var(--cyanlight );}
.bluelight {color:var(--bluelight );}
.magentalight{color:var(--magentalight);}
.greylight {color:var(--greylight );}
.reddark {color:var(--reddark );}
.orangedark {color:var(--orangedark );}
.yellowdark {color:var(--yellowdark );}
.greendark {color:var(--greendark );}
.cyandark {color:var(--cyandark );}
.bluedark {color:var(--bluedark );}
.magentadark{color:var(--magentadark);}
.greydark {color:var(--greydark );}
.redbg {background:var(--red );}
.orangebg {background:var(--orange );}
.yellowbg {background:var(--yellow );}
.greenbg {background:var(--green );}
.cyanbg {background:var(--cyan );}
.bluebg {background:var(--blue );}
.magentabg {background:var(--magenta);}
.greybg {background:var(--grey );}
.blackbg {background:#000;}
.whitebg {background:#fff;}
.goldbg {background:gold;}
.redlightbg {background:var(--redlight );}
.orangelightbg {background:var(--orangelight );}
.yellowlightbg {background:var(--yellowlight );}
.greenlightbg {background:var(--greenlight );}
.cyanlightbg {background:var(--cyanlight );}
.bluelightbg {background:var(--bluelight );}
.magentalightbg{background:var(--magentalight);}
.greylightbg {background:var(--greylight );}
.reddarkbg {background:var(--reddark );}
.orangedarkbg {background:var(--orangedark );}
.yellowdarkbg {background:var(--yellowdark );}
.greendarkbg {background:var(--greendark );}
.cyandarkbg {background:var(--cyandark );}
.bluedarkbg {background:var(--bluedark );}
.magentadarkbg{background:var(--magentadark);}
.greydarkbg {background:var(--greydark );}
.hl{background:yellow;padding:0 0.3em;}
.redbox,.orangebox,.yellowbox,.greenbox,.cyanbox,.bluebox,.magentabox,.greenbox,.greybox,
.redboxdark,.orangeboxdark,.yellowboxdark,.greenboxdark,.cyanboxdark,.blueboxdark,.magentaboxdark,.greenboxdark,.greyboxdark,.blackbox{
display:inline-block;
width:auto;
padding:0 4px;
margin-left:0;
border-radius:4px;
text-align:center;
border:1px solid #000;
}
.redbox {background:var(--redlight );border-color:var(--red );}
.orangebox {background:var(--orangelight );border-color:var(--orange );}
.yellowbox {background:var(--yellowlight );border-color:var(--yellow );}
.greenbox {background:var(--greenlight );border-color:var(--green );}
.cyanbox {background:var(--cyanlight );border-color:var(--cyan );}
.bluebox {background:var(--bluelight );border-color:var(--blue );}
.magentabox{background:var(--magentalight);border-color:var(--magenta);}
.greybox {background:var(--greylight );border-color:var(--grey );}
.blackbox {background:#000;color:#fff;border-color:#333;}
.redboxdark {background:var(--red );color:#fff;border-color:var(--reddark );}
.orangeboxdark {background:var(--orange );color:#fff;border-color:var(--orangedark );}
.yellowboxdark {background:var(--yellow );color:#fff;border-color:var(--yellowdark );}
.greenboxdark {background:var(--green );color:#fff;border-color:var(--greendark );}
.cyanboxdark {background:var(--cyan );color:#fff;border-color:var(--cyandark );}
.blueboxdark {background:var(--blue );color:#fff;border-color:var(--bluedark );}
.magentaboxdark{background:var(--magenta);color:#fff;border-color:var(--magentadark );}
.greyboxdark {background:var(--grey );color:#fff;border-color:var(--greydark );}
div.col2, div.col3, div.col4{
column-width:50%;
column-fill:balance; /* vs auto; */
column-gap:2em;
overflow:auto;
border:1px dashed #aaa;
padding:1em;
text-indent:1em;
/* excellent: this prevents getting outside the page:*/
}
div.col2{ column-count:2; }
div.col3{ column-count:3; }
div.col4{ column-count:4; }
div.col2>ul,div.col3>ul,div.col4>ul{
break-inside:avoid;
}
div:is(.col2,.col3,.col4) :is(h1,h2,h3,h4){
margin:0;padding:0 0 0.5em;
}
blockquote{font-family:'Lora',serif;color:slategrey;border-left:4px solid #ccc;padding-left:12px;}
ul.narrow{
list-style-type:none;
margin:0 0 0 -0.8em;
padding:0 1em;
/*text-indent:-0.6em;*/
}
ul.narrow>li{
margin-left:0em;
/*text-indent:-0.5em;*/
}
ul.narrow>li:before{
content:"\2022";/* bigger bullet is: "\25cf";*/
color:inherit;
margin-right:0.1em;
}
ul.empty{
list-style-type:none;
border-left:1px solid grey;
padding-left:0.5em;
}
/*
* =============== TOP ===============
*/
/* excellent: no need to use class="top" as well! : */
a[href^="#top"]:before{
content:"\21d1";
margin-right:4px;
}
a[href^="#top"]{
color:blue;
text-decoration:none;
font-weight:normal;
}
/*a.top{
color:blue;
text-decoration:none;
font-weight:normal;
}
a.top:before{
content:"\21d1";
margin-right:4px;
}*/
div.example{
background:gold;
border:3px solid goldenrod;
border-left-width:6px;
width:auto;
padding:2px;
border-radius:8px;
}
/*
* =============== A4 PAGE LAYOUT ===============
*/
body.a4{
max-width:210mm;margin:auto;
padding:10px;
position:absolute;left:0;right:0;
border:none;
box-sizing:border-box;
& *{
font-family:'Roboto',Lato, sans-serif;
background:none;
}
& div.page{
display:block;
height:297mm;
width:210mm; /*A4=210mm x 297mm*/
padding:0; margin:0;
vertical-align:top;
page-break-inside:avoid;
position:relative; /* in order to make svg absolute positioning possible*/
counter-increment:page;
background:white;
border:1px dotted gainsboro;
}
& div.content{
display:inline-block;
height:297mm; width:210mm;
position:absolute;
top:0mm; left:0mm;
margin:auto;
padding:0mm;
page-break-inside:avoid;
background:white;
border:0px dashed gainsboro;
/* -------- div.content.grid6: 6 ~squares per pages ----------*/
&.grid6{
height:296.8mm; width:210mm;
top:0; left:0;
display:grid;
grid-template-areas: "nw ne" "w e" "sw se";
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr 1fr;
border:0px solid red;
padding:0;
}
}
&.six{padding:0}
}
div.nw, div.ne, div.w , div.e , div.sw, div.se{
border:1px dashed gainsboro;
padding:1rem;
overflow:hidden;
}
div.nw{ grid-area:"nw" }
div.ne{ grid-area:"ne" }
div.w { grid-area:"w " }
div.e { grid-area:"e " }
div.sw{ grid-area:"sw" }
div.se{ grid-area:"se" }
div.nw h1, div.ne h1, div.w h1, div.e h1, div.sw h1, div.se h1{
margin:0;
padding:0;
}
/*
* =============== END: A4 PAGE LAYOUT ===============
*/
/*
* =============== SLIDE LAYOUT ===============
*/
/*body.slide *{
font-family:'Roboto',Lato, sans-serif;
background:none;
}
body.slide{
max-width:1920px;margin:auto;padding:0;position:absolute;left:0;right:0;border:none;
box-sizing:border-box;
}
body.slide div.slide{
width:1920px;
height:1080px;
}
*/
/*
* =============== END: SLIDE LAYOUT ===============
*/
div:is(.table,.spreadsheet){
display:table;
border-collapse:collapse;
page-break-inside:avoid;
&>ul{
display:table-row;
&>li{
padding:0.2em 0.5em;
display:table-cell;
vertical-align:top;
}
}
&:not(.headless){
&>ul:first-of-type li{
/* background color for 1st row unless "headless": */
background:lightsteelblue;
font-weight:bold;
}
}
&:not(.borderless)>ul>li{
border:1px solid grey;
}
& li{
& ul{list-style-type:disc;}
& li{margin-left:-1.5em;padding-left:0;}
}
&:not(.headless)>ul:first-of-type>*{
text-align:center;vertical-align:bottom;
}
& ul.th{
background:gainsboro;
font-weight:bold;
& li{
border-bottom-width:2px;
border-bottom-color:black;
}
}
div.table.rh ul li:nth-of-type(1){
background:gainsboro;
font-weight:bold;
}
}
/*div.table:not(.headless)>ul:nth-child(1)>li,
div.table:not(.de)>ul:nth-child(1)>li
{
background:whitesmoke;
}*/
audio{height:1em;}
@media print{
audio,video{display:none;}
}
/* TODO: to prevent counter reset with section: */
body{
counter-reset:h1count h2count h3count h4count;
}
section{
counter-reset:none;
}
h1.cnt{
counter-increment:h1count;
counter-reset:h2count h3count h4count;
}
h2.cnt{
counter-increment:h2count;
counter-reset:h3count h4count;
}
h3.cnt{
counter-increment:h3count;
counter-reset:h4count;
}
h4.cnt{
counter-increment:h4count;
}
h1.cnt:before{content:counter(h1count) " \2022 ";}
h2.cnt:before{content:counter(h2count) " \2022 ";}
h3.cnt:before{content:counter(h3count) " \2022 ";}
h4.cnt:before{content:counter(h4count) " \2022 ";}
li.x:before,li.u:before,li.w:before,li.e:before{
content:url("/img/x.svg");
display:inline-block;
height:1em;width:1em;
margin-right:0.3em;
}
li.u:before{content:url("/img/u.svg");}
li.x:before{content:url("/img/x.svg");}
li.e:before{content:url("/img/e.svg");}
li.w:before{content:url("/img/w.svg");}
table{
border-collapse:collapse;
}
td, th{
border:1px solid grey;
padding:4px;
}
th{
background:gainsboro;
}
/* TODO: change to svg!!! */
.calc:after{
content:"";
display:inline-block;
background:url("/img/calc.svg") no-repeat scroll 0 0 transparent;
color:#000;
height:10px;
width:6px;
}
:is(b,a):is(.pend,.done,.canc,.urg,.caution,.def,.tent,.hol,.test,.red-cross,.tel,.tv,.camera,.check,.u,.x,.e,.w)
{
display:inline-block;
background:url("") no-repeat scroll 0 0 transparent;
color:#000;
height:1em;
width:1em;
margin-right:0.2em;
}
b.u, a.u{background-image:url("/img/u.svg")}
b.x, a.x{background-image:url("/img/x.svg")}
b.e, a.e{background-image:url("/img/e.svg")}
b.w, a.w{background-image:url("/img/w.svg")}
b.pend, a.pend{background-image:url("/img/pend.svg")}
b.done, a.done{background-image:url("/img/done.svg")}
b.canc, a.canc{background-image:url("/img/canc.svg")}
b.urg, a.urg{background-image:url("/img/urg.svg")}
b.caution, a.caution{background-image:url("/img/caution.svg")}
b.def, a.def{background-image:url("/img/def.svg")}
b.check, a.check{background-image:url("/img/check.svg")}
b.tent, a.tent{background-image:url("/img/tent.svg")}
b.hol, a.hol{background-image:url("/img/hol.svg")}
b.test, a.test{background-image:url("/img/test.svg")}
b.red-cross, a.red-cross{background-image:url("/img/red-cross.svg")}
b.tel, a.tel{background-image:url("/img/tel.svg")}
b.tv, a.tv{background-image:url("/img/tv.svg")}
b.camera, a.camera{background-image:url("/img/camera.svg")}
kbd{font-size:1.3em;}
.fs02{font-size:0.2em;}
.fs03{font-size:0.3em;}
.fs04{font-size:0.4em;}
.fs05{font-size:0.5em;}
.fs06{font-size:0.6em;}
.fs07{font-size:0.7em;}
.fs08{font-size:0.8em;}
.fs09{font-size:0.9em;}
.fs11{font-size:1.1em;}
.fs12{font-size:1.2em;}
.fs13{font-size:1.3em;}
.fs14{font-size:1.4em;}
.fs15{font-size:1.5em;}
.fs16{font-size:1.6em;}
.fs17{font-size:1.7em;}
.fs18{font-size:1.8em;}
.fs19{font-size:1.9em;}
.fs20{font-size:2.0em;}
.fs30{font-size:3.0em;}
.fs40{font-size:4.0em;}
.fs50{font-size:5.0em;}
.fs50{font-size:6.0em;}
.fs50{font-size:7.0em;}
.fs50{font-size:8.0em;}
.fs90{font-size:9.0em;}
.bold,[bold]{font-weight:bold;}
/* format external phone links like 12345 :*/
a[href*="tel:"]{background:plum;padding:0 0.2em;text-decoration:none;border-radius:0.3em;font-weight:bold;}
main{margin-left:1rem;}
.gap{margin-top:4rem;}
.gap4{margin-top:4rem;}
pre.wrap{white-space:pre-wrap;word-wrap:break-word;}
.simple figure {
position:relative;
display:inline-block;
max-width:1030px;
max-height:768px;
padding: 5px;
margin: auto;
}
.simple img {
max-width: 1024px;
max-height: 768px;
}
.simple ul.sheet img{
max-width: none;
max-height: none;
}
figcaption.inset {
position:absolute;
bottom:10px;
left:10px;
background-color: #00000060;
color: #fff;
font-size:40px;
padding: 0.2em 0.5em; /*3px 5px;*/
text-align: left;
border-radius:8px;
}
/* ==================== CHKBOX (custom checkbox) ============== */
/* the corresponding HTML is:
*/
div.chkbox{
position:relative;
& input[type='checkbox']{
display:none;
&:checked+label{
color:#4169e1;
&:after{
content:url("/img/checkmark.svg");
}
}
}
& label{
& :is(:before,:after){
display:inline-block;height:1em;width:1em;
position:absolute;left:0;top:2px;
padding-left:1.2em;user-select:none;
&:before{content:url("/img/checkbox.svg");}
&:after{content:"";}
&:hover{color:#4169e1;}
}
}
}
/* ============================================================ */
/*
┌────────────────────────────┐
│ MathJax │
└────────────────────────────┘
*/
/*.MathJax{width:min-content;background:ghostwhite;padding:0.2em 0.2em;border-radius:0.5em;margin:0.2em;display:inline-block;}
*/
/*
┌────────────────────────────┐
│ CLOCK │
└────────────────────────────┘
*/
svg.clock{height:2em;}
.opaque{opacity:1}
.nonopaque{opacity:0}
/*
┌────────────────────────────┐
│ ENLARGE ON FILTER │
└────────────────────────────┘
*/
/*
[tabindex]:not(.MathJax){transition:200ms;width:200px;}
[tabindex]:not(.MathJax) *{transition:200ms;width:100%;}
[tabindex]:not(.MathJax):is(:focus,:hover){outline:5px solid dodgerblue;}
[tabindex]:not(.MathJax):focus{transition:200ms;width:100%;outline:5px solid dodgerblue;}
*/
/*
* ==================== TOGGLE ====================
*/
div.toggle{
border-left:4px solid lightgrey;
list-style: none;
page-break-inside:avoid;
position: relative;
padding: 4px 12px;
margin: 0;
margin-bottom:1em;
/*border-top: 1px dotted #dce7eb;*/
&>div{
transition: all 0.4s;
position: relative;
overflow: auto;/*scroll;*//*hidden;*/
opacity: 1;
z-index: 2;
&>img{
max-width:100%;/**/
/*overflow:scroll;*/
}
}
&>:is(h1,h2,h3,h4,h5,h6)
{
user-select: none;
display: block;
margin: 0;
cursor: pointer;
background:whitesmoke;
}
&>input[type=checkbox]{
position: absolute;
cursor: pointer;
width: 95%; /*200mm;/*100%;*/
height: 100%;
z-index: 1;
opacity: 0;
&:checked{
&~:is(div,p){
max-height:0;
margin-top:0;
opacity:0;
}
&~:is(h1:before,h2:before,h3:before,h4:before,h5:before,h6:before)
{
content:"+ ";
}
}
}
&>is(h1:before, h2:before, h3:before, h4:before, h5:before, h6:before)
{
display:inline-block;
content:"\2013 "; /*EN DASH*/
color:grey;
background:lightgrey;
color:white;
width:1em;
height:1em;
line-height:1.1em;
border-radius:50%;
text-align:center;
margin-right:0.3em;
}
}
/*
┌────────────────────────────┐
│ TOGGLE ENLARGE ON CLICK │
└────────────────────────────┘
/// enlarges a 200px restricted img to 95% with HTML like this:
///
///
![]()
///
///